How to add a self-defining shape

I came across a problem that I do not know how to add a self-defining shape. Could I? Thank you.

If you mean how do you use the predefined figures, you can read about constructing Shapes in general here:


http://www.gojs.net/latest/intro/shapes.html


And see all the predefined figures here:


http://www.gojs.net/latest/samples/shapes.html

If you are wondering how define your own shapes, see this page on geometry paths:

GoJS Geometry Path Strings -- Northwoods Software

Firstly, thank you very much. I add the shape as your way. It works.
But there are some problems,

  1. I can not set the location.
  2. This shape can not be connected to other shape.
  3. The attribute ‘fill’ does not work.

The code is below

myDiagram.nodeTemplateMap.add(“My”,
$(go.Part,
<span =“Apple-tab-span” style=“white-space:pre”> $(go.Shape,
<span =“Apple-tab-span” style=“white-space:pre”> { geometryString:"",
<span =“Apple-tab-span” style=“white-space:pre”> strokeWidth: 1, stroke: “black”, fill: “#ff9696”}),
<span =“Apple-tab-span” style=“white-space:pre”> $(go.Shape,
<span =“Apple-tab-span” style=“white-space:pre”> { geometryString:"",
<span =“Apple-tab-span” style=“white-space:pre”> strokeWidth: 1, stroke: “black”, fill: “white”}),

makePort(“T”, go.Spot.Top, false, true),
<span =“Apple-tab-span” style=“white-space:pre”> makePort(“L”, go.Spot.Left, false, true),
<span =“Apple-tab-span” style=“white-space:pre”> makePort(“R”, go.Spot.Right, false, true)
<span =“Apple-tab-span” style=“white-space:pre”>
));



“nodeDataArray”: [
{“key”:6, “category”:“Decision”, “loc”:“375 200”},
{“key”:7, “category”:“My”, “loc”:“575 200”}
],

“linkDataArray”: [
{“from”:6, “to”:7, “fromPort”:“R”, “toPort”:“L” }
]}









The result,

You seem to be adapting code from either the FlowChart or DraggableLink samples. If you look at the node templates that are defined in those samples, you can get more ideas for features to include or to exclude.

Also, I recommend reading Getting Started to see examples of data binding. For example, if you want to data bind the location in some manner, you should do something like:

    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

Note also, as shown in Getting Started, that if you want to have nodes and links in your diagram, you need to use go.Node, not go.Part.

Your code uses empty geometry strings, so I’m not sure how you could have used that to get the resulting screenshot.

Thanks a lot. I try the way you told me, and It works.
Now I can set location and It can be connected.
Just a little question, the ‘fill’ attribute still does not work.

Because the geometryString is too long, so I didn’t stick it before.

geometryString1:“m23.59426,56.76658c-2.38279,-0.42015 -6.77458,-2.00737 -9.4377,-3.36118c-2.80328,-1.44717 -9.01722,-7.93613 -10.55901,-11.0172c-3.17705,-6.44226 -3.55082,-7.88944 -3.55082,-13.91156c-0.04673,-5.88206 0.14016,-6.67568 3.13033,-13.49141c1.40164,-3.22113 7.84918,-9.61671 11.4,-11.39067c6.44755,-3.17445 7.89591,-3.54791 13.92295,-3.54791c5.88688,-0.04668 6.68115,0.14005 13.50246,3.12777c3.22376,1.40049 9.6246,7.84276 11.4,11.39067c3.17706,6.44226 3.55082,7.88944 3.55082,13.91155c0.04673,5.88207 -0.14017,6.67568 -3.13032,13.49141c-1.3082,2.94103 -7.80247,9.61671 -10.93279,11.15725c-5.46639,2.80098 -8.03606,3.54792 -12.66148,3.78132c-2.47623,0.09337 -5.46639,0.04669 -6.63443,-0.14005z”,


geometryString2:“m22.89343,37.90662l-4.67212,-2.42752l2.47623,-0.14005l2.42951,-0.14005l0,-9.33661l0,-9.28993l4.90574,0l4.90573,0l0,9.33661l0,9.33661l2.47623,0.04669l2.4295,0l-4.90574,2.52089c-2.70984,1.40049 -4.99918,2.52089 -5.13934,2.52089c-0.14017,0 -2.33607,-1.07371 -4.90574,-2.42752z”,
<span =“Apple-tab-span” style=“white-space:pre”>
I don’t know why it is not filled with color.



Start your geometry strings with F:

geometryString1:"F m23.59426,

to mark them as fillable paths.

Thanks for your kindly reply.
I really learn a lot.Smile