@operato/flow 9.0.0-beta.56 → 9.0.0-beta.62

package/dist/src/components/flow-options-builder.js

@@ -1,145 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import './property-editor.js'; /* for registering property editors */
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxPropertyEditor } from '@operato/property-editor';
-/**
-모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
-
-Example:
-
-    <options-builder value="{{value}}">
-      <label>Center X</label>
-      <input type="number" .value="${value.cx}">
-      <label>Width</label>
-      <input type="number" .value="${value.width}">
-    </options-builder>
-*/
-const DEFAULT_VALUE = {
-    legend: '',
-    // number: 0, // should be undefined
-    angle: 0,
-    string: '',
-    password: '',
-    textarea: '',
-    checkbox: false,
-    select: '',
-    color: '#000000',
-    'solidcolor-stops': null,
-    'gradientcolor-stops': null,
-    'gltf-selector': '',
-    'image-selector': '',
-    multiplecolor: null,
-    editortable: null,
-    imageselector: '',
-    options: null,
-    date: null
-};
-function convertValue(type, value) {
-    var converted = String(value).trim() == '' ? undefined : value;
-    switch (type) {
-        case 'number':
-        case 'angle':
-            converted = parseFloat(value);
-            converted = isNaN(converted) ? undefined : converted;
-            break;
-    }
-    return converted;
-}
-let FlowOptionsBuilder = class FlowOptionsBuilder extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-    firstUpdated() {
-        this.addEventListener('change', this.onValueChanged.bind(this));
-    }
-    updated(changes) {
-        changes.has('props') && this.onPropsChanged(this.props || []);
-        changes.has('value') && this.setValues();
-    }
-    onPropsChanged(props) {
-        const specs = this.props || [];
-        this.textContent = '';
-        specs.forEach((spec) => {
-            const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled, styles } = spec;
-            const elementType = OxPropertyEditor.getEditor(type);
-            if (!elementType) {
-                console.warn('Property Editor not defined', type);
-                return;
-            }
-            const element = document.createElement(elementType);
-            element.label = label;
-            element.type = type;
-            element.placeholder = placeholder;
-            element.name = name;
-            element.setAttribute('name', name);
-            if (observe) {
-                element.observeHandler = observe;
-            }
-            element.property = property;
-            element.editor = editor;
-            element.quantifier = quantifier;
-            element.defaultValue = defaultValue;
-            element.setAttribute('property-editor', 'true');
-            element.disabled = disabled;
-            if (styles) {
-                Object.keys(styles).forEach((key) => {
-                    element.style[key] = styles[key];
-                });
-            }
-            this.appendChild(element);
-        });
-    }
-    setValues() {
-        this.value &&
-            Array.from(this.querySelectorAll('[name]')).forEach((prop) => {
-                let name = prop.getAttribute('name');
-                if (!name) {
-                    return;
-                }
-                var convertedValue = convertValue(prop.type, this.value[name]);
-                if (convertedValue === undefined) {
-                    convertedValue = DEFAULT_VALUE[prop.type];
-                }
-                prop.value = convertedValue;
-                prop.observe.call(prop, prop.value);
-            });
-    }
-    onValueChanged(e) {
-        e.stopPropagation();
-        var target = e.target;
-        const prop = target.closest('[property-editor]');
-        var name = prop.getAttribute('name');
-        if (!name) {
-            return;
-        }
-        this.value[name] = prop.value;
-        prop.observe(prop.value);
-        this.setValues();
-        this.dispatchEvent(new CustomEvent('property-change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                [name]: prop.value
-            }
-        }));
-    }
-};
-__decorate([
-    property({ type: Object })
-], FlowOptionsBuilder.prototype, "value", void 0);
-__decorate([
-    property({ type: Array })
-], FlowOptionsBuilder.prototype, "props", void 0);
-FlowOptionsBuilder = __decorate([
-    customElement('flow-options-builder')
-], FlowOptionsBuilder);
-export { FlowOptionsBuilder };
-//# sourceMappingURL=flow-options-builder.js.map

