@fmsim/board 0.0.62 → 0.0.64

package/dist/src/layers/mcs-mouse-event-layer.d.ts

@@ -0,0 +1,30 @@
+import { Component, Layer } from '@hatiolab/things-scene';
+export default class MCSMouseEventLayer extends Layer {
+    private _anim_alpha;
+    private _lastTargets;
+    private _decoTargets;
+    private _animate;
+    animOnTargetChange(decoTargets: Component[]): void;
+    decorate(component: Component, context: CanvasRenderingContext2D, delta: number): boolean;
+    render(context: CanvasRenderingContext2D): void;
+    get decoTargets(): Component[];
+    set decoTargets(decoTargets: Component[]);
+    get eventMap(): {
+        'model-layer': {
+            '(descendant)': {
+                mouseenter: (e: MouseEvent, hint: any) => void;
+                mouseleave: (e: MouseEvent, hint: any) => void;
+            };
+        };
+    };
+    onmouseclick(e: MouseEvent, hint: any): void;
+    onmouseenter(e: MouseEvent, hint: any): void;
+    onmouseleave(e: MouseEvent, hint: any): void;
+    onhoverreset(hint: any): void;
+    onhover(hint: any): void;
+    offhover(e: MouseEvent, hint: any): void;
+    _onhover(target: Component): void;
+    _offhover(target: Component): void;
+    _hoverreset(): void;
+    _onpopup(unit: Component): void;
+}

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

@@ -0,0 +1,114 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Layer } from '@hatiolab/things-scene';
+import tooltipDecorator from './tooltip-decorator';
+/*
+ * MCSMouseEventLayer 선택된 컴포넌트에 대한 정보를 보여준다.
+ *
+ * Tooltip 을 통해서 id, class 설정 정보를 보여준다.
+ * 변수에 의한 데이타 흐름은 선을 통해서 보여준다.
+ */
+export default class MCSMouseEventLayer extends Layer {
+    constructor() {
+        super(...arguments);
+        this._anim_alpha = 1;
+        this._lastTargets = [];
+        this._decoTargets = [];
+    }
+    animOnTargetChange(decoTargets) {
+        if (decoTargets === this._lastTargets)
+            return;
+        this._lastTargets = decoTargets;
+        this._anim_alpha = 1;
+        this.animate({
+            step: (delta) => {
+                this._anim_alpha = 1 - delta;
+                this.invalidate();
+            },
+            duration: 5000,
+            delta: 'circ',
+            ease: 'in'
+        }).start();
+    }
+    decorate(component, context, delta) {
+        var rendered = false;
+        const result = tooltipDecorator(component, context, 1 - delta);
+        rendered || (rendered = result);
+        return rendered;
+    }
+    render(context) {
+        var decoTargets = this.decoTargets && this.decoTargets.filter(target => target.rootModel);
+        if (!decoTargets || decoTargets.length == 0) {
+            this._animate && this._animate.stop();
+            delete this._animate;
+            return;
+        }
+        context.globalAlpha *= this._anim_alpha;
+        var needAnimation = false;
+        decoTargets.forEach(target => {
+            if (this.decorate(target, context, 1 - this._anim_alpha)) {
+                needAnimation = true;
+            }
+        });
+        needAnimation && this.animOnTargetChange(this.decoTargets);
+    }
+    get decoTargets() {
+        return this._decoTargets;
+    }
+    set decoTargets(decoTargets) {
+        this._decoTargets = decoTargets && decoTargets.filter(target => !target.isLayer());
+        this.invalidate();
+    }
+    get eventMap() {
+        return {
+            'model-layer': {
+                '(descendant)': {
+                    // tag: this.onhover,
+                    // tagreset: this.onhoverreset,
+                    mouseenter: this.onmouseenter,
+                    mouseleave: this.onmouseleave
+                    // mouseclick: this.onmouseclick
+                }
+            }
+        };
+    }
+    onmouseclick(e, hint) {
+        this._hoverreset();
+        this._onpopup(hint.origin);
+    }
+    onmouseenter(e, hint) {
+        this._hoverreset();
+        this._onhover(hint.origin);
+    }
+    onmouseleave(e, hint) {
+        this._hoverreset();
+    }
+    onhoverreset(hint) {
+        this._hoverreset();
+    }
+    onhover(hint) {
+        this._onhover(hint.origin);
+    }
+    offhover(e, hint) {
+        this._offhover(hint.origin);
+    }
+    _onhover(target) {
+        if (this.decoTargets && this.decoTargets.lastIndexOf(target) !== -1)
+            return;
+        this.decoTargets = (this.decoTargets || []).concat(target);
+    }
+    _offhover(target) {
+        if (!this.decoTargets)
+            return;
+        var copied = this.decoTargets.slice();
+        copied.splice(this.decoTargets.lastIndexOf(target), 1);
+        this.decoTargets = copied;
+    }
+    _hoverreset() {
+        this.decoTargets = [];
+    }
+    _onpopup(unit) { }
+}
+Component.register('mcs-mouse-event-layer', MCSMouseEventLayer);
+//# sourceMappingURL=mcs-mouse-event-layer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcs-mouse-event-layer.js","sourceRoot":"","sources":["../../../src/layers/mcs-mouse-event-layer.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, Layer } from '@hatiolab/things-scene'\n\nimport tooltipDecorator from './tooltip-decorator'\n\n/*\n * MCSMouseEventLayer 선택된 컴포넌트에 대한 정보를 보여준다.\n *\n * Tooltip 을 통해서 id, class 설정 정보를 보여준다.\n * 변수에 의한 데이타 흐름은 선을 통해서 보여준다.\n */\nexport default class MCSMouseEventLayer extends Layer {\n  private _anim_alpha = 1\n  private _lastTargets: Component[] = []\n  private _decoTargets: Component[] = []\n  private _animate: any\n\n  animOnTargetChange(decoTargets: Component[]) {\n    if (decoTargets === this._lastTargets) return\n\n    this._lastTargets = decoTargets\n\n    this._anim_alpha = 1\n\n    this.animate({\n      step: (delta: number) => {\n        this._anim_alpha = 1 - delta\n        this.invalidate()\n      },\n      duration: 5000,\n      delta: 'circ',\n      ease: 'in'\n    }).start()\n  }\n\n  decorate(component: Component, context: CanvasRenderingContext2D, delta: number) {\n    var rendered = false\n\n    const result = tooltipDecorator(component, context, 1 - delta)\n    rendered ||= result\n\n    return rendered\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var decoTargets = this.decoTargets && this.decoTargets.filter(target => target.rootModel)\n    if (!decoTargets || decoTargets.length == 0) {\n      this._animate && this._animate.stop()\n      delete this._animate\n      return\n    }\n\n    context.globalAlpha *= this._anim_alpha\n\n    var needAnimation = false\n\n    decoTargets.forEach(target => {\n      if (this.decorate(target, context, 1 - this._anim_alpha)) {\n        needAnimation = true\n      }\n    })\n\n    needAnimation && this.animOnTargetChange(this.decoTargets)\n  }\n\n  get decoTargets(): Component[] {\n    return this._decoTargets\n  }\n\n  set decoTargets(decoTargets) {\n    this._decoTargets = decoTargets && decoTargets.filter(target => !target.isLayer())\n    this.invalidate()\n  }\n\n  get eventMap() {\n    return {\n      'model-layer': {\n        '(descendant)': {\n          // tag: this.onhover,\n          // tagreset: this.onhoverreset,\n          mouseenter: this.onmouseenter,\n          mouseleave: this.onmouseleave\n          // mouseclick: this.onmouseclick\n        }\n      }\n    }\n  }\n\n  onmouseclick(e: MouseEvent, hint: any) {\n    this._hoverreset()\n    this._onpopup(hint.origin)\n  }\n\n  onmouseenter(e: MouseEvent, hint: any) {\n    this._hoverreset()\n    this._onhover(hint.origin)\n  }\n\n  onmouseleave(e: MouseEvent, hint: any) {\n    this._hoverreset()\n  }\n\n  onhoverreset(hint: any) {\n    this._hoverreset()\n  }\n\n  onhover(hint: any) {\n    this._onhover(hint.origin)\n  }\n\n  offhover(e: MouseEvent, hint: any) {\n    this._offhover(hint.origin)\n  }\n\n  _onhover(target: Component) {\n    if (this.decoTargets && this.decoTargets.lastIndexOf(target) !== -1) return\n\n    this.decoTargets = (this.decoTargets || []).concat(target)\n  }\n\n  _offhover(target: Component) {\n    if (!this.decoTargets) return\n\n    var copied = this.decoTargets.slice()\n    copied.splice(this.decoTargets.lastIndexOf(target), 1)\n    this.decoTargets = copied\n  }\n\n  _hoverreset() {\n    this.decoTargets = []\n  }\n\n  _onpopup(unit: Component) {}\n}\n\nComponent.register('mcs-mouse-event-layer', MCSMouseEventLayer)\n"]}

