@fmsim/board 0.0.49

package/dist/src/layers/scroll-layer.js

@@ -0,0 +1,125 @@
+import { Component, Layer } from '@hatiolab/things-scene';
+export default class ScrollLayer extends Layer {
+    constructor() {
+        super(...arguments);
+        this.vscroller = null;
+        this.hscroller = null;
+    }
+    get capturable() {
+        return true;
+    }
+    render(ctx) {
+        const { scrolling } = this.state;
+        ctx.save();
+        ctx.beginPath();
+        ctx.fillStyle = '#777';
+        if (this.vscroller) {
+            const { left, top, width, height } = this.vscroller;
+            ctx.globalAlpha = scrolling == 'v' ? 1 : 0.3;
+            ctx.fillRect(left, top, width, height);
+        }
+        if (this.hscroller) {
+            const { left, top, width, height } = this.hscroller;
+            ctx.globalAlpha = scrolling == 'h' ? 1 : 0.3;
+            ctx.fillRect(left, top, width, height);
+        }
+        ctx.stroke();
+        ctx.restore();
+    }
+    contains(x, y) {
+        const vscroller = this.vscroller;
+        const hscroller = this.hscroller;
+        this.setState('scrolling', vscroller &&
+            x >= vscroller.left &&
+            x <= vscroller.left + vscroller.width &&
+            y >= vscroller.top &&
+            y <= vscroller.top + vscroller.height
+            ? 'v'
+            : hscroller &&
+                x >= hscroller.left &&
+                x <= hscroller.left + hscroller.width &&
+                y >= hscroller.top &&
+                y <= hscroller.top + hscroller.height
+                ? 'h'
+                : null);
+        return !!this.getState('scrolling');
+    }
+    get eventMap() {
+        return {
+            '(root)': {
+                'model-layer': {
+                    change: this.onchangeModelLayer
+                }
+            }
+        };
+    }
+    onchange(after) {
+        if ('scrolling' in after) {
+            this.invalidate();
+        }
+    }
+    ondragstart(e, hint) {
+        this.lastPosition = { x: e.offsetX, y: e.offsetY };
+    }
+    ondragmove(e, hint) {
+        const root = this.root;
+        const { clientWidth: cw, clientHeight: ch } = this.canvas; /* canvas width, height */
+        const { width: mw, height: mh } = this.rootModel.model; /* model width, height */
+        const { x, y } = { x: e.offsetX, y: e.offsetY };
+        const { x: sx, y: sy } = this._scale;
+        const { scrolling } = this.state;
+        const vx = mw / cw;
+        const vy = mh / ch;
+        if (scrolling)
+            // 모델레이어의 원점을 움직인다.
+            root.rootModel.move({
+                x: scrolling == 'h' ? (-x + this.lastPosition.x) * sx * vx : 0,
+                y: scrolling == 'v' ? (-y + this.lastPosition.y) * sy * vy : 0
+            }, false /* moving with relative position */);
+        this.lastPosition = { x: e.offsetX, y: e.offsetY };
+    }
+    ondragend() {
+        delete this.lastPosition;
+        this.setState({
+            scrolling: null
+        });
+    }
+    calcScrollerBounds() {
+        // const DPPX = Scene.DPPX
+        var { clientWidth: cw, clientHeight: ch } = this.canvas; /* canvas width, height */
+        const { width: mw, height: mh } = this.rootModel.model; /* model width, height */
+        const { x: sx = 1, y: sy = 1 } = this._scale || {};
+        const { x: tx = 0, y: ty = 0 } = this._translate || {};
+        const vx = mw / cw;
+        const vy = mh / ch;
+        var bounds = {
+            left: -tx / sx / vx,
+            top: ch - 10,
+            width: cw / sx / vx,
+            height: 10
+        };
+        this.hscroller = bounds.left > 1 || bounds.width + bounds.left < cw - 1 ? bounds : null;
+        bounds = {
+            left: cw - 10,
+            top: -ty / sy / vy,
+            width: 10,
+            height: ch / sy / vy
+        };
+        this.vscroller = bounds.top > 1 || bounds.height + bounds.top < ch - 1 ? bounds : null;
+        this.invalidate();
+    }
+    onchangeModelLayer(after, before, hint) {
+        if (after.scale) {
+            const { x = 1, y = 1 } = (after === null || after === void 0 ? void 0 : after.scale) || {};
+            this._scale = { x, y };
+            this.calcScrollerBounds();
+        }
+        if (after.translate) {
+            const { x = 0, y = 0 } = after.translate || {};
+            this._translate = { x, y };
+            this.calcScrollerBounds();
+        }
+    }
+}
+Component.register('scroll-layer', ScrollLayer);
+//# sourceMappingURL=scroll-layer.js.map

