Coordinate container move icon in client

Ignition
,
1

Hi,

In perspective client, user would like to move an icon placed in a coordinate container.
Is it possible ? Not in designer but in client.

Thanks

2

here is some magic :wink:
dnd.zip (6.1 KB)

Summary 
{
  "custom": {
    "droppedData": {
      "offsetX": 165,
      "offsetY": 247
    }
  },
  "params": {},
  "propConfig": {
    "custom.droppedData": {
      "persistent": true
    }
  },
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "Markdown"
        },
        "position": {
          "height": 200,
          "width": 200,
          "x": 69,
          "y": 399
        },
        "propConfig": {
          "props.source": {
            "binding": {
              "config": {
                "struct": {
                  "coordId": "{../CoordinateContainer.meta.domId}",
                  "iconId": "{../CoordinateContainer/Icon.meta.domId}",
                  "rootId": "{parent.meta.domId}"
                },
                "waitOnAll": true
              },
              "transforms": [
                {
                  "code": "\t#make the propName the key to write too in the view.custom \n\tpropName \u003d \"droppedData\"\n\tcode \u003d  \"\"\"\u003cimg style\u003d\u0027display:none\u0027 src\u003d\u0027/favicon.ico\u0027 onload\u003d\\\"\n\t\tconst view \u003d [...window.__client.page.views._data.values()].find(view \u003d\u003e view.value.mountPath \u003d\u003d this.parentNode.parentNode.parentNode.getAttributeNode(\u0027data-component-path\u0027).value.split(\u0027.\u0027)[0]).value; \n\t\tfunction ondrop(ev) {\n\t\t\tev.preventDefault(); \t\t\t\t\t\t\n\t\t\tview.custom.write(\u0027\"\"\"+propName+\"\"\"\u0027,{\u0027offsetX\u0027:ev.offsetX,\u0027offsetY\u0027:ev.offsetY});\n\t\t};\n\t\tfunction ondragstart(ev){\t\t\t\n\t\t\tconst icon \u003d document.getElementById(\u0027\"\"\"+value.iconId+\"\"\"\u0027);\n\t\t\tev.dataTransfer.setDragImage(icon, 0, 0);\n\t\t};\n\t\tfunction ondragover(ev){\n\t\t\tev.preventDefault();\n\t\t};\n\t\tconst coord \u003d document.getElementById(\u0027\"\"\"+value.coordId+\"\"\"\u0027);\t\t\n\t\tcoord.setAttribute(\u0027draggable\u0027,true);\n\t\tcoord.ondragstart \u003d ondragstart;\n\t\tconst rootView \u003d  document.getElementById(\u0027\"\"\"+value.rootId+\"\"\"\u0027);\n\t\trootView.ondragover \u003d ondragover;\n\t\trootView.ondrop \u003d ondrop;\t\t\t\t\n\t\\\"\u003e\u003c/img\u003e\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n\t",
                  "type": "script"
                }
              ],
              "type": "expr-struct"
            }
          }
        },
        "props": {
          "markdown": {
            "escapeHtml": false
          },
          "style": {
            "flex": "--neutral-40"
          }
        },
        "type": "ia.display.markdown"
      },
      {
        "children": [
          {
            "meta": {
              "domId": "iconId",
              "name": "Icon"
            },
            "position": {
              "height": 30,
              "width": 30
            },
            "props": {
              "path": "material/insert_emoticon"
            },
            "type": "ia.display.icon"
          }
        ],
        "meta": {
          "domId": "containerId",
          "name": "CoordinateContainer"
        },
        "position": {
          "height": 31,
          "width": 30
        },
        "propConfig": {
          "position.x": {
            "binding": {
              "config": {
                "path": "view.custom.droppedData.offsetX"
              },
              "type": "property"
            }
          },
          "position.y": {
            "binding": {
              "config": {
                "path": "view.custom.droppedData.offsetY"
              },
              "type": "property"
            }
          }
        },
        "type": "ia.container.coord"
      }
    ],
    "meta": {
      "domId": "targetId",
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}
3

Thanks it seems to works for my use case.

1 Like