package/dist/src/layers/tooltip-decorator.d.ts

@@ -0,0 +1,2 @@
+import { Component } from '@hatiolab/things-scene';
+export default function tooltipDecorator(component: Component, context: CanvasRenderingContext2D, delta: number): boolean;

package/dist/src/layers/tooltip-decorator.js

@@ -0,0 +1,41 @@
+const LINE_HEIGHT = 14;
+function measureMultiLineTextSize(context, lines, maxWidth) {
+    const lineHeight = LINE_HEIGHT;
+    let totalWidth = 0;
+    let totalHeight = lines.length * lineHeight;
+    for (const line of lines) {
+        const lineMetrics = context.measureText(line);
+        if (lineMetrics.width > totalWidth) {
+            totalWidth = lineMetrics.width;
+        }
+    }
+    return { width: totalWidth, height: totalHeight };
+}
+function drawMultiLineText(context, lines, x, y, maxWidth) {
+    const lineHeight = LINE_HEIGHT;
+    for (let i = 0; i < lines.length; i++) {
+        context.fillText(lines[i], x, y + (i + 1) * lineHeight, maxWidth);
+    }
+}
+export default function tooltipDecorator(component, context, delta /* 1 to 0 */) {
+    const { ID, DESCRIPTION, CARRIERID, LOTID, VEHICLEID } = component.data || {};
+    const lines = [ID, DESCRIPTION, CARRIERID, LOTID, VEHICLEID].filter(Boolean);
+    if (lines.length > 0) {
+        let { left, top } = component.bounds;
+        let { x, y } = component.transcoordS2C(left, top, component.rootModel);
+        context.font = '12px Arial';
+        let metrics = measureMultiLineTextSize(context, lines);
+        x = Math.max(x + 3, 5);
+        y = Math.max(y - lines.length * LINE_HEIGHT - 7, 15);
+        context.beginPath();
+        context.fillStyle = 'red';
+        context.roundRect(x - 3, y - 3, metrics.width + 3 * 2, metrics.height + 3 * 2, 3 /* round */);
+        context.fill();
+        context.beginPath();
+        context.fillStyle = 'white';
+        drawMultiLineText(context, lines, x, y);
+        return true;
+    }
+    return false;
+}
+//# sourceMappingURL=tooltip-decorator.js.map

