How to drag and drop to change the fillet size of SVG elements

There is an SVG element in the canvas. If the element has a fillet, how to change the size of the fillet

When one asks questions, it helps if you include a small screenshot showing what you have and another screenshot or sketch showing what you want instead, plus the relevant source code – in this case your SVG.

I want


Reference is Geometry Reshaping

What is the SVG?

That’s the shape

Yes, and what is the SVG text definition of that shape?

path: ‘M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 60 200 Q 0 200 0 140 L 0 0 Z’

Here’s what I tried:

<!DOCTYPE html>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src=""></script>
  <script src=""></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
      "undoManager.isEnabled": true

  $(GeometryReshapingTool, { isResegmenting: true }));

myDiagram.nodeTemplate =
      selectionAdorned: false,
      reshapable: true
    $(go.Shape, {
      name: "SHAPE",
      geometryString: "M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 60 200 Q 0 200 0 140 L 0 0 Z",
      background: "transparent"

myDiagram.model = new go.GraphLinksModel([ {} ]);

My results, after reshaping the two curves outwards:

These all seem to be exactly what one would expect. In the case of the quadratic Bezier curves, the user can reposition the control point to wherever they desire, as shown in the top right node. If you want to limit where the control point could go, you will need to customize the GeometryReshapingTool to do what you want. Override its reshape method.

Note how moving the end points of the quadratic Bezier curve in the bottom left node made the corner smaller, which I think is what you were wanting.

thank you,Great