Adding ports to an image to make it "toLinkable" and "fromlinkable"

GoJS
1

Hi,
Please could you help me to add ports on import images drag in a main diagram from a palette?

I base my code on the snap link reshaping example.

Here’s my code:

myPalette =
_ $$(go.Palette, “myPaletteDiv”, // must name or refer to the DIV HTML element_
_ {_
_ maxSelectionCount: 1,_
_ nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram_
_ model: new go.GraphLinksModel([ // specify the contents of the Palette_
_ { _
_ text: “Router\ncore”, _
_ figure: “Circle”, _
_ fill: “green” _
_ },_
_ { _
_ text: “Zone” _
_ },_
_ { _
_ text: “Database”, _
_ figure: “Database”, _
_ fill: “lightgray” _
_ },_
_ { _
_ text: “Internet”, _
_ figure: “Cloud”, _
_ fill: “lightskyblue” _
_ },_
_ { _
_ text: “Router”, _
_ figure: “Circle”, _
_ fill: “red”,_
_ width: 20, _
_ height: 20,_
_ },_
_ { _
_ text: “Commentaire”, _
_ figure: “RoundedRectangle”, _
_ fill: “lightyellow” _
_ }_
_ ])_
_ }_
_ );_

_ /================= Objets Palette imgs manually added =================/_

_ myPalette.add(_
_ $$(go.Part, “Table”,_
_ $$(go.Picture, _
_ {_
_ source: “…/Architectures_services_ocm/img/eqpmt/serveur.png”,_
_ width: 45, _
_ height: 61, _
_ row: 1_
_ // margin: 5_
_ },_
_ new go.Binding(“source”)_
_ )_
_ )_
_ );_

Here’s a screenshot of the view:

Thanks for your help.
If you need mor information to help me, please tell me.

2

The problem is that, i can’t link the other nodes to the image i’ve import into the palette diagram.

3

Sorry for the identation of the code, it was looking fine in my editor.

4

You should add a new node template similar to the default that contains a Picture instead of a Shape and TextBlock. Something like this:

myDiagram.nodeTemplateMap.add("ImageNode",
  $(go.Node, "Spot",
    { locationSpot: go.Spot.Center },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    { selectable: true },
    { resizable: true, resizeObjectName: "PANEL" },
    // the main object is a Panel that contains a Picture
    $(go.Panel, "Auto",
      { name: "PANEL", desiredSize: new go.Size(80, 80) },
      new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
      $(go.Shape, "Rectangle",  // default figure
        {
          portId: "", // the default port: if no spot on link data, use closest side
          fromLinkable: true, toLinkable: true, cursor: "pointer",
          fill: "white"  // default color
        }
      ),
      $(go.Picture,
        {
          stretch: go.GraphObject.Fill,
          margin: 8
        },
        new go.Binding("source")
      )
    ),
    // four small named ports, one on each side:
    makePort("T", go.Spot.Top, true, true),
    makePort("L", go.Spot.Left, true, true),
    makePort("R", go.Spot.Right, true, true),
    makePort("B", go.Spot.Bottom, true, true),
    { // handle mouse enter/leave events to show/hide the ports
      mouseEnter: function(e, node) { showSmallPorts(node, true); },
      mouseLeave: function(e, node) { showSmallPorts(node, false); }
    }
  )
);

Then in your model you could add { source: "path/to/image", category: "ImageNode" }

5

Thank you, very much jhardy.
But i need the other shapes in my palette…
What should i do, please?

6

This is in addition to the other shapes. Just add this code to the sample and then add the line I provided in the Model. Don’t remove anything that already exists.

7

Thank you, very much.
I’m trying it.

8

Hi,

I get this error: “value is not an instance of Part: [object Object]”
at the first line: myDiagram.nodeTemplateMap.add(“ImageNode”,…

9

Try replacing instances of ‘$’ with ‘$$’ since that’s what you seem to be using for go.GraphObject.make.

10

You are right…
I forgot that.
Thank you.

Now i’ve this one : “Binding error: missing GraphObject named null in Part#1059
Binding error: missing GraphObject named null in Part#1089
Binding error: missing GraphObject named null in Part#1198”
go-debug-1.7.8.js:35

It occurs when i drag an image from my palette to the main diagram.

11

It’s hard to say what could be causing that error without knowing all the context of your app. You’ll need to debug your code.

12

Thank you.
I saw what was wrong.
in fact, the context of my app is to add stuff in the palette and make it linkable as the one who where there before.

This is how i do to add images to the palette :

myPalette.add(
_ $$(go.Part, “Table”,_
_ $$(go.Picture, _
_ {_
_ source: “…/Architectures_services/img/eqpmt/server.png”,_
_ width: 45, _
_ height: 61, _
_ row: 1_
_ // margin: 5_
_ }_
_ )_
_ )_
_ );_

but when i drag and drop an image, i can’t link it to any other part in the main diagram.

13

I’ve fix the previous error, but the images as that server image, do not show up the ports and are not linkable.

14

I’ve already provided a solution that works, I suggest you implement it.

15

Ok, if you say so.

Thanks vey much for your efforts.
I’ll check it again, and mark it as solved when it will be ok.

16

I’ve slightly modified the nodeTemplate provided above to allow the node to be moved more easily once dragged onto the diagram.

I added some space around the image for linking, and the image itself can be dragged around to move the node.

18

And here’s a codepen that demonstrates how it works in case you’re struggling to incorporate the template:

19

Awesome !!
Thank you very much.
It works fine !!! :-)

You saved me 2 weeks of work !!
Be blessed !!

20

A post was split to a new topic: Resizing Pictures in a Node