package/dist/src/components/flow-options-builder.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow-options-builder.js","sourceRoot":"","sources":["../../../src/components/flow-options-builder.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-editor.js' /* for registering property editors */\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { CSSStyles, OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n/**\n모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.\n\nExample:\n\n    <options-builder value=\"{{value}}\">\n      <label>Center X</label>\n      <input type=\"number\" .value=\"${value.cx}\">\n      <label>Width</label>\n      <input type=\"number\" .value=\"${value.width}\">\n    </options-builder>\n*/\n\nconst DEFAULT_VALUE = {\n  legend: '',\n  // number: 0, // should be undefined\n  angle: 0,\n  string: '',\n  password: '',\n  textarea: '',\n  checkbox: false,\n  select: '',\n  color: '#000000',\n  'solidcolor-stops': null,\n  'gradientcolor-stops': null,\n  'gltf-selector': '',\n  'image-selector': '',\n  multiplecolor: null,\n  editortable: null,\n  imageselector: '',\n  options: null,\n  date: null\n}\n\nfunction convertValue(type: string, value: any) {\n  var converted = String(value).trim() == '' ? undefined : value\n  switch (type) {\n    case 'number':\n    case 'angle':\n      converted = parseFloat(value)\n      converted = isNaN(converted) ? undefined : converted\n      break\n  }\n\n  return converted\n}\n\n@customElement('flow-options-builder')\nexport class FlowOptionsBuilder extends LitElement {\n  @property({ type: Object }) value: { [name: string]: any } = {}\n  @property({ type: Array }) props?: PropertySpec[]\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  firstUpdated() {\n    this.addEventListener('change', this.onValueChanged.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('props') && this.onPropsChanged(this.props || [])\n    changes.has('value') && this.setValues()\n  }\n\n  private onPropsChanged(props: PropertySpec[]) {\n    const specs = this.props || []\n\n    this.textContent = ''\n    specs.forEach((spec: PropertySpec) => {\n      const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled, styles } =\n        spec\n\n      const elementType = OxPropertyEditor.getEditor(type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', type)\n        return\n      }\n      const element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = label\n      element.type = type\n      element.placeholder = placeholder\n      element.name = name\n      element.setAttribute('name', name)\n\n      if (observe) {\n        element.observeHandler = observe\n      }\n      element.property = property\n      element.editor = editor\n      element.quantifier = quantifier\n      element.defaultValue = defaultValue\n      element.setAttribute('property-editor', 'true')\n      element.disabled = disabled\n\n      if (styles) {\n        Object.keys(styles).forEach((key: string) => {\n          element.style[key as keyof CSSStyles] = styles[key as keyof CSSStyles]\n        })\n      }\n\n      this.appendChild(element)\n    })\n  }\n\n  private setValues() {\n    this.value &&\n      Array.from(this.querySelectorAll('[name]')).forEach((prop: { [name: string]: any }) => {\n        let name = prop.getAttribute('name')\n        if (!name) {\n          return\n        }\n        var convertedValue = convertValue(prop.type, this.value[name])\n        if (convertedValue === undefined) {\n          convertedValue = (DEFAULT_VALUE as any)[prop.type]\n        }\n        prop.value = convertedValue\n        prop.observe.call(prop, prop.value)\n      })\n  }\n\n  private onValueChanged(e: Event) {\n    e.stopPropagation()\n    var target = e.target as Element\n\n    const prop = target.closest('[property-editor]') as OxPropertyEditor\n\n    var name = prop.getAttribute('name')\n    if (!name) {\n      return\n    }\n\n    this.value[name] = prop.value\n\n    prop.observe(prop.value)\n    this.setValues()\n\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          [name]: prop.value\n        }\n      })\n    )\n  }\n}\n"]}

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

@@ -1,22 +0,0 @@
-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';
-import './property-panel/data-mapper-popup.js';
-export declare class FlowPropertiesPanel extends LitElement {
-    static styles: import("lit").CSSResult;
-    private flowContext?;
-    private flowEditContext?;
-    selectedNode: FlowNode | null;
-    render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
-    /** 📌 팝업 열기 */
-    private openTaskSelectionPopup;
-    private openDataMapperPopup;
-    private updateTaskSubyype;
-    private updateDataMapping;
-    private updateLabel;
-    private updateOptions;
-    private updateAnchorsOption;
-}

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

