Drawing cut marks

GoJS
1

@walter @simon
I will be thankful if you can help me to draw marks, marked as red in screenshot.
It will be helpful if you have any link of an example related to this please.

Pasted image459×618 7.37 KB

2

If your template is currently:

$(go.Node, { . . . },
    $(go.Shape, . . .),
    $(go.TextBlock, . . .)
)

You could surround the Node Panel with a “Spot” Panel that holds the cut marks:

var CutMarkGeometry = go.Geometry.parse("M5 0 L5 10 M0 5 L10 5");

$(go.Node, "Spot", { . . . },
    $(go.Shape, { alignment: go.Spot.TopLeft, geometry: CutMarkGeometry }),
    $(go.Shape, { alignment: go.Spot.TopRight, geometry: CutMarkGeometry }),
    $(go.Shape, { alignment: go.Spot.BottomRight, geometry: CutMarkGeometry }),
    $(go.Shape, { alignment: go.Spot.BottomLeftt, geometry: CutMarkGeometry }),
    $(go.Panel,
        { isPanelMain: true, . . . },
        $(go.Shape, . . . ),
        $(go.TextBlock, . . .)
    )
)

Caution: I haven’t tried this code, so please pardon any errors of mine.

3

@walter you the man
It worked for me thanks

4

@walter
I have another question related to this please .
I want to increase and decrease size of these crop marks.
It was trying to understand (“M5 0 L5 10 M0 5 L10 5”). But not very successful yet.
One change makes other things weird.
If you can give me the parameters to double the length of horizontal and vertical crop marks
Then it will be easy for me to compare and understand.
Thanks

Pasted image565×540 7.25 KB

5

That string uses Geometry Path string syntax: GoJS Geometry Path Strings -- Northwoods Software

6

@walter As you can see this screenshot

Pasted image1192×556 54.5 KB

The crop marks are occupying the space between the nodes. I want something (for example zindex) such that crop marks are still there but they should not occupy any space. The two nodes are supposed to touch with each other and cropmarks can overlap over the node edges.

Please help me if you have something to resolve my issue
Thanks

7

What are you using as the Diagram.layout? Maybe that layout has a way of forcing the nodes to be closer to each other.

8

@walter I am using like this
var lay = $scope.myDiagram.layout;
$scope.myDiagram.startTransaction(“change Layout”);
lay.arrangement = go.GridLayout.RightToLeft;
$scope.myDiagram.commitTransaction(“change Layout”);

But I could not find a way to move nodes closer.
How can I move nodes closer until crop marks have same z-order as nodes. They will surely occupy space.
I want the crop marks to be there but occupying no space on canvas.

9

So you’re using GridLayout? And you’ve already set GridLayout.spacing to new go.Size(0, 0)?

You may need to implement your own Layout that positions all of your nodes the way that you want them to be. Extending GoJS -- Northwoods Software

10

Size is already (0,0) but the CutMarkGeometry is still there occupying space.
I tried custom layout but it did not work as well.
If you have any idea to set the z-order or z-index of these CutMarkGeometry (cropmarks) then that will be very easy to implement. A lot of things for custom layout goes over the head.
Thanks