Change the font of the textblock without changing the alignment

GoJS
1

I want to change the font of the textblock without changing the alignment of textblock.What should I do?

I use this code :

new go.Binding("alignment","alignment",go.Spot.parse).makeTwoWay(go.Spot.stringify),
2

Something else is going on. Changing the font does not typically reset the alignment.

What other data bindings do you have?

3

else

new go.Binding("font","font"), 
new go.Binding("stroke","color"), 
new go.Binding("text","text").makeTwoWay()
4

I don’t see any issues when trying to reproduce this. I can change the font without the alignment being affected. What are you doing differently from this example?

6

My code：

        var SD = {
            mode: "pointer",
            itemType: "pointer"
        };
        
        var $ = go.GraphObject.make;
        var myDiagram = $(go.Diagram, "myDiagramDiv", {
            initialContentAlignment: go.Spot.Center,
            initialAutoScale: go.Diagram.Uniform, 
            rotatingTool: new RotateMultipleTool(),
            "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
            "draggingTool.isGridSnapEnabled": true,
            "draggingTool.dragsLink": true,
            "draggingTool.dragsTree": true,  
            "undoManager.isEnabled": true,
            allowDrop: true,
            allowLink: false,
            "animationManager.isEnabled": false,
        });
         
        myDiagram.addDiagramListener("Modified", function(e) {
            var button = document.getElementById("SaveButton");
            if (button)
                button.disabled = !myDiagram.isModified;
            var idx = document.title.indexOf("*");
            if (myDiagram.isModified) {
                if (idx < 0)
                    document.title += "*";
            } else {
                if (idx >= 0)
                    document.title = document.title.substr(0, idx);
            }
        });

        myDiagram.toolManager.mouseMoveTools.insertAt(1, new NodeLabelDraggingTool());
        myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelDraggingTool());

        function finishDrop(e, grp) {
            var ok = (grp !== null ? grp.addMembers(grp.diagram.selection, true) : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
            if (!ok)
                e.diagram.currentTool.doCancel();
        }

        go.Shape.defineFigureGenerator("Semi_Circle", function(shape, w, h) {
            var geo = new go.Geometry();
            var fig = new go.PathFigure(-1,(6) * h,false);
            geo.add(fig);
            fig.add(new go.PathSegment(go.PathSegment.Arc,0,180,(6) * w,(6) * h,(6) * w,(6) * h));
            return geo;
        });
        

        myDiagram.nodeTemplate=
        $(go.Node, "Spot", 
         $(go.Shape, "Semi_Circle", {
            fill: "rgba(0,0,0,1)",
            strokeWidth: 2,
            stroke: "rgba(0,0,0,1)",
            height: 1,
            width: 1,
        }), $(go.TextBlock, {
            editable: true,
            _isNodeLabel: true,
            cursor: "pointer"
        }, new go.Binding("alignment","alignment",go.Spot.parse).makeTwoWay(go.Spot.stringify), new go.Binding("font","font"), new go.Binding("stroke","color"),new go.Binding("text","text").makeTwoWay()));

        var nodeDataArray = [{ key: 1, text: "Semi_Circle", color: "#B2DFDB", font: "bold 8pt Helvetica", alignment: ".5 .5 69 42" }];
        var linkDataArray = [];
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

        var inspector = new Inspector('myInspectorDiv',myDiagram,
        {
            properties: {
                
                "text": {},
                "font": {},
                "color": { show: Inspector.showIfNode, type: 'color' },
                "alignment": {
                    show: Inspector.showIfNode,
                    type: 'point'
                }
            }
        });

        function save() {
            document.getElementById("mySavedModel").value = myDiagram.model.toJson();
            myDiagram.isModified = false;
        }
        function load() {
            myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
        }

The problem still exists.

7

Ahh, now I see the problem. You are specifying the alignment as type Spot in the DataInspector, when really it’s a string.

You can either remove the type specification on the alignment property since your data binding assumes a string, or you can make your data binding new go.Binding("alignment").makeTwoWay() and store an actual Spot in the model. I’d suggest removing the type specification.

8

image.png851×141 6.04 KB

How to resolve this error?

9

That should be resolved if you get the latest version of GoJS, or if you add this line to the inspector properties:

"isGroup": { readOnly: true, show: Inspector.showIfPresent }