@@ -1,232 +0,0 @@
-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';
-import { OxPopup } from '@operato/popup';
-import { flowContext } from '../context/flow-context.js';
-import { flowEditContext } from '../context/flow-edit-context.js';
-import './property-panel/task-selection-popup.js';
-import './property-panel/data-mapper-popup.js';
-let FlowPropertiesPanel = class FlowPropertiesPanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.selectedNode = null;
-    }
-    render() {
-        var _a;
-        const entity = (_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.selected;
-        if (!entity) {
-            return html `<p>Select a node or a edge to edit properties.</p>`;
-        }
-        const { type, label = '', options = {}, optionsSpec } = entity;
-        return html `
-      <h3>${type}</h3>
-
-      <div class="field">
-        <label>Label</label>
-        <input type="text" .value=${label} @change=${this.updateLabel} />
-      </div>
-
-      <!-- 태스크 노드의 경우, 태스크 선택 -->
-      ${(entity === null || entity === void 0 ? void 0 : entity.type) === 'task'
-            ? html `
-            <div class="field">
-              <label>Task Type</label>
-              <div class="task-selector" @click=${this.openTaskSelectionPopup}>
-                ${entity.subtype ? entity.subtype : 'Select a Task'}
-              </div>
-            </div>
-
-            ${entity.subtype
-                ? html `
-                  <flow-options-builder
-                    .value=${options}
-                    .props=${this.flowContext.getTaskType(entity.subtype).parameterSpec}
-                    @property-change=${this.updateOptions}
-                  >
-                  </flow-options-builder>
-                `
-                : nothing}
-          `
-            : html `
-            <flow-options-builder .value=${options} .props=${optionsSpec} @property-change=${this.updateOptions}>
-            </flow-options-builder>
-          `}
-      ${(entity === null || entity === void 0 ? void 0 : entity.type) === 'edge'
-            ? html `
-            <label>Data Mapper</label>
-            <div class="data-mapper" @click=${this.openDataMapperPopup}>
-              ${entity.subtype ? entity.subtype : 'Map Data'}
-            </div>
-          `
-            : html `
-            <label>Anchors Option</label>
-            <ox-input-anchors
-              class="anchors-option"
-              .value=${entity.anchorModels}
-              @change=${this.updateAnchorsOption}
-            ></ox-input-anchors>
-          `}
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('keydown', (e) => {
-            e.stopPropagation();
-        });
-    }
-    /** 📌 팝업 열기 */
-    openTaskSelectionPopup() {
-        const popup = OxPopup.open({
-            template: html `
-        <task-selection-popup
-          @task-selected=${(e) => {
-                const { name } = e.detail;
-                this.updateTaskSubyype(name);
-                popup.close();
-            }}
-        ></task-selection-popup>
-      `,
-            style: 'width: 80vw; height: 80vh;',
-            preventCloseOnBlur: true,
-            backdrop: true
-        });
-    }
-    openDataMapperPopup() {
-        var _a;
-        if (!((_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.selected)) {
-            return;
-        }
-        const entity = this.flowContext.selected;
-        const popup = OxPopup.open({
-            template: html `
-        <data-mapper-popup
-          .nodes=${this.flowContext.nodes}
-          .edge=${entity}
-          @change=${(e) => {
-                e.stopPropagation();
-                this.updateDataMapping(e.detail);
-                popup.close();
-            }}
-        ></data-mapper-popup>
-      `,
-            style: 'width: 80vw; height: 80vh;',
-            preventCloseOnBlur: true,
-            backdrop: true
-        });
-    }
-    updateTaskSubyype(subtype) {
-        var _a;
-        if (!((_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.selected)) {
-            return;
-        }
-        const entity = this.flowContext.selected;
-        const model = { subtype };
-        if (!entity.label || entity.label == entity.subtype) {
-            model.label = subtype;
-        }
-        this.flowEditContext.updateEntity(entity, model);
-        this.requestUpdate();
-    }
-    updateDataMapping(dataMappings) {
-        var _a;
-        if (!((_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.selected)) {
-            return;
-        }
-        const entity = this.flowContext.selected;
-        const model = { dataMappings };
-        this.flowEditContext.updateEntity(entity, model);
-        this.requestUpdate();
-    }
-    updateLabel(e) {
-        var _a;
-        if (!((_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.selected)) {
-            return;
-        }
-        const entity = this.flowContext.selected;
-        const label = e.target.value;
-        this.flowEditContext.updateEntity(entity, { label });
-    }
-    updateOptions(e) {
-        var _a;
-        if (!((_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.selected)) {
-            return;
-        }
-        const changes = e.detail;
-        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 {
-      display: flex;
-      flex-direction: column;
-      padding: 10px;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
-
-    .field {
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 12px;
-    }
-
-    label {
-      font-weight: bold;
-      margin-bottom: 4px;
-    }
-
-    select,
-    input,
-    textarea {
-      padding: 6px;
-      font-size: 14px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-    }
-
-    .task-selector,
-    .data-mapper {
-      cursor: pointer;
-      background-color: #f8f9fa;
-      padding: 8px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      text-align: center;
-      font-weight: bold;
-    }
-
-    .task-selector:hover,
-    .data-mapper:hover {
-      background-color: #e2e6ea;
-    }
-  `;
-__decorate([
-    consume({ context: flowContext, subscribe: true })
-], FlowPropertiesPanel.prototype, "flowContext", void 0);
-__decorate([
-    consume({ context: flowEditContext, subscribe: true })
-], FlowPropertiesPanel.prototype, "flowEditContext", void 0);
-__decorate([
-    property({ type: Object })
-], FlowPropertiesPanel.prototype, "selectedNode", void 0);
-FlowPropertiesPanel = __decorate([
-    customElement('flow-properties-panel')
-], FlowPropertiesPanel);
-export { FlowPropertiesPanel };
-//# sourceMappingURL=flow-properties-panel.js.map

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

@@ -1 +0,0 @@
-{"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/components/flow-side-panel.d.ts

@@ -1,9 +0,0 @@
-import './flow-debug-panel.js';
-import './flow-properties-panel.js';
-import { LitElement } from 'lit';
-export declare class FlowSidePanel extends LitElement {
-    static styles: import("lit").CSSResult;
-    private activeTab;
-    render(): import("lit-html").TemplateResult<1>;
-    private setActiveTab;
-}

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

@@ -1,83 +0,0 @@
-import { __decorate } from "tslib";
-import './flow-debug-panel.js';
-import './flow-properties-panel.js';
-import { LitElement, html, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-let FlowSidePanel = class FlowSidePanel extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.activeTab = 'properties';
-    }
-    render() {
-        return html `
-      <!-- 🔹 탭 UI -->
-      <div class="tab-bar">
-        <div
-          class="tab ${this.activeTab === 'properties' ? 'active' : ''}"
-          @click=${() => this.setActiveTab('properties')}
-        >
-          Properties
-        </div>
-        <div class="tab ${this.activeTab === 'debug' ? 'active' : ''}" @click=${() => this.setActiveTab('debug')}>
-          Debug
-        </div>
-      </div>
-
-      <!-- 🔹 선택된 탭에 따라 패널 렌더링 -->
-      <div class="panel-container">
-        ${this.activeTab === 'properties' ? html `<flow-properties-panel></flow-properties-panel>` : ''}
-        ${this.activeTab === 'debug' ? html `<flow-debug-panel></flow-debug-panel>` : ''}
-      </div>
-    `;
-    }
-    setActiveTab(tab) {
-        this.activeTab = tab;
-    }
-};
-FlowSidePanel.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 380px;
-      height: 100%;
-      border-left: 1px solid #ccc;
-      background-color: #fafafa;
-      box-sizing: border-box;
-    }
-
-    .tab-bar {
-      display: flex;
-      border-bottom: 1px solid #ccc;
-      background-color: #e0e0e0;
-    }
-
-    .tab {
-      flex: 1;
-      padding: 10px;
-      text-align: center;
-      cursor: pointer;
-      font-weight: bold;
-      border-bottom: 3px solid transparent;
-      transition:
-        background 0.2s ease,
-        border-bottom 0.2s ease;
-    }
-
-    .tab.active {
-      background-color: #fff;
-      border-bottom: 3px solid #007acc;
-    }
-
-    .panel-container {
-      flex: 1;
-      overflow: hidden;
-    }
-  `;
-__decorate([
-    state()
-], FlowSidePanel.prototype, "activeTab", void 0);
-FlowSidePanel = __decorate([
-    customElement('flow-side-panel')
-], FlowSidePanel);
-export { FlowSidePanel };
-//# sourceMappingURL=flow-side-panel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"flow-side-panel.js","sourceRoot":"","sources":["../../../src/components/flow-side-panel.ts"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAA;AAC9B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGjD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAyCY,cAAS,GAA2B,YAAY,CAAA;IA4BnE,CAAC;IA1BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;uBAIQ,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;mBACnD,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;;;;0BAI9B,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;;;;;;;UAOtG,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,EAAE;UAC5F,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,CAAC,CAAC,CAAC,EAAE;;KAElF,CAAA;IACH,CAAC;IAEO,YAAY,CAAC,GAA2B;QAC9C,IAAI,CAAC,SAAS,GAAG,GAAG,CAAA;IACtB,CAAC;;AAnEM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsClB,AAtCY,CAsCZ;AAEgB;IAAhB,KAAK,EAAE;gDAAyD;AAzCtD,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqEzB","sourcesContent":["import './flow-debug-panel.js'\nimport './flow-properties-panel.js'\n\nimport { LitElement, html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\n@customElement('flow-side-panel')\nexport class FlowSidePanel extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 380px;\n      height: 100%;\n      border-left: 1px solid #ccc;\n      background-color: #fafafa;\n      box-sizing: border-box;\n    }\n\n    .tab-bar {\n      display: flex;\n      border-bottom: 1px solid #ccc;\n      background-color: #e0e0e0;\n    }\n\n    .tab {\n      flex: 1;\n      padding: 10px;\n      text-align: center;\n      cursor: pointer;\n      font-weight: bold;\n      border-bottom: 3px solid transparent;\n      transition:\n        background 0.2s ease,\n        border-bottom 0.2s ease;\n    }\n\n    .tab.active {\n      background-color: #fff;\n      border-bottom: 3px solid #007acc;\n    }\n\n    .panel-container {\n      flex: 1;\n      overflow: hidden;\n    }\n  `\n\n  @state() private activeTab: 'properties' | 'debug' = 'properties'\n\n  render() {\n    return html`\n      <!-- 🔹 탭 UI -->\n      <div class=\"tab-bar\">\n        <div\n          class=\"tab ${this.activeTab === 'properties' ? 'active' : ''}\"\n          @click=${() => this.setActiveTab('properties')}\n        >\n          Properties\n        </div>\n        <div class=\"tab ${this.activeTab === 'debug' ? 'active' : ''}\" @click=${() => this.setActiveTab('debug')}>\n          Debug\n        </div>\n      </div>\n\n      <!-- 🔹 선택된 탭에 따라 패널 렌더링 -->\n      <div class=\"panel-container\">\n        ${this.activeTab === 'properties' ? html`<flow-properties-panel></flow-properties-panel>` : ''}\n        ${this.activeTab === 'debug' ? html`<flow-debug-panel></flow-debug-panel>` : ''}\n      </div>\n    `\n  }\n\n  private setActiveTab(tab: 'properties' | 'debug') {\n    this.activeTab = tab\n  }\n}\n"]}

