I can resize the panel it’s no problem.
i do “graphObject.strect” set “Fill” or other values.
But in this case the shapes are distorted.
You can try it out and you’ll see what I mean.
As an example, you can use the svg paths I threw
I just took your code verbatim (thanks!) and changed the “Auto” Panel to be a “Viewbox” Panel, as I recommended earlier. The node resizes I think the way that you want it to.
I was asking if you want the TextBlock to be rescaled or clipped or sticking out or something else.
i dont want resize textblock. i want resize shapes . i changed “auto” panel “Viewbox”. İs not working
All I changed in your last, simple code sample was replacing “Auto” with “Viewbox”.
But I think you want the visual tree structure as I outlined earlier:
Node, "Spot",
Panel, "Viewbox",
Panel, "Position",
. . . Panels of Shapes generated from itemArray. . .
TextBlock
Hello Walter,
I have another question about this.
When I import shapes with “bindPanelItems” method, shapes do not redraw in only horizontal or only vertical resize operations.
if when i vertical and horizontal resize, shape is redraw
For example only horizontal resize:
Vertical and horizontal resize:
Used node template:
this.diagram.nodeTemplateMap.add(Enums.AbsoluteFormNodeTemplates.Input,
goMake(go.Node, "Spot",
{
locationObjectName: "Shape",
locationSpot: go.Spot.Center,
selectable: true,
selectionAdornmentTemplate: this.nodeSelectionAdornmentTemplate,
selectionObjectName: "Shape",
resizeObjectName: "Shape",
rotateObjectName: "Shape",
resizeAdornmentTemplate: this.nodeResizeAdornmentTemplate,
resizable: true,
},
new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
new go.Binding("isActionable", "", this.bindShapeLock).makeTwoWay(),
goMake(go.Panel, "Position",
goMake(go.Panel, "Spot",
{
defaultStretch: go.GraphObject.Fill,
fromLinkable: false,
fromLinkableSelfNode: false,
fromLinkableDuplicates: false,
toLinkable: false,
toLinkableSelfNode: false,
toLinkableDuplicates: false,
cursor: "pointer",
},
goMake(go.Panel, "Viewbox", {
name: "Shape",
},
new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
goMake(go.Panel, "Position",
{
itemTemplate:
goMake(go.Panel,
goMake(go.Shape, "RoundedRectangle",
{
fill: "transparent",
isGeometryPositioned: true,
// geometryStretch: go.GraphObject.Fill,
},
new go.Binding("stroke", "", this.bindPanelItemBorderColor.bind(this)).makeTwoWay(),
new go.Binding("fill", "", this.bindPanelItemColor.bind(this)).makeTwoWay(),
new go.Binding("geometry", "", this.bindShapeGeometry.bind(this)),
new go.Binding("strokeWidth", "", this.bindPanelItemBorderThickness.bind(this)),
new go.Binding("strokeDashArray", "", this.bindPanelItemBorderType.bind(this)).makeTwoWay(),
)
)
},
new go.Binding("itemArray", "", this.bindPanelItemArray.bind(this))
)
),
goMake(go.TextBlock,
{
name: "textBlock",
editable: true, // editing the text automatically updates the model data
cursor: "move", // visual hint that the user can do something with this node label
angle: 0,
margin: new go.Margin(5, 10, 5, 10),
},
new go.Binding("text", "", this.bindShapeText).makeTwoWay(this.converterShapeText),
new go.Binding("stroke", "", this.bindShapeTextColor).makeTwoWay(),
new go.Binding("font", "", this.bindShapeTextFont).makeTwoWay(),
new go.Binding("isUnderline", "", this.bindShapeTextUnderline).makeTwoWay(),
new go.Binding("background", "", this.bindShapeTextBackgroundColor).makeTwoWay(),
new go.Binding("angle", "", this.bindShapeTextAngle).makeTwoWay(),
new go.Binding("textAlign", "", this.bindShapeTextAlignment).makeTwoWay(),
),
),
),
)
);
i want to redraw only in horizontal or only vertical resizing
Normally the “Viewbox” Panel preserves the aspect ratio of its one element. So if you resize bigger horizontally, the object cannot become taller.
However, you could try setting Panel | GoJS API
$(go.Panel, "Viewbox",
{ viewboxStretch: go.GraphObject.UniformToFill },
. . .)
i tried “viewboxStretch: go.GraphObject.UniformToFill”.
Sizing operations was what I wanted.
But the shapes are overflowing:
does not fiting into the upper and lower border viewbox.
when i resize viewbox do fit shape.
I have no idea of what you are showing, nor how it is not what you want, nor what you want instead.
I want the shapes in the viewbox always grow to the size of the viewbox.
“uniformTofill” value causes the shape to be out.
The original svg image is corrupted when I do this.
This is because we have disproportionately increased or decreased the current dimensions of svg.(User resizes)
Can we resize the svg paths in the viewbox without disturbing the shapes.
Is there a way to do it without disturbing the Svg image?
The point of the “Viewbox” Panel is to automatically scale the one element of the panel so that it fits in the area of the panel. Panel.viewboxStretch can be either Uniform or UniformToFill. Both of those values will cause the element to scale to fit with no distortion. The former shows the whole element with no clipping; the latter fills the whole panel but may clip if the aspect ratio is different.