In my application there is a GOJS diagram editor which support text, freehand drawing and image. When I add an image, the undo operation is not working(i.e image is not deleted).
The implementation is given below. Can you please provide a solution.
Code for the GOJS diagram:
var diagram = GO(go.Diagram, element[0],
{
"commandHandler.zoomFactor": 1.2,
allowMove:false,
allowLink:false,
allowDelete:false,
allowZoom:false,
allowCopy: false,
isEnabled: true,
"grid.visible": true,
"grid.gridCellSize": new go.Size(500, 500),
"toolManager.mouseWheelBehavior": go.ToolManager.WheelScroll,
"contextMenuTool.defaultTouchContextMenu": null,
"ModelChanged": updateAngular,
"textEditingTool.starting": go.TextEditingTool.DoubleClick,
"textEditingTool.doMouseDown": function() {
if (this.isActive) {
this.acceptText(go.TextEditingTool.MouseDown);
var tb = this.diagram.findObjectAt(this.diagram.lastInput.documentPoint);
if (tb instanceof go.TextBlock && tb.editable) {
var tool = this;
setTimeout(function() {
tool.textBlock = tb;
tool.diagram.currentTool = tool;
}, 1);
}
scope.diagramClicked();
}
},
click: function(e, obj) {
scope.diagramClicked();
}
});
diagram.grid.elements.each(function(s) { s.stroke = "transparent"; })
diagram.grid.areaBackground = "#f9e79f";
diagram.toolManager.panningTool.isEnabled = false;
diagram.toolManager.dragSelectingTool.isEnabled = false;
diagram.undoManager.isEnabled = true;
diagram.toolManager.textEditingTool.defaultTextEditor = window.TextEditor;
// whenever a GoJS transaction has finished modifying the model, update all Angular bindings
function updateAngular(e) {
if (e.isTransactionFinished) {
if (!scope.$$phase && !scope.$root.$$phase)
scope.$apply();
}
}
The node template is as below:
diagram.nodeTemplateMap.add("texteditor",
GO(go.Node, "Spot",
{
selectable:true,
selectionAdorned : false
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.TextBlock,
{
margin : 5,
maxSize: new go.Size(280, NaN),
width: 280,
textAlign: 'left',
name:'ParentText',
alignment: go.Spot.Bottom,
editable: true,
isMultiline: true
},
new go.Binding("text").makeTwoWay(),
new go.Binding("font", "font").makeTwoWay(),
new go.Binding("stroke", "stroke").makeTwoWay(),
new go.Binding("background", "lightgreen"))
));
diagram.nodeTemplateMap.add("memoPicture",
GO(go.Node, "Spot",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.Panel, "Horizontal",
GO(go.Picture,
{
name: "Picture",
maxSize: new go.Size(250, 250),
margin: new go.Margin(5, 5, 5, 5),
},
new go.Binding("source", "source"))
)
)
);
diagram.nodeTemplateMap.add("FreehandDrawing",
GO(go.Part,
{ locationSpot: go.Spot.Center, isLayoutPositioned: false },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
selectionAdorned: true, selectionObjectName: "SHAPE",
selectionAdornmentTemplate: // custom selection adornment: a blue rectangle
GO(go.Adornment, "Auto",
GO(go.Shape, { stroke: "dodgerblue", fill: null }),
GO(go.Placeholder, { margin: -1 }))
},
{ resizable: true, resizeObjectName: "SHAPE" },
{ rotatable: true, rotateObjectName: "SHAPE" },
{ reshapable: true }, // GeometryReshapingTool assumes nonexistent Part.reshapeObjectName would be "SHAPE"
GO(go.Shape,
{ name: "SHAPE", fill: null, strokeWidth: 1.5 },
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("angle").makeTwoWay(),
new go.Binding("geometryString", "geo").makeTwoWay(),
new go.Binding("fill"),
new go.Binding("stroke"),
new go.Binding("strokeWidth"))
) );
The code to add/remove image is below:
// Find image node
var foundNode = $scope.diagramOptions.findNodeForKey("2");
$scope.model.startTransaction("setImage");
if(foundNode){
$scope.model.removeNodeData(foundNode.data);
}
$scope.model.addNodeData({ key : "2", category:"memoPicture", source:imageSource, loc: location, type: "editorImage" });
$scope.diagramOptions.invalidateDiagramLayout();
$scope.model.commitTransaction("setImage");