Hi using the
“gojs”: “2.2.11”,
“gojs-react”: “1.1.1”,
i have one node template having a rounded Rectangle inside that i have used a textBlock with editable true, while using this i have tried to set the height and width in that case i am not able to resize the node, and with the same i am able to resize but not able to retain the resized height and width after reload.
another one is if the scale of the diagram is below 1 the editable textarea positions are misalign
i am using this template for this node.
templmap.add("NotesNode",
this.$(go.Node, "Auto",
{
locationSpot: go.Spot.Center,
selectionObjectName: "BODY",
selectionAdorned: false,
resizable: true,
resizeObjectName: "BODY",
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
this.$(
go.Panel, "Auto",
this.$(go.Shape, "RoundedRectangle",
{
fill: "#111111",
stroke: "#979797",
strokeWidth: 1,
desiredSize: new go.Size(NaN, NaN), // allow dynamic sizing
},
new go.Binding("desiredSize", "desiredSize", go.Size.parse).makeTwoWay(go.Size.stringify)
),
this.$(go.TextBlock,
{
font: TextThemes.fontBold12,
editable: true,
stroke: "#ffffff",
textAlign: "left",
verticalAlignment: go.Spot.TopLeft,
margin: 8,
wrap: go.TextBlock.WrapDesiredSize,
overflow: go.TextBlock.OverflowEllipsis,
desiredSize: new go.Size(NaN, NaN), // allow dynamic sizing
text: "",
stretch: go.GraphObject.Fill,
isMultiline: true,
alignment: go.Spot.TopCenter,
position: new go.Point(0, 0),
},
new go.Binding("text").makeTwoWay(),
new go.Binding("desiredSize", "txtdesiredSize", go.Size.parse).makeTwoWay(go.Size.stringify)
),
)
)
);
i have used the textediting tool doActive
diagram.toolManager.textEditingTool.doActivate = function() {
go.TextEditingTool.prototype.doActivate.call(this);
if (this.diagram.selection.count === 1) {
let node = this.diagram.selection.first();
if (node instanceof go.Node && node.data.category === "NotesNode") {
let textEditor = document.getElementsByClassName("goTXarea");
if (textEditor) {
let scaleFactor = diagram.scale < 1 ? (10 - diagram.scale * 10) * 5 : 0;
(textEditor[0] as HTMLElement).style.height = (node.actualBounds.height * diagram.scale - 20) + "px";
(textEditor[0] as HTMLElement).style.width = (node.actualBounds.width * diagram.scale - 10) + "px";
(textEditor[0] as HTMLElement).style.border = '1px solid #fff';
const topValue = parseFloat((textEditor[0] as HTMLElement).style.top || "0");
const leftValue = parseFloat((textEditor[0] as HTMLElement).style.left || "0");
(textEditor[0] as HTMLElement).style.top = (topValue + scaleFactor) + "px";
(textEditor[0] as HTMLElement).style.left = (leftValue + scaleFactor) + "px";
(textEditor[0] as HTMLElement).style.background = '#111111';
(textEditor[0] as HTMLElement).style.color = '#ffffff';
(textEditor[0] as HTMLElement).style.fontSize = diagram.scale * 104 + '%';
}
}
}
};
also used this customResizeTool
"resizingTool": (() => {
class CustomResizingTool extends go.ResizingTool {
resize(newr: go.Rect) {
const diagram = this.diagram;
diagram.selection.each((part: go.Part) => {
if (part instanceof go.Link) return;
const obj = part.resizeObject;
const pos = part.position.copy();
const angle = obj.getDocumentAngle();
const sc = obj.getDocumentScale();
const radAngle = (Math.PI * angle) / 180;
const angleCos = Math.cos(radAngle);
const angleSin = Math.sin(radAngle);
const deltaWidth = newr.width - obj.naturalBounds.width;
const deltaHeight = newr.height - obj.naturalBounds.height;
const angleBottom = angle > 0 && angle < 180 ? 1 : 0;
const angleLeft = angle > 90 && angle < 270 ? 1 : 0;
const angleTop = angle > 180 && angle < 360 ? 1 : 0;
pos.x +=
sc *
((newr.x + deltaWidth * angleLeft) * angleCos -
(newr.y + deltaHeight * angleBottom) * angleSin);
pos.y +=
sc *
((newr.x + deltaWidth * angleTop) * angleSin +
(newr.y + deltaHeight * angleLeft) * angleCos);
obj.desiredSize = newr.size;
part.move(pos);
});
}
}
return new CustomResizingTool();
})(),
using this i am adding the node in the diagram
diagram.model.addNodeData({
category: "NotesNode",
key: NoteKey,
loc: go.Point.stringify(loc),
text: "New \n Note",
});
and the results are like this
of the scale is 0.6 text area is not align with the node itself
after resize i am reloading the diagram in that case unable to retain the same resized height and width
after reload it takes the default size
i have tried using setting the height and width or dezired size after that not able to resize the node