package/dist/src/components/flow-sidebar.d.ts

@@ -1,7 +0,0 @@
-import { LitElement } from 'lit';
-export declare class FlowSidebar extends LitElement {
-    static styles: import("lit").CSSResult;
-    private flowContext?;
-    render(): import("lit-html").TemplateResult<1>;
-    private onDragStart;
-}

package/dist/src/components/flow-sidebar.js

@@ -1,84 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { consume } from '@lit/context';
-import { flowContext } from '../context/flow-context.js';
-let FlowSidebar = class FlowSidebar extends LitElement {
-    render() {
-        var _a;
-        const nodeImplementations = Object.entries(((_a = this.flowContext) === null || _a === void 0 ? void 0 : _a.availableNodeTypes) || {}).map(([key, clazz]) => {
-            return {
-                id: key,
-                node: new clazz({ size: { w: 40, h: 30 } })
-            };
-        });
-        return html `
-      <div content>
-        ${(nodeImplementations || []).map(({ id, node }) => html `
-            <div
-              class="node-item"
-              draggable="true"
-              @dragstart=${(e) => this.onDragStart(e, { label: node.label, id })}
-            >
-              <svg width="40" height="48">
-                <g transform="translate(20, 15)" stroke="black" fill="transparent">
-                  ${node.renderNode()}
-                  <text class="node-label" x="0" y="30" font-size="12" text-anchor="middle" fill="black">
-                    ${node.type}
-                  </text>
-                </g>
-              </svg>
-            </div>
-          `)}
-      </div>
-    `;
-    }
-    onDragStart(e, nodeType) {
-        if (e.dataTransfer) {
-            e.dataTransfer.setData('application/node-type', JSON.stringify(nodeType));
-        }
-    }
-};
-FlowSidebar.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      background-color: #f0f0f0;
-      border: 1px solid #ccc;
-      padding: 8px;
-      box-sizing: border-box;
-    }
-
-    label {
-      font-size: 16px;
-    }
-
-    div[content] {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-
-    .node-item {
-      display: flex;
-      background-color: transparent;
-      cursor: grab;
-      user-select: none;
-      text-align: center;
-      transition: background-color 0.2s ease;
-      padding: 4px;
-    }
-
-    .node-item:hover {
-      background-color: #0000006c;
-    }
-  `;
-__decorate([
-    consume({ context: flowContext })
-], FlowSidebar.prototype, "flowContext", void 0);
-FlowSidebar = __decorate([
-    customElement('flow-sidebar')
-], FlowSidebar);
-export { FlowSidebar };
-//# sourceMappingURL=flow-sidebar.js.map

package/dist/src/components/flow-sidebar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow-sidebar.js","sourceRoot":"","sources":["../../../src/components/flow-sidebar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,WAAW,EAAmB,MAAM,4BAA4B,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAuCzC,MAAM;;QACJ,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,kBAAkB,KAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAC1G,OAAO;gBACL,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,IAAI,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC;aAC5C,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;;UAEL,CAAC,mBAAmB,IAAI,EAAE,CAAC,CAAC,GAAG,CAC/B,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;;2BAIL,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC;;;;oBAIvE,IAAI,CAAC,UAAU,EAAE;;sBAEf,IAAI,CAAC,IAAI;;;;;WAKpB,CACF;;KAEJ,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,CAAY,EAAE,QAAwC;QACxE,IAAI,CAAC,CAAC,YAAY,EAAE,CAAC;YACnB,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,uBAAuB,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAA;QAC3E,CAAC;IACH,CAAC;;AA1EM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkClB,AAlCY,CAkCZ;AAE0C;IAA1C,OAAO,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;gDAAsC;AArC7D,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4EvB","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { flowContext, FlowContextType } from '../context/flow-context.js'\n\n@customElement('flow-sidebar')\nexport class FlowSidebar extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background-color: #f0f0f0;\n      border: 1px solid #ccc;\n      padding: 8px;\n      box-sizing: border-box;\n    }\n\n    label {\n      font-size: 16px;\n    }\n\n    div[content] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .node-item {\n      display: flex;\n      background-color: transparent;\n      cursor: grab;\n      user-select: none;\n      text-align: center;\n      transition: background-color 0.2s ease;\n      padding: 4px;\n    }\n\n    .node-item:hover {\n      background-color: #0000006c;\n    }\n  `\n\n  @consume({ context: flowContext }) private flowContext?: FlowContextType\n\n  render() {\n    const nodeImplementations = Object.entries(this.flowContext?.availableNodeTypes || {}).map(([key, clazz]) => {\n      return {\n        id: key,\n        node: new clazz({ size: { w: 40, h: 30 } })\n      }\n    })\n\n    return html`\n      <div content>\n        ${(nodeImplementations || []).map(\n          ({ id, node }) => html`\n            <div\n              class=\"node-item\"\n              draggable=\"true\"\n              @dragstart=${(e: DragEvent) => this.onDragStart(e, { label: node.label, id })}\n            >\n              <svg width=\"40\" height=\"48\">\n                <g transform=\"translate(20, 15)\" stroke=\"black\" fill=\"transparent\">\n                  ${node.renderNode()}\n                  <text class=\"node-label\" x=\"0\" y=\"30\" font-size=\"12\" text-anchor=\"middle\" fill=\"black\">\n                    ${node.type}\n                  </text>\n                </g>\n              </svg>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  private onDragStart(e: DragEvent, nodeType: { label?: string; id: string }) {\n    if (e.dataTransfer) {\n      e.dataTransfer.setData('application/node-type', JSON.stringify(nodeType))\n    }\n  }\n}\n"]}

package/dist/src/components/flow-toolbar.d.ts

@@ -1,15 +0,0 @@
-import { LitElement } from 'lit';
-export declare class FlowToolbar extends LitElement {
-    static styles: import("lit").CSSResult;
-    private flowContext?;
-    private flowDebugContext?;
-    private flowEditContext?;
-    private currentMode;
-    render(): import("lit-html").TemplateResult<1>;
-    /** 모드 전환 */
-    private toggleMode;
-    /** 브레이크포인트 설정 / 해제 */
-    private toggleBreakpoint;
-    /** 현재 선택된 노드가 브레이크포인트인지 여부 */
-    private get hasBreakpoint();
-}