Help! When dragging a node consisting of several geometric figures, coordinates are confused

as shown:
screen

codes below:



let somPalette = ...;
let template = $(go.Part, "Viewbox", { width: 40, height: 40 },
  $(Go.Panel, "Postion", new go.Binding("itemArray", "itemArray"), { position: new go.Point(0, 0) },
    {
      itemTemplate:
        $(go.Panel, "Postion", { position: new go.Point(0, 0) },
          $(go.Shape, new Go.Binding("fill", "fill").makeTwoWay(), new Go.Binding("geometryString", "geometryString").makeTwoWay()))
    })
);
somePlatte.nodeTemplateMap.add('svg', template)

let anyoneItem = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024"><path d="M905.1 319.8c-20.7 59.5-55.2 132.9-81.5 178.2 0 0-55.3 10.9-146.4 155.2-8 12.7-21.7 11.8-37.8 6 0.3-0.4 94.1-147.9 99.5-156.4 1-1.6 2.1-3.2 3.1-4.8 16.9-26.6 34-53.7 50.8-80.5 14.7-23.5 29.5-46.4 43.3-68.7 34.1 25.9 55.4 6 69-29z" fill="#7F8933" p-id="495"/><path d="M836.1 348.9c-23.7 38.4-48 76.4-72.1 114.6-11.1 17.6-21.8 35.5-35.3 51.4-13.1 15.4-27.9 29.7-44.9 40.6-13.5 8.6-35.4 19.5-51.1 10.1-8.4-5-8.8-14.8-5-23 4.3-9.4 11-17.9 16-27 14.4-25.9 41.8-83-1-97.6-18.8-6.4-41.5-3.6-60.3 1.4-4.5 1.2-8.8 2.6-13.2 4.2-2.8 1.1-8.2 2-9 5.1-0.8 3.5 1.1 7.9 1.4 11.4 0.6 5.7 0.8 11.4 1 17.1 0.7 22-4 43.7-9.5 64.9-5.3 20.2-12.1 40.1-20.4 59.3-15.3 35.4-35.5 69.7-63.6 96.5-27.6 26.3-63.1 43.9-101.4 46.5-18.9 1.3-38.4-0.9-55.9-8.4s-31.8-20.1-42.4-35.8c-21.9-32.5-30.6-76-24.7-114.5 1.6-10.4 4.1-20.5 7.3-30.5-20.5 5.2-40.7 14.7-56.3 29.3-8.2 7.7-14.6 16.9-19.5 27-4.6 9.5-7.7 19.7-11.8 29.4-4 9.5-10.1 19.8-20.1 24-4.8 2-9.9 1.8-14.6-0.4-3-1.4-9.5-4.7-10.4-8.3-0.6-2.4 0.8-5.9 1.3-8.3 0.7-3.1 1.4-6.3 2.1-9.4 1.5-6.2 3.1-12.4 5-18.6 3.2-11 7-21.8 11.1-32.4 34.1-87 95.9-161.5 164.5-223.8 17.3-15.7 35.1-31.3 53.6-45.6 9.2-7.1 20.4-10.6 31.1-15.1 11.5-4.8 23-9.4 34.7-13.7 23.1-8.4 47.9-17 72.7-18.3 21.7-1.1 43.7 5.8 52.8 27.1 4 9.3 5.6 19.4 7 29.4 1.3 8.8 2.2 18 6.2 26 8.3 16.6 32.2 19.3 45.3 6.7 13.4-12.8 15.2-34.5 18.1-51.7 3.9-22.8 6.5-47.4 18-67.9 11-19.5 30.4-28.4 52.3-27.3 21.8 1 44.3 7.6 62.7 19.5 18.2 11.7 29.8 29.7 36.8 49.9 7.1 20.5 10.4 42.4 20.8 61.6 5.2 9.5 12.1 18 20.7 24.6z" fill="#FFF2BD" p-id="496"/><path d="M560 427.6C467.6 470.1 432.9 604.2 389.2 609c-62.7 7-60.5-93.4-137.2-73.8 25.8-79.7 107.8-175.1 260.2-161 28 2.6 42.3 21.1 47.8 53.4z" fill="#B16939" p-id="497"/><path d="M742 498.1c-17.9 28.2-35.8 56.3-53.7 84.4-8.9 13.9-17.7 27.8-26.6 41.7-4.4 6.9-8.8 13.9-13.2 20.8-2.1 3.2-4.1 6.4-6.2 9.7-1.6 2.6-1.9 5-5.3 3.9-13.8-4.7-26.6-12.3-39.9-18-12.8-5.5-27.6-10.7-41.7-8.4-27.1 4.4-46.6 30.8-58.8 53.3-6.6 12.2-12 25-17.5 37.8-5.4 12.7-10.5 26-18.1 37.6-7.4 11.3-18.7 21.3-33 16.1-12.4-4.5-22.3-15.3-32.5-23.4-10.4-8.3-21.7-16.1-34.7-19.7-14.7-4-30-1.4-44.3 3-30 9.4-58.2 24.6-85.7 39.6-13.1 7.2-26.2 15.8-41.9 14.2-13.3-1.4-25-8.9-34.3-18.1-20.6-20.3-33.6-49.2-39.1-77.4-0.7-3.4-1.3-6.9-1.6-10.4-0.1-1.1 0.1-2.4-0.3-3.4-0.2 0-0.2 0.2-0.1 0.4 1-15.2 2.5-30.4 5.3-45.4 9 9.2 20.8 13.4 31.7 4.6 10-8.2 14-20.5 18.4-32.1 4.2-10.9 8.9-21.6 15.5-31.3 7.1-10.3 16.4-18.5 27-25.2 12.4-7.9 26.2-13.7 40.5-17.3-11.6 35.8-11.2 74.4 0.7 110.2 10.1 30.3 29.3 58.1 59.5 70.9 29.8 12.7 64.7 10.6 94.8 0.4 31.3-10.6 58-31.7 79-56.8 23-27.5 39.9-59.7 52.7-93 13.5-35.3 25.2-74 23.9-112.1-0.2-4.4-0.4-8.9-0.8-13.3-0.4-4-1.4-8-1.7-12-0.2-2.6 1.2-2.7 3.6-3.6 3.7-1.4 7.3-2.8 11-4.1 17.1-5.7 35.8-8.3 53.7-6.6 14.5 1.4 29.6 7.1 35 21.8 5.7 15.4 0.4 33.7-5.1 48.3-6.4 17-15.7 32.7-25.3 48.1-4.2 6.8-9.5 14.6-7.3 23 2 7.4 9 11.1 16.1 12 15.9 2 32.2-5.9 45-14.6 14.1-9.6 26.6-21.7 37.9-34.4 6.2-6.7 11.9-13.8 17.4-21.2z" fill="#FFE39C" p-id="498"/><path d="M639.4 659.3c-13.8 22-27.8 43.9-41.2 66.2-12.9 21.4-25.4 42.8-41.3 62.1-31.2 37.8-71.5 67.5-117.5 84.9-47.5 18-99.4 23-149.6 16.8-47.7-5.9-98.5-21.3-136.1-52.3-4.6-3.8-8.8-7.3-11.6-12.6-3-5.7-5.8-11.5-8.3-17.4-5.4-12.7-9.6-25.9-12.7-39.4-6.5-27.9-9.3-57.6-7.4-86.2 2 23.5 10.4 47 22.5 67.2 10.6 17.7 26.2 36.1 47.1 41.2 11.2 2.7 22 0.5 32.1-4.8 10.6-5.5 20.9-11.5 31.5-17.1 21.2-11.1 42.8-22 65.5-29.6 11.1-3.7 22.8-6.7 34.6-6.4 11.1 0.3 21.8 3.9 31.4 9.5s18.2 12.9 26.7 20c8.1 6.8 17.4 15.3 28.4 16.8 22.6 3.2 34.2-28.7 41.2-44.7 9.5-21.7 18.1-44.1 31.6-63.8 13.3-19.4 34.7-40.4 60.2-37.9 26 2.6 48.7 19 72.9 27.5z" fill="#F6CB7C" p-id="499" style="&#10;    width: 40;&#10;    width: 40px;&#10;    height: 40px;&#10;    width: 199%;&#10;    height: 100%;&#10;"/><path d="M823.6 498.1c-14.9 25.6-28.5 60.9-44 100.5l-53.9 123C666.9 834.4 573 940.3 385.6 940.3c-136.4 0-206.6-50.2-241.2-111.7 74.1 74.1 323.1 122 443.6-85.8 10.9-18.8 29-47.9 51.5-83.4 16.1 5.7 29.8 6.6 37.8-6 91-144.4 146.3-155.3 146.3-155.3z" fill="#576B2C" p-id="500"/><path d="M562.8 466.4c0 40.2-48.8 258.4-206 258.4C252 724.8 243 611 243 587.5c0-15.4 3-33.4 9-52.2 76.7-19.6 74.5 80.8 137.2 73.8 43.7-4.9 78.4-138.9 170.8-181.5 1.9 11.3 2.8 24.2 2.8 38.8z" fill="#874622" p-id="501"/><path d="M836.1 348.9c-55.4-42.1-11.4-132-126.3-153.7-114.8-21.7-59.2 147.6-119.4 152.4-60.2 4.8-7.2-89.1-83.1-96.4-31.7-3-88.8 17.7-144.6 42.9 151.1-116.8 331.8-189.8 422.9-189.8 59.8 0 93.8 16.6 113 41.3 0.2 0.5 0.3 1 0.5 1.5 19.6 56.7-15.9 125.7-63 201.8z" fill="#FFF7D7" p-id="502"/><path d="M922.9 244c-2.6 18.1-6 37-10.8 54.2-2.1 6.9-4.5 14.1-7 21.6-13.6 34.9-34.9 54.9-68.9 29 47-76.1 82.5-145 62.9-201.8-0.2-0.5-0.3-1-0.5-1.4 21 27 24.3 63.5 24.3 98.4z" fill="#B6BC69" p-id="503"/><path d="M869.5 121.3c-19.8-10.7-47-17-84-17-91.1 0-271.8 73-422.9 189.8C225.9 399.8 113.3 541.3 113.3 697c0 19.5 1.6 40.8 6 62.4-9.3-29.9-12.4-60.3-12.4-87.2 0-321.8 489.8-582.1 660.2-582.1 50.7 0 82.5 12.2 102.4 31.2z" fill="#FFFFFF" p-id="504"/><path d="M883.3 118.5c-23-32.9-63.2-48.8-122.7-48.8-48.8 0-122.5 20.6-202.2 56.5-5.6 2.5-8.1 9.2-5.6 14.8 1.2 2.7 3.4 4.8 6.3 5.9 2.8 1.1 5.8 1 8.6-0.3 76.7-34.7 147-54.6 192.9-54.6 51.7 0 85.8 12.8 104.4 39.3 17 24.3 19.3 57.5 19.3 86.8 0 21-11.8 61.4-33.1 113.8-18.4 45.3-42.5 95.2-62.8 130.2-14.3 24.5-26.9 56.8-41.6 94.1l-0.4 1.1c-19.8 50.5-42.2 107.7-74.6 160.6-37.1 60.7-80.3 104.1-132.1 132.5l-0.1 0.1c-5.3 3.1-7.1 9.7-4.3 15.1 2 3.6 5.7 5.8 9.8 5.8 2.2 0 4-0.6 5.6-1.7 55.1-30.4 100.9-76.3 140.1-140.3 33.4-54.6 56.3-112.9 76.4-164.3l0.8-1.9c14.2-36 26.4-67.1 39.7-90 20.8-35.7 45.4-86.6 64.2-132.9 15.9-38.8 34.9-91.4 34.9-122.2-0.2-32.8-3-70.4-23.5-99.6zM444 186.7c-68.7 41.4-166.7 110.4-243.6 204-73.7 89.8-111.1 181.5-111.1 272.5 0 45.5 8.8 110.6 51 162.9 46.8 57.9 123.3 87.3 227.6 87.3 6.2 0 11.2-5 11.2-11.2s-5-11.2-11.2-11.2c-97.2 0-167.9-26.6-210.2-78.9-38-47.1-46-106.9-46-148.9 0-85.7 35.7-172.6 106.1-258.3 75-91.4 170.7-158.6 237.9-199 5.3-3.3 6.9-10.2 3.7-15.4-3.3-5.3-10.2-7-15.4-3.8z" fill="#934A19" p-id="505"/></svg>`;

let dom = parser.parseFromString(anyoneItem, 'text/xml')
let svg = dom.getElementsByTagName('svg')[0]
let paths = svg.getElementsByTagName('path')
let itemArray = _.map(paths, (path) => {
  return {
    geometryString: go.Geometry.fillPath(path.getAttribute('d')),
    fill: path.getAttribute('fill')
  }
})

palette.model.addNodeData({
  itemArray,
  category: 'svg'
})




I modified your code a little to work with only default JS, and it seems to be working. See this codepen: https://codepen.io/jhardy/pen/NZRvjq?editors=1010

1 Like