@operato/flow 9.0.0-beta.53 → 9.0.0-beta.55

package/dist/src/nodes/subflow.d.ts

@@ -3,6 +3,10 @@ import { AnchorModel } from '../types.js';
 import { FlowNodeAbstract } from '../base/flow-node-abstract.js';
 export declare class Subflow extends FlowNodeAbstract {
     get type(): string;
+    get size(): {
+        w: number;
+        h: number;
+    };
     renderNode(): SVGTemplateResult;
     get anchorModels(): AnchorModel[];
 }

package/dist/src/nodes/subflow.js

@@ -4,8 +4,11 @@ export class Subflow extends FlowNodeAbstract {
     get type() {
         return 'subflow';
     }
+    get size() {
+        return this.model.size || { w: 120, h: 60 };
+    }
     renderNode() {
-        const { w, h } = this.size || { w: 120, h: 60 };
+        const { w, h } = this.size;
         const x = -w / 2;
         const y = -h / 2;
         const gap = h * 0.2;
@@ -17,11 +20,11 @@ export class Subflow extends FlowNodeAbstract {
     `;
     }
     get anchorModels() {
-        const { w, h } = this.size || { w: 120, h: 60 };
+        const { w, h } = this.size;
         return [
-            { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 } },
-            { id: 'out', type: 'out', pos: { x: 0, y: h / 2 } }
-        ];
+            { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 }, angle: 270 },
+            { id: 'out', type: 'out', pos: { x: 0, y: h / 2 }, angle: 90 }
+        ].map(anchorModel => this.applyAnchorsOption(anchorModel));
     }
 }
 //# sourceMappingURL=subflow.js.map

package/dist/src/nodes/subflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"subflow.js","sourceRoot":"","sources":["../../../src/nodes/subflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,OAAQ,SAAQ,gBAAgB;IAC3C,IAAI,IAAI;QACN,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAC/C,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAChB,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAChB,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;QAEnB,OAAO,GAAG,CAAA;sCACwB,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC;oCACvC,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,GAAG;;mEAEtC,IAAI,CAAC,KAAK;KACxE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAE/C,OAAO;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE;YAClD,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE;SACpD,CAAA;IACH,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class Subflow extends FlowNodeAbstract {\n  get type() {\n    return 'subflow'\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 120, h: 60 }\n    const x = -w / 2\n    const y = -h / 2\n    const gap = h * 0.2\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${h}\" fill=\"#e2e3f3\" stroke-width=\"1\" stroke=\"#666\"/>\n      <rect class=\"node-inner\" x=\"${x + gap / 2}\" y=\"${y + gap / 2}\" width=\"${w - gap}\" height=\"${h - gap}\" fill=\"#d6e0f5\" stroke-width=\"1\" stroke=\"#000\"/>\n\n      <text class=\"node-label\" x=\"0\" y=\"-5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    const { w, h } = this.size || { w: 120, h: 60 }\n\n    return [\n      { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 } },\n      { id: 'out', type: 'out', pos: { x: 0, y: h / 2 } }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"subflow.js","sourceRoot":"","sources":["../../../src/nodes/subflow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,OAAQ,SAAQ,gBAAgB;IAC3C,IAAI,IAAI;QACN,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAM,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;IAC9C,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAC1B,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAChB,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAChB,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;QAEnB,OAAO,GAAG,CAAA;sCACwB,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC;oCACvC,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,GAAG;;mEAEtC,IAAI,CAAC,KAAK;KACxE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAE1B,OAAO;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YAC9D,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;SAC/D,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAA0B,CAAC,CAAC,CAAA;IAC3E,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class Subflow extends FlowNodeAbstract {\n  get type() {\n    return 'subflow'\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size || { w: 120, h: 60 }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size\n    const x = -w / 2\n    const y = -h / 2\n    const gap = h * 0.2\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${h}\" fill=\"#e2e3f3\" stroke-width=\"1\" stroke=\"#666\"/>\n      <rect class=\"node-inner\" x=\"${x + gap / 2}\" y=\"${y + gap / 2}\" width=\"${w - gap}\" height=\"${h - gap}\" fill=\"#d6e0f5\" stroke-width=\"1\" stroke=\"#000\"/>\n\n      <text class=\"node-label\" x=\"0\" y=\"-5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    const { w, h } = this.size\n\n    return [\n      { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 }, angle: 270 },\n      { id: 'out', type: 'out', pos: { x: 0, y: h / 2 }, angle: 90 }\n    ].map(anchorModel => this.applyAnchorsOption(anchorModel as AnchorModel))\n  }\n}\n"]}

package/dist/src/nodes/task.d.ts

@@ -8,6 +8,10 @@ export declare class Task extends FlowNodeAbstract {
     set propertySpecs(propertySpecs: PropertySpec[] | null);
     get type(): string;
     get inputSchema(): import("../types.js").FlowDataSchema;
+    get size(): {
+        w: number;
+        h: number;
+    };
     renderNode(): SVGTemplateResult;
     get anchorModels(): AnchorModel[];
 }

package/dist/src/nodes/task.js

@@ -37,8 +37,11 @@ export class Task extends FlowNodeAbstract {
     get inputSchema() {
         return convertPropertySpecsToSchema(this.propertySpecs || []);
     }
+    get size() {
+        return this.model.size || { w: 120, h: 60 };
+    }
     renderNode() {
-        const { w, h } = this.size || { w: 120, h: 60 };
+        const { w, h } = this.size;
         const x = -w / 2;
         const y = -h / 2;
         return svg `
@@ -47,11 +50,11 @@ export class Task extends FlowNodeAbstract {
     `;
     }
     get anchorModels() {
-        const { w, h } = this.size || { w: 120, h: 60 };
+        const { w, h } = this.size;
         return [
-            { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 } },
-            { id: 'out', type: 'out', pos: { x: 0, y: h / 2 } }
-        ];
+            { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 }, angle: 270 },
+            { id: 'out', type: 'out', pos: { x: 0, y: h / 2 }, angle: 90 }
+        ].map(anchorModel => this.applyAnchorsOption(anchorModel));
     }
 }
 //# sourceMappingURL=task.js.map

package/dist/src/nodes/task.js.map

@@ -1 +1 @@
-{"version":3,"file":"task.js","sourceRoot":"","sources":["../../../src/nodes/task.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAK5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAChE,OAAO,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAA;AAElF,MAAM,OAAO,IAAK,SAAQ,gBAAgB;IAA1C;;QACU,mBAAc,GAA0B;YAC9C;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;aACjB;YACD;gBACE,IAAI,EAAE,qBAAqB;gBAC3B,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE;oBACR,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;iBACnC;aACF;SACF,CAAA;IAqCH,CAAC;IAnCC,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,cAAc,CAAA;IAC5B,CAAC;IAED,IAAI,aAAa,CAAC,aAAoC;QACpD,IAAI,CAAC,cAAc,GAAG,aAAa,CAAA;IACrC,CAAC;IAED,IAAI,IAAI;QACN,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,WAAW;QACb,OAAO,4BAA4B,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC,CAAA;IAC/D,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAC/C,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAChB,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAEhB,OAAO,GAAG,CAAA;sCACwB,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC;kEACT,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAE/C,OAAO;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE;YAClD,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE;SACpD,CAAA;IACH,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\n\nimport { PropertySpec } from '@operato/property-editor'\n\nimport { AnchorModel } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\nimport { convertPropertySpecsToSchema } from '../utils/generate-mapping-scheme.js'\n\nexport class Task extends FlowNodeAbstract {\n  private _propertySpecs: PropertySpec[] | null = [\n    {\n      type: 'string',\n      name: 'message',\n      label: 'message'\n    },\n    {\n      type: 'scenario-step-input',\n      name: 'accessor',\n      label: 'accessor'\n    },\n    {\n      type: 'select',\n      name: 'level',\n      label: 'level',\n      property: {\n        options: ['info', 'warn', 'error']\n      }\n    }\n  ]\n\n  get propertySpecs(): PropertySpec[] | null {\n    return this._propertySpecs\n  }\n\n  set propertySpecs(propertySpecs: PropertySpec[] | null) {\n    this._propertySpecs = propertySpecs\n  }\n\n  get type() {\n    return 'task'\n  }\n\n  get inputSchema() {\n    return convertPropertySpecsToSchema(this.propertySpecs || [])\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 120, h: 60 }\n    const x = -w / 2\n    const y = -h / 2\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${h}\" fill=\"#d1ecf1\" stroke-width=\"1\"/>\n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    const { w, h } = this.size || { w: 120, h: 60 }\n\n    return [\n      { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 } },\n      { id: 'out', type: 'out', pos: { x: 0, y: h / 2 } }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"task.js","sourceRoot":"","sources":["../../../src/nodes/task.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAK5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAChE,OAAO,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAA;AAElF,MAAM,OAAO,IAAK,SAAQ,gBAAgB;IAA1C;;QACU,mBAAc,GAA0B;YAC9C;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;aACjB;YACD;gBACE,IAAI,EAAE,qBAAqB;gBAC3B,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE;oBACR,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;iBACnC;aACF;SACF,CAAA;IAyCH,CAAC;IAvCC,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,cAAc,CAAA;IAC5B,CAAC;IAED,IAAI,aAAa,CAAC,aAAoC;QACpD,IAAI,CAAC,cAAc,GAAG,aAAa,CAAA;IACrC,CAAC;IAED,IAAI,IAAI;QACN,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,WAAW;QACb,OAAO,4BAA4B,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC,CAAA;IAC/D,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAM,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;IAC9C,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAC1B,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAChB,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAEhB,OAAO,GAAG,CAAA;sCACwB,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC;kEACT,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAE1B,OAAO;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YAC9D,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;SAC/D,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAA0B,CAAC,CAAC,CAAA;IAC3E,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\n\nimport { PropertySpec } from '@operato/property-editor'\n\nimport { AnchorModel } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\nimport { convertPropertySpecsToSchema } from '../utils/generate-mapping-scheme.js'\n\nexport class Task extends FlowNodeAbstract {\n  private _propertySpecs: PropertySpec[] | null = [\n    {\n      type: 'string',\n      name: 'message',\n      label: 'message'\n    },\n    {\n      type: 'scenario-step-input',\n      name: 'accessor',\n      label: 'accessor'\n    },\n    {\n      type: 'select',\n      name: 'level',\n      label: 'level',\n      property: {\n        options: ['info', 'warn', 'error']\n      }\n    }\n  ]\n\n  get propertySpecs(): PropertySpec[] | null {\n    return this._propertySpecs\n  }\n\n  set propertySpecs(propertySpecs: PropertySpec[] | null) {\n    this._propertySpecs = propertySpecs\n  }\n\n  get type() {\n    return 'task'\n  }\n\n  get inputSchema() {\n    return convertPropertySpecsToSchema(this.propertySpecs || [])\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size || { w: 120, h: 60 }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size\n    const x = -w / 2\n    const y = -h / 2\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${x}\" y=\"${y}\" width=\"${w}\" height=\"${h}\" fill=\"#d1ecf1\" stroke-width=\"1\"/>\n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    const { w, h } = this.size\n\n    return [\n      { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 }, angle: 270 },\n      { id: 'out', type: 'out', pos: { x: 0, y: h / 2 }, angle: 90 }\n    ].map(anchorModel => this.applyAnchorsOption(anchorModel as AnchorModel))\n  }\n}\n"]}

package/dist/src/property-editors/ox-input-anchors.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.js';
+import { OxFormField } from '@operato/input';
+import { AnchorModel } from '../types';
+export declare class OxInputAnchors extends OxFormField<AnchorModel[]> {
+    static styles: import("lit").CSSResult[];
+    value: AnchorModel[];
+    render(): import("lit-html").TemplateResult<1>;
+    onClick(e: MouseEvent): void;
+}

package/dist/src/property-editors/ox-input-anchors.js

@@ -0,0 +1,163 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from '@operato/input';
+let OxInputAnchors = class OxInputAnchors extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+    }
+    render() {
+        const anchors = this.value || [];
+        return html `
+      <fieldset>
+        <ul>
+          ${anchors.map(({ id, angle, type }) => html `
+              <li>
+                <div data-id=${id}>${id}</div>
+                <div @click=${this.onClick.bind(this)} data-angle=${angle} data-type=${type}>
+                  ${type == 'in'
+            ? html `
+                        <md-icon ?selected=${angle == 180} data-angle="180">step_into</md-icon>
+                        <md-icon ?selected=${angle == 90} data-angle="90">step_into</md-icon>
+                        <md-icon ?selected=${angle == 270} data-angle="270">step_into</md-icon>
+                        <md-icon ?selected=${angle == 0} data-angle="0">step_into</md-icon>
+                      `
+            : html `
+                        <md-icon ?selected=${angle == 180} data-angle="180">step_out</md-icon>
+                        <md-icon ?selected=${angle == 90} data-angle="90">step_out</md-icon>
+                        <md-icon ?selected=${angle == 270} data-angle="270">step_out</md-icon>
+                        <md-icon ?selected=${angle == 0} data-angle="0">step_out</md-icon>
+                      `}
+                </div>
+              </li>
+            `)}
+        </ul>
+      </fieldset>
+    `;
+    }
+    onClick(e) {
+        e.stopPropagation();
+        const target = e.target;
+        const currentTarget = e.currentTarget;
+        if (target === currentTarget || !target.hasAttribute('data-angle')) {
+            return;
+        }
+        const value = target.getAttribute('data-angle');
+        currentTarget.setAttribute('data-angle', value);
+        const lis = this.renderRoot.querySelectorAll('li');
+        this.value = Array.from(lis).map(li => {
+            var _a, _b;
+            const id = (_a = li.querySelector('[data-id]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
+            const angle = (_b = li.querySelector('div[data-angle]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-angle');
+            const origin = this.value.find(anchor => anchor.id == id);
+            return { ...origin, angle: Number(angle) };
+        });
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+OxInputAnchors.styles = [
+    css `
+      :host {
+        display: flex;
+        --md-icon-size: 1.4em;
+      }
+
+      fieldset {
+        flex: 1;
+        font-size: 0.8em;
+        border: 0;
+        border-bottom: 1px solid;
+        background-color: var(--md-sys-color-surface-variant);
+        padding: var(--spacing-medium);
+      }
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+
+        padding: 0;
+        margin: 0;
+      }
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--spacing-large);
+      }
+
+      li > * {
+        flex: 1;
+      }
+
+      div[data-id] {
+        text-align: right;
+      }
+
+      div[data-angle] {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      md-icon {
+        color: var(--md-sys-color-on-background);
+        background-color: var(--md-sys-color-background);
+      }
+
+      md-icon[selected] {
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+      }
+
+      /* 아이콘 회전 */
+      div[data-type='in'] md-icon[data-angle='270'] {
+        transform: rotate(0deg);
+      }
+
+      div[data-type='in'] md-icon[data-angle='0'] {
+        transform: rotate(90deg);
+      }
+
+      div[data-type='in'] md-icon[data-angle='180'] {
+        transform: rotate(-90deg);
+      }
+
+      div[data-type='in'] md-icon[data-angle='90'] {
+        transform: rotate(180deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='270'] {
+        transform: rotate(0deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='0'] {
+        transform: rotate(90deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='180'] {
+        transform: rotate(-90deg);
+      }
+
+      div[data-type='out'] md-icon[data-angle='90'] {
+        transform: rotate(180deg);
+      }
+    `
+];
+__decorate([
+    property({ attribute: false })
+], OxInputAnchors.prototype, "value", void 0);
+OxInputAnchors = __decorate([
+    customElement('ox-input-anchors')
+], OxInputAnchors);
+export { OxInputAnchors };
+//# sourceMappingURL=ox-input-anchors.js.map

package/dist/src/property-editors/ox-input-anchors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-anchors.js","sourceRoot":"","sources":["../../../src/property-editors/ox-input-anchors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAIrC,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAA0B;IAAvD;;QA2F2B,UAAK,GAAkB,EAAE,CAAA;IAkE3D,CAAC;IAhEC,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;;;YAGH,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;+BAEV,EAAG,IAAI,EAAE;8BACV,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,KAAM,cAAc,IAAI;oBACxE,IAAI,IAAI,IAAI;YACZ,CAAC,CAAC,IAAI,CAAA;6CACmB,KAAK,IAAI,GAAG;6CACZ,KAAK,IAAI,EAAE;6CACX,KAAK,IAAI,GAAG;6CACZ,KAAK,IAAI,CAAC;uBAChC;YACH,CAAC,CAAC,IAAI,CAAA;6CACmB,KAAK,IAAI,GAAG;6CACZ,KAAK,IAAI,EAAE;6CACX,KAAK,IAAI,GAAG;6CACZ,KAAK,IAAI,CAAC;uBAChC;;;aAGV,CACF;;;KAGN,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAA;QAClC,MAAM,aAAa,GAAG,CAAC,CAAC,aAAwB,CAAA;QAEhD,IAAI,MAAM,KAAK,aAAa,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YACnE,OAAM;QACR,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,aAAa,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;QAE/C,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAA;QAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;;YACpC,MAAM,EAAE,GAAG,MAAA,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,0CAAE,YAAY,CAAC,SAAS,CAAE,CAAA;YAClE,MAAM,KAAK,GAAG,MAAA,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,0CAAE,YAAY,CAAC,YAAY,CAAC,CAAA;YAC7E,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAE,CAAA;YAE1D,OAAO,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAA;QAC5C,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;;AA3JM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsFF;CACF,AAxFY,CAwFZ;AAE+B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAA0B;AA3F9C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA6J1B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\nimport { AnchorModel } from '../types'\n\n@customElement('ox-input-anchors')\nexport class OxInputAnchors extends OxFormField<AnchorModel[]> {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        --md-icon-size: 1.4em;\n      }\n\n      fieldset {\n        flex: 1;\n        font-size: 0.8em;\n        border: 0;\n        border-bottom: 1px solid;\n        background-color: var(--md-sys-color-surface-variant);\n        padding: var(--spacing-medium);\n      }\n\n      ul {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small);\n\n        padding: 0;\n        margin: 0;\n      }\n\n      li {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: var(--spacing-large);\n      }\n\n      li > * {\n        flex: 1;\n      }\n\n      div[data-id] {\n        text-align: right;\n      }\n\n      div[data-angle] {\n        display: flex;\n        justify-content: space-between;\n      }\n\n      md-icon {\n        color: var(--md-sys-color-on-background);\n        background-color: var(--md-sys-color-background);\n      }\n\n      md-icon[selected] {\n        color: var(--md-sys-color-on-primary);\n        background-color: var(--md-sys-color-primary);\n      }\n\n      /* 아이콘 회전 */\n      div[data-type='in'] md-icon[data-angle='270'] {\n        transform: rotate(0deg);\n      }\n\n      div[data-type='in'] md-icon[data-angle='0'] {\n        transform: rotate(90deg);\n      }\n\n      div[data-type='in'] md-icon[data-angle='180'] {\n        transform: rotate(-90deg);\n      }\n\n      div[data-type='in'] md-icon[data-angle='90'] {\n        transform: rotate(180deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='270'] {\n        transform: rotate(0deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='0'] {\n        transform: rotate(90deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='180'] {\n        transform: rotate(-90deg);\n      }\n\n      div[data-type='out'] md-icon[data-angle='90'] {\n        transform: rotate(180deg);\n      }\n    `\n  ]\n\n  @property({ attribute: false }) value: AnchorModel[] = []\n\n  render() {\n    const anchors = this.value || []\n\n    return html`\n      <fieldset>\n        <ul>\n          ${anchors.map(\n            ({ id, angle, type }) => html`\n              <li>\n                <div data-id=${id!}>${id}</div>\n                <div @click=${this.onClick.bind(this)} data-angle=${angle!} data-type=${type}>\n                  ${type == 'in'\n                    ? html`\n                        <md-icon ?selected=${angle == 180} data-angle=\"180\">step_into</md-icon>\n                        <md-icon ?selected=${angle == 90} data-angle=\"90\">step_into</md-icon>\n                        <md-icon ?selected=${angle == 270} data-angle=\"270\">step_into</md-icon>\n                        <md-icon ?selected=${angle == 0} data-angle=\"0\">step_into</md-icon>\n                      `\n                    : html`\n                        <md-icon ?selected=${angle == 180} data-angle=\"180\">step_out</md-icon>\n                        <md-icon ?selected=${angle == 90} data-angle=\"90\">step_out</md-icon>\n                        <md-icon ?selected=${angle == 270} data-angle=\"270\">step_out</md-icon>\n                        <md-icon ?selected=${angle == 0} data-angle=\"0\">step_out</md-icon>\n                      `}\n                </div>\n              </li>\n            `\n          )}\n        </ul>\n      </fieldset>\n    `\n  }\n\n  onClick(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as Element\n    const currentTarget = e.currentTarget as Element\n\n    if (target === currentTarget || !target.hasAttribute('data-angle')) {\n      return\n    }\n\n    const value = target.getAttribute('data-angle') as string\n\n    currentTarget.setAttribute('data-angle', value)\n\n    const lis = this.renderRoot.querySelectorAll('li')\n    this.value = Array.from(lis).map(li => {\n      const id = li.querySelector('[data-id]')?.getAttribute('data-id')!\n      const angle = li.querySelector('div[data-angle]')?.getAttribute('data-angle')\n      const origin = this.value.find(anchor => anchor.id == id)!\n\n      return { ...origin, angle: Number(angle) }\n    })\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/property-editors/ox-input-nodes.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=ox-input-nodes.js.map

package/dist/src/property-editors/ox-input-nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-nodes.js","sourceRoot":"","sources":["../../../src/property-editors/ox-input-nodes.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/src/property-editors/ox-property-editor-anchors.d.ts

@@ -0,0 +1,6 @@
+import './ox-input-anchors';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+import { AnchorModel } from '../types';
+export declare class PropertyEditorAnchors extends OxPropertyEditor {
+    editorTemplate(value: AnchorModel[], spec: PropertySpec): import("lit-html").TemplateResult<1>;
+}

package/dist/src/property-editors/ox-property-editor-anchors.js

@@ -0,0 +1,25 @@
+import { __decorate } from "tslib";
+import './ox-input-anchors';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+let PropertyEditorAnchors = class PropertyEditorAnchors extends OxPropertyEditor {
+    editorTemplate(value, spec) {
+        const { defaultValue = [] } = spec;
+        value || (value = []);
+        const anchors = defaultValue
+            .map(({ id, ...others }) => {
+            const anchor = value.find(v => v.id == id);
+            if (anchor) {
+                return { ...others, ...anchor };
+            }
+        })
+            .filter(Boolean);
+        return html ` <ox-input-anchors .value=${anchors} fullwidth></ox-input-anchors> `;
+    }
+};
+PropertyEditorAnchors = __decorate([
+    customElement('ox-property-editor-anchors')
+], PropertyEditorAnchors);
+export { PropertyEditorAnchors };
+//# sourceMappingURL=ox-property-editor-anchors.js.map

package/dist/src/property-editors/ox-property-editor-anchors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-anchors.js","sourceRoot":"","sources":["../../../src/property-editors/ox-property-editor-anchors.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAIlE,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,gBAAgB;IACzD,cAAc,CAAC,KAAoB,EAAE,IAAkB;QACrD,MAAM,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;QAClC,KAAK,KAAL,KAAK,GAAK,EAAE,EAAA;QAEZ,MAAM,OAAO,GAAI,YAA8B;aAC5C,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;YAC1C,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;YACjC,CAAC;QACH,CAAC,CAAC;aACD,MAAM,CAAC,OAAO,CAAkB,CAAA;QAEnC,OAAO,IAAI,CAAA,6BAA6B,OAAO,iCAAiC,CAAA;IAClF,CAAC;CACF,CAAA;AAhBY,qBAAqB;IADjC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,qBAAqB,CAgBjC","sourcesContent":["import './ox-input-anchors'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { AnchorModel } from '../types'\n\n@customElement('ox-property-editor-anchors')\nexport class PropertyEditorAnchors extends OxPropertyEditor {\n  editorTemplate(value: AnchorModel[], spec: PropertySpec) {\n    const { defaultValue = [] } = spec\n    value ||= []\n\n    const anchors = (defaultValue as AnchorModel[])\n      .map(({ id, ...others }) => {\n        const anchor = value.find(v => v.id == id)\n        if (anchor) {\n          return { ...others, ...anchor }\n        }\n      })\n      .filter(Boolean) as AnchorModel[]\n\n    return html` <ox-input-anchors .value=${anchors} fullwidth></ox-input-anchors> `\n  }\n}\n"]}

package/dist/src/property-editors/ox-property-editor-nodes.d.ts

@@ -0,0 +1,6 @@
+import './ox-input-anchors';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+import { Anchor } from '../types';
+export declare class PropertyEditorAnchors extends OxPropertyEditor {
+    editorTemplate(value: Anchor[], spec: PropertySpec): import("lit-html").TemplateResult<1>;
+}

package/dist/src/property-editors/ox-property-editor-nodes.js

@@ -0,0 +1,25 @@
+import { __decorate } from "tslib";
+import './ox-input-anchors';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+let PropertyEditorAnchors = class PropertyEditorAnchors extends OxPropertyEditor {
+    editorTemplate(value, spec) {
+        const { defaultValue = [] } = spec;
+        value || (value = []);
+        const anchors = defaultValue
+            .map(({ id, ...others }) => {
+            const anchor = value.find(v => v.id == id);
+            if (anchor) {
+                return { ...others, ...anchor };
+            }
+        })
+            .filter(Boolean);
+        return html ` <ox-input-anchors .value=${anchors} fullwidth></ox-input-anchors> `;
+    }
+};
+PropertyEditorAnchors = __decorate([
+    customElement('ox-property-editor-anchors')
+], PropertyEditorAnchors);
+export { PropertyEditorAnchors };
+//# sourceMappingURL=ox-property-editor-nodes.js.map

package/dist/src/property-editors/ox-property-editor-nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-nodes.js","sourceRoot":"","sources":["../../../src/property-editors/ox-property-editor-nodes.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAIlE,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,gBAAgB;IACzD,cAAc,CAAC,KAAe,EAAE,IAAkB;QAChD,MAAM,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;QAClC,KAAK,KAAL,KAAK,GAAK,EAAE,EAAA;QAEZ,MAAM,OAAO,GAAI,YAAyB;aACvC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,EAAE,EAAE;YACzB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;YAC1C,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;YACjC,CAAC;QACH,CAAC,CAAC;aACD,MAAM,CAAC,OAAO,CAAC,CAAA;QAElB,OAAO,IAAI,CAAA,6BAA6B,OAAO,iCAAiC,CAAA;IAClF,CAAC;CACF,CAAA;AAhBY,qBAAqB;IADjC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,qBAAqB,CAgBjC","sourcesContent":["import './ox-input-anchors'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Anchor } from '../types'\n\n@customElement('ox-property-editor-anchors')\nexport class PropertyEditorAnchors extends OxPropertyEditor {\n  editorTemplate(value: Anchor[], spec: PropertySpec) {\n    const { defaultValue = [] } = spec\n    value ||= []\n\n    const anchors = (defaultValue as Anchor[])\n      .map(({ id, ...others }) => {\n        const anchor = value.find(v => v.id == id)\n        if (anchor) {\n          return { ...others, ...anchor }\n        }\n      })\n      .filter(Boolean)\n\n    return html` <ox-input-anchors .value=${anchors} fullwidth></ox-input-anchors> `\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -54,9 +54,14 @@ export interface FlowNodeModel extends FlowEntityModel, FlowNodeDataSchema {
         w: number;
         h: number;
     };
+    anchorsOption?: {
+        id: string;
+        [key: string]: any;
+    }[];
 }
 export interface FlowNode extends FlowEntity, FlowNodeModel {
-    anchors?: Anchor[];
+    anchors: Anchor[];
+    anchorModels: AnchorModel[];
     findAnchor(id: string): Anchor | undefined;
     render(): SVGTemplateResult;
     renderNode(): SVGTemplateResult;

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Mapping } from '@operato/data-mapper'\nimport { PropertySpec } from '@operato/property-editor'\nimport { SVGTemplateResult } from 'lit'\n\nexport interface FlowDataSchema {\n  type: 'object' | 'array' | 'string' | 'number' | 'boolean'\n  properties?: { [key: string]: FlowDataSchema }\n  required?: string[]\n}\n\nexport interface FlowNodeDataSchema {\n  inputSchema: FlowDataSchema | undefined\n  outputSchema: FlowDataSchema | undefined\n  dataSourceSchema: FlowDataSchema | undefined\n}\n\n// export interface FlowDataMapping {\n//   toField: string\n//   mappingType: 'direct' | 'expression'\n//   fromFields: { nodeId: string; field: string }[] // ⬅ 명확한 데이터 출처 명시\n//   expression?: string\n// }\n\nexport interface FlowEntityModel {\n  id: string\n  type: string\n  subtype?: string\n  label?: string\n  options?: { [key: string]: any }\n}\n\nexport interface FlowEntity extends FlowEntityModel {\n  optionsSpec: PropertySpec[]\n  selected: boolean\n  update: (model: Partial<FlowEntityModel>) => void\n  updateOptions: (options: { [key: string]: any }) => void\n}\n\n/** 앵커 타입 */\nexport interface AnchorModel extends FlowEntityModel {\n  type: 'in' | 'out'\n  pos: { x: number; y: number }\n  angle?: number\n  weight?: number\n}\n\nexport interface Anchor extends AnchorModel {\n  node: FlowNode\n  render(): SVGTemplateResult\n}\n\n/** 플로우 노드 */\nexport interface FlowNodeModel extends FlowEntityModel, FlowNodeDataSchema {\n  pos: { x: number; y: number }\n  size: { w: number; h: number }\n}\n\nexport interface FlowNode extends FlowEntity, FlowNodeModel {\n  anchors?: Anchor[]\n  findAnchor(id: string): Anchor | undefined\n  render(): SVGTemplateResult\n  renderNode(): SVGTemplateResult\n}\n\nexport interface AnchorPointer {\n  nodeId: string\n  anchorId: string\n}\n\n/** 플로우 엣지 */\nexport interface FlowEdgeModel extends FlowEntityModel {\n  type: string\n  from: AnchorPointer\n  to: AnchorPointer\n  weight?: number\n  dataMappings: Mapping[]\n}\n\nexport interface FlowEdge extends FlowEntity, FlowEdgeModel {\n  fromAnchor?: Anchor\n  toAnchor?: Anchor\n  render(): SVGTemplateResult\n}\n\nexport type EditorMode = 'edit' | 'debug'\n\nexport type FlowModel = { nodes: FlowNodeModel[]; edges: FlowEdgeModel[] }\n\nexport type FlowNodeImplementation = new (...args: any[]) => FlowNode\n\nexport type TaskType = {\n  name: string\n  description: string | null\n  help: string | null\n  parameterSpec: PropertySpec[]\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Mapping } from '@operato/data-mapper'\nimport { PropertySpec } from '@operato/property-editor'\nimport { SVGTemplateResult } from 'lit'\n\nexport interface FlowDataSchema {\n  type: 'object' | 'array' | 'string' | 'number' | 'boolean'\n  properties?: { [key: string]: FlowDataSchema }\n  required?: string[]\n}\n\nexport interface FlowNodeDataSchema {\n  inputSchema: FlowDataSchema | undefined\n  outputSchema: FlowDataSchema | undefined\n  dataSourceSchema: FlowDataSchema | undefined\n}\n\n// export interface FlowDataMapping {\n//   toField: string\n//   mappingType: 'direct' | 'expression'\n//   fromFields: { nodeId: string; field: string }[] // ⬅ 명확한 데이터 출처 명시\n//   expression?: string\n// }\n\nexport interface FlowEntityModel {\n  id: string\n  type: string\n  subtype?: string\n  label?: string\n  options?: { [key: string]: any }\n}\n\nexport interface FlowEntity extends FlowEntityModel {\n  optionsSpec: PropertySpec[]\n  selected: boolean\n  update: (model: Partial<FlowEntityModel>) => void\n  updateOptions: (options: { [key: string]: any }) => void\n}\n\n/** 앵커 타입 */\nexport interface AnchorModel extends FlowEntityModel {\n  type: 'in' | 'out'\n  pos: { x: number; y: number }\n  angle?: number\n  weight?: number\n}\n\nexport interface Anchor extends AnchorModel {\n  node: FlowNode\n  render(): SVGTemplateResult\n}\n\n/** 플로우 노드 */\nexport interface FlowNodeModel extends FlowEntityModel, FlowNodeDataSchema {\n  pos: { x: number; y: number }\n  size: { w: number; h: number }\n  anchorsOption?: { id: string; [key: string]: any }[]\n}\n\nexport interface FlowNode extends FlowEntity, FlowNodeModel {\n  anchors: Anchor[]\n  anchorModels: AnchorModel[]\n  findAnchor(id: string): Anchor | undefined\n  render(): SVGTemplateResult\n  renderNode(): SVGTemplateResult\n}\n\nexport interface AnchorPointer {\n  nodeId: string\n  anchorId: string\n}\n\n/** 플로우 엣지 */\nexport interface FlowEdgeModel extends FlowEntityModel {\n  type: string\n  from: AnchorPointer\n  to: AnchorPointer\n  weight?: number\n  dataMappings: Mapping[]\n}\n\nexport interface FlowEdge extends FlowEntity, FlowEdgeModel {\n  fromAnchor?: Anchor\n  toAnchor?: Anchor\n  render(): SVGTemplateResult\n}\n\nexport type EditorMode = 'edit' | 'debug'\n\nexport type FlowModel = { nodes: FlowNodeModel[]; edges: FlowEdgeModel[] }\n\nexport type FlowNodeImplementation = new (...args: any[]) => FlowNode\n\nexport type TaskType = {\n  name: string\n  description: string | null\n  help: string | null\n  parameterSpec: PropertySpec[]\n}\n"]}

package/dist/stories/ox-flow-editor.stories.js

@@ -108,7 +108,7 @@ Standard.args = {
             },
             {
                 id: 'edge4',
-                from: { nodeId: 'decision-1', anchorId: 'no-2' },
+                from: { nodeId: 'decision-1', anchorId: 'no' },
                 to: { nodeId: 'task-3', anchorId: 'in' },
                 label: 'No',
                 weight: 1

package/dist/stories/ox-flow-editor.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-flow-editor.stories.js","sourceRoot":"","sources":["../../stories/ox-flow-editor.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/ox-flow-editor.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FlowModel } from '../src/types.js'\nimport availableNodeTypes from '../src/nodes/index.js'\n\nexport default {\n  title: 'ox-flow-editor',\n  component: 'ox-flow-editor',\n  argTypes: {\n    model: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  model: object\n}\n\nconst Template: Story<ArgTypes> = ({ model }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    ox-flow-editor {\n      width: 100%;\n      height: 1200px;\n      display: flex;\n    }\n  </style>\n\n  <ox-flow-editor .availableNodeTypes=${availableNodeTypes} .model=${model as FlowModel}></ox-flow-editor>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  model: {\n    nodes: [],\n    edges: []\n  }\n}\n\nexport const Standard = Template.bind({})\nStandard.args = {\n  model: {\n    nodes: [\n      {\n        id: 'start-1',\n        type: 'start',\n        label: 'Start',\n        pos: { x: 200, y: 100 }\n      },\n      {\n        id: 'task-1',\n        type: 'task',\n        label: 'Task',\n        pos: { x: 200, y: 250 }\n      },\n      {\n        id: 'decision-1',\n        type: 'decision',\n        label: 'Decision',\n        pos: { x: 200, y: 400 }\n      },\n      {\n        id: 'task-2',\n        type: 'task',\n        label: 'Yes Task',\n        pos: { x: 200, y: 550 }\n      },\n      {\n        id: 'task-3',\n        type: 'task',\n        label: 'No Task',\n        pos: { x: 360, y: 550 }\n      },\n      {\n        id: 'end-1',\n        type: 'end',\n        label: 'End',\n        pos: { x: 200, y: 700 }\n      }\n    ],\n    edges: [\n      {\n        id: 'edge1',\n        from: { nodeId: 'start-1', anchorId: 'out' },\n        to: { nodeId: 'task-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge2',\n        from: { nodeId: 'task-1', anchorId: 'out' },\n        to: { nodeId: 'decision-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge3',\n        from: { nodeId: 'decision-1', anchorId: 'yes' },\n        to: { nodeId: 'task-2', anchorId: 'in' },\n        label: 'Yes',\n        weight: 2\n      },\n      {\n        id: 'edge4',\n        from: { nodeId: 'decision-1', anchorId: 'no-2' },\n        to: { nodeId: 'task-3', anchorId: 'in' },\n        label: 'No',\n        weight: 1\n      },\n      {\n        id: 'edge5',\n        from: { nodeId: 'task-2', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge6',\n        from: { nodeId: 'task-3', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      }\n    ]\n  }\n}\n\nexport const Select = Template.bind({})\nSelect.args = {\n  model: {\n    nodes: [\n      {\n        id: 'start-1',\n        type: 'start',\n        label: 'Start',\n        pos: { x: 450, y: 100 }\n      },\n      {\n        id: 'task-0',\n        type: 'task',\n        label: 'Task',\n        pos: { x: 450, y: 250 }\n      },\n      {\n        id: 'select-1',\n        type: 'select',\n        label: 'Select',\n        options: {\n          outputCount: 4\n        },\n        pos: { x: 450, y: 400 }\n      },\n      {\n        id: 'task-1',\n        type: 'task',\n        label: 'Task 1',\n        pos: { x: 220, y: 550 }\n      },\n      {\n        id: 'task-2',\n        type: 'task',\n        label: 'Task 2',\n        pos: { x: 370, y: 550 }\n      },\n      {\n        id: 'task-3',\n        type: 'task',\n        label: 'Task 3',\n        pos: { x: 520, y: 550 }\n      },\n      {\n        id: 'task-4',\n        type: 'task',\n        label: 'Task 4',\n        pos: { x: 670, y: 550 }\n      },\n      {\n        id: 'end-1',\n        type: 'end',\n        label: 'End',\n        pos: { x: 450, y: 700 }\n      }\n    ],\n    edges: [\n      {\n        id: 'edge1',\n        from: { nodeId: 'start-1', anchorId: 'out' },\n        to: { nodeId: 'task-0', anchorId: 'in' }\n      },\n      {\n        id: 'edge2',\n        from: { nodeId: 'task-0', anchorId: 'out' },\n        to: { nodeId: 'select-1', anchorId: 'in' },\n        label: 'case 1',\n        weight: 3\n      },\n      {\n        id: 'edge3',\n        from: { nodeId: 'select-1', anchorId: 'out-1' },\n        to: { nodeId: 'task-1', anchorId: 'in' },\n        label: 'case 1',\n        weight: 4\n      },\n      {\n        id: 'edge4',\n        from: { nodeId: 'select-1', anchorId: 'out-2' },\n        to: { nodeId: 'task-2', anchorId: 'in' },\n        label: 'case 2',\n        weight: 3\n      },\n      {\n        id: 'edge5',\n        from: { nodeId: 'select-1', anchorId: 'out-3' },\n        to: { nodeId: 'task-3', anchorId: 'in' },\n        label: 'case 3',\n        weight: 2\n      },\n      {\n        id: 'edge6',\n        from: { nodeId: 'select-1', anchorId: 'out-4' },\n        to: { nodeId: 'task-4', anchorId: 'in' },\n        label: 'case 4',\n        weight: 1\n      },\n      {\n        id: 'edge7',\n        from: { nodeId: 'task-1', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge8',\n        from: { nodeId: 'task-2', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge9',\n        from: { nodeId: 'task-3', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge10',\n        from: { nodeId: 'task-4', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"ox-flow-editor.stories.js","sourceRoot":"","sources":["../../stories/ox-flow-editor.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/ox-flow-editor.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FlowModel } from '../src/types.js'\nimport availableNodeTypes from '../src/nodes/index.js'\n\nexport default {\n  title: 'ox-flow-editor',\n  component: 'ox-flow-editor',\n  argTypes: {\n    model: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  model: object\n}\n\nconst Template: Story<ArgTypes> = ({ model }: ArgTypes) => html`\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n  <style>\n    ox-flow-editor {\n      width: 100%;\n      height: 1200px;\n      display: flex;\n    }\n  </style>\n\n  <ox-flow-editor .availableNodeTypes=${availableNodeTypes} .model=${model as FlowModel}></ox-flow-editor>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  model: {\n    nodes: [],\n    edges: []\n  }\n}\n\nexport const Standard = Template.bind({})\nStandard.args = {\n  model: {\n    nodes: [\n      {\n        id: 'start-1',\n        type: 'start',\n        label: 'Start',\n        pos: { x: 200, y: 100 }\n      },\n      {\n        id: 'task-1',\n        type: 'task',\n        label: 'Task',\n        pos: { x: 200, y: 250 }\n      },\n      {\n        id: 'decision-1',\n        type: 'decision',\n        label: 'Decision',\n        pos: { x: 200, y: 400 }\n      },\n      {\n        id: 'task-2',\n        type: 'task',\n        label: 'Yes Task',\n        pos: { x: 200, y: 550 }\n      },\n      {\n        id: 'task-3',\n        type: 'task',\n        label: 'No Task',\n        pos: { x: 360, y: 550 }\n      },\n      {\n        id: 'end-1',\n        type: 'end',\n        label: 'End',\n        pos: { x: 200, y: 700 }\n      }\n    ],\n    edges: [\n      {\n        id: 'edge1',\n        from: { nodeId: 'start-1', anchorId: 'out' },\n        to: { nodeId: 'task-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge2',\n        from: { nodeId: 'task-1', anchorId: 'out' },\n        to: { nodeId: 'decision-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge3',\n        from: { nodeId: 'decision-1', anchorId: 'yes' },\n        to: { nodeId: 'task-2', anchorId: 'in' },\n        label: 'Yes',\n        weight: 2\n      },\n      {\n        id: 'edge4',\n        from: { nodeId: 'decision-1', anchorId: 'no' },\n        to: { nodeId: 'task-3', anchorId: 'in' },\n        label: 'No',\n        weight: 1\n      },\n      {\n        id: 'edge5',\n        from: { nodeId: 'task-2', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge6',\n        from: { nodeId: 'task-3', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      }\n    ]\n  }\n}\n\nexport const Select = Template.bind({})\nSelect.args = {\n  model: {\n    nodes: [\n      {\n        id: 'start-1',\n        type: 'start',\n        label: 'Start',\n        pos: { x: 450, y: 100 }\n      },\n      {\n        id: 'task-0',\n        type: 'task',\n        label: 'Task',\n        pos: { x: 450, y: 250 }\n      },\n      {\n        id: 'select-1',\n        type: 'select',\n        label: 'Select',\n        options: {\n          outputCount: 4\n        },\n        pos: { x: 450, y: 400 }\n      },\n      {\n        id: 'task-1',\n        type: 'task',\n        label: 'Task 1',\n        pos: { x: 220, y: 550 }\n      },\n      {\n        id: 'task-2',\n        type: 'task',\n        label: 'Task 2',\n        pos: { x: 370, y: 550 }\n      },\n      {\n        id: 'task-3',\n        type: 'task',\n        label: 'Task 3',\n        pos: { x: 520, y: 550 }\n      },\n      {\n        id: 'task-4',\n        type: 'task',\n        label: 'Task 4',\n        pos: { x: 670, y: 550 }\n      },\n      {\n        id: 'end-1',\n        type: 'end',\n        label: 'End',\n        pos: { x: 450, y: 700 }\n      }\n    ],\n    edges: [\n      {\n        id: 'edge1',\n        from: { nodeId: 'start-1', anchorId: 'out' },\n        to: { nodeId: 'task-0', anchorId: 'in' }\n      },\n      {\n        id: 'edge2',\n        from: { nodeId: 'task-0', anchorId: 'out' },\n        to: { nodeId: 'select-1', anchorId: 'in' },\n        label: 'case 1',\n        weight: 3\n      },\n      {\n        id: 'edge3',\n        from: { nodeId: 'select-1', anchorId: 'out-1' },\n        to: { nodeId: 'task-1', anchorId: 'in' },\n        label: 'case 1',\n        weight: 4\n      },\n      {\n        id: 'edge4',\n        from: { nodeId: 'select-1', anchorId: 'out-2' },\n        to: { nodeId: 'task-2', anchorId: 'in' },\n        label: 'case 2',\n        weight: 3\n      },\n      {\n        id: 'edge5',\n        from: { nodeId: 'select-1', anchorId: 'out-3' },\n        to: { nodeId: 'task-3', anchorId: 'in' },\n        label: 'case 3',\n        weight: 2\n      },\n      {\n        id: 'edge6',\n        from: { nodeId: 'select-1', anchorId: 'out-4' },\n        to: { nodeId: 'task-4', anchorId: 'in' },\n        label: 'case 4',\n        weight: 1\n      },\n      {\n        id: 'edge7',\n        from: { nodeId: 'task-1', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge8',\n        from: { nodeId: 'task-2', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge9',\n        from: { nodeId: 'task-3', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      },\n      {\n        id: 'edge10',\n        from: { nodeId: 'task-4', anchorId: 'out' },\n        to: { nodeId: 'end-1', anchorId: 'in' }\n      }\n    ]\n  }\n}\n"]}