package/dist/src/layers/scroll-layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-layer.js","sourceRoot":"","sources":["../../../src/layers/scroll-layer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Layer, Properties, Scene } from '@hatiolab/things-scene'\n\nexport default class ScrollLayer extends Layer {\n  get capturable() {\n    return true\n  }\n\n  private _scale?: { x: number; y: number }\n  private _translate?: { x: number; y: number }\n  private lastPosition?: { x: number; y: number }\n\n  private vscroller: { left: number; top: number; width: number; height: number } | null = null\n  private hscroller: { left: number; top: number; width: number; height: number } | null = null\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { scrolling } = this.state\n\n    ctx.save()\n    ctx.beginPath()\n\n    ctx.fillStyle = '#777'\n\n    if (this.vscroller) {\n      const { left, top, width, height } = this.vscroller!\n\n      ctx.globalAlpha = scrolling == 'v' ? 1 : 0.3\n      ctx.fillRect(left, top, width, height)\n    }\n\n    if (this.hscroller) {\n      const { left, top, width, height } = this.hscroller!\n\n      ctx.globalAlpha = scrolling == 'h' ? 1 : 0.3\n      ctx.fillRect(left, top, width, height)\n    }\n\n    ctx.stroke()\n    ctx.restore()\n  }\n\n  contains(x: number, y: number) {\n    const vscroller = this.vscroller\n    const hscroller = this.hscroller\n\n    this.setState(\n      'scrolling',\n      vscroller &&\n        x >= vscroller.left &&\n        x <= vscroller.left + vscroller.width &&\n        y >= vscroller.top &&\n        y <= vscroller.top + vscroller.height\n        ? 'v'\n        : hscroller &&\n          x >= hscroller.left &&\n          x <= hscroller.left + hscroller.width &&\n          y >= hscroller.top &&\n          y <= hscroller.top + hscroller.height\n        ? 'h'\n        : null\n    )\n\n    return !!this.getState('scrolling')\n  }\n\n  get eventMap() {\n    return {\n      '(root)': {\n        'model-layer': {\n          change: this.onchangeModelLayer\n        }\n      }\n    }\n  }\n\n  onchange(after: Properties) {\n    if ('scrolling' in after) {\n      this.invalidate()\n    }\n  }\n\n  ondragstart(e: DragEvent, hint: any) {\n    this.lastPosition = { x: e.offsetX, y: e.offsetY }\n  }\n\n  ondragmove(e: DragEvent, hint: any) {\n    const root = this.root\n\n    const { clientWidth: cw, clientHeight: ch } = this.canvas! /* canvas width, height */\n    const { width: mw, height: mh } = this.rootModel.model /* model width, height */\n    const { x, y } = { x: e.offsetX, y: e.offsetY }\n    const { x: sx, y: sy } = this._scale!\n    const { scrolling } = this.state\n    const vx = mw / cw\n    const vy = mh / ch\n\n    if (scrolling)\n      // 모델레이어의 원점을 움직인다.\n      root.rootModel.move(\n        {\n          x: scrolling == 'h' ? (-x + this.lastPosition!.x) * sx * vx : 0,\n          y: scrolling == 'v' ? (-y + this.lastPosition!.y) * sy * vy : 0\n        },\n        false /* moving with relative position */\n      )\n\n    this.lastPosition = { x: e.offsetX, y: e.offsetY }\n  }\n\n  ondragend() {\n    delete this.lastPosition\n    this.setState({\n      scrolling: null\n    })\n  }\n\n  calcScrollerBounds() {\n    // const DPPX = Scene.DPPX\n    var { clientWidth: cw, clientHeight: ch } = this.canvas! /* canvas width, height */\n    const { width: mw, height: mh } = this.rootModel.model /* model width, height */\n    const { x: sx = 1, y: sy = 1 } = this._scale || {}\n    const { x: tx = 0, y: ty = 0 } = this._translate || {}\n\n    const vx = mw / cw\n    const vy = mh / ch\n\n    var bounds = {\n      left: -tx / sx / vx,\n      top: ch - 10,\n      width: cw / sx / vx,\n      height: 10\n    }\n    this.hscroller = bounds.left > 1 || bounds.width + bounds.left < cw - 1 ? bounds : null\n\n    bounds = {\n      left: cw - 10,\n      top: -ty / sy / vy,\n      width: 10,\n      height: ch / sy / vy\n    }\n    this.vscroller = bounds.top > 1 || bounds.height + bounds.top < ch - 1 ? bounds : null\n\n    this.invalidate()\n  }\n\n  onchangeModelLayer(after: any, before: any, hint: any) {\n    if (after.scale) {\n      const { x = 1, y = 1 } = after?.scale || {}\n      this._scale = { x, y }\n\n      this.calcScrollerBounds()\n    }\n\n    if (after.translate) {\n      const { x = 0, y = 0 } = after.translate || {}\n      this._translate = { x, y }\n\n      this.calcScrollerBounds()\n    }\n  }\n}\n\nComponent.register('scroll-layer', ScrollLayer)\n"]}

package/dist/src/layers/shift-handler.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/layers/shift-handler.js

@@ -0,0 +1,38 @@
+import { EventMap } from '@hatiolab/things-scene';
+import throttle from 'lodash-es/throttle';
+var last_position;
+var weakref;
+var position;
+const throttledMove = throttle(() => {
+    const { x, y } = position;
+    const target = weakref.deref();
+    if (!target) {
+        return;
+    }
+    // 모델레이어의 원점을 움직인다.
+    target.rootModel.move({
+        x: x - last_position.x,
+        y: y - last_position.y
+    }, false);
+    last_position = { x, y };
+}, 60, {
+    leading: true,
+    trailing: true
+});
+function ondragstart(e, hint) {
+    last_position = { x: e.offsetX, y: e.offsetY };
+}
+function ondragmove(e, hint) {
+    weakref = new WeakRef(hint.deliverer);
+    position = { x: e.offsetX, y: e.offsetY };
+    throttledMove();
+}
+EventMap.register('shift-handler', {
+    'model-layer': {
+        '(all)': {
+            dragstart: ondragstart,
+            dragmove: ondragmove
+        }
+    }
+});
+//# sourceMappingURL=shift-handler.js.map

package/dist/src/layers/shift-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shift-handler.js","sourceRoot":"","sources":["../../../src/layers/shift-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAEzC,IAAI,aAAuC,CAAA;AAC3C,IAAI,OAAY,CAAA;AAChB,IAAI,QAAkC,CAAA;AAEtC,MAAM,aAAa,GAAG,QAAQ,CAC5B,GAAG,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,QAAS,CAAA;IAC1B,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,EAAE,CAAA;IAE9B,IAAI,CAAC,MAAM,EAAE;QACX,OAAM;KACP;IAED,mBAAmB;IACnB,MAAM,CAAC,SAAS,CAAC,IAAI,CACnB;QACE,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,CAAC;QACtB,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,CAAC;KACvB,EACD,KAAK,CACN,CAAA;IAED,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAC1B,CAAC,EACD,EAAE,EACF;IACE,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;CACf,CACF,CAAA;AAED,SAAS,WAAW,CAAC,CAAY,EAAE,IAAS;IAC1C,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAA;AAChD,CAAC;AAED,SAAS,UAAU,CAAC,CAAY,EAAE,IAAS;IACzC,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACrC,QAAQ,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAA;IAEzC,aAAa,EAAE,CAAA;AACjB,CAAC;AAED,QAAQ,CAAC,QAAQ,CAAC,eAAe,EAAE;IACjC,aAAa,EAAE;QACb,OAAO,EAAE;YACP,SAAS,EAAE,WAAW;YACtB,QAAQ,EAAE,UAAU;SACrB;KACF;CACF,CAAC,CAAA","sourcesContent":["import { EventMap } from '@hatiolab/things-scene'\nimport throttle from 'lodash-es/throttle'\n\nvar last_position: { x: number; y: number }\nvar weakref: any\nvar position: { x: number; y: number }\n\nconst throttledMove = throttle(\n  () => {\n    const { x, y } = position!\n    const target = weakref.deref()\n\n    if (!target) {\n      return\n    }\n\n    // 모델레이어의 원점을 움직인다.\n    target.rootModel.move(\n      {\n        x: x - last_position.x,\n        y: y - last_position.y\n      },\n      false\n    )\n\n    last_position = { x, y }\n  },\n  60,\n  {\n    leading: true,\n    trailing: true\n  }\n)\n\nfunction ondragstart(e: DragEvent, hint: any) {\n  last_position = { x: e.offsetX, y: e.offsetY }\n}\n\nfunction ondragmove(e: DragEvent, hint: any) {\n  weakref = new WeakRef(hint.deliverer)\n  position = { x: e.offsetX, y: e.offsetY }\n\n  throttledMove()\n}\n\nEventMap.register('shift-handler', {\n  'model-layer': {\n    '(all)': {\n      dragstart: ondragstart,\n      dragmove: ondragmove\n    }\n  }\n})\n"]}

package/dist/src/layers/zoom-handler.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/layers/zoom-handler.js

@@ -0,0 +1,36 @@
+import { EventMap } from '@hatiolab/things-scene';
+function onwheelscale(e, hint) {
+    /* shiftKey + wheel 은 deltaX 값을 변화시킨다. */
+    if (e.deltaY == 0 && e.deltaX == 0)
+        return;
+    var model_layer = hint.deliverer;
+    var dir = e.deltaY < 0 ? 1 : -1;
+    let scale = model_layer.get('scale') || { x: 1, y: 1 };
+    let translate = model_layer.get('translate');
+    let x = e.offsetX;
+    let y = e.offsetY;
+    let p = model_layer.transcoordC2S(x, y);
+    let delta = dir * 0.1;
+    let newscale = {
+        x: scale.x + delta,
+        y: scale.y + delta
+    };
+    if ((dir < 0 && scale.x < 0.2) || (dir > 0 && scale.x > 10))
+        return;
+    /* 휠을 밀면.. 확대 : zoom in */
+    /* 휠을 당기면.. 축소 : zoom out */
+    model_layer.set('scale', newscale);
+    let newp = model_layer.transcoordC2S(x, y);
+    model_layer.set('translate', {
+        x: translate.x + (newp.x - p.x) * newscale.x,
+        y: translate.y + (newp.y - p.y) * newscale.y
+    });
+}
+EventMap.register('zoom-handler', {
+    'model-layer': {
+        '(all)': {
+            wheel: onwheelscale
+        }
+    }
+});
+//# sourceMappingURL=zoom-handler.js.map

package/dist/src/layers/zoom-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-handler.js","sourceRoot":"","sources":["../../../src/layers/zoom-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjD,SAAS,YAAY,CAAC,CAAa,EAAE,IAAS;IAC5C,yCAAyC;IACzC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC;QAAE,OAAM;IAE1C,IAAI,WAAW,GAAG,IAAI,CAAC,SAAS,CAAA;IAEhC,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE/B,IAAI,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IACtD,IAAI,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;IAC5C,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAA;IACjB,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAA;IAEjB,IAAI,CAAC,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IACvC,IAAI,KAAK,GAAG,GAAG,GAAG,GAAG,CAAA;IAErB,IAAI,QAAQ,GAAG;QACb,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK;QAClB,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK;KACnB,CAAA;IAED,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC;QAAE,OAAM;IAEnE,0BAA0B;IAC1B,4BAA4B;IAE5B,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;IAElC,IAAI,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1C,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE;QAC3B,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC;QAC5C,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC;KAC7C,CAAC,CAAA;AACJ,CAAC;AAED,QAAQ,CAAC,QAAQ,CAAC,cAAc,EAAE;IAChC,aAAa,EAAE;QACb,OAAO,EAAE;YACP,KAAK,EAAE,YAAY;SACpB;KACF;CACF,CAAC,CAAA","sourcesContent":["import { EventMap } from '@hatiolab/things-scene'\n\nfunction onwheelscale(e: WheelEvent, hint: any) {\n  /* shiftKey + wheel 은 deltaX 값을 변화시킨다. */\n  if (e.deltaY == 0 && e.deltaX == 0) return\n\n  var model_layer = hint.deliverer\n\n  var dir = e.deltaY < 0 ? 1 : -1\n\n  let scale = model_layer.get('scale') || { x: 1, y: 1 }\n  let translate = model_layer.get('translate')\n  let x = e.offsetX\n  let y = e.offsetY\n\n  let p = model_layer.transcoordC2S(x, y)\n  let delta = dir * 0.1\n\n  let newscale = {\n    x: scale.x + delta,\n    y: scale.y + delta\n  }\n\n  if ((dir < 0 && scale.x < 0.2) || (dir > 0 && scale.x > 10)) return\n\n  /* 휠을 밀면.. 확대 : zoom in */\n  /* 휠을 당기면.. 축소 : zoom out */\n\n  model_layer.set('scale', newscale)\n\n  let newp = model_layer.transcoordC2S(x, y)\n\n  model_layer.set('translate', {\n    x: translate.x + (newp.x - p.x) * newscale.x,\n    y: translate.y + (newp.y - p.y) * newscale.y\n  })\n}\n\nEventMap.register('zoom-handler', {\n  'model-layer': {\n    '(all)': {\n      wheel: onwheelscale\n    }\n  }\n})\n"]}

package/dist/src/modeller/component-toolbar/component-detail.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/markdown';
+import { LitElement } from 'lit';
+export declare class ComponentDetail extends LitElement {
+    static styles: import("lit").CSSResult[];
+    template: {
+        about: string;
+    } | null;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/modeller/component-toolbar/component-detail.js

@@ -0,0 +1,53 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/markdown';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+export class ComponentDetail extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.template = null;
+    }
+    render() {
+        const { about } = this.template || {};
+        return html ` <ox-markdown .src=${about}></ox-markdown> `;
+    }
+}
+ComponentDetail.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+
+        background-color: var(--component-detail-background-color, white);
+        margin: 0px;
+        padding: 10px;
+
+        width: 360px;
+        height: 100%;
+
+        overflow: hidden;
+
+        border: 2px solid var(--component-detail-border-color);
+        box-sizing: border-box;
+
+        position: absolute;
+        top: 0px;
+
+        z-index: 1;
+      }
+
+      ox-markdown {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ComponentDetail.prototype, "template", void 0);
+//# sourceMappingURL=component-detail.js.map

package/dist/src/modeller/component-toolbar/component-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-detail.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAA/C;;QAiC8B,aAAQ,GAA6B,IAAI,CAAA;IAOvE,CAAC;IALC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAErC,OAAO,IAAI,CAAA,sBAAsB,KAAK,kBAAkB,CAAA;IAC1D,CAAC;;AAtCM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,AA9BY,CA8BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0C","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/markdown'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport class ComponentDetail extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-detail-background-color, white);\n        margin: 0px;\n        padding: 10px;\n\n        width: 360px;\n        height: 100%;\n\n        overflow: hidden;\n\n        border: 2px solid var(--component-detail-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      ox-markdown {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) template: { about: string } | null = null\n\n  render() {\n    const { about } = this.template || {}\n\n    return html` <ox-markdown .src=${about}></ox-markdown> `\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-menu.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Scene } from '@hatiolab/things-scene';
+import { Pallet, PalletItem } from '../../types';
+import { ComponentDetail } from './component-detail';
+declare const ComponentMenu_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class ComponentMenu extends ComponentMenu_base {
+    static styles: import("lit").CSSResult[];
+    groups: Pallet[];
+    scene: Scene | null;
+    group: string | null;
+    templates: PalletItem[];
+    template: PalletItem | any;
+    detail: HTMLElement;
+    static get scopedElements(): {
+        'component-detail': typeof ComponentDetail;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    findTemplate(type: string | null | undefined): void;
+    onHoverComponent(e: MouseEvent): void;
+    onClickTemplate(e: MouseEvent): void;
+    templateIcon(template: PalletItem): HTMLImageElement;
+}
+export {};

package/dist/src/modeller/component-toolbar/component-menu.js

@@ -0,0 +1,192 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScrollbarStyles } from '@operato/styles';
+import { ComponentDetail } from './component-detail';
+const noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href;
+export class ComponentMenu extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.groups = [];
+        this.scene = null;
+        this.group = '';
+        this.templates = [];
+    }
+    static get scopedElements() {
+        return {
+            'component-detail': ComponentDetail
+        };
+    }
+    render() {
+        return this.group
+            ? html `
+          <h2 onclick=${(e) => e.stopPropagation()}>${this.group} list</h2>
+
+          <div templates @mouseover=${(e) => this.onHoverComponent(e)}>
+            ${(this.templates || []).map(template => html `
+                <div @click=${this.onClickTemplate} data-type=${template.type} template>
+                  <img src=${this.templateIcon(template)} />${template.type}
+                </div>
+              `)}
+          </div>
+
+          <component-detail
+            tabindex="-1"
+            @focusout=${() => {
+                this.template = null;
+            }}
+            .template=${this.template}
+            hidden
+          >
+          </component-detail>
+        `
+            : html ``;
+    }
+    updated(changes) {
+        var _a;
+        if (changes.has('group')) {
+            if (!this.group) {
+                this.templates = [];
+                this.setAttribute('hidden', '');
+            }
+            else {
+                this.templates = ((_a = this.groups.find((g) => g.name === this.group)) === null || _a === void 0 ? void 0 : _a.templates) || [];
+                this.removeAttribute('active');
+            }
+        }
+        if (changes.has('template')) {
+            this.template && this.template.about
+                ? this.detail.removeAttribute('hidden')
+                : this.detail.setAttribute('hidden', '');
+        }
+    }
+    findTemplate(type) {
+        this.template = type && this.templates.find(template => template.type == type);
+    }
+    onHoverComponent(e) {
+        var _a;
+        const button = e.target;
+        this.findTemplate((_a = button.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type'));
+    }
+    onClickTemplate(e) {
+        var _a;
+        var item = e.target;
+        var type = (_a = item.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type');
+        if (!type) {
+            return;
+        }
+        if (this.scene) {
+            this.template = this.templates.find(template => template.type == type);
+            this.template && this.scene.startAddMode(JSON.parse(JSON.stringify(this.template.model)));
+        }
+        this.group = null;
+    }
+    templateIcon(template) {
+        return template.icon || noImage;
+    }
+}
+ComponentMenu.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+
+        background-color: var(--component-menu-background-color);
+        margin: 0px;
+        padding: 0px;
+
+        width: 180px;
+        height: 100%;
+
+        overflow: visible;
+
+        border: 2px solid var(--component-menu-border-color);
+        box-sizing: border-box;
+
+        position: absolute;
+        top: 0px;
+
+        z-index: 1;
+      }
+
+      h2 {
+        background-color: var(--component-menu-border-color);
+        padding: 1px 5px;
+        margin: 0;
+        font: var(--component-menu-title);
+        color: #fff;
+        text-transform: capitalize;
+      }
+
+      [templates] {
+        flex: 1;
+
+        display: block;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+
+        background-color: var(--component-menu-background-color);
+      }
+
+      [template] {
+        display: flex;
+        align-items: center;
+        min-height: var(--component-menu-item-icon-size);
+        padding: 0 5px 0 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        font-size: 11px;
+        color: var(--component-menu-item-color);
+      }
+
+      [template]:hover,
+      [template]:focus {
+        color: var(--component-menu-item-hover-color);
+        font-weight: bold;
+        cursor: pointer;
+      }
+
+      [template] img {
+        margin: 5px;
+        width: var(--component-menu-item-icon-size);
+        height: var(--component-menu-item-icon-size);
+      }
+
+      component-detail {
+        position: absolute;
+        top: 0;
+        left: 180px;
+        height: 100%;
+        outline: none;
+      }
+
+      component-detail[hidden] {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ComponentMenu.prototype, "groups", void 0);
+__decorate([
+    property({ type: Object })
+], ComponentMenu.prototype, "scene", void 0);
+__decorate([
+    property({ type: String })
+], ComponentMenu.prototype, "group", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "templates", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "template", void 0);
+__decorate([
+    query('component-detail')
+], ComponentMenu.prototype, "detail", void 0);
+//# sourceMappingURL=component-menu.js.map

package/dist/src/modeller/component-toolbar/component-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Pallet, PalletItem } from '../../types'\nimport { ComponentDetail } from './component-detail'\n\nconst noImage = new URL('../../../../icons/components/no-image.png', import.meta.url).href\n\nexport class ComponentMenu extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-menu-background-color);\n        margin: 0px;\n        padding: 0px;\n\n        width: 180px;\n        height: 100%;\n\n        overflow: visible;\n\n        border: 2px solid var(--component-menu-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      h2 {\n        background-color: var(--component-menu-border-color);\n        padding: 1px 5px;\n        margin: 0;\n        font: var(--component-menu-title);\n        color: #fff;\n        text-transform: capitalize;\n      }\n\n      [templates] {\n        flex: 1;\n\n        display: block;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n\n        background-color: var(--component-menu-background-color);\n      }\n\n      [template] {\n        display: flex;\n        align-items: center;\n        min-height: var(--component-menu-item-icon-size);\n        padding: 0 5px 0 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        font-size: 11px;\n        color: var(--component-menu-item-color);\n      }\n\n      [template]:hover,\n      [template]:focus {\n        color: var(--component-menu-item-hover-color);\n        font-weight: bold;\n        cursor: pointer;\n      }\n\n      [template] img {\n        margin: 5px;\n        width: var(--component-menu-item-icon-size);\n        height: var(--component-menu-item-icon-size);\n      }\n\n      component-detail {\n        position: absolute;\n        top: 0;\n        left: 180px;\n        height: 100%;\n        outline: none;\n      }\n\n      component-detail[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) groups: Pallet[] = []\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: String }) group: string | null = ''\n\n  @state() templates: PalletItem[] = []\n  @state() template: PalletItem | any\n\n  @query('component-detail') detail!: HTMLElement\n\n  static get scopedElements() {\n    return {\n      'component-detail': ComponentDetail\n    }\n  }\n\n  render() {\n    return this.group\n      ? html`\n          <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n          <div templates @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}>\n            ${(this.templates || []).map(\n              template => html`\n                <div @click=${this.onClickTemplate} data-type=${template.type} template>\n                  <img src=${this.templateIcon(template)} />${template.type}\n                </div>\n              `\n            )}\n          </div>\n\n          <component-detail\n            tabindex=\"-1\"\n            @focusout=${() => {\n              this.template = null\n            }}\n            .template=${this.template}\n            hidden\n          >\n          </component-detail>\n        `\n      : html``\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('group')) {\n      if (!this.group) {\n        this.templates = []\n        this.setAttribute('hidden', '')\n      } else {\n        this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n        this.removeAttribute('active')\n      }\n    }\n\n    if (changes.has('template')) {\n      this.template && this.template.about\n        ? this.detail.removeAttribute('hidden')\n        : this.detail.setAttribute('hidden', '')\n    }\n  }\n\n  findTemplate(type: string | null | undefined) {\n    this.template = type && this.templates.find(template => template.type == type)\n  }\n\n  onHoverComponent(e: MouseEvent) {\n    const button = e.target as HTMLElement\n    this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))\n  }\n\n  onClickTemplate(e: MouseEvent) {\n    var item = e.target as HTMLElement\n    var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n    if (!type) {\n      return\n    }\n\n    if (this.scene) {\n      this.template = this.templates.find(template => template.type == type)\n      this.template && this.scene.startAddMode(JSON.parse(JSON.stringify(this.template.model)))\n    }\n\n    this.group = null\n  }\n\n  templateIcon(template: PalletItem) {\n    return template.icon || noImage\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-toolbar.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Scene, SCENE_MODE } from '@hatiolab/things-scene';
+import { ComponentGroup } from '../../types';
+import { ComponentMenu } from './component-menu.js';
+declare const ComponentToolbar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class ComponentToolbar extends ComponentToolbar_base {
+    static styles: import("lit").CSSResult[];
+    componentGroupList: ComponentGroup[];
+    group?: string | null;
+    scene: Scene;
+    mode: SCENE_MODE;
+    shift: HTMLImageElement;
+    private menu;
+    private componentsContainer;
+    private groups;
+    private icons;
+    updated(changes: PropertyValues<this>): void;
+    static get scopedElements(): {
+        'component-menu': typeof ComponentMenu;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    onWheelEvent(e: Event): void;
+    _setMode(mode: SCENE_MODE): void;
+    _onClickShift(e: MouseEvent): void;
+    _onClickGroup(e: MouseEvent): Promise<void>;
+}
+export {};