Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Diagram - Angular - loadFromString (Read 1090 times)
joaofontes
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Apr 28th, 2021
Diagram - Angular - loadFromString
Apr 28th, 2021 at 11:15am
Print Post  
Hi.

I'm using the Angular version of the diagram and Im ghetting a problem when trying to download a diagram via a JSON file.

I'm getting an error that says - Cannot create property 'padding' on string ''

I have tried the exact same JSON in your angular sample project and it failed then tried on your typescript sample project and it worked so I'm gessing it is something to do with the angular version?

this is the json I have used:

const test = '{\"version\":2,\"id\":\"diagram_id\",\"width\":1279.984375,\"height\":722,\"dia
gramBounds\":{\"x\":0,\"y\":-19.495833333333334,\"width\":1269,\"height\":741.49
58333333333,\"transform\":{\"elements\":[1,0,0,1,0,0]},\"type\":\"MindFusion.Drawing.Rect\"},\"enabled\":true,\"measureUnit\":6,\"all
owInplaceEdit\":true,\"font\":{\"name\":\"sans-serif\",\"size\":4},\"defaultShap
e\":\"Rectangle\",\"backBrush\":\"white\",\"shapePen\":\"#000000\",\"shapeBrush\
":\"#FFFFFF\",\"linkShape\":2,\"linkPen\":\"#000000\",\"linkSegments\":2,\"linkB
rush\":\"#FFFFFF\",\"linkBaseShape\":null,\"linkHeadShape\":\"Arrow\",\"linkBase
ShapeSize\":5,\"linkHeadShapeSize\":5,\"linkHitDistance\":0,\"scrollLeft\":0,\"s
crollTop\":-19.495833333333334,\"routeLinks\":true,\"roundedLinks\":true,\"round
edLinksRadius\":25,\"linkCrossings\":1,\"crossingRadius\":6,\"zoomFactor\":100,\
"virtualScroll\":true,\"showAnchors\":2,\"modificationStart\":0,\"delKeyAction\"
:2,\"gridStyle\":0,\"gridColor\":\"#8c8c96\",\"gridSizeX\":4,\"gridSizeY\":4,\"g
ridOffsetX\":0,\"gridOffsetY\":0,\"gridPointSize\":1.5,\"showGrid\":false,\"alig
nToGrid\":true,\"magnifierEnabled\":false,\"magnifierShape\":\"Circle\",\"magnif
ierFactor\":150,\"magnifierWidth\":30,\"magnifierHeight\":30,\"magnifierFrameThi
ckness\":1,\"magnifierShading\":true,\"magnifierFrameColor\":\"black\",\"magnifi
erSecondaryFrameColor\":\"gray\",\"undoEnabled\":false,\"behavior\":2,\"expandOn
Incoming\":false,\"expandButtonAction\":0,\"adjustmentHandlesSize\":2,\"showDisa
bledHandles\":true,\"selectedItemHandlesStyle\":{\"handleBrush\":\"rgb(170, 170, 170)\",\"hatchBrush\":\"#fff\",\"patternBrush\":\"#fff\",\"controlPointBrush\":\
"yellow\",\"handleStroke\":\"#000\",\"handleStrokeThickness\":0,\"dashStroke\":\
"#000\",\"dashStrokeThickness\":0},\"activeItemHandlesStyle\":{\"handleBrush\":\
"#fff\",\"hatchBrush\":\"#fff\",\"patternBrush\":\"#fff\",\"controlPointBrush\":
\"yellow\",\"handleStroke\":\"#000\",\"handleStrokeThickness\":0,\"dashStroke\":
\"#000\",\"dashStrokeThickness\":0},\"disabledHandlesStyle\":{\"handleBrush\":\"
rgb(200, 0, 0)\",\"hatchBrush\":\"#fff\",\"patternBrush\":\"#fff\",\"controlPointBrush\":\"y
ellow\",\"handleStroke\":\"#000\",\"handleStrokeThickness\":0,\"dashStroke\":\"#
000\",\"dashStrokeThickness\":0},\"autoResize\":2,\"autoScroll\":true,\"autoArra
ngeAvoidSegments\":true,\"autoArrangeAvoidContainers\":true,\"scrollZoneSize\":8
,\"autoScrollAmount\":0,\"allowMultipleResize\":false,\"linkTextStyle\":0,\"tag\
":null,\"style\":null,\"theme\":{\"linkStyle\":{\"brush\":{\"type\":\"SolidBrush
\",\"color\":\"#5b9bd5\"},\"backBrush\":\"#e0e9e9\",\"stroke\":\"#5b9bd5\",\"str
okeThickness\":1.2,\"textColor\":\"#585A5C\",\"fontName\":\"Verdana\",\"fontSize
\":6,\"effects\":[]},\"nodeStyle\":null,\"containerStyle\":null,\"shapeStyle\":null,\"tableStyle\":
null,\"freeformStyle\":null,\"diagramStyle\":null},\"backgroundImageAlign\":4,\"
shadowOffsetX\":4,\"shadowOffsetY\":4,\"shadowsStyle\":0,\"items\":[{\"__type\":\"MindFusion.Diagramming.ShapeNode\",\"instanceId\":0,\"zIndex\":2,\"text\":\"Circle\",\"textPadding\":{\"left\":1,\"top\":1,\"right\":1,\"bottom\":1},\"font\":{\"name\":\"Arial\",\"size\":1.0583333333333333},\"ignoreLayout\":false,\"selected\":false,\"visible\":true,\"locked\":false,\"tooltip\":\"\",\"hyperLink\":\"\",\"shadowOffsetX\":4,\"shadowOffsetY\":4,\"textAlignment\":1,\"lineAlignment\":1,\"style\":null,\"bounds\":{\"x\":60.993750000000006,\"y\":5.956250000000001,\"width\":32,\"height\":50,\"transform\":{\"elements\":[1,0,0,1,0,0]},\"type\":\"MindFusion.Drawing.Rect\"},\"anchorPattern\":{\"points\":[{\"x\":10,\"y\":0,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":50,\"y\":0,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":90,\"y\":0,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":10,\"y\":100,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":50,\"y\":100,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":90,\"y\":100,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":0,\"y\":50,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":100,\"y\":50,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3}]},\"rotationAngle\":0,\"enabledHandles\":511,\"handlesStyle\":1,\"expanded\":tru
e,\"expandable\":false,\"allowIncomingLinks\":true,\"allowOutgoingLinks\":true,\
"obstacle\":true,\"showDeleteButton\":false,\"effects\":[],\"shape\":\"Circle\",\"imageLocation\":\"\",\"transparent\":false,\"imageAlign\
":1,\"rotateText\":true,\"rotateImage\":true,\"flipX\":false,\"flipY\":false,\"a
llowFlip\":false},{\"__type\":\"MindFusion.Diagramming.ShapeNode\",\"instanceId\
":1,\"zIndex\":3,\"text\":\"Circle\",\"textPadding\":{\"left\":1,\"top\":1,\"rig
ht\":1,\"bottom\":1},\"font\":{\"name\":\"Arial\",\"size\":1.0583333333333333},\
"ignoreLayout\":false,\"selected\":false,\"visible\":true,\"locked\":false,\"too
ltip\":\"\",\"hyperLink\":\"\",\"shadowOffsetX\":4,\"shadowOffsetY\":4,\"textAli
gnment\":1,\"lineAlignment\":1,\"style\":null,\"bounds\":{\"x\":119.731249999999
99,\"y\":-7.495833333333334,\"width\":32,\"height\":50,\"transform\":{\"elements
\":[1,0,0,1,0,0]},\"type\":\"MindFusion.Drawing.Rect\"},\"anchorPattern\":{\"points\":[{\"x\":10,\"y\":0,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":50,\"y\":0,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":90,\"y\":0,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":10,\"y\":100,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":50,\"y\":100,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":90,\"y\":100,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":0,\"y\":50,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3},{\"x\":100,\"y\":50,\"allowIncoming\":true,\"allowOutgoing\":true,\"markStyle\":1,\"color\":\"#000000\",\"column\":-1,\"tag\":null,\"size\":3}]},\"rotationAngle\":0,\"enabledHandles\":511,\"handlesStyle\":1,\"expanded\":tru
e,\"expandable\":false,\"allowIncomingLinks\":true,\"allowOutgoingLinks\":true,\
"obstacle\":true,\"showDeleteButton\":false,\"effects\":[],\"shape\":\"Circle\",\"imageLocation\":\"\",\"transparent\":false,\"imageAlign\
":1,\"rotateText\":true,\"rotateImage\":true,\"flipX\":false,\"flipY\":false,\"a
llowFlip\":false},{\"__type\":\"MindFusion.Diagramming.DiagramLink\",\"instanceI
d\":2,\"zIndex\":2,\"text\":\"\",\"textPadding\":{\"left\":1,\"top\":1,\"right\"
:1,\"bottom\":1},\"ignoreLayout\":false,\"selected\":false,\"visible\":true,\"lo
cked\":false,\"tooltip\":\"\",\"hyperLink\":\"\",\"shadowOffsetX\":4,\"shadowOff
setY\":4,\"textAlignment\":1,\"style\":null,\"origin\":0,\"destination\":1,\"ori
ginConnection\":{\"x\":100,\"y\":50,\"type\":\"MindFusion.Drawing.Point\"},\"des
tinationConnection\":{\"x\":0,\"y\":50,\"type\":\"MindFusion.Drawing.Point\"},\"
controlPoints\":[{\"x\":92.99375,\"y\":30.95625,\"type\":\"MindFusion.Drawing.Point\"},{\"x\":106.3625,\"y\":30.95625,\"type\":\"MindFusion.Drawing.Point\"},{\"x\":106.3625,\"y\":17.504166666666666,\"type\":\"MindFusion.Drawing.Point\"},{\"x\":119.73124999999999,\"y\":17.504166666666666,\"type\":\"MindFusion.Drawing.Point\"}],\"shape\":2,\"baseShape\":null,\"headShape\":\"Arrow\",\"baseShapeSize\":5,\"he
adShapeSize\":5,\"baseBrush\":null,\"headBrush\":null,\"cascadeStartHorizontal\"
:true,\"textStyle\":0,\"autoRoute\":true,\"originAnchor\":7,\"destinationAnchor\
":6}],\"laneGrid\":{\"columnHeader\":{\"subHeaders\":[],\"width\":0,\"height\":0,\"resizeType\":1,\"title\":\"\",\"rotateTitle\":false,
\"titleColor\":\"#000000\",\"style\":{},\"rowHeader\":false},\"rowHeader\":{\"su
bHeaders\":[],\"width\":0,\"height\":0,\"resizeType\":1,\"title\":\"\",\"rotateTitle\":false,
\"titleColor\":\"#000000\",\"style\":{},\"rowHeader\":true},\"leftMargin\":0,\"t
opMargin\":0,\"minHeaderSize\":10,\"topLeftAreaText\":\"\",\"hookHeaders\":true,
\"headersOnTop\":true,\"rowWidths\":[],\"columnHeights\":[],\"allowResizeHeaders\":true,\"style\":{\"leftBorderThickness\":1,\"topBorderThi
ckness\":1,\"rightBorderThickness\":1,\"bottomBorderThickness\":1,\"textAlignmen
t\":1,\"lineAlignment\":1},\"cells\":{\"data\":[],\"rowCount\":0,\"columnCount\":0}},\"images\":[],\"svgs\":[],\"shapeLibraryLocation\":\"\",\"freeFormAttractDistance\":8,\"freeFormTargets\"
:[\"Rectangle\",\"Decision\",\"Ellipse\"],\"allowSelfLoops\":false,\"minVisibleFontSize\":0,\"effects\":[]}';

this.diagram.loadFromString(test);


The first image is a print of the error and the second what should be seen
  

Screenshot_2021-04-28_121128.png ( 19 KB | 13 Downloads )
Screenshot_2021-04-28_121128.png
Screenshot_2021-04-28_121458.png ( 20 KB | 13 Downloads )
Screenshot_2021-04-28_121458.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2532
Joined: Oct 19th, 2005
Re: Diagram - Angular - loadFromString
Reply #1 - Apr 28th, 2021 at 2:23pm
Print Post  
Hi,

We've reproduced, our developer will try to fix it soon.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
joaofontes
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Apr 28th, 2021
Re: Diagram - Angular - loadFromString
Reply #2 - Apr 28th, 2021 at 4:05pm
Print Post  
Thank you very much Smiley
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2532
Joined: Oct 19th, 2005
Re: Diagram - Angular - loadFromString
Reply #3 - Apr 30th, 2021 at 4:08pm
Print Post  
That seems some incompatibility with strict mode in older version referenced by Angular binding. For time being you could add these as work-around -

Code
Select All
DiagramLink.prototype.setTextPadding = function() {}
DiagramLink.prototype.setLineAlignment = function() {}
 



We'll publish new Angular package next week.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 2532
Joined: Oct 19th, 2005
Re: Diagram - Angular - loadFromString
Reply #4 - May 3rd, 2021 at 9:08am
Print Post  
Try v3.5.4 from npm. If you've started your project from a copy of the Samples\Angular example, make sure you delete the package-lock.json file there.

Regards,
Slavcho
« Last Edit: May 3rd, 2021 at 12:25pm by Slavcho »  
Back to top
 
IP Logged
 
joaofontes
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Apr 28th, 2021
Re: Diagram - Angular - loadFromString
Reply #5 - May 4th, 2021 at 8:26am
Print Post  
It's working guys. Thank you very much!

Have a nice day!
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint