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

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.55](https://github.com/hatiolab/operato/compare/v9.0.0-beta.54...v9.0.0-beta.55) (2025-03-05)
+
+
+### :bug: Bug Fix
+
+* add input for flow-anchor ([3e28ea9](https://github.com/hatiolab/operato/commit/3e28ea9b9505826c1cb72c0db13beae93e6a9820))
+
+
+
+## [9.0.0-beta.54](https://github.com/hatiolab/operato/compare/v9.0.0-beta.53...v9.0.0-beta.54) (2025-03-04)
+
+**Note:** Version bump only for package @operato/flow
+
+
+
+
+
 ## [9.0.0-beta.53](https://github.com/hatiolab/operato/compare/v9.0.0-beta.52...v9.0.0-beta.53) (2025-03-04)
 
 **Note:** Version bump only for package @operato/flow

package/dist/src/base/flow-node-abstract.d.ts

@@ -8,7 +8,7 @@ export declare abstract class FlowNodeAbstract implements FlowNode {
     abstract renderNode(): SVGTemplateResult;
     abstract get anchorModels(): AnchorModel[];
     private _selected;
-    private model?;
+    protected model?: FlowNodeModel;
     render(): SVGTemplateResult;
     constructor(model: FlowNodeModel);
     update(model: Partial<FlowNodeModel>): void;
@@ -37,8 +37,13 @@ export declare abstract class FlowNodeAbstract implements FlowNode {
     get options(): {
         [key: string]: any;
     } | undefined;
+    get anchorsOption(): {
+        id: string;
+        [key: string]: any;
+    }[];
     get anchors(): Anchor[];
     get selected(): boolean;
     set selected(selected: boolean);
     findAnchor(id: string): Anchor | undefined;
+    applyAnchorsOption(defaultAnchorModel: AnchorModel): AnchorModel;
 }

package/dist/src/base/flow-node-abstract.js

@@ -128,6 +128,9 @@ export class FlowNodeAbstract {
     get options() {
         return this.model.options;
     }
+    get anchorsOption() {
+        return this.model.anchorsOption || [];
+    }
     get anchors() {
         return (this.anchorModels || []).map(model => new AnchorInstance(model, this));
     }
@@ -140,5 +143,57 @@ export class FlowNodeAbstract {
     findAnchor(id) {
         return this.anchors.find(anchor => anchor.id == id);
     }
+    applyAnchorsOption(defaultAnchorModel) {
+        const { id, type } = defaultAnchorModel;
+        const anchorOption = this.anchorsOption.find(anchorOption => anchorOption.id == id);
+        if (!anchorOption || !('angle' in anchorOption)) {
+            return {
+                ...defaultAnchorModel,
+                ...anchorOption
+            };
+        }
+        let { angle } = anchorOption;
+        const { w, h } = this.size;
+        let override;
+        if (type == 'in') {
+            angle = (angle + 360) % 360;
+            switch (angle) {
+                case 0:
+                    override = { pos: { x: w / 2, y: 0 }, angle, weight: 3 };
+                    break;
+                case 90:
+                    override = { pos: { x: 0, y: h / 2 }, angle, weight: 2 };
+                    break;
+                case 180:
+                    override = { pos: { x: -w / 2, y: 0 }, angle, weight: 1 };
+                    break;
+                case 270:
+                default:
+                    override = { pos: { x: 0, y: -h / 2 }, angle, weight: 2 };
+            }
+        }
+        else {
+            angle = (angle + 360) % 360;
+            switch (angle) {
+                case 0:
+                    override = { pos: { x: w / 2, y: 0 }, angle, weight: 3 };
+                    break;
+                case 90:
+                    override = { pos: { x: 0, y: h / 2 }, angle, weight: 2 };
+                    break;
+                case 180:
+                    override = { pos: { x: -w / 2, y: 0 }, angle, weight: 1 };
+                    break;
+                case 270:
+                default:
+                    override = { pos: { x: 0, y: -h / 2 }, angle, weight: 2 };
+            }
+        }
+        return {
+            ...defaultAnchorModel,
+            ...anchorOption,
+            ...override
+        };
+    }
 }
 //# sourceMappingURL=flow-node-abstract.js.map

package/dist/src/base/flow-node-abstract.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-node-abstract.js","sourceRoot":"","sources":["../../../src/base/flow-node-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, svg, CSSResult, SVGTemplateResult, LitElement } from 'lit'\n\nimport { FlowNode, Anchor, AnchorModel, FlowNodeModel, FlowDataSchema } from '../types'\nimport { AnchorInstance } from './anchor-instance'\nimport { PropertySpec } from '@operato/property-editor'\n\n// Note!! Since this class is not a LitElement, I have kept the implementation minimal.\nexport abstract class FlowNodeAbstract implements FlowNode {\n  public static get styles(): CSSResult {\n    return css`\n      g.node {\n        fill: #fff;\n        stroke: #000;\n        stroke-width: 1;\n        cursor: move;\n\n        --anchor-opacity: 0;\n        --node-stroke: #000;\n      }\n\n      g.node:hover,\n      g.node.selected {\n        --anchor-opacity: 1;\n        --node-stroke: #007bff;\n      }\n\n      g.node .node-outline {\n        stroke: var(--node-stroke);\n      }\n\n      g.node .node-label {\n        font-size: 12px;\n        user-select: none;\n        fill: #000;\n        stroke: #000;\n        stroke-width: 1;\n      }\n\n      .anchor,\n      .anchor-label {\n        fill: var(--node-stroke);\n        stroke: none;\n        stroke-width: 1;\n        cursor: pointer;\n        transition:\n          fill 0.2s ease,\n          opacity 0.2s ease;\n        opacity: var(--anchor-opacity, 0);\n      }\n\n      .anchor:hover {\n        stroke: var(--node-stroke);\n        fill: #fff;\n      }\n\n      .anchor-label {\n        font-size: 10px;\n        pointer-events: none;\n        user-select: none;\n      }\n    `\n  }\n\n  public static get commonOptionsSpec(): PropertySpec[] {\n    return []\n  }\n\n  abstract get type(): string\n  abstract renderNode(): SVGTemplateResult\n  abstract get anchorModels(): AnchorModel[]\n\n  private _selected: boolean = false\n\n  private model?: FlowNodeModel\n\n  render(): SVGTemplateResult {\n    const { id, pos, label, anchors } = this\n    const { x, y } = pos || { x: 0, y: 0 }\n\n    return svg`\n      <g class=\"node ${this.selected ? 'selected' : ''}\" data-id=\"${id}\" transform=\"translate(${x}, ${y})\">\n        ${this.renderNode()}\n\n        ${anchors!.map(anchor => anchor.render())}\n      </g>\n    `\n  }\n\n  constructor(model: FlowNodeModel) {\n    this.model = model\n  }\n\n  update(model: Partial<FlowNodeModel>) {\n    this.model = {\n      ...this.model,\n      ...model\n    } as any\n  }\n\n  updateOptions(options: { [key: string]: any }) {\n    this.model!.options = {\n      ...this.model!.options,\n      ...options\n    }\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get dataSourceSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get optionsSpec(): PropertySpec[] {\n    return FlowNodeAbstract.commonOptionsSpec\n  }\n\n  get id(): string {\n    return this.model!.id\n  }\n\n  get subtype(): string | undefined {\n    return this.model!.subtype\n  }\n\n  get label(): string {\n    return this.model!.label || ''\n  }\n\n  get pos(): { x: number; y: number } {\n    return this.model!.pos\n  }\n\n  set pos(pos: { x: number; y: number }) {\n    this.model!.pos = pos\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size\n  }\n\n  get options(): { [key: string]: any } | undefined {\n    return this.model!.options\n  }\n\n  get anchors(): Anchor[] {\n    return (this.anchorModels || []).map(model => new AnchorInstance(model, this))\n  }\n\n  get selected(): boolean {\n    return this._selected!\n  }\n\n  set selected(selected: boolean) {\n    this._selected = selected\n  }\n\n  findAnchor(id: string): Anchor | undefined {\n    return this.anchors.find(anchor => anchor.id == id)\n  }\n}\n"]}
+{"version":3,"file":"flow-node-abstract.js","sourceRoot":"","sources":["../../../src/base/flow-node-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, svg, CSSResult, SVGTemplateResult, LitElement } from 'lit'\n\nimport { FlowNode, Anchor, AnchorModel, FlowNodeModel, FlowDataSchema } from '../types'\nimport { AnchorInstance } from './anchor-instance'\nimport { PropertySpec } from '@operato/property-editor'\n\n// Note!! Since this class is not a LitElement, I have kept the implementation minimal.\nexport abstract class FlowNodeAbstract implements FlowNode {\n  public static get styles(): CSSResult {\n    return css`\n      g.node {\n        fill: #fff;\n        stroke: #000;\n        stroke-width: 1;\n        cursor: move;\n\n        --anchor-opacity: 0;\n        --node-stroke: #000;\n      }\n\n      g.node:hover,\n      g.node.selected {\n        --anchor-opacity: 1;\n        --node-stroke: #007bff;\n      }\n\n      g.node .node-outline {\n        stroke: var(--node-stroke);\n      }\n\n      g.node .node-label {\n        font-size: 12px;\n        user-select: none;\n        fill: #000;\n        stroke: #000;\n        stroke-width: 1;\n      }\n\n      .anchor,\n      .anchor-label {\n        fill: var(--node-stroke);\n        stroke: none;\n        stroke-width: 1;\n        cursor: pointer;\n        transition:\n          fill 0.2s ease,\n          opacity 0.2s ease;\n        opacity: var(--anchor-opacity, 0);\n      }\n\n      .anchor:hover {\n        stroke: var(--node-stroke);\n        fill: #fff;\n      }\n\n      .anchor-label {\n        font-size: 10px;\n        pointer-events: none;\n        user-select: none;\n      }\n    `\n  }\n\n  public static get commonOptionsSpec(): PropertySpec[] {\n    return []\n  }\n\n  abstract get type(): string\n  abstract renderNode(): SVGTemplateResult\n  abstract get anchorModels(): AnchorModel[]\n\n  private _selected: boolean = false\n\n  protected model?: FlowNodeModel\n\n  render(): SVGTemplateResult {\n    const { id, pos, label, anchors } = this\n    const { x, y } = pos || { x: 0, y: 0 }\n\n    return svg`\n      <g class=\"node ${this.selected ? 'selected' : ''}\" data-id=\"${id}\" transform=\"translate(${x}, ${y})\">\n        ${this.renderNode()}\n\n        ${anchors!.map(anchor => anchor.render())}\n      </g>\n    `\n  }\n\n  constructor(model: FlowNodeModel) {\n    this.model = model\n  }\n\n  update(model: Partial<FlowNodeModel>) {\n    this.model = {\n      ...this.model,\n      ...model\n    } as any\n  }\n\n  updateOptions(options: { [key: string]: any }) {\n    this.model!.options = {\n      ...this.model!.options,\n      ...options\n    }\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get dataSourceSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get optionsSpec(): PropertySpec[] {\n    return FlowNodeAbstract.commonOptionsSpec\n  }\n\n  get id(): string {\n    return this.model!.id\n  }\n\n  get subtype(): string | undefined {\n    return this.model!.subtype\n  }\n\n  get label(): string {\n    return this.model!.label || ''\n  }\n\n  get pos(): { x: number; y: number } {\n    return this.model!.pos\n  }\n\n  set pos(pos: { x: number; y: number }) {\n    this.model!.pos = pos\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size\n  }\n\n  get options(): { [key: string]: any } | undefined {\n    return this.model!.options\n  }\n\n  get anchorsOption(): { id: string; [key: string]: any }[] {\n    return this.model!.anchorsOption || []\n  }\n\n  get anchors(): Anchor[] {\n    return (this.anchorModels || []).map(model => new AnchorInstance(model, this))\n  }\n\n  get selected(): boolean {\n    return this._selected!\n  }\n\n  set selected(selected: boolean) {\n    this._selected = selected\n  }\n\n  findAnchor(id: string): Anchor | undefined {\n    return this.anchors.find(anchor => anchor.id == id)\n  }\n\n  applyAnchorsOption(defaultAnchorModel: AnchorModel): AnchorModel {\n    const { id, type } = defaultAnchorModel\n    const anchorOption = this.anchorsOption.find(anchorOption => anchorOption.id == id)\n\n    if (!anchorOption || !('angle' in anchorOption)) {\n      return {\n        ...defaultAnchorModel,\n        ...anchorOption\n      }\n    }\n\n    let { angle } = anchorOption\n\n    const { w, h } = this.size\n    let override: Partial<AnchorModel>\n\n    if (type == 'in') {\n      angle = (angle + 360) % 360\n\n      switch (angle) {\n        case 0:\n          override = { pos: { x: w / 2, y: 0 }, angle, weight: 3 }\n          break\n        case 90:\n          override = { pos: { x: 0, y: h / 2 }, angle, weight: 2 }\n          break\n        case 180:\n          override = { pos: { x: -w / 2, y: 0 }, angle, weight: 1 }\n          break\n        case 270:\n        default:\n          override = { pos: { x: 0, y: -h / 2 }, angle, weight: 2 }\n      }\n    } else {\n      angle = (angle + 360) % 360\n\n      switch (angle) {\n        case 0:\n          override = { pos: { x: w / 2, y: 0 }, angle, weight: 3 }\n          break\n        case 90:\n          override = { pos: { x: 0, y: h / 2 }, angle, weight: 2 }\n          break\n        case 180:\n          override = { pos: { x: -w / 2, y: 0 }, angle, weight: 1 }\n          break\n        case 270:\n        default:\n          override = { pos: { x: 0, y: -h / 2 }, angle, weight: 2 }\n      }\n    }\n\n    return {\n      ...defaultAnchorModel,\n      ...anchorOption,\n      ...override\n    }\n  }\n}\n"]}

package/dist/src/components/flow-properties-panel.d.ts

@@ -1,4 +1,5 @@
 import './flow-options-builder.js';
+import '../property-editors/ox-input-anchors.js';
 import { LitElement } from 'lit';
 import { FlowNode } from '../types.js';
 import './property-panel/task-selection-popup.js';
@@ -17,4 +18,5 @@ export declare class FlowPropertiesPanel extends LitElement {
     private updateDataMapping;
     private updateLabel;
     private updateOptions;
+    private updateAnchorsOption;
 }

package/dist/src/components/flow-properties-panel.js

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import './flow-options-builder.js';
+import '../property-editors/ox-input-anchors.js';
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { consume } from '@lit/context';
@@ -60,7 +61,14 @@ let FlowPropertiesPanel = class FlowPropertiesPanel extends LitElement {
               ${entity.subtype ? entity.subtype : 'Map Data'}
             </div>
           `
-            : nothing}
+            : html `
+            <label>Anchors Option</label>
+            <ox-input-anchors
+              class="anchors-option"
+              .value=${entity.anchorModels}
+              @change=${this.updateAnchorsOption}
+            ></ox-input-anchors>
+          `}
     `;
     }
     connectedCallback() {
@@ -150,6 +158,18 @@ let FlowPropertiesPanel = class FlowPropertiesPanel extends LitElement {
         const entity = this.flowContext.selected;
         this.flowEditContext.updateOptions(entity, changes);
     }
+    updateAnchorsOption(e) {
+        var _a;
+        if (!((_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.selected)) {
+            return;
+        }
+        const anchors = e.detail;
+        const anchorsOption = anchors.map(({ id, angle }) => {
+            return { id, angle };
+        });
+        const entity = this.flowContext.selected;
+        this.flowEditContext.updateEntity(entity, { anchorsOption });
+    }
 };
 FlowPropertiesPanel.styles = css `
     :host {

package/dist/src/components/flow-properties-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"flow-properties-panel.js","sourceRoot":"","sources":["../../../src/components/flow-properties-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import './flow-options-builder.js'\n\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { OxPopup } from '@operato/popup'\nimport { flowContext, FlowContextType } from '../context/flow-context.js'\nimport { flowEditContext, FlowEditContextType } from '../context/flow-edit-context.js'\nimport { FlowEdge, FlowEdgeModel, FlowEntityModel, FlowNode, TaskType } from '../types.js'\n\nimport './property-panel/task-selection-popup.js'\nimport './property-panel/data-mapper-popup.js'\nimport { Mapping } from '@operato/data-mapper'\n\n@customElement('flow-properties-panel')\nexport class FlowPropertiesPanel extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n      box-sizing: border-box;\n      overflow-y: auto;\n    }\n\n    .field {\n      display: flex;\n      flex-direction: column;\n      margin-bottom: 12px;\n    }\n\n    label {\n      font-weight: bold;\n      margin-bottom: 4px;\n    }\n\n    select,\n    input,\n    textarea {\n      padding: 6px;\n      font-size: 14px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n    }\n\n    .task-selector,\n    .data-mapper {\n      cursor: pointer;\n      background-color: #f8f9fa;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      text-align: center;\n      font-weight: bold;\n    }\n\n    .task-selector:hover,\n    .data-mapper:hover {\n      background-color: #e2e6ea;\n    }\n  `\n\n  @consume({ context: flowContext, subscribe: true })\n  private flowContext?: FlowContextType\n\n  @consume({ context: flowEditContext, subscribe: true })\n  private flowEditContext?: FlowEditContextType\n\n  @property({ type: Object }) selectedNode: FlowNode | null = null\n\n  render() {\n    const entity = this.flowContext?.selected\n\n    if (!entity) {\n      return html`<p>Select a node or a edge to edit properties.</p>`\n    }\n\n    const { type, label = '', options = {}, optionsSpec } = entity\n\n    return html`\n      <h3>${type}</h3>\n\n      <div class=\"field\">\n        <label>Label</label>\n        <input type=\"text\" .value=${label} @change=${this.updateLabel} />\n      </div>\n\n      <!-- 태스크 노드의 경우, 태스크 선택 -->\n      ${entity?.type === 'task'\n        ? html`\n            <div class=\"field\">\n              <label>Task Type</label>\n              <div class=\"task-selector\" @click=${this.openTaskSelectionPopup}>\n                ${entity.subtype ? entity.subtype : 'Select a Task'}\n              </div>\n            </div>\n\n            ${entity.subtype\n              ? html`\n                  <flow-options-builder\n                    .value=${options}\n                    .props=${this.flowContext!.getTaskType(entity.subtype).parameterSpec}\n                    @property-change=${this.updateOptions}\n                  >\n                  </flow-options-builder>\n                `\n              : nothing}\n          `\n        : html`\n            <flow-options-builder .value=${options} .props=${optionsSpec} @property-change=${this.updateOptions}>\n            </flow-options-builder>\n          `}\n      ${entity?.type === 'edge'\n        ? html`\n            <label>Data Mapper</label>\n            <div class=\"data-mapper\" @click=${this.openDataMapperPopup}>\n              ${entity.subtype ? entity.subtype : 'Map Data'}\n            </div>\n          `\n        : nothing}\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      e.stopPropagation()\n    })\n  }\n\n  /** 📌 팝업 열기 */\n  private openTaskSelectionPopup() {\n    const popup = OxPopup.open({\n      template: html`\n        <task-selection-popup\n          @task-selected=${(e: CustomEvent) => {\n            const { name } = e.detail as TaskType\n            this.updateTaskSubyype(name)\n            popup.close()\n          }}\n        ></task-selection-popup>\n      `,\n      style: 'width: 80vw; height: 80vh;',\n      preventCloseOnBlur: true,\n      backdrop: true\n    })\n  }\n\n  private openDataMapperPopup() {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n\n    const popup = OxPopup.open({\n      template: html`\n        <data-mapper-popup\n          .nodes=${this.flowContext.nodes}\n          .edge=${entity as FlowEdge}\n          @change=${(e: CustomEvent) => {\n            e.stopPropagation()\n            this.updateDataMapping(e.detail)\n            popup.close()\n          }}\n        ></data-mapper-popup>\n      `,\n      style: 'width: 80vw; height: 80vh;',\n      preventCloseOnBlur: true,\n      backdrop: true\n    })\n  }\n\n  private updateTaskSubyype(subtype: string) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n\n    const model: Partial<FlowEntityModel> = { subtype }\n    if (!entity.label || entity.label == entity.subtype) {\n      model.label = subtype\n    }\n\n    this.flowEditContext!.updateEntity(entity, model)\n    this.requestUpdate()\n  }\n\n  private updateDataMapping(dataMappings: Mapping[]) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n\n    const model: Partial<FlowEdgeModel> = { dataMappings }\n\n    this.flowEditContext!.updateEntity(entity, model)\n    this.requestUpdate()\n  }\n\n  private updateLabel(e: Event) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n    const label = (e.target as HTMLInputElement).value\n\n    this.flowEditContext!.updateEntity(entity, { label })\n  }\n\n  private updateOptions(e: Event) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const changes = (e as CustomEvent).detail\n    const entity = this.flowContext.selected\n\n    this.flowEditContext!.updateOptions(entity, changes)\n  }\n}\n"]}
+{"version":3,"file":"flow-properties-panel.js","sourceRoot":"","sources":["../../../src/components/flow-properties-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import './flow-options-builder.js'\nimport '../property-editors/ox-input-anchors.js'\n\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { OxPopup } from '@operato/popup'\nimport { flowContext, FlowContextType } from '../context/flow-context.js'\nimport { flowEditContext, FlowEditContextType } from '../context/flow-edit-context.js'\nimport { Anchor, FlowEdge, FlowEdgeModel, FlowEntityModel, FlowNode, TaskType } from '../types.js'\n\nimport './property-panel/task-selection-popup.js'\nimport './property-panel/data-mapper-popup.js'\nimport { Mapping } from '@operato/data-mapper'\n\n@customElement('flow-properties-panel')\nexport class FlowPropertiesPanel extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      padding: 10px;\n      box-sizing: border-box;\n      overflow-y: auto;\n    }\n\n    .field {\n      display: flex;\n      flex-direction: column;\n      margin-bottom: 12px;\n    }\n\n    label {\n      font-weight: bold;\n      margin-bottom: 4px;\n    }\n\n    select,\n    input,\n    textarea {\n      padding: 6px;\n      font-size: 14px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n    }\n\n    .task-selector,\n    .data-mapper {\n      cursor: pointer;\n      background-color: #f8f9fa;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      text-align: center;\n      font-weight: bold;\n    }\n\n    .task-selector:hover,\n    .data-mapper:hover {\n      background-color: #e2e6ea;\n    }\n  `\n\n  @consume({ context: flowContext, subscribe: true })\n  private flowContext?: FlowContextType\n\n  @consume({ context: flowEditContext, subscribe: true })\n  private flowEditContext?: FlowEditContextType\n\n  @property({ type: Object }) selectedNode: FlowNode | null = null\n\n  render() {\n    const entity = this.flowContext?.selected\n\n    if (!entity) {\n      return html`<p>Select a node or a edge to edit properties.</p>`\n    }\n\n    const { type, label = '', options = {}, optionsSpec } = entity\n\n    return html`\n      <h3>${type}</h3>\n\n      <div class=\"field\">\n        <label>Label</label>\n        <input type=\"text\" .value=${label} @change=${this.updateLabel} />\n      </div>\n\n      <!-- 태스크 노드의 경우, 태스크 선택 -->\n      ${entity?.type === 'task'\n        ? html`\n            <div class=\"field\">\n              <label>Task Type</label>\n              <div class=\"task-selector\" @click=${this.openTaskSelectionPopup}>\n                ${entity.subtype ? entity.subtype : 'Select a Task'}\n              </div>\n            </div>\n\n            ${entity.subtype\n              ? html`\n                  <flow-options-builder\n                    .value=${options}\n                    .props=${this.flowContext!.getTaskType(entity.subtype).parameterSpec}\n                    @property-change=${this.updateOptions}\n                  >\n                  </flow-options-builder>\n                `\n              : nothing}\n          `\n        : html`\n            <flow-options-builder .value=${options} .props=${optionsSpec} @property-change=${this.updateOptions}>\n            </flow-options-builder>\n          `}\n      ${entity?.type === 'edge'\n        ? html`\n            <label>Data Mapper</label>\n            <div class=\"data-mapper\" @click=${this.openDataMapperPopup}>\n              ${entity.subtype ? entity.subtype : 'Map Data'}\n            </div>\n          `\n        : html`\n            <label>Anchors Option</label>\n            <ox-input-anchors\n              class=\"anchors-option\"\n              .value=${(entity as FlowNode).anchorModels!}\n              @change=${this.updateAnchorsOption}\n            ></ox-input-anchors>\n          `}\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      e.stopPropagation()\n    })\n  }\n\n  /** 📌 팝업 열기 */\n  private openTaskSelectionPopup() {\n    const popup = OxPopup.open({\n      template: html`\n        <task-selection-popup\n          @task-selected=${(e: CustomEvent) => {\n            const { name } = e.detail as TaskType\n            this.updateTaskSubyype(name)\n            popup.close()\n          }}\n        ></task-selection-popup>\n      `,\n      style: 'width: 80vw; height: 80vh;',\n      preventCloseOnBlur: true,\n      backdrop: true\n    })\n  }\n\n  private openDataMapperPopup() {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n\n    const popup = OxPopup.open({\n      template: html`\n        <data-mapper-popup\n          .nodes=${this.flowContext.nodes}\n          .edge=${entity as FlowEdge}\n          @change=${(e: CustomEvent) => {\n            e.stopPropagation()\n            this.updateDataMapping(e.detail)\n            popup.close()\n          }}\n        ></data-mapper-popup>\n      `,\n      style: 'width: 80vw; height: 80vh;',\n      preventCloseOnBlur: true,\n      backdrop: true\n    })\n  }\n\n  private updateTaskSubyype(subtype: string) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n\n    const model: Partial<FlowEntityModel> = { subtype }\n    if (!entity.label || entity.label == entity.subtype) {\n      model.label = subtype\n    }\n\n    this.flowEditContext!.updateEntity(entity, model)\n    this.requestUpdate()\n  }\n\n  private updateDataMapping(dataMappings: Mapping[]) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n\n    const model: Partial<FlowEdgeModel> = { dataMappings }\n\n    this.flowEditContext!.updateEntity(entity, model)\n    this.requestUpdate()\n  }\n\n  private updateLabel(e: Event) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const entity = this.flowContext.selected\n    const label = (e.target as HTMLInputElement).value\n\n    this.flowEditContext!.updateEntity(entity, { label })\n  }\n\n  private updateOptions(e: Event) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const changes = (e as CustomEvent).detail\n    const entity = this.flowContext.selected\n\n    this.flowEditContext!.updateOptions(entity, changes)\n  }\n\n  private updateAnchorsOption(e: Event) {\n    if (!this.flowContext?.selected) {\n      return\n    }\n\n    const anchors = (e as CustomEvent).detail as Anchor[]\n    const anchorsOption = anchors.map(({ id, angle }) => {\n      return { id, angle }\n    })\n    const entity = this.flowContext.selected\n\n    this.flowEditContext!.updateEntity(entity, { anchorsOption } as Partial<FlowEntityModel>)\n  }\n}\n"]}

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

@@ -7,6 +7,10 @@ export declare class Decision extends FlowNodeAbstract {
     get inputSchema(): FlowDataSchema;
     /** Output Data Schema */
     get outputSchema(): FlowDataSchema;
+    get size(): {
+        w: number;
+        h: number;
+    };
     renderNode(): SVGTemplateResult;
     get anchorModels(): AnchorModel[];
 }

package/dist/src/nodes/decision.js

@@ -21,21 +21,23 @@ export class Decision extends FlowNodeAbstract {
             properties: {}
         };
     }
+    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;
         return svg `
       <polygon points="0,-${h / 2} ${w / 2},0 0,${h / 2} -${w / 2},0" class="node-outline" fill="#fff3cd" stroke-width="1"/>
       <text class="node-label" x="0" y="5" text-anchor="middle">${this.label}</text>
     `;
     }
     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: 'no-1', type: 'out', label: 'No', pos: { x: -w / 2, y: 0 }, angle: 180, weight: 3 },
-            { id: 'yes', type: 'out', label: 'Yes', pos: { x: 0, y: h / 2 }, weight: 2 },
-            { id: 'no-2', type: 'out', label: 'No', pos: { x: w / 2, y: 0 }, angle: 0, weight: 1 }
-        ];
+            { id: 'in', type: 'in', pos: { x: 0, y: -h / 2 }, angle: 270 },
+            { id: 'yes', type: 'out', label: 'Yes', pos: { x: 0, y: h / 2 }, angle: 90, weight: 2 },
+            { id: 'no', type: 'out', label: 'No', pos: { x: w / 2, y: 0 }, angle: 0, weight: 1 }
+        ].map(anchorModel => this.applyAnchorsOption(anchorModel));
     }
 }
 //# sourceMappingURL=decision.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"decision.js","sourceRoot":"","sources":["../../../src/nodes/decision.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,QAAS,SAAQ,gBAAgB;IAC5C,IAAI,IAAI;QACN,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,wBAAwB;IACxB,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;aACnC;YACD,QAAQ,EAAE,CAAC,eAAe,CAAC;SAC5B,CAAA;IACH,CAAC;IAED,yBAAyB;IACzB,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,EAAE;SACf,CAAA;IACH,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;QAE/C,OAAO,GAAG,CAAA;4BACc,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;kEACC,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,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;YACzF,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YAC5E,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;SACvF,CAAA;IACH,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class Decision extends FlowNodeAbstract {\n  get type() {\n    return 'decision'\n  }\n\n  /** Input Data Schema */\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        decisionValue: { type: 'boolean' }\n      },\n      required: ['decisionValue']\n    }\n  }\n\n  /** Output Data Schema */\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 120, h: 60 }\n\n    return svg`\n      <polygon points=\"0,-${h / 2} ${w / 2},0 0,${h / 2} -${w / 2},0\" class=\"node-outline\" fill=\"#fff3cd\" 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: 'no-1', type: 'out', label: 'No', pos: { x: -w / 2, y: 0 }, angle: 180, weight: 3 },\n      { id: 'yes', type: 'out', label: 'Yes', pos: { x: 0, y: h / 2 }, weight: 2 },\n      { id: 'no-2', type: 'out', label: 'No', pos: { x: w / 2, y: 0 }, angle: 0, weight: 1 }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"decision.js","sourceRoot":"","sources":["../../../src/nodes/decision.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,QAAS,SAAQ,gBAAgB;IAC5C,IAAI,IAAI;QACN,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,wBAAwB;IACxB,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;aACnC;YACD,QAAQ,EAAE,CAAC,eAAe,CAAC;SAC5B,CAAA;IACH,CAAC;IAED,yBAAyB;IACzB,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,EAAE;SACf,CAAA;IACH,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;QAE1B,OAAO,GAAG,CAAA;4BACc,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;kEACC,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,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACvF,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;SACrF,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, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class Decision extends FlowNodeAbstract {\n  get type() {\n    return 'decision'\n  }\n\n  /** Input Data Schema */\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        decisionValue: { type: 'boolean' }\n      },\n      required: ['decisionValue']\n    }\n  }\n\n  /** Output Data Schema */\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\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\n    return svg`\n      <polygon points=\"0,-${h / 2} ${w / 2},0 0,${h / 2} -${w / 2},0\" class=\"node-outline\" fill=\"#fff3cd\" 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: 'yes', type: 'out', label: 'Yes', pos: { x: 0, y: h / 2 }, angle: 90, weight: 2 },\n      { id: 'no', type: 'out', label: 'No', pos: { x: w / 2, y: 0 }, angle: 0, weight: 1 }\n    ].map(anchorModel => this.applyAnchorsOption(anchorModel as AnchorModel))\n  }\n}\n"]}

package/dist/src/nodes/end-event.d.ts

@@ -5,6 +5,10 @@ export declare class EndEvent extends FlowNodeAbstract {
     get type(): string;
     get inputSchema(): FlowDataSchema;
     get outputSchema(): FlowDataSchema;
+    get size(): {
+        w: number;
+        h: number;
+    };
     renderNode(): SVGTemplateResult;
     get anchorModels(): AnchorModel[];
 }

package/dist/src/nodes/end-event.js

@@ -28,8 +28,11 @@ export class EndEvent extends FlowNodeAbstract {
             required: ['result']
         };
     }
+    get size() {
+        return this.model.size || { w: 48, h: 48 };
+    }
     renderNode() {
-        const { w, h } = this.size || { w: 48, h: 48 };
+        const { w, h } = this.size;
         const radius = Math.min(w, h) / 2 - 2;
         return svg `
       <circle class="node-outline" cx="0" cy="0" r="${radius}" fill="#f8d7da" stroke="#000" stroke-width="4" />
@@ -38,7 +41,7 @@ export class EndEvent extends FlowNodeAbstract {
     `;
     }
     get anchorModels() {
-        return [{ id: 'in', type: 'in', pos: { x: 0, y: -24 } }];
+        return [{ id: 'in', type: 'in', pos: { x: 0, y: -24 }, angle: 270 }].map(anchorModel => this.applyAnchorsOption(anchorModel));
     }
 }
 //# sourceMappingURL=end-event.js.map

package/dist/src/nodes/end-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"end-event.js","sourceRoot":"","sources":["../../../src/nodes/end-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,QAAS,SAAQ,gBAAgB;IAC5C,IAAI,IAAI;QACN,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAErC,OAAO,GAAG,CAAA;sDACwC,MAAM;;kEAEM,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAC1D,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class EndEvent extends FlowNodeAbstract {\n  get type() {\n    return 'end'\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 48, h: 48 }\n    const radius = Math.min(w, h) / 2 - 2\n\n    return svg`\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${radius}\" fill=\"#f8d7da\" stroke=\"#000\" stroke-width=\"4\" />\n      \n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    return [{ id: 'in', type: 'in', pos: { x: 0, y: -24 } }]\n  }\n}\n"]}
+{"version":3,"file":"end-event.js","sourceRoot":"","sources":["../../../src/nodes/end-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,QAAS,SAAQ,gBAAgB;IAC5C,IAAI,IAAI;QACN,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAM,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;IAC7C,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAErC,OAAO,GAAG,CAAA;sDACwC,MAAM;;kEAEM,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CACrF,IAAI,CAAC,kBAAkB,CAAC,WAA0B,CAAC,CACpD,CAAA;IACH,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class EndEvent extends FlowNodeAbstract {\n  get type() {\n    return 'end'\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size || { w: 48, h: 48 }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size\n    const radius = Math.min(w, h) / 2 - 2\n\n    return svg`\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${radius}\" fill=\"#f8d7da\" stroke=\"#000\" stroke-width=\"4\" />\n      \n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    return [{ id: 'in', type: 'in', pos: { x: 0, y: -24 }, angle: 270 }].map(anchorModel =>\n      this.applyAnchorsOption(anchorModel as AnchorModel)\n    )\n  }\n}\n"]}

package/dist/src/nodes/intermediate-event.d.ts

@@ -5,6 +5,10 @@ export declare class IntermediateEvent extends FlowNodeAbstract {
     get type(): string;
     get inputSchema(): FlowDataSchema;
     get outputSchema(): FlowDataSchema;
+    get size(): {
+        w: number;
+        h: number;
+    };
     renderNode(): SVGTemplateResult;
     get anchorModels(): AnchorModel[];
 }

package/dist/src/nodes/intermediate-event.js

@@ -28,6 +28,9 @@ export class IntermediateEvent extends FlowNodeAbstract {
             required: ['result']
         };
     }
+    get size() {
+        return this.model.size || { w: 48, h: 48 };
+    }
     renderNode() {
         const { w, h } = this.size || { w: 48, h: 48 };
         const bigR = Math.min(w, h) / 2 - 1;
@@ -40,7 +43,10 @@ export class IntermediateEvent extends FlowNodeAbstract {
     `;
     }
     get anchorModels() {
-        return [{ id: 'in', type: 'in', pos: { x: 0, y: -24 } }];
+        return [
+            { id: 'in', type: 'in', pos: { x: 0, y: -24 }, angle: 270 },
+            { id: 'out', type: 'out', pos: { x: 0, y: 24 }, angle: 90 }
+        ].map(anchorModel => this.applyAnchorsOption(anchorModel));
     }
 }
 //# sourceMappingURL=intermediate-event.js.map

package/dist/src/nodes/intermediate-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"intermediate-event.js","sourceRoot":"","sources":["../../../src/nodes/intermediate-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,iBAAkB,SAAQ,gBAAgB;IACrD,IAAI,IAAI;QACN,OAAO,cAAc,CAAA;IACvB,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACnC,MAAM,MAAM,GAAG,IAAI,GAAG,GAAG,CAAA;QAEzB,OAAO,GAAG,CAAA;sDACwC,IAAI;sDACJ,MAAM;;kEAEM,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAC1D,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class IntermediateEvent extends FlowNodeAbstract {\n  get type() {\n    return 'intermediate'\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 48, h: 48 }\n    const bigR = Math.min(w, h) / 2 - 1\n    const smallR = bigR * 0.8\n\n    return svg`\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${bigR}\" fill=\"#f8d7da\" stroke=\"#000\" stroke-width=\"1\" />\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${smallR}\" fill=\"none\" stroke=\"#000\" stroke-width=\"1\" />\n      \n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    return [{ id: 'in', type: 'in', pos: { x: 0, y: -24 } }]\n  }\n}\n"]}
+{"version":3,"file":"intermediate-event.js","sourceRoot":"","sources":["../../../src/nodes/intermediate-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,iBAAkB,SAAQ,gBAAgB;IACrD,IAAI,IAAI;QACN,OAAO,cAAc,CAAA;IACvB,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,EAAE;iBACf;aACF;YACD,QAAQ,EAAE,CAAC,QAAQ,CAAC;SACrB,CAAA;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAM,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;IAC7C,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACnC,MAAM,MAAM,GAAG,IAAI,GAAG,GAAG,CAAA;QAEzB,OAAO,GAAG,CAAA;sDACwC,IAAI;sDACJ,MAAM;;kEAEM,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YAC3D,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;SAC5D,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, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class IntermediateEvent extends FlowNodeAbstract {\n  get type() {\n    return 'intermediate'\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        result: {\n          type: 'object',\n          properties: {}\n        }\n      },\n      required: ['result']\n    }\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size || { w: 48, h: 48 }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 48, h: 48 }\n    const bigR = Math.min(w, h) / 2 - 1\n    const smallR = bigR * 0.8\n\n    return svg`\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${bigR}\" fill=\"#f8d7da\" stroke=\"#000\" stroke-width=\"1\" />\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${smallR}\" fill=\"none\" stroke=\"#000\" stroke-width=\"1\" />\n      \n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    return [\n      { id: 'in', type: 'in', pos: { x: 0, y: -24 }, angle: 270 },\n      { id: 'out', type: 'out', pos: { x: 0, y: 24 }, angle: 90 }\n    ].map(anchorModel => this.applyAnchorsOption(anchorModel as AnchorModel))\n  }\n}\n"]}

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

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

package/dist/src/nodes/iterator.js

@@ -4,8 +4,11 @@ export class Iterator extends FlowNodeAbstract {
     get type() {
         return 'iterator';
     }
+    get size() {
+        return this.model.size || { w: 200, h: 500 };
+    }
     renderNode() {
-        const { w, h } = this.size || { w: 200, h: 500 };
+        const { w, h } = this.size;
         return svg `
       <rect class="node-outline" x="${-w / 2}" y="${-h / 2}" width="${w}" height="${h}" 
             fill="#f3f3f3" stroke="#000" stroke-dasharray="5,5" stroke-width="1.5" />
@@ -16,11 +19,11 @@ export class Iterator extends FlowNodeAbstract {
     `;
     }
     get anchorModels() {
-        const { h } = this.size || { h: 500 };
+        const { h } = this.size;
         return [
-            { id: 'in', type: 'in', pos: { x: 0, y: -(h !== null && h !== void 0 ? h : 500) / 2 } },
-            { id: 'out', type: 'out', pos: { x: 0, y: (h !== null && h !== void 0 ? h : 500) / 2 } }
-        ];
+            { id: 'in', type: 'in', pos: { x: 0, y: -(h !== null && h !== void 0 ? h : 500) / 2 }, angle: 270 },
+            { id: 'out', type: 'out', pos: { x: 0, y: (h !== null && h !== void 0 ? h : 500) / 2 }, angle: 90 }
+        ].map(anchorModel => this.applyAnchorsOption(anchorModel));
     }
 }
 //# sourceMappingURL=iterator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"iterator.js","sourceRoot":"","sources":["../../../src/nodes/iterator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,QAAS,SAAQ,gBAAgB;IAC5C,IAAI,IAAI;QACN,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAA;QAEhD,OAAO,GAAG,CAAA;sCACwB,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC;;;iBAGpE,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;;qFAEsC,IAAI,CAAC,KAAK;KAC1F,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAA;QAErC,OAAO;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE;YAC3D,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE;SAC7D,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 Iterator extends FlowNodeAbstract {\n  get type() {\n    return 'iterator'\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 200, h: 500 }\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${-w / 2}\" y=\"${-h / 2}\" width=\"${w}\" height=\"${h}\" \n            fill=\"#f3f3f3\" stroke=\"#000\" stroke-dasharray=\"5,5\" stroke-width=\"1.5\" />\n\n      <text x=\"${-w / 2 + 10}\" y=\"${-h / 2 + 15}\" font-size=\"12\" fill=\"#333\">🔁</text>\n\n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\" font-weight=\"bold\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    const { h } = this.size || { h: 500 }\n\n    return [\n      { id: 'in', type: 'in', pos: { x: 0, y: -(h ?? 500) / 2 } },\n      { id: 'out', type: 'out', pos: { x: 0, y: (h ?? 500) / 2 } }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"iterator.js","sourceRoot":"","sources":["../../../src/nodes/iterator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,QAAS,SAAQ,gBAAgB;IAC5C,IAAI,IAAI;QACN,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAM,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAA;IAC/C,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAE1B,OAAO,GAAG,CAAA;sCACwB,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC;;;iBAGpE,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;;qFAEsC,IAAI,CAAC,KAAK;KAC1F,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAEvB,OAAO;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YACvE,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;SACxE,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 Iterator extends FlowNodeAbstract {\n  get type() {\n    return 'iterator'\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size || { w: 200, h: 500 }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${-w / 2}\" y=\"${-h / 2}\" width=\"${w}\" height=\"${h}\" \n            fill=\"#f3f3f3\" stroke=\"#000\" stroke-dasharray=\"5,5\" stroke-width=\"1.5\" />\n\n      <text x=\"${-w / 2 + 10}\" y=\"${-h / 2 + 15}\" font-size=\"12\" fill=\"#333\">🔁</text>\n\n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\" font-weight=\"bold\">${this.label}</text>\n    `\n  }\n\n  get anchorModels(): AnchorModel[] {\n    const { h } = this.size\n\n    return [\n      { id: 'in', type: 'in', pos: { x: 0, y: -(h ?? 500) / 2 }, angle: 270 },\n      { id: 'out', type: 'out', pos: { x: 0, y: (h ?? 500) / 2 }, angle: 90 }\n    ].map(anchorModel => this.applyAnchorsOption(anchorModel as AnchorModel))\n  }\n}\n"]}

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

@@ -7,6 +7,10 @@ export declare class Select extends FlowNodeAbstract {
     get optionsSpec(): PropertySpec[];
     get inputSchema(): FlowDataSchema;
     get outputSchema(): FlowDataSchema;
+    get size(): {
+        w: number;
+        h: number;
+    };
     renderNode(): SVGTemplateResult;
     /** 기본 앵커 포인트 (input 1개, output 3개) */
     get anchorModels(): AnchorModel[];

package/dist/src/nodes/select.js

@@ -34,9 +34,12 @@ export class Select extends FlowNodeAbstract {
             required: ['selectionKey']
         };
     }
-    renderNode() {
+    get size() {
         const { outputCount } = this.options || { outputCount: 3 };
-        const { w, h } = this.size || { w: Math.max(MINWIDTH, outputCount * ANCHOR_SPACING), h: HEIGHT };
+        return { w: Math.max(MINWIDTH, outputCount * ANCHOR_SPACING), h: HEIGHT };
+    }
+    renderNode() {
+        const { w, h } = this.size;
         return svg `
       <rect class="node-outline" x="${-w / 2}" y="${-h / 2}" width="${w}" height="${h}" fill="#e2e3e5" stroke="#000" stroke-width="1" />
 
@@ -46,7 +49,7 @@ export class Select extends FlowNodeAbstract {
     /** 기본 앵커 포인트 (input 1개, output 3개) */
     get anchorModels() {
         const { outputCount } = this.options || { outputCount: 3 };
-        const { w, h } = this.size || { w: Math.max(MINWIDTH, outputCount * ANCHOR_SPACING), h: HEIGHT };
+        const { w, h } = this.size;
         const anchors = [{ id: 'in', type: 'in', pos: { x: 0, y: -h / 2 } }];
         const anchorSpacing = w / outputCount;
         const startOffsetX = (-(outputCount - 1) * anchorSpacing) / 2;

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/nodes/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\nimport { PropertySpec } from '@operato/property-editor'\n\nconst MINWIDTH = 160\nconst ANCHOR_SPACING = 80\nconst HEIGHT = 40\nexport class Select extends FlowNodeAbstract {\n  get type() {\n    return 'select'\n  }\n\n  get optionsSpec(): PropertySpec[] {\n    return [\n      {\n        type: 'number',\n        name: 'outputCount',\n        label: 'output-count'\n      }\n    ]\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        selectionKey: { type: 'string' }\n      },\n      required: ['selectionKey']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        selectionKey: { type: 'string' }\n      },\n      required: ['selectionKey']\n    }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { outputCount } = this.options || { outputCount: 3 }\n    const { w, h } = this.size || { w: Math.max(MINWIDTH, outputCount * ANCHOR_SPACING), h: HEIGHT }\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${-w / 2}\" y=\"${-h / 2}\" width=\"${w}\" height=\"${h}\" fill=\"#e2e3e5\" stroke=\"#000\" stroke-width=\"1\" />\n\n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  /** 기본 앵커 포인트 (input 1개, output 3개) */\n  get anchorModels(): AnchorModel[] {\n    const { outputCount } = this.options || { outputCount: 3 }\n    const { w, h } = this.size || { w: Math.max(MINWIDTH, outputCount * ANCHOR_SPACING), h: HEIGHT }\n\n    const anchors: AnchorModel[] = [{ id: 'in', type: 'in', pos: { x: 0, y: -h / 2 } }]\n\n    const anchorSpacing = w / outputCount\n    const startOffsetX = (-(outputCount - 1) * anchorSpacing) / 2\n\n    for (let i = 0; i < outputCount; i++) {\n      anchors.push({\n        id: `out-${i + 1}`,\n        type: 'out',\n        pos: {\n          x: startOffsetX + i * anchorSpacing,\n          y: h / 2\n        },\n        label: `case ${i + 1}`,\n        weight: outputCount - i\n      })\n    }\n\n    return anchors\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/nodes/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAGhE,MAAM,QAAQ,GAAG,GAAG,CAAA;AACpB,MAAM,cAAc,GAAG,EAAE,CAAA;AACzB,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IAC1C,IAAI,IAAI;QACN,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,cAAc;aACtB;SACF,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;aACjC;YACD,QAAQ,EAAE,CAAC,cAAc,CAAC;SAC3B,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;aACjC;YACD,QAAQ,EAAE,CAAC,cAAc,CAAC;SAC3B,CAAA;IACH,CAAC;IAED,IAAI,IAAI;QACN,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,CAAA;QAC1D,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,WAAW,GAAG,cAAc,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3E,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAE1B,OAAO,GAAG,CAAA;sCACwB,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC;;kEAEnB,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,sCAAsC;IACtC,IAAI,YAAY;QACd,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,CAAA;QAC1D,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAE1B,MAAM,OAAO,GAAkB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAA;QAEnF,MAAM,aAAa,GAAG,CAAC,GAAG,WAAW,CAAA;QACrC,MAAM,YAAY,GAAG,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;QAE7D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,OAAO,CAAC,IAAI,CAAC;gBACX,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE;gBAClB,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE;oBACH,CAAC,EAAE,YAAY,GAAG,CAAC,GAAG,aAAa;oBACnC,CAAC,EAAE,CAAC,GAAG,CAAC;iBACT;gBACD,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACtB,MAAM,EAAE,WAAW,GAAG,CAAC;aACxB,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,OAAO,CAAA;IAChB,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\nimport { PropertySpec } from '@operato/property-editor'\n\nconst MINWIDTH = 160\nconst ANCHOR_SPACING = 80\nconst HEIGHT = 40\nexport class Select extends FlowNodeAbstract {\n  get type() {\n    return 'select'\n  }\n\n  get optionsSpec(): PropertySpec[] {\n    return [\n      {\n        type: 'number',\n        name: 'outputCount',\n        label: 'output-count'\n      }\n    ]\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        selectionKey: { type: 'string' }\n      },\n      required: ['selectionKey']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        selectionKey: { type: 'string' }\n      },\n      required: ['selectionKey']\n    }\n  }\n\n  get size(): { w: number; h: number } {\n    const { outputCount } = this.options || { outputCount: 3 }\n    return { w: Math.max(MINWIDTH, outputCount * ANCHOR_SPACING), h: HEIGHT }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size\n\n    return svg`\n      <rect class=\"node-outline\" x=\"${-w / 2}\" y=\"${-h / 2}\" width=\"${w}\" height=\"${h}\" fill=\"#e2e3e5\" stroke=\"#000\" stroke-width=\"1\" />\n\n      <text class=\"node-label\" x=\"0\" y=\"5\" text-anchor=\"middle\">${this.label}</text>\n    `\n  }\n\n  /** 기본 앵커 포인트 (input 1개, output 3개) */\n  get anchorModels(): AnchorModel[] {\n    const { outputCount } = this.options || { outputCount: 3 }\n    const { w, h } = this.size\n\n    const anchors: AnchorModel[] = [{ id: 'in', type: 'in', pos: { x: 0, y: -h / 2 } }]\n\n    const anchorSpacing = w / outputCount\n    const startOffsetX = (-(outputCount - 1) * anchorSpacing) / 2\n\n    for (let i = 0; i < outputCount; i++) {\n      anchors.push({\n        id: `out-${i + 1}`,\n        type: 'out',\n        pos: {\n          x: startOffsetX + i * anchorSpacing,\n          y: h / 2\n        },\n        label: `case ${i + 1}`,\n        weight: outputCount - i\n      })\n    }\n\n    return anchors\n  }\n}\n"]}

package/dist/src/nodes/start-event.d.ts

@@ -6,6 +6,10 @@ export declare class StartEvent extends FlowNodeAbstract {
     get inputSchema(): FlowDataSchema;
     get dataSourceSchema(): FlowDataSchema;
     get outputSchema(): FlowDataSchema;
+    get size(): {
+        w: number;
+        h: number;
+    };
     renderNode(): SVGTemplateResult;
     get anchorModels(): AnchorModel[];
 }

package/dist/src/nodes/start-event.js

@@ -28,8 +28,11 @@ export class StartEvent extends FlowNodeAbstract {
             required: ['payload']
         };
     }
+    get size() {
+        return this.model.size || { w: 48, h: 48 };
+    }
     renderNode() {
-        const { w, h } = this.size || { w: 48, h: 48 };
+        const { w, h } = this.size;
         const r = Math.min(w, h) / 2 - 1;
         return svg `
       <circle class="node-outline" cx="0" cy="0" r="${r}" fill="#d4edda" stroke="#000" stroke-width="1" />
@@ -37,7 +40,7 @@ export class StartEvent extends FlowNodeAbstract {
     `;
     }
     get anchorModels() {
-        return [{ id: 'out', type: 'out', pos: { x: 0, y: 24 } }];
+        return [{ id: 'out', type: 'out', pos: { x: 0, y: 24 }, angle: 90 }].map(anchorModel => this.applyAnchorsOption(anchorModel));
     }
 }
 //# sourceMappingURL=start-event.js.map

package/dist/src/nodes/start-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"start-event.js","sourceRoot":"","sources":["../../../src/nodes/start-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAC9C,IAAI,IAAI;QACN,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,EAAE;SACf,CAAA;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE;aAC5C;YACD,QAAQ,EAAE,CAAC,SAAS,CAAC;SACtB,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE;aAC5C;YACD,QAAQ,EAAE,CAAC,SAAS,CAAC;SACtB,CAAA;IACH,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;QAC9C,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAEhC,OAAO,GAAG,CAAA;sDACwC,CAAC;kEACW,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAC3D,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class StartEvent extends FlowNodeAbstract {\n  get type() {\n    return 'start'\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get dataSourceSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        payload: { type: 'object', properties: {} }\n      },\n      required: ['payload']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        payload: { type: 'object', properties: {} }\n      },\n      required: ['payload']\n    }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size || { w: 48, h: 48 }\n    const r = Math.min(w, h) / 2 - 1\n\n    return svg`\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${r}\" fill=\"#d4edda\" stroke=\"#000\" 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    return [{ id: 'out', type: 'out', pos: { x: 0, y: 24 } }]\n  }\n}\n"]}
+{"version":3,"file":"start-event.js","sourceRoot":"","sources":["../../../src/nodes/start-event.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,KAAK,CAAA;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAEhE,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAC9C,IAAI,IAAI;QACN,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,IAAI,WAAW;QACb,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,EAAE;SACf,CAAA;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE;aAC5C;YACD,QAAQ,EAAE,CAAC,SAAS,CAAC;SACtB,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE;gBACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE;aAC5C;YACD,QAAQ,EAAE,CAAC,SAAS,CAAC;SACtB,CAAA;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAM,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAA;IAC7C,CAAC;IAED,UAAU;QACR,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAA;QAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAEhC,OAAO,GAAG,CAAA;sDACwC,CAAC;kEACW,IAAI,CAAC,KAAK;KACvE,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CACrF,IAAI,CAAC,kBAAkB,CAAC,WAA0B,CAAC,CACpD,CAAA;IACH,CAAC;CACF","sourcesContent":["import { svg, SVGTemplateResult } from 'lit'\nimport { AnchorModel, FlowDataSchema } from '../types.js'\nimport { FlowNodeAbstract } from '../base/flow-node-abstract.js'\n\nexport class StartEvent extends FlowNodeAbstract {\n  get type() {\n    return 'start'\n  }\n\n  get inputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {}\n    }\n  }\n\n  get dataSourceSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        payload: { type: 'object', properties: {} }\n      },\n      required: ['payload']\n    }\n  }\n\n  get outputSchema(): FlowDataSchema {\n    return {\n      type: 'object',\n      properties: {\n        payload: { type: 'object', properties: {} }\n      },\n      required: ['payload']\n    }\n  }\n\n  get size(): { w: number; h: number } {\n    return this.model!.size || { w: 48, h: 48 }\n  }\n\n  renderNode(): SVGTemplateResult {\n    const { w, h } = this.size\n    const r = Math.min(w, h) / 2 - 1\n\n    return svg`\n      <circle class=\"node-outline\" cx=\"0\" cy=\"0\" r=\"${r}\" fill=\"#d4edda\" stroke=\"#000\" 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    return [{ id: 'out', type: 'out', pos: { x: 0, y: 24 }, angle: 90 }].map(anchorModel =>\n      this.applyAnchorsOption(anchorModel as AnchorModel)\n    )\n  }\n}\n"]}