package/dist/src/layers/tooltip-decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-decorator.js","sourceRoot":"","sources":["../../../src/layers/tooltip-decorator.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,EAAE,CAAA;AAEtB,SAAS,wBAAwB,CAAC,OAAiC,EAAE,KAAe,EAAE,QAAiB;IACrG,MAAM,UAAU,GAAG,WAAW,CAAA;IAC9B,IAAI,UAAU,GAAG,CAAC,CAAA;IAClB,IAAI,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU,CAAA;IAE3C,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAC7C,IAAI,WAAW,CAAC,KAAK,GAAG,UAAU,EAAE;YAClC,UAAU,GAAG,WAAW,CAAC,KAAK,CAAA;SAC/B;KACF;IAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,CAAA;AACnD,CAAC;AAED,SAAS,iBAAiB,CACxB,OAAiC,EACjC,KAAe,EACf,CAAS,EACT,CAAS,EACT,QAAiB;IAEjB,MAAM,UAAU,GAAG,WAAW,CAAA;IAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,UAAU,EAAE,QAAQ,CAAC,CAAA;KAClE;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,SAAoB,EACpB,OAAiC,EACjC,KAAa,CAAC,YAAY;IAE1B,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,IAAI,EAAE,CAAA;IAC7E,MAAM,KAAK,GAAG,CAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAE5E,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACpB,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,MAAM,CAAA;QACpC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,CAAC,SAAgB,CAAC,CAAA;QAE7E,OAAO,CAAC,IAAI,GAAG,YAAY,CAAA;QAC3B,IAAI,OAAO,GAAG,wBAAwB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QAEtD,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;QACtB,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,WAAW,GAAG,CAAC,EAAE,EAAE,CAAC,CAAA;QAEpD,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,SAAS,GAAG,KAAK,CAAA;QAEzB,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,CAAA;QAE7F,OAAO,CAAC,IAAI,EAAE,CAAA;QAEd,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,SAAS,GAAG,OAAO,CAAA;QAC3B,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAK,CAAA;AACd,CAAC","sourcesContent":["import { Component } from '@hatiolab/things-scene'\n\nconst LINE_HEIGHT = 14\n\nfunction measureMultiLineTextSize(context: CanvasRenderingContext2D, lines: string[], maxWidth?: number) {\n  const lineHeight = LINE_HEIGHT\n  let totalWidth = 0\n  let totalHeight = lines.length * lineHeight\n\n  for (const line of lines) {\n    const lineMetrics = context.measureText(line)\n    if (lineMetrics.width > totalWidth) {\n      totalWidth = lineMetrics.width\n    }\n  }\n\n  return { width: totalWidth, height: totalHeight }\n}\n\nfunction drawMultiLineText(\n  context: CanvasRenderingContext2D,\n  lines: string[],\n  x: number,\n  y: number,\n  maxWidth?: number\n) {\n  const lineHeight = LINE_HEIGHT\n\n  for (let i = 0; i < lines.length; i++) {\n    context.fillText(lines[i], x, y + (i + 1) * lineHeight, maxWidth)\n  }\n}\n\nexport default function tooltipDecorator(\n  component: Component,\n  context: CanvasRenderingContext2D,\n  delta: number /* 1 to 0 */\n) {\n  const { ID, DESCRIPTION, CARRIERID, LOTID, VEHICLEID } = component.data || {}\n  const lines = [ID, DESCRIPTION, CARRIERID, LOTID, VEHICLEID].filter(Boolean)\n\n  if (lines.length > 0) {\n    let { left, top } = component.bounds\n    let { x, y } = component.transcoordS2C(left, top, component.rootModel as any)\n\n    context.font = '12px Arial'\n    let metrics = measureMultiLineTextSize(context, lines)\n\n    x = Math.max(x + 3, 5)\n    y = Math.max(y - lines.length * LINE_HEIGHT - 7, 15)\n\n    context.beginPath()\n\n    context.fillStyle = 'red'\n\n    context.roundRect(x - 3, y - 3, metrics.width + 3 * 2, metrics.height + 3 * 2, 3 /* round */)\n\n    context.fill()\n\n    context.beginPath()\n\n    context.fillStyle = 'white'\n    drawMultiLineText(context, lines, x, y)\n\n    return true\n  }\n\n  return false\n}\n"]}

package/dist/src/ox-board-component-info.d.ts

@@ -0,0 +1,21 @@
+import '@material/mwc-icon';
+import '@material/mwc-button';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@operato/markdown';
+import { LitElement, PropertyValues } from 'lit';
+export declare class BoardComponentInfo extends LitElement {
+    static styles: import("lit").CSSResult[];
+    component?: any;
+    detailInfo?: any;
+    private dragStart?;
+    private dragEndHandler;
+    private dragMoveHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    onWheel(e: WheelEvent): void;
+    onDragStart(e: MouseEvent): boolean;
+    onDragMove(e: Event): boolean;
+    onDragEnd(e: Event): void;
+}

package/dist/src/ox-board-component-info.js

@@ -0,0 +1,218 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import '@material/mwc-button';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@operato/markdown';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+export let BoardComponentInfo = class BoardComponentInfo extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dragEndHandler = this.onDragEnd.bind(this);
+        this.dragMoveHandler = this.onDragMove.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mouseup', this.dragEndHandler);
+        document.addEventListener('mousemove', this.dragMoveHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mouseup', this.dragEndHandler);
+        document.removeEventListener('mousemove', this.dragMoveHandler);
+    }
+    render() {
+        const { state, data } = this.component || {};
+        const { id, type } = state || {};
+        const details = this.detailInfo || data;
+        const infos = details && Object.entries(details);
+        return html `
+      <div header @mousedown=${this.onDragStart.bind(this)} draggable="false">
+        Object Inspection<mwc-icon @click=${(e) => this.dispatchEvent(new CustomEvent('close'))}
+          >close</mwc-icon
+        >
+      </div>
+      <div content @wheel=${(e) => this.onWheel(e)}>
+        <table>
+          <tr>
+            <td subTh>${i18next.t('label.id')}</td>
+            <td>
+              <a
+                @click=${(e) => {
+            this.component.trigger('reactionreset');
+            this.component.trigger('reaction');
+            return false;
+        }}
+                >${id}</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <td subTh>${i18next.t('label.type')}</td>
+            <td>${type}</td>
+          </tr>
+
+          ${infos
+            ? html `
+                <tr>
+                  <td split colspan="2">details</td>
+                </tr>
+
+                ${infos.map(([key, value]) => html `
+                    <tr>
+                      <td subTh>${key}</td>
+                      <td>${value}</td>
+                    </tr>
+                  `)}
+              `
+            : html ``}
+        </table>
+      </div>
+    `;
+    }
+    async updated(changes) {
+        if (changes.has('component')) {
+            this.detailInfo = null;
+            if ('detailInfo' in this.component) {
+                try {
+                    this.detailInfo = await this.component.detailInfo();
+                }
+                catch (e) {
+                    console.error('failed to get detail information');
+                }
+            }
+        }
+    }
+    onWheel(e) {
+        const scrollableDiv = e.currentTarget;
+        const contentDiv = scrollableDiv.querySelector('table');
+        // 컨텐츠의 높이와 div의 높이를 비교하여 수평 스크롤을 동작시키거나 수직 스크롤을 동작시킴
+        if (contentDiv.offsetHeight > scrollableDiv.offsetHeight) {
+            // 수직 스크롤 가능한 경우
+            scrollableDiv.scrollTop += e.deltaY;
+        }
+        else {
+            // 수직 스크롤이 없는 경우
+            scrollableDiv.scrollLeft += e.deltaY;
+        }
+    }
+    onDragStart(e) {
+        e.stopPropagation();
+        if (e.button == 0) {
+            this.dragStart = {
+                x: e.clientX,
+                y: e.clientY
+            };
+        }
+        return false;
+    }
+    onDragMove(e) {
+        if (!this.dragStart) {
+            return false;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        var x = e.clientX, y = e.clientY;
+        const dragStart = { x, y };
+        x -= this.dragStart.x;
+        y -= this.dragStart.y;
+        this.dragStart = dragStart;
+        this.style.left =
+            Math.min(this.parentElement.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px';
+        this.style.top =
+            Math.min(this.parentElement.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px';
+        return false;
+    }
+    onDragEnd(e) {
+        if (this.dragStart) {
+            e.stopPropagation();
+            e.preventDefault();
+            delete this.dragStart;
+        }
+    }
+};
+BoardComponentInfo.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        background-color: white;
+        font-size: 12px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        border: 2px solid var(--primary-color);
+        border-radius: 3px;
+
+        --mdc-icon-size: 12px;
+      }
+
+      [header] {
+        background-color: var(--primary-color);
+        user-select: none;
+        align-items: center;
+        color: #eee;
+        padding: 0 2px;
+
+        display: flex;
+      }
+
+      [header] mwc-icon {
+        margin-left: auto;
+        align-self: center;
+      }
+
+      [content] {
+        overflow: auto;
+      }
+
+      table {
+        border-collapse: collapse;
+        background-color: #fff;
+        width: 100%;
+        margin: auto;
+      }
+
+      tr {
+        border-bottom: var(--border-dark-color);
+      }
+
+      td {
+        padding: var(--padding-narrow);
+        border-right: var(--border-dark-color);
+        font-size: 0.8em;
+      }
+
+      [subTh] {
+        text-align: center !important;
+        font-weight: bold;
+        width: 60px;
+        text-transform: capitalize;
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      [split] {
+        height: 10px;
+        color: #eee;
+        background-color: var(--primary-color);
+        font-size: 0.8em;
+        padding: 0;
+        text-align: center;
+      }
+
+      a {
+        text-decoration: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], BoardComponentInfo.prototype, "component", void 0);
+__decorate([
+    state()
+], BoardComponentInfo.prototype, "detailInfo", void 0);
+BoardComponentInfo = __decorate([
+    customElement('ox-board-component-info')
+], BoardComponentInfo);
+//# sourceMappingURL=ox-board-component-info.js.map

package/dist/src/ox-board-component-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-component-info.js","sourceRoot":"","sources":["../../src/ox-board-component-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/markdown'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-board-component-info')\nexport class BoardComponentInfo extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        background-color: white;\n        font-size: 12px;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        border: 2px solid var(--primary-color);\n        border-radius: 3px;\n\n        --mdc-icon-size: 12px;\n      }\n\n      [header] {\n        background-color: var(--primary-color);\n        user-select: none;\n        align-items: center;\n        color: #eee;\n        padding: 0 2px;\n\n        display: flex;\n      }\n\n      [header] mwc-icon {\n        margin-left: auto;\n        align-self: center;\n      }\n\n      [content] {\n        overflow: auto;\n      }\n\n      table {\n        border-collapse: collapse;\n        background-color: #fff;\n        width: 100%;\n        margin: auto;\n      }\n\n      tr {\n        border-bottom: var(--border-dark-color);\n      }\n\n      td {\n        padding: var(--padding-narrow);\n        border-right: var(--border-dark-color);\n        font-size: 0.8em;\n      }\n\n      [subTh] {\n        text-align: center !important;\n        font-weight: bold;\n        width: 60px;\n        text-transform: capitalize;\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n\n      [split] {\n        height: 10px;\n        color: #eee;\n        background-color: var(--primary-color);\n        font-size: 0.8em;\n        padding: 0;\n        text-align: center;\n      }\n\n      a {\n        text-decoration: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) component?: any\n\n  @state() detailInfo?: any\n\n  private dragStart?: { x: number; y: number }\n\n  private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n  private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    document.addEventListener('mouseup', this.dragEndHandler)\n    document.addEventListener('mousemove', this.dragMoveHandler)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    document.removeEventListener('mouseup', this.dragEndHandler)\n    document.removeEventListener('mousemove', this.dragMoveHandler)\n  }\n\n  render() {\n    const { state, data } = this.component || {}\n    const { id, type } = state || {}\n    const details = this.detailInfo || data\n    const infos: [key: string, value: string][] = details && Object.entries(details)\n\n    return html`\n      <div header @mousedown=${this.onDragStart.bind(this)} draggable=\"false\">\n        Object Inspection<mwc-icon @click=${(e: MouseEvent) => this.dispatchEvent(new CustomEvent('close'))}\n          >close</mwc-icon\n        >\n      </div>\n      <div content @wheel=${(e: WheelEvent) => this.onWheel(e)}>\n        <table>\n          <tr>\n            <td subTh>${i18next.t('label.id')}</td>\n            <td>\n              <a\n                @click=${(e: MouseEvent) => {\n                  this.component.trigger('reactionreset')\n                  this.component.trigger('reaction')\n                  return false\n                }}\n                >${id}</a\n              >\n            </td>\n          </tr>\n          <tr>\n            <td subTh>${i18next.t('label.type')}</td>\n            <td>${type}</td>\n          </tr>\n\n          ${infos\n            ? html`\n                <tr>\n                  <td split colspan=\"2\">details</td>\n                </tr>\n\n                ${infos.map(\n                  ([key, value]) => html`\n                    <tr>\n                      <td subTh>${key}</td>\n                      <td>${value}</td>\n                    </tr>\n                  `\n                )}\n              `\n            : html``}\n        </table>\n      </div>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('component')) {\n      this.detailInfo = null\n\n      if ('detailInfo' in this.component) {\n        try {\n          this.detailInfo = await this.component.detailInfo()\n        } catch (e) {\n          console.error('failed to get detail information')\n        }\n      }\n    }\n  }\n\n  onWheel(e: WheelEvent) {\n    const scrollableDiv = e.currentTarget! as HTMLElement\n    const contentDiv = scrollableDiv.querySelector('table')!\n\n    // 컨텐츠의 높이와 div의 높이를 비교하여 수평 스크롤을 동작시키거나 수직 스크롤을 동작시킴\n    if (contentDiv.offsetHeight > scrollableDiv.offsetHeight) {\n      // 수직 스크롤 가능한 경우\n      scrollableDiv.scrollTop += e.deltaY\n    } else {\n      // 수직 스크롤이 없는 경우\n      scrollableDiv.scrollLeft += e.deltaY\n    }\n  }\n\n  onDragStart(e: MouseEvent) {\n    e.stopPropagation()\n\n    if (e.button == 0) {\n      this.dragStart = {\n        x: e.clientX,\n        y: e.clientY\n      }\n    }\n\n    return false\n  }\n\n  onDragMove(e: Event) {\n    if (!this.dragStart) {\n      return false\n    }\n\n    e.stopPropagation()\n    e.preventDefault()\n\n    var x = (e as MouseEvent).clientX,\n      y = (e as MouseEvent).clientY\n\n    const dragStart = { x, y }\n\n    x -= this.dragStart.x\n    y -= this.dragStart.y\n\n    this.dragStart = dragStart\n\n    this.style.left =\n      Math.min(this.parentElement!.offsetWidth - this.offsetWidth, Math.max(0, this.offsetLeft + x)) + 'px'\n    this.style.top =\n      Math.min(this.parentElement!.offsetHeight - this.offsetHeight, Math.max(0, this.offsetTop + y)) + 'px'\n\n    return false\n  }\n\n  onDragEnd(e: Event) {\n    if (this.dragStart) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      delete this.dragStart\n    }\n  }\n}\n"]}

package/dist/src/ox-board-modeller.js

@@ -83,7 +83,6 @@ export let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitEl
                 ids = this.scene.findAll(component).map(c => c.model.id);
             }
             else {
-                // @ts-ignore
                 ids = this.scene.ids.map(({ key }) => key);
             }
             ids = ids.filter(Boolean).sort();

