@fmsim/board 1.0.47 → 1.0.51

package/custom-elements.json

@@ -2,91 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "stories/restful-attachment-selector.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "default": "{ title: 'Components/RestfulAttachmentSelector', component: 'restful-attachment-selector', argTypes: { category: { control: 'select', options: ['', 'audio', 'video', 'image', 'text', 'application'], description: '첨부파일 카테고리' }, creatable: { control: 'boolean', description: '파일 업로드 가능 여부' }, userName: { control: 'text', description: '사용자 이름' } }, parameters: { layout: 'centered' } } satisfies Meta"
-        },
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: args => html` <restful-attachment-selector .category=${args.category} .creatable=${args.creatable} .userName=${args.userName} style=\"width: 800px; height: 600px;\" ></restful-attachment-selector> `, args: { category: '', creatable: true, userName: 'testUser' } }"
-        },
-        {
-          "kind": "variable",
-          "name": "WithCategory",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...Default, args: { ...Default.args, category: 'document' } }"
-        },
-        {
-          "kind": "variable",
-          "name": "ReadOnly",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...Default, args: { ...Default.args, creatable: false } }"
-        },
-        {
-          "kind": "variable",
-          "name": "WithTestData",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...Default, args: { ...Default.args, category: 'document' }, play: async ({ canvasElement }) => { const selector = canvasElement.querySelector('restful-attachment-selector') as RestfulAttachmentSelector if (selector) { // 테스트 데이터 주입 selector.attachments = [ { id: 'test-1', name: 'test1.txt', description: 'Test file 1', mimetype: 'text/plain', encoding: '7bit', category: 'document', path: 'test1.txt', bulk: '27', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test1.txt', download: 'http://localhost:16060/mcs/lv/downloadFile/test1.txt' }, { id: 'test-2', name: 'test2.jpg', description: 'Test image', mimetype: 'image/jpeg', encoding: '7bit', category: 'image', path: 'test2.jpg', bulk: '1024', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test2.jpg', download: 'http://localhost:16060/mcs/lv/downloadFile/test2.jpg' } ] } } }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithCategory",
-          "declaration": {
-            "name": "WithCategory",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ReadOnly",
-          "declaration": {
-            "name": "ReadOnly",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithTestData",
-          "declaration": {
-            "name": "WithTestData",
-            "module": "stories/restful-attachment-selector.stories.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/index.ts",
@@ -1731,92 +1646,85 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/data-storage/data-storage.ts",
+      "path": "stories/restful-attachment-selector.stories.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "DataStorage",
-          "members": [
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "id"
-            },
-            {
-              "kind": "method",
-              "name": "load",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "Promise<any>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "save",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "clear",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
-            }
-          ]
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Components/RestfulAttachmentSelector', component: 'restful-attachment-selector', argTypes: { category: { control: 'select', options: ['', 'audio', 'video', 'image', 'text', 'application'], description: '첨부파일 카테고리' }, creatable: { control: 'boolean', description: '파일 업로드 가능 여부' }, userName: { control: 'text', description: '사용자 이름' } }, parameters: { layout: 'centered' } } satisfies Meta"
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: args => html` <restful-attachment-selector .category=${args.category} .creatable=${args.creatable} .userName=${args.userName} style=\"width: 800px; height: 600px;\" ></restful-attachment-selector> `, args: { category: '', creatable: true, userName: 'testUser' } }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithCategory",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...Default, args: { ...Default.args, category: 'document' } }"
+        },
+        {
+          "kind": "variable",
+          "name": "ReadOnly",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...Default, args: { ...Default.args, creatable: false } }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithTestData",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...Default, args: { ...Default.args, category: 'document' }, play: async ({ canvasElement }) => { const selector = canvasElement.querySelector('restful-attachment-selector') as RestfulAttachmentSelector if (selector) { // 테스트 데이터 주입 selector.attachments = [ { id: 'test-1', name: 'test1.txt', description: 'Test file 1', mimetype: 'text/plain', encoding: '7bit', category: 'document', path: 'test1.txt', bulk: '27', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test1.txt', download: 'http://localhost:16060/mcs/lv/downloadFile/test1.txt' }, { id: 'test-2', name: 'test2.jpg', description: 'Test image', mimetype: 'image/jpeg', encoding: '7bit', category: 'image', path: 'test2.jpg', bulk: '1024', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), creatorId: 'testUser', updaterId: 'testUser', fullpath: 'http://localhost:16060/mcs/lv/images/test2.jpg', download: 'http://localhost:16060/mcs/lv/downloadFile/test2.jpg' } ] } } }"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DataStorage",
+          "name": "default",
           "declaration": {
-            "name": "DataStorage",
-            "module": "src/data-storage/data-storage.ts"
+            "name": "meta",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithCategory",
+          "declaration": {
+            "name": "WithCategory",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ReadOnly",
+          "declaration": {
+            "name": "ReadOnly",
+            "module": "stories/restful-attachment-selector.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithTestData",
+          "declaration": {
+            "name": "WithTestData",
+            "module": "stories/restful-attachment-selector.stories.ts"
           }
         }
       ]
@@ -2923,6 +2831,98 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/data-storage/data-storage.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DataStorage",
+          "members": [
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "id"
+            },
+            {
+              "kind": "method",
+              "name": "load",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<any>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "save",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "clear",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DataStorage",
+          "declaration": {
+            "name": "DataStorage",
+            "module": "src/data-storage/data-storage.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/layers/mcs-mouse-event-handler.ts",
@@ -2946,6 +2946,10 @@
               "kind": "field",
               "name": "clickComponentHandler"
             },
+            {
+              "kind": "field",
+              "name": "onchangeTarget"
+            },
             {
               "kind": "method",
               "name": "ready"
@@ -3030,6 +3034,33 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "monitoringTargets",
+              "type": {
+                "text": "Component[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "clearMonitoringTargets",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "addMonitoringTarget",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "targets",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "eventMap",
@@ -3042,13 +3073,13 @@
                 {
                   "name": "after",
                   "type": {
-                    "text": "any"
+                    "text": "Properties"
                   }
                 },
                 {
                   "name": "before",
                   "type": {
-                    "text": "any"
+                    "text": "Properties"
                   }
                 },
                 {
@@ -3100,46 +3131,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/layers/tooltip-decorator.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "tooltipDecorator",
-          "parameters": [
-            {
-              "name": "component",
-              "type": {
-                "text": "Component"
-              }
-            },
-            {
-              "name": "context",
-              "type": {
-                "text": "CanvasRenderingContext2D"
-              }
-            },
-            {
-              "name": "delta",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "tooltipDecorator",
-            "module": "src/layers/tooltip-decorator.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/modeller/edit-toolbar-style.ts",

package/demo/index-player.html

@@ -79,10 +79,9 @@
                 model: JSON.parse(JSON.stringify(board.model)),
                 mode: 0,
                 refProvider: provider,
-                handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animator-handler'],
+                handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],
                 layers: [
-                  { type: 'decotag-layer' },
-                  { type: 'reaction-layer' },
+                  { type: 'decorator-layer' },
                   { type: 'scroll-layer' },
                   { type: 'movement-layer', id: 'movement-layer' }
                 ]

package/demo/index-viewer.html

@@ -79,10 +79,9 @@
                 model: JSON.parse(JSON.stringify(board.model)),
                 mode: 0,
                 refProvider: provider,
-                handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animator-handler'],
+                handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],
                 layers: [
-                  { type: 'decotag-layer' },
-                  { type: 'reaction-layer' },
+                  { type: 'decorator-layer' },
                   { type: 'scroll-layer' },
                   { type: 'movement-layer', id: 'movement-layer' }
                 ]

package/demo/index.html

@@ -79,10 +79,9 @@
                 model: JSON.parse(JSON.stringify(board.model)),
                 mode: 0,
                 refProvider: provider,
-                handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler', 'animator-handler'],
+                handlers: ['mcs-event-handler', 'zoom-handler', 'shift-handler'],
                 layers: [
-                  { type: 'decotag-layer' },
-                  { type: 'reaction-layer' },
+                  { type: 'decorator-layer' },
                   { type: 'scroll-layer' },
                   { type: 'movement-layer', id: 'movement-layer' }
                 ]

package/dist/src/layers/mcs-mouse-event-handler.js

@@ -22,7 +22,7 @@ function dispatchFetchLvModelDataByMouseEvent(type, event, target) {
         }));
         return parent || target;
     }
-    else if (parent) {
+    else if (parent && parent.getState('id')) {
         window.dispatchEvent(new CustomEvent('fetchLvModelDataByMouseEvent', {
             detail: {
                 value: {
@@ -36,11 +36,11 @@ function dispatchFetchLvModelDataByMouseEvent(type, event, target) {
         return parent;
     }
 }
-function onmouseenter(event, hint) {
-    const target = hint.origin;
-    event.stopPropagation();
-    dispatchFetchLvModelDataByMouseEvent('hover', event, target);
-}
+// function onmouseenter(event: MouseEvent, hint: any) {
+//   const target = hint.origin
+//   event.stopPropagation()
+//   dispatchFetchLvModelDataByMouseEvent('hover', event, target)
+// }
 function onclick(event, hint) {
     const target = hint.origin;
     event.stopPropagation();

package/dist/src/layers/mcs-mouse-event-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcs-mouse-event-handler.js","sourceRoot":"","sources":["../../../src/layers/mcs-mouse-event-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAE5D,SAAS,oCAAoC,CAC3C,IAAoC,EACpC,KAAiB,EACjB,MAAgD;IAEhD,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAA;IAElC,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1B,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,8BAA8B,EAAE;YAC9C,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,IAAI;oBACJ,KAAK;oBACL,KAAK,EAAE;wBACL,GAAG,MAAM,CAAC,KAAK;wBACf,YAAY,EAAE,MAAM;4BAClB,CAAC,CAAC;gCACE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;gCACpB,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;6BACzB;4BACH,CAAC,CAAC,IAAI;qBACT;oBACD,IAAI,EAAE,MAAM,CAAC,IAAI;iBAClB;aACF;SACF,CAAC,CACH,CAAA;QAED,OAAO,MAAM,IAAI,MAAM,CAAA;IACzB,CAAC;SAAM,IAAI,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,8BAA8B,EAAE;YAC9C,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,IAAI;oBACJ,KAAK;oBACL,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;iBAClB;aACF;SACF,CAAC,CACH,CAAA;QAED,OAAO,MAAM,CAAA;IACf,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,KAAiB,EAAE,IAAS;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,oCAAoC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;AAC9D,CAAC;AAED,SAAS,OAAO,CAAC,KAAiB,EAAE,IAAS;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACvC,MAAM,UAAU,GAAG,oCAAoC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YAE/E,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE,UAAU,IAAI,MAAM;aAC7B,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;AACT,CAAC;AAED,SAAS,UAAU,CAAC,KAAiB,EAAE,IAAS;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,YAAY,GAAG,EAAE,CAAA;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAA;IAEP,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,MAAM,CAAC,YAAY,GAAG,UAAU,CAAA;IAEhC,oCAAoC,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;AACjE,CAAC;AAED,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,EAAE;IACrC,aAAa,EAAE;QACb,OAAO,EAAE;YACP,6CAA6C;YAC7C,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,UAAU;SACrB;KACF;CACF,CAAC,CAAA","sourcesContent":["import { Component, EventMap } from '@hatiolab/things-scene'\n\nfunction dispatchFetchLvModelDataByMouseEvent(\n  type: 'hover' | 'click' | 'dblclick',\n  event: MouseEvent,\n  target: Component & { parentObject?: Component }\n): Component | undefined {\n  const parent = target.parentObject\n\n  if (target.getState('id')) {\n    window.dispatchEvent(\n      new CustomEvent('fetchLvModelDataByMouseEvent', {\n        detail: {\n          value: {\n            type,\n            event,\n            model: {\n              ...target.state,\n              parentObject: parent\n                ? {\n                    id: parent.get('id'),\n                    type: parent.get('type')\n                  }\n                : null\n            },\n            data: target.data\n          }\n        }\n      })\n    )\n\n    return parent || target\n  } else if (parent) {\n    window.dispatchEvent(\n      new CustomEvent('fetchLvModelDataByMouseEvent', {\n        detail: {\n          value: {\n            type,\n            event,\n            model: parent.state,\n            data: parent.data\n          }\n        }\n      })\n    )\n\n    return parent\n  }\n}\n\nfunction onmouseenter(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  event.stopPropagation()\n\n  dispatchFetchLvModelDataByMouseEvent('hover', event, target)\n}\n\nfunction onclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  event.stopPropagation()\n\n  setTimeout(() => {\n    if (target.currentEvent !== 'dblclick') {\n      const realTarget = dispatchFetchLvModelDataByMouseEvent('click', event, target)\n\n      window.dispatchEvent(\n        new CustomEvent('clickComponent', {\n          detail: realTarget || target\n        })\n      )\n    }\n  }, 300)\n}\n\nfunction ondblclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  setTimeout(() => {\n    target.currentEvent = ''\n  }, 500)\n\n  event.stopPropagation()\n\n  target.currentEvent = 'dblclick'\n\n  dispatchFetchLvModelDataByMouseEvent('dblclick', event, target)\n}\n\nEventMap.register('mcs-event-handler', {\n  'model-layer': {\n    '(all)': {\n      // mouseenter: onmouseenter, /* 사용되지 않고 있음 */\n      click: onclick,\n      dblclick: ondblclick\n    }\n  }\n})\n"]}
+{"version":3,"file":"mcs-mouse-event-handler.js","sourceRoot":"","sources":["../../../src/layers/mcs-mouse-event-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAE5D,SAAS,oCAAoC,CAC3C,IAAoC,EACpC,KAAiB,EACjB,MAAgD;IAEhD,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAA;IAElC,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1B,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,8BAA8B,EAAE;YAC9C,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,IAAI;oBACJ,KAAK;oBACL,KAAK,EAAE;wBACL,GAAG,MAAM,CAAC,KAAK;wBACf,YAAY,EAAE,MAAM;4BAClB,CAAC,CAAC;gCACE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;gCACpB,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;6BACzB;4BACH,CAAC,CAAC,IAAI;qBACT;oBACD,IAAI,EAAE,MAAM,CAAC,IAAI;iBAClB;aACF;SACF,CAAC,CACH,CAAA;QAED,OAAO,MAAM,IAAI,MAAM,CAAA;IACzB,CAAC;SAAM,IAAI,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,8BAA8B,EAAE;YAC9C,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,IAAI;oBACJ,KAAK;oBACL,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;iBAClB;aACF;SACF,CAAC,CACH,CAAA;QAED,OAAO,MAAM,CAAA;IACf,CAAC;AACH,CAAC;AAED,wDAAwD;AACxD,+BAA+B;AAE/B,4BAA4B;AAE5B,iEAAiE;AACjE,IAAI;AAEJ,SAAS,OAAO,CAAC,KAAiB,EAAE,IAAS;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACvC,MAAM,UAAU,GAAG,oCAAoC,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;YAE/E,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE,UAAU,IAAI,MAAM;aAC7B,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC,EAAE,GAAG,CAAC,CAAA;AACT,CAAC;AAED,SAAS,UAAU,CAAC,KAAiB,EAAE,IAAS;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;IAE1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,YAAY,GAAG,EAAE,CAAA;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAA;IAEP,KAAK,CAAC,eAAe,EAAE,CAAA;IAEvB,MAAM,CAAC,YAAY,GAAG,UAAU,CAAA;IAEhC,oCAAoC,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;AACjE,CAAC;AAED,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,EAAE;IACrC,aAAa,EAAE;QACb,OAAO,EAAE;YACP,6CAA6C;YAC7C,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,UAAU;SACrB;KACF;CACF,CAAC,CAAA","sourcesContent":["import { Component, EventMap } from '@hatiolab/things-scene'\n\nfunction dispatchFetchLvModelDataByMouseEvent(\n  type: 'hover' | 'click' | 'dblclick',\n  event: MouseEvent,\n  target: Component & { parentObject?: Component }\n): Component | undefined {\n  const parent = target.parentObject\n\n  if (target.getState('id')) {\n    window.dispatchEvent(\n      new CustomEvent('fetchLvModelDataByMouseEvent', {\n        detail: {\n          value: {\n            type,\n            event,\n            model: {\n              ...target.state,\n              parentObject: parent\n                ? {\n                    id: parent.get('id'),\n                    type: parent.get('type')\n                  }\n                : null\n            },\n            data: target.data\n          }\n        }\n      })\n    )\n\n    return parent || target\n  } else if (parent && parent.getState('id')) {\n    window.dispatchEvent(\n      new CustomEvent('fetchLvModelDataByMouseEvent', {\n        detail: {\n          value: {\n            type,\n            event,\n            model: parent.state,\n            data: parent.data\n          }\n        }\n      })\n    )\n\n    return parent\n  }\n}\n\n// function onmouseenter(event: MouseEvent, hint: any) {\n//   const target = hint.origin\n\n//   event.stopPropagation()\n\n//   dispatchFetchLvModelDataByMouseEvent('hover', event, target)\n// }\n\nfunction onclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  event.stopPropagation()\n\n  setTimeout(() => {\n    if (target.currentEvent !== 'dblclick') {\n      const realTarget = dispatchFetchLvModelDataByMouseEvent('click', event, target)\n\n      window.dispatchEvent(\n        new CustomEvent('clickComponent', {\n          detail: realTarget || target\n        })\n      )\n    }\n  }, 300)\n}\n\nfunction ondblclick(event: MouseEvent, hint: any) {\n  const target = hint.origin\n\n  setTimeout(() => {\n    target.currentEvent = ''\n  }, 500)\n\n  event.stopPropagation()\n\n  target.currentEvent = 'dblclick'\n\n  dispatchFetchLvModelDataByMouseEvent('dblclick', event, target)\n}\n\nEventMap.register('mcs-event-handler', {\n  'model-layer': {\n    '(all)': {\n      // mouseenter: onmouseenter, /* 사용되지 않고 있음 */\n      click: onclick,\n      dblclick: ondblclick\n    }\n  }\n})\n"]}

package/dist/src/layers/movement-layer.d.ts

@@ -38,20 +38,24 @@ export type MOVEMENT = PATH[];
 export default class MovementLayer extends Layer {
     drawInstructionHandler: (e: Event) => void;
     clickComponentHandler: (e: Event) => void;
+    onchangeTarget: (after: Properties, before: Properties) => void;
     ready(): void;
     dispose(): void;
     get pointerEvents(): string;
     get capturable(): boolean;
     drawArrow(ctx: CanvasRenderingContext2D, p1: POINT, p2: POINT, pathType: PathType, pathStatus: PathStatus, label: string, styles?: PathStyles): void;
     findSourceAndTarget(path: PATH): [Component?, Component?];
+    private monitoringTargets;
+    private clearMonitoringTargets;
+    private addMonitoringTarget;
     render(ctx: CanvasRenderingContext2D): void;
     get eventMap(): {
         'model-layer': {
             '(self)': {
-                change: (after: any, before: any, hint: any) => void;
+                change: (after: Properties, before: Properties, hint: any) => void;
             };
         };
     };
-    onchangeModelLayer(after: any, before: any, hint: any): void;
+    onchangeModelLayer(after: Properties, before: Properties, hint: any): void;
     onchangeData(after: Properties, before: Properties): void;
 }

package/dist/src/layers/movement-layer.js

@@ -22,6 +22,10 @@ export default class MovementLayer extends Layer {
                 return;
             }
         };
+        this.onchangeTarget = (after, before) => {
+            this.invalidate();
+        };
+        this.monitoringTargets = [];
     }
     ready() {
         const handler = (e) => {
@@ -34,6 +38,7 @@ export default class MovementLayer extends Layer {
     dispose() {
         window.removeEventListener('drawInstruction', this.drawInstructionHandler);
         window.removeEventListener('clickComponent', this.clickComponentHandler);
+        this.clearMonitoringTargets();
         super.dispose && super.dispose();
     }
     get pointerEvents() {
@@ -96,15 +101,36 @@ export default class MovementLayer extends Layer {
         }
         return [src, dest];
     }
+    clearMonitoringTargets() {
+        this.monitoringTargets.forEach(target => {
+            target.off('change', this.onchangeTarget);
+        });
+        this.monitoringTargets = [];
+    }
+    addMonitoringTarget(targets) {
+        targets.forEach(target => {
+            if (this.monitoringTargets.includes(target)) {
+                return;
+            }
+            this.monitoringTargets.push(target);
+            target.on('change', this.onchangeTarget);
+        });
+    }
     render(ctx) {
         const root = this.root;
-        const movement = (this.data instanceof Array && this.data) || [];
+        const movement = this.data instanceof Array
+            ? this.data
+            : this.data && typeof this.data === 'object'
+                ? [this.data]
+                : [];
+        this.clearMonitoringTargets();
         ctx.save();
         movement.forEach(path => {
             const [src, dest] = this.findSourceAndTarget(path);
             if (!src || !dest) {
                 return;
             }
+            this.addMonitoringTarget([src, dest]);
             const [srcCenter, destCenter] = [src.center, dest.center];
             const [srcPos, destPos] = [
                 src.transcoordS2C(srcCenter.x, srcCenter.y, root),