Question about locating images

Hi all, been reading the docs and I can’t seem to find an answer to this question.

Is it possible to position an image on a diagram with pixel accuracy?

I’m currently adding images to a diagram like so:

myDiagram.add(

    GO(go.Part, GO(go.Picture, {
        source: "/path/to/image",
        width: 100,
        height: 50
    }))

);

Now I can see from many of the demo’s that we can divide a page into regions/squares, but we are actually making a diagram editor. The data our back-end systems provide to us, consists of pixel based width/height and a pixel based X,Y. We have to put the image referenced, onto the diagram at that precise location and at the given width/height before presenting it to the user.

The problem is, while I can see how to set the width & height, I haven’t been able to figure out how to set the precise X & Y

Cheers
Shawty

Set or bind the GraphObject.position property on each node.

But note that the user can scroll or pan the diagram, causing the viewport to change (Diagram.position). http://gojs.net/latest/intro/viewport.html

Thanks walter, yes I’m aware of the panning, I still need to see if I can disable that as ideally we don’t want the end user once we start looking at production to be able to pan the canvas.

For now however, while where proof of concepting this, it’s something where ok with.

Is this what you meant?

myDiagram.add(

    GO(go.Part, GO(go.Picture, {
        source: "/jobsdata/renderfield/job/Field00/primary%201",
        width: 100,
        height: 50,
        position: { x: 0, y:0 } 
    }))

);

Beacuse when I try that, all i see in the console is:

uncaught TypeError: a.Z is not a function

Now I recognise that one from all the work I do with KnockoutJS, so I understand what the error means, i just don’t know why GOJS would throw it :smile:

Unless of course I’m being a complete plank and doing it completely wrong.

Scrap that last reply/question.

I’ve sussed it.

I had to change the ‘initialContnentAlignment’ to None and new up a Point class instance.

All sorted now.

Hi All, so just when I thought I’d sorted it, things have taken a rather weird turn, and I’m stumped as to what’s going on.

First off here’s the code I’m using:

$(document).ready(() => {

    // create a diagram
    var diagram = new go.Diagram(<HTMLDivElement>document.getElementById("myDiagramDiv"));
    //diagram.initialContentAlignment = go.Spot.TopLeft;
    //diagram.undoManager.isEnabled = true;
    diagram.layout.isOngoing = false;
    diagram.layout.isInitial = false;

    // Add a Field00
    var field00picture = new go.Picture();
    field00picture.name = "Field00Picture";
    field00picture.position = new go.Point(10, 10);
    field00picture.width = 100;
    field00picture.height = 50;
    field00picture.source = "/link/to/image/one";

    var field00part = new go.Part();
    field00part.name = "Field00";

    field00part.add(field00picture);

    // Add a Field01
    var field01picture = new go.Picture();
    field01picture.name = "Field01Picture";
    field01picture.position = new go.Point(100, 100);
    field01picture.width = 50;
    field01picture.height = 50;
    field01picture.source = "/link/to/image/two";

    var field01part = new go.Part();
    field01part.name = "Field01";
    field01part.add(field01picture);

    diagram.add(field00part);
    diagram.add(field01part);

});

When I run this with just ONE image, and set that images location, it’s fine, the image starts at the location I put it at, and all is good. My location change tracking code works (Mostly) and the image position can be recorded and tracked.

However, as soon as I add a second image, the first image jumps back to 0,0 on the diagram, and the second one locates itself at the position I’ve requested.

If I switch the order I add the 2 parts, the opposite happens, so which ever part is added first gets kicked to position 0,0 while the second part locates perfectly.

I’ve not yet tried this with more than 2 parts, but I suspect, part 3 will position ok, and part 2 will get kicked to 0,0

I’ve been on for 5 hours today trying to figure this one out, Iv’e tried enabling different layout strategies, using “move” and “moveTo” methods and nothing seems to make any difference.

When an image snaps back to 0,0, the changed event handler that I have in the code (Not listed here) shows the “new” x and y location to be correctly positioned at the location I request, so GoJS obviously thinks the part/image has moved correctly when in actual fact it hasn’t

You can see above, that I’ve tried setting the position on the picture. I have also tried changing the position AND location on the part, and none of that has made any difference. Setting any position or location attributes on the Part are simply just ignored by GoJS and not acted upon.

I also tried putting both images into ONE single part, and making the part the same size as my document, this worked and allowed me to free position the images, but I was then unable to click on the images separately and move them about as independent entities.

Instead, when I tried multiple images in one part, all that happened when trying to select the images, was that the part kept getting selected and stopping me from dragging the images.

All I’m trying to do here is create a simple drawing canvas onto which I’ll load a number of images as instructed by the applications back-end.

These images should be freely moveable and re-sizable independent of each other, and when a move/re-size operation is complete an event should be generated that allows me to record the new positions and sizes.

Any further guidance here would be of immense help. My company needs me to make the decision to go ahead with the purchase of a GoJS licence in the next couple of days, and right now the initial faith that I had in GoJS being the correct product for the task my team has to achieve, is starting to slide as everything just seems to be so much increasingly harder than it needs to be to achieve.

Shawty

I think we haven’t made clear the distinction between document coordinates and viewport coordinates that is discussed at http://gojs.net/latest/intro/viewport.html.

All Parts have positions (or locations) that are in document coordinates. But the value of Diagram.position can still be modified, such as when the user scrolls or pans.

Here is a sample app that lets the program position Parts via a data binding of Part.position but does not allow the user to scroll or zoom, due to settings on the Diagram: http://gojs.net/latest/samples/absolute.html
Note that the document bounds are fixed to be 500x300.

Note also that the DraggingTool’s behavior is also modified due to the Part.dragComputation function, stayInFixedArea.