package/dist/src/ox-board-modeller.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-modeller.js","sourceRoot":"","sources":["../../src/ox-board-modeller.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\n\nimport '@hatiolab/things-scene'\nimport './modeller/scene-viewer/ox-scene-handler.js'\nimport './modeller/scene-viewer/ox-scene-layer.js'\nimport './modeller/scene-viewer/ox-scene-property.js'\nimport './modeller/scene-viewer/ox-scene-viewer.js'\nimport './ox-board-viewer'\n\nimport { saveAs } from 'file-saver'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { OxPopup } from '@operato/popup'\nimport { isMacOS, togglefullscreen } from '@operato/utils'\n\nimport { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'\nimport { EditToolbar } from './modeller/edit-toolbar'\nimport { PropertySidebar } from './modeller/property-sidebar/property-sidebar'\nimport { ComponentGroup, ComponentTemplate } from './types'\n\nconst MACOS = isMacOS()\n\nconst ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href\nconst ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href\nconst ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href\nconst ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href\nconst ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href\n\nconst ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href\nconst ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href\nconst ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href\nconst ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href\n\nconst ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href\n\nvar Registry: ComponentGroup[] = []\n\n@customElement('ox-board-modeller')\nexport class BoardModeller extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      edit-toolbar {\n        flex: 45px;\n        max-height: 45px;\n      }\n\n      div[content] {\n        flex: 1;\n        max-height: calc(100% - 45px);\n\n        display: flex;\n        flex-direction: row;\n      }\n\n      component-toolbar {\n        max-height: 100%;\n      }\n\n      property-sidebar {\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        position: relative;\n\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n      }\n\n      ox-scene-viewer {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n      }\n\n      mwc-fab {\n        position: absolute;\n        right: 15px;\n        bottom: 15px;\n      }\n\n      ox-popup {\n        width: 90%;\n        height: 90%;\n        left: 50%;\n        top: 50%;\n        transform: translateX(-50%) translateY(-50%);\n        background: var(--secondary-color, black);\n\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      ox-board-viewer {\n        width: 98%;\n        height: 98%;\n        margin: auto;\n        padding: 0;\n      }\n\n      [brand] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n    `\n  ]\n\n  static registerGroup(group: ComponentGroup) {\n    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)\n\n    if (found) {\n      found = {\n        ...found,\n        ...group\n      }\n    } else {\n      Registry.push(group)\n    }\n  }\n\n  static registerTemplate(templates: ComponentTemplate[]): void {\n    templates &&\n      templates.forEach(template => {\n        var groups: string[] = typeof template.group == 'string' ? [template.group] : template.group\n\n        Registry.filter(group => groups.includes(group.name)).forEach(group => {\n          if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n            group.templates.push(template)\n          }\n        })\n      })\n  }\n\n  static get groups(): ComponentGroup[] {\n    return Registry\n  }\n\n  static getGroup(name: string) {\n    return Registry.find(group => group.name === name)\n  }\n\n  @property({ type: String }) boardName: string = ''\n  @property({ type: Object }) model: any = null\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Array }) selected: any[] = []\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT\n  @property({ type: Object }) provider: any = null\n  @property({ type: Boolean }) hideProperty: boolean = false\n  @property({ type: String }) overlay: string = ''\n  @property({ type: Object }) scene?: Scene\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Object }) themes: any = null\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  @query('edit-toolbar') private editToolbar!: EditToolbar\n\n  private group: string = ''\n  private shortcutHandler?: (e: KeyboardEvent) => void\n\n  constructor() {\n    super()\n\n    document.addEventListener('get-all-scene-component-ids', (e: Event) => {\n      var { component, callback } = (e as CustomEvent).detail\n\n      if (!this.scene) return\n\n      var ids\n      if (component) {\n        ids = this.scene.findAll(component).map(c => c.model.id)\n      } else {\n        // @ts-ignore\n        ids = this.scene.ids.map(({ key }) => key)\n      }\n\n      ids = ids.filter(Boolean).sort()\n      callback(ids)\n    })\n\n    this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`)\n    this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`)\n    this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`)\n    this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)\n    this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)\n\n    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)\n    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)\n    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)\n    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)\n\n    this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)\n  }\n\n  static get scopedElements() {\n    return {\n      'edit-toolbar': EditToolbar,\n      'property-sidebar': PropertySidebar,\n      'component-toolbar': ComponentToolbar\n    }\n  }\n\n  render() {\n    return html`\n      <edit-toolbar\n        .scene=${this.scene}\n        .selected=${this.selected}\n        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}\n        @open-preview=${() => this.preview()}\n        @download-model=${() => this.downloadModel()}\n        @modeller-fullscreen=${() => togglefullscreen(this)}\n      >\n        ${this.renderBrandingZone()}\n      </edit-toolbar>\n\n      <div content>\n        <component-toolbar\n          .scene=${this.scene}\n          .mode=${this.mode}\n          @mode-changed=${(e: CustomEvent) => {\n            this.mode = e.detail.value\n          }}\n          .componentGroupList=${this.componentGroupList}\n          .group=${this.group}\n        >\n        </component-toolbar>\n\n        <div id=\"scene-wrap\">\n          <ox-scene-viewer\n            id=\"scene\"\n            .scene=${this.scene}\n            @scene-changed=${(e: CustomEvent) => {\n              this.scene = e.detail.value\n            }}\n            .model=${this.model}\n            .themes=${this.themes}\n            .selected=${this.selected}\n            @selected-changed=${(e: CustomEvent) => {\n              this.selected = e.detail.value\n            }}\n            .mode=${this.mode}\n            @mode-changed=${(e: CustomEvent) => {\n              this.mode = e.detail.value\n            }}\n            fit=\"ratio\"\n            .baseUrl=${this.baseUrl}\n            @contextmenu=${() => this.onContextMenu()}\n            .provider=${this.provider}\n            name=\"modeller\"\n          >\n            <ox-scene-layer type=\"selection-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"modeling-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"add-layer\"> </ox-scene-layer>\n            <ox-scene-layer type=\"guide-layer\">\n              <ox-scene-property name=\"ruler\" value=\"disabled\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-layer type=\"shift-layer\">\n              <ox-scene-property name=\"text\" value=\"${this.overlay}\"></ox-scene-property>\n              <ox-scene-property name=\"alpha\" value=\"0.3\"></ox-scene-property>\n              <ox-scene-property name=\"fontFamily\" value=\"arial\"></ox-scene-property>\n              <ox-scene-property name=\"fontSize\" value=\"30\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"fontColor\" value=\"navy\"></ox-scene-property>\n              <ox-scene-property name=\"textBaseline\" value=\"top\"></ox-scene-property>\n              <ox-scene-property name=\"textAlign\" value=\"left\"></ox-scene-property>\n              <ox-scene-property name=\"paddingTop\" value=\"50\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"paddingLeft\" value=\"50\" type=\"number\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-layer type=\"decotag-layer\"></ox-scene-layer>\n            <ox-scene-handler type=\"text-editor\"></ox-scene-handler>\n            <ox-scene-handler type=\"move-handler\"></ox-scene-handler>\n          </ox-scene-viewer>\n\n          <mwc-fab icon=\"save\" @click=${() => this.onTapSave()} title=\"save\"> </mwc-fab>\n        </div>\n\n        <property-sidebar\n          .scene=${this.scene}\n          .selected=${this.selected}\n          .collapsed=${this.hideProperty}\n          .fonts=${this.fonts}\n          .propertyEditor=${this.propertyEditor}\n        >\n        </property-sidebar>\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.bindShortcutEvent()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.unbindShortcutEvent()\n  }\n\n  close() {\n    this.model = null\n    this.requestUpdate()\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    if (MACOS) var ctrlKey = e.metaKey\n    else var ctrlKey = e.ctrlKey\n\n    switch (e.code) {\n      case 'KeyS':\n        if (ctrlKey) {\n          this.onTapSave()\n          e.preventDefault()\n        }\n        break\n    }\n  }\n\n  preview() {\n    const board = {\n      id: 'preview',\n      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null,\n      style: this.scene?.rootContainer.style\n    }\n\n    OxPopup.open({\n      template: html` <ox-board-viewer .provider=${this.provider} .board=${board}></ox-board-viewer> `,\n      parent: this.renderRoot as Element\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  downloadModel() {\n    if (!this.scene) return\n\n    var model = JSON.stringify(this.model, null, 2)\n    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'\n    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)\n  }\n\n  renderBrandingZone() {\n    return html`\n      <div brand>\n        <a href=\"/\">\n          <mwc-icon>home</mwc-icon>\n        </a>\n        <div board_name>${this.boardName}</div>\n      </div>\n    `\n  }\n\n  onTapSave() {\n    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))\n  }\n\n  bindShortcutEvent() {\n    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.\n    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']\n\n    this.shortcutHandler = (e: KeyboardEvent) => {\n      const target = e.composedPath()[0] as HTMLElement\n      var tagName = target.tagName\n      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'\n      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)\n\n      if (!isGlobalHotkey && isInput) return\n      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)\n    }\n\n    document.addEventListener('keydown', this.shortcutHandler)\n  }\n\n  unbindShortcutEvent() {\n    if (this.shortcutHandler) {\n      document.removeEventListener('keydown', this.shortcutHandler)\n      delete this.shortcutHandler\n    }\n  }\n\n  onContextMenu() {}\n}\n"]}
+{"version":3,"file":"ox-board-modeller.js","sourceRoot":"","sources":["../../src/ox-board-modeller.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\n\nimport '@hatiolab/things-scene'\nimport './modeller/scene-viewer/ox-scene-handler.js'\nimport './modeller/scene-viewer/ox-scene-layer.js'\nimport './modeller/scene-viewer/ox-scene-property.js'\nimport './modeller/scene-viewer/ox-scene-viewer.js'\nimport './ox-board-viewer'\n\nimport { saveAs } from 'file-saver'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { OxPopup } from '@operato/popup'\nimport { isMacOS, togglefullscreen } from '@operato/utils'\n\nimport { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'\nimport { EditToolbar } from './modeller/edit-toolbar'\nimport { PropertySidebar } from './modeller/property-sidebar/property-sidebar'\nimport { ComponentGroup, ComponentTemplate } from './types'\n\nconst MACOS = isMacOS()\n\nconst ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href\nconst ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href\nconst ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href\nconst ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href\nconst ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href\n\nconst ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href\nconst ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href\nconst ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href\nconst ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href\n\nconst ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href\n\nvar Registry: ComponentGroup[] = []\n\n@customElement('ox-board-modeller')\nexport class BoardModeller extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      edit-toolbar {\n        flex: 45px;\n        max-height: 45px;\n      }\n\n      div[content] {\n        flex: 1;\n        max-height: calc(100% - 45px);\n\n        display: flex;\n        flex-direction: row;\n      }\n\n      component-toolbar {\n        max-height: 100%;\n      }\n\n      property-sidebar {\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        position: relative;\n\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n      }\n\n      ox-scene-viewer {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n      }\n\n      mwc-fab {\n        position: absolute;\n        right: 15px;\n        bottom: 15px;\n      }\n\n      ox-popup {\n        width: 90%;\n        height: 90%;\n        left: 50%;\n        top: 50%;\n        transform: translateX(-50%) translateY(-50%);\n        background: var(--secondary-color, black);\n\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      ox-board-viewer {\n        width: 98%;\n        height: 98%;\n        margin: auto;\n        padding: 0;\n      }\n\n      [brand] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n    `\n  ]\n\n  static registerGroup(group: ComponentGroup) {\n    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)\n\n    if (found) {\n      found = {\n        ...found,\n        ...group\n      }\n    } else {\n      Registry.push(group)\n    }\n  }\n\n  static registerTemplate(templates: ComponentTemplate[]): void {\n    templates &&\n      templates.forEach(template => {\n        var groups: string[] = typeof template.group == 'string' ? [template.group] : template.group\n\n        Registry.filter(group => groups.includes(group.name)).forEach(group => {\n          if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n            group.templates.push(template)\n          }\n        })\n      })\n  }\n\n  static get groups(): ComponentGroup[] {\n    return Registry\n  }\n\n  static getGroup(name: string) {\n    return Registry.find(group => group.name === name)\n  }\n\n  @property({ type: String }) boardName: string = ''\n  @property({ type: Object }) model: any = null\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Array }) selected: any[] = []\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT\n  @property({ type: Object }) provider: any = null\n  @property({ type: Boolean }) hideProperty: boolean = false\n  @property({ type: String }) overlay: string = ''\n  @property({ type: Object }) scene?: Scene\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Object }) themes: any = null\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  @query('edit-toolbar') private editToolbar!: EditToolbar\n\n  private group: string = ''\n  private shortcutHandler?: (e: KeyboardEvent) => void\n\n  constructor() {\n    super()\n\n    document.addEventListener('get-all-scene-component-ids', (e: Event) => {\n      var { component, callback } = (e as CustomEvent).detail\n\n      if (!this.scene) return\n\n      var ids\n      if (component) {\n        ids = this.scene.findAll(component).map(c => c.model.id)\n      } else {\n        ids = this.scene.ids.map(({ key }) => key)\n      }\n\n      ids = ids.filter(Boolean).sort()\n      callback(ids)\n    })\n\n    this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`)\n    this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`)\n    this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`)\n    this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)\n    this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)\n\n    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)\n    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)\n    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)\n    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)\n\n    this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)\n  }\n\n  static get scopedElements() {\n    return {\n      'edit-toolbar': EditToolbar,\n      'property-sidebar': PropertySidebar,\n      'component-toolbar': ComponentToolbar\n    }\n  }\n\n  render() {\n    return html`\n      <edit-toolbar\n        .scene=${this.scene}\n        .selected=${this.selected}\n        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}\n        @open-preview=${() => this.preview()}\n        @download-model=${() => this.downloadModel()}\n        @modeller-fullscreen=${() => togglefullscreen(this)}\n      >\n        ${this.renderBrandingZone()}\n      </edit-toolbar>\n\n      <div content>\n        <component-toolbar\n          .scene=${this.scene}\n          .mode=${this.mode}\n          @mode-changed=${(e: CustomEvent) => {\n            this.mode = e.detail.value\n          }}\n          .componentGroupList=${this.componentGroupList}\n          .group=${this.group}\n        >\n        </component-toolbar>\n\n        <div id=\"scene-wrap\">\n          <ox-scene-viewer\n            id=\"scene\"\n            .scene=${this.scene}\n            @scene-changed=${(e: CustomEvent) => {\n              this.scene = e.detail.value\n            }}\n            .model=${this.model}\n            .themes=${this.themes}\n            .selected=${this.selected}\n            @selected-changed=${(e: CustomEvent) => {\n              this.selected = e.detail.value\n            }}\n            .mode=${this.mode}\n            @mode-changed=${(e: CustomEvent) => {\n              this.mode = e.detail.value\n            }}\n            fit=\"ratio\"\n            .baseUrl=${this.baseUrl}\n            @contextmenu=${() => this.onContextMenu()}\n            .provider=${this.provider}\n            name=\"modeller\"\n          >\n            <ox-scene-layer type=\"selection-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"modeling-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"add-layer\"> </ox-scene-layer>\n            <ox-scene-layer type=\"guide-layer\">\n              <ox-scene-property name=\"ruler\" value=\"disabled\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-layer type=\"shift-layer\">\n              <ox-scene-property name=\"text\" value=\"${this.overlay}\"></ox-scene-property>\n              <ox-scene-property name=\"alpha\" value=\"0.3\"></ox-scene-property>\n              <ox-scene-property name=\"fontFamily\" value=\"arial\"></ox-scene-property>\n              <ox-scene-property name=\"fontSize\" value=\"30\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"fontColor\" value=\"navy\"></ox-scene-property>\n              <ox-scene-property name=\"textBaseline\" value=\"top\"></ox-scene-property>\n              <ox-scene-property name=\"textAlign\" value=\"left\"></ox-scene-property>\n              <ox-scene-property name=\"paddingTop\" value=\"50\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"paddingLeft\" value=\"50\" type=\"number\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-layer type=\"decotag-layer\"></ox-scene-layer>\n            <ox-scene-handler type=\"text-editor\"></ox-scene-handler>\n            <ox-scene-handler type=\"move-handler\"></ox-scene-handler>\n          </ox-scene-viewer>\n\n          <mwc-fab icon=\"save\" @click=${() => this.onTapSave()} title=\"save\"> </mwc-fab>\n        </div>\n\n        <property-sidebar\n          .scene=${this.scene}\n          .selected=${this.selected}\n          .collapsed=${this.hideProperty}\n          .fonts=${this.fonts}\n          .propertyEditor=${this.propertyEditor}\n        >\n        </property-sidebar>\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.bindShortcutEvent()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.unbindShortcutEvent()\n  }\n\n  close() {\n    this.model = null\n    this.requestUpdate()\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    if (MACOS) var ctrlKey = e.metaKey\n    else var ctrlKey = e.ctrlKey\n\n    switch (e.code) {\n      case 'KeyS':\n        if (ctrlKey) {\n          this.onTapSave()\n          e.preventDefault()\n        }\n        break\n    }\n  }\n\n  preview() {\n    const board = {\n      id: 'preview',\n      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null,\n      style: this.scene?.rootContainer.style\n    }\n\n    OxPopup.open({\n      template: html` <ox-board-viewer .provider=${this.provider} .board=${board}></ox-board-viewer> `,\n      parent: this.renderRoot as Element\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  downloadModel() {\n    if (!this.scene) return\n\n    var model = JSON.stringify(this.model, null, 2)\n    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'\n    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)\n  }\n\n  renderBrandingZone() {\n    return html`\n      <div brand>\n        <a href=\"/\">\n          <mwc-icon>home</mwc-icon>\n        </a>\n        <div board_name>${this.boardName}</div>\n      </div>\n    `\n  }\n\n  onTapSave() {\n    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))\n  }\n\n  bindShortcutEvent() {\n    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.\n    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']\n\n    this.shortcutHandler = (e: KeyboardEvent) => {\n      const target = e.composedPath()[0] as HTMLElement\n      var tagName = target.tagName\n      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'\n      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)\n\n      if (!isGlobalHotkey && isInput) return\n      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)\n    }\n\n    document.addEventListener('keydown', this.shortcutHandler)\n  }\n\n  unbindShortcutEvent() {\n    if (this.shortcutHandler) {\n      document.removeEventListener('keydown', this.shortcutHandler)\n      delete this.shortcutHandler\n    }\n  }\n\n  onContextMenu() {}\n}\n"]}

package/dist/src/ox-board-viewer.d.ts

@@ -1,7 +1,8 @@
 import '@material/mwc-fab';
 import '@material/mwc-icon';
-import './layers/mcs-event-handlers.js';
 import './layers/movement-layer.js';
+import './layers/mcs-mouse-event-layer.js';
+import './ox-board-component-info.js';
 import { LitElement, PropertyValues } from 'lit';
 import { Component, ReferenceProvider, Scene } from '@hatiolab/things-scene';
 export declare class BoardViewer extends LitElement {
@@ -29,6 +30,7 @@ export declare class BoardViewer extends LitElement {
     _prev: HTMLElement;
     _next: HTMLElement;
     _fullscreen: HTMLElement;
+    private popup?;
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -57,4 +59,6 @@ export declare class BoardViewer extends LitElement {
     onRunScenario(scenario: string, value: string | number | object, component: Component): Promise<void>;
     getSceneData(): object | undefined;
     getSceneValues(): object | undefined;
+    onClickEvent(e: MouseEvent, hint: any): void;
+    hidePopup(): void;
 }