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
|