@operato/flow 9.0.1 → 9.0.5

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

@@ -0,0 +1,145 @@
+/**
+ * @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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,232 @@
+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

@@ -0,0 +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'\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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+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();
+}