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