@operato/board 0.2.42 → 0.2.46

package/dist/src/modeller/property-sidebar/effects/property-animation.js

@@ -0,0 +1,131 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/i18n-base';
+import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { EffectsSharedStyle } from './effects-shared-style';
+import { convert } from './value-converter';
+/**
+ * 컴포넌트의 animation 속성을 편집하는 element
+
+Example:
+
+    <property-animation .value=${animation}>
+    </property-animation>
+*/
+let PropertyAnimation = class PropertyAnimation extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    render() {
+        return html `
+      <label>Animation Type</label>
+      <select value-key="type" .value=${this.value && this.value.type}>
+        <option value="">None</option>
+        <option value="rotation">Rotation</option>
+        <option value="vibration">Vibration</option>
+        <option value="heartbeat">Heartbeat</option>
+        <option value="moving">Moving</option>
+        <option value="fade">Fade</option>
+        <option value="outline">Outline</option>
+      </select>
+
+      <label> <i18n-msg msgid="label.waiting-time">waiting time</i18n-msg> </label>
+      <input type="number" value-key="delay" .value=${this.value.delay} placeholder="ms" />
+
+      <label> <i18n-msg msgid="label.duration">duration</i18n-msg> </label>
+      <input type="number" value-key="duration" .value=${this.value.duration} placeholder="ms" />
+
+      ${this.value.type == 'rotation' || this.value.type == 'vibration'
+            ? html `
+            <label> <i18n-msg msgid="label.theta">theta</i18n-msg> </label>
+            <things-editor-angle-input value-key="theta" .radian=${this.value.theta}> </things-editor-angle-input>
+          `
+            : html ``}
+      ${this.value.type == 'heartbeat'
+            ? html `
+            <label> <i18n-msg msgid="label.scale">scale</i18n-msg> </label>
+            <input type="number" value-key="scale" .value=${this.value.scale} />
+          `
+            : html ``}
+      ${this.value.type == 'moving'
+            ? html `
+            <label> <i18n-msg msgid="label.x-axes">X-axes</i18n-msg> </label>
+            <input type="number" value-key="x" .value=${this.value.x} />
+
+            <label> <i18n-msg msgid="label.y-axes">Y-axes</i18n-msg> </label>
+            <input type="number" value-key="y" .value=${this.value.y} />
+          `
+            : html ``}
+      ${this.value.type == 'fade'
+            ? html `
+            <label> <i18n-msg msgid="label.start-alpha">start alpha</i18n-msg> </label>
+            <input type="number" value-key="startAlpha" .value=${this.value.startAlpha} />
+
+            <label> <i18n-msg msgid="label.end-alpha">end alpha</i18n-msg> </label>
+            <input type="number" value-key="endAlpha" .value=${this.value.endAlpha} />
+          `
+            : html ``}
+      ${this.value.type == 'outline'
+            ? html `
+            <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+            <input value-key="rideOn" .value=${this.value.rideOn || ''} list="target-list" />
+            <datalist id="target-list">
+              ${this.scene.ids.map(info => info.key).map(id => html ` <option value=${id}></option> `)}
+            </datalist>
+          `
+            : html ``}
+
+      <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${this.value.repeat} />
+      <label for="checkbox-repeat" class="checkbox-label"> <i18n-msg msgid="label.repeat">repeat</i18n-msg> </label>
+
+      <label>delta</label>
+      <select value-key="delta" .value=${this.value.delta}>
+        <option value="linear">linear</option>
+        <option value="quad">quad</option>
+        <option value="circ">circ</option>
+        <option value="back">back</option>
+        <option value="bounce">bounce</option>
+        <option value="elastic">elastic</option>
+      </select>
+
+      <label>ease</label>
+      <select value-key="ease" .value=${this.value.ease}>
+        <option value="in">in</option>
+        <option value="out">out</option>
+        <option value="inout">inout</option>
+      </select>
+    `;
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this.value = {
+            ...this.value,
+            [key]: convert(element)
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+PropertyAnimation.styles = [EffectsSharedStyle];
+__decorate([
+    property({ type: Object })
+], PropertyAnimation.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyAnimation.prototype, "scene", void 0);
+PropertyAnimation = __decorate([
+    customElement('property-animation')
+], PropertyAnimation);
+export default PropertyAnimation;
+//# sourceMappingURL=property-animation.js.map

package/dist/src/modeller/property-sidebar/effects/property-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport '@things-factory/modeller-ui/client/editors/things-editor-angle-input'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n    <property-animation .value=${animation}>\n    </property-animation>\n*/\n\n@customElement('property-animation')\nexport default class PropertyAnimation extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value: Properties = {}\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    return html`\n      <label>Animation Type</label>\n      <select value-key=\"type\" .value=${this.value && this.value.type}>\n        <option value=\"\">None</option>\n        <option value=\"rotation\">Rotation</option>\n        <option value=\"vibration\">Vibration</option>\n        <option value=\"heartbeat\">Heartbeat</option>\n        <option value=\"moving\">Moving</option>\n        <option value=\"fade\">Fade</option>\n        <option value=\"outline\">Outline</option>\n      </select>\n\n      <label> <i18n-msg msgid=\"label.waiting-time\">waiting time</i18n-msg> </label>\n      <input type=\"number\" value-key=\"delay\" .value=${this.value.delay} placeholder=\"ms\" />\n\n      <label> <i18n-msg msgid=\"label.duration\">duration</i18n-msg> </label>\n      <input type=\"number\" value-key=\"duration\" .value=${this.value.duration} placeholder=\"ms\" />\n\n      ${this.value.type == 'rotation' || this.value.type == 'vibration'\n        ? html`\n            <label> <i18n-msg msgid=\"label.theta\">theta</i18n-msg> </label>\n            <things-editor-angle-input value-key=\"theta\" .radian=${this.value.theta}> </things-editor-angle-input>\n          `\n        : html``}\n      ${this.value.type == 'heartbeat'\n        ? html`\n            <label> <i18n-msg msgid=\"label.scale\">scale</i18n-msg> </label>\n            <input type=\"number\" value-key=\"scale\" .value=${this.value.scale} />\n          `\n        : html``}\n      ${this.value.type == 'moving'\n        ? html`\n            <label> <i18n-msg msgid=\"label.x-axes\">X-axes</i18n-msg> </label>\n            <input type=\"number\" value-key=\"x\" .value=${this.value.x} />\n\n            <label> <i18n-msg msgid=\"label.y-axes\">Y-axes</i18n-msg> </label>\n            <input type=\"number\" value-key=\"y\" .value=${this.value.y} />\n          `\n        : html``}\n      ${this.value.type == 'fade'\n        ? html`\n            <label> <i18n-msg msgid=\"label.start-alpha\">start alpha</i18n-msg> </label>\n            <input type=\"number\" value-key=\"startAlpha\" .value=${this.value.startAlpha} />\n\n            <label> <i18n-msg msgid=\"label.end-alpha\">end alpha</i18n-msg> </label>\n            <input type=\"number\" value-key=\"endAlpha\" .value=${this.value.endAlpha} />\n          `\n        : html``}\n      ${this.value.type == 'outline'\n        ? html`\n            <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n            <input value-key=\"rideOn\" .value=${this.value.rideOn || ''} list=\"target-list\" />\n            <datalist id=\"target-list\">\n              ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n            </datalist>\n          `\n        : html``}\n\n      <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${this.value.repeat} />\n      <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <i18n-msg msgid=\"label.repeat\">repeat</i18n-msg> </label>\n\n      <label>delta</label>\n      <select value-key=\"delta\" .value=${this.value.delta}>\n        <option value=\"linear\">linear</option>\n        <option value=\"quad\">quad</option>\n        <option value=\"circ\">circ</option>\n        <option value=\"back\">back</option>\n        <option value=\"bounce\">bounce</option>\n        <option value=\"elastic\">elastic</option>\n      </select>\n\n      <label>ease</label>\n      <select value-key=\"ease\" .value=${this.value.ease}>\n        <option value=\"in\">in</option>\n        <option value=\"out\">out</option>\n        <option value=\"inout\">inout</option>\n      </select>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/effects/property-animations.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/i18n-base';
+import './property-animation';
+import '@material/mwc-icon';

package/dist/src/modeller/property-sidebar/effects/property-animations.js

@@ -0,0 +1,84 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/i18n-base';
+import './property-animation';
+import '@material/mwc-icon';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators';
+import { PropertySharedStyle } from '../property-shared-style';
+import { convert } from './value-converter';
+let PropertyAnimations = class PropertyAnimations extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this._expanded = false;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    render() {
+        return html `
+      <fieldset collapsable ?collapsed=${!this._expanded}>
+        <legend>
+          <title-with-help topic="board-modeller/effects/animation" msgid="label.animation">animation</title-with-help>
+          <mwc-icon
+            @click=${() => {
+            this._expanded = !this._expanded;
+        }}
+            >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon
+          >
+        </legend>
+
+        <property-animation value-key="oncreate" .scene=${this.scene} .value=${this.value.oncreate || {}}>
+        </property-animation>
+      </fieldset>
+    `;
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this.value = {
+            ...this.value,
+            [key]: convert(element)
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+PropertyAnimations.styles = [
+    PropertySharedStyle,
+    css `
+      fieldset[collapsable] legend {
+        box-sizing: border-box;
+        width: 100%;
+      }
+
+      fieldset[collapsable] legend mwc-icon {
+        float: right;
+        font-size: medium;
+        margin: 0;
+        cursor: pointer;
+      }
+
+      fieldset[collapsable][collapsed] > :not(legend) {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyAnimations.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyAnimations.prototype, "scene", void 0);
+__decorate([
+    state()
+], PropertyAnimations.prototype, "_expanded", void 0);
+PropertyAnimations = __decorate([
+    customElement('property-animations')
+], PropertyAnimations);
+//# sourceMappingURL=property-animations.js.map

package/dist/src/modeller/property-sidebar/effects/property-animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-animations.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animations.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAsB8B,UAAK,GAAe,EAAE,CAAA;QAGzC,cAAS,GAAY,KAAK,CAAA;IAwCrC,CAAC;IAtCC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,CAAC,IAAI,CAAC,SAAS;;;;qBAInC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAA;QAClC,CAAC;eACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;;;;0DAIH,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE;;;KAGnG,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AAhEQ,yBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAEhC;IAAR,KAAK,EAAE;qDAA2B;AAzB/B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAiEvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './property-animation'\nimport '@material/mwc-icon'\n\nimport { LitElement, css, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-animations')\nclass PropertyAnimations extends LitElement {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend mwc-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: Properties = {}\n  @property({ type: Object }) scene!: Scene\n\n  @state() _expanded: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    return html`\n      <fieldset collapsable ?collapsed=${!this._expanded}>\n        <legend>\n          <title-with-help topic=\"board-modeller/effects/animation\" msgid=\"label.animation\">animation</title-with-help>\n          <mwc-icon\n            @click=${() => {\n              this._expanded = !this._expanded\n            }}\n            >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon\n          >\n        </legend>\n\n        <property-animation value-key=\"oncreate\" .scene=${this.scene} .value=${this.value.oncreate || {}}>\n        </property-animation>\n      </fieldset>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/i18n-base';

package/dist/src/modeller/property-sidebar/effects/property-event-hover.js

@@ -0,0 +1,128 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/i18n-base';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { EffectsSharedStyle } from './effects-shared-style';
+import { convert } from './value-converter';
+let PropertyEventHover = class PropertyEventHover extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    render() {
+        var { action, value = '', target = '', emphasize, restore } = this.value;
+        return html `
+      <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
+      <label for="checkbox-emphasize" class="checkbox-label">
+        <i18n-msg msgid="label.emphasize">emphasize</i18n-msg>
+      </label>
+
+      <label> <i18n-msg msgid="label.action">action</i18n-msg> </label>
+      <select id="tap-select" value-key="action" .value=${action || ''}>
+        <option value=""></option>
+        <option value="popup">popup target board</option>
+        <option value="infoWindow">open infowindow</option>
+        <option value="data-toggle">toggle(true/false) target component data</option>
+        <option value="data-tristate">tristate(0/1/2) target component data</option>
+        <option value="data-set">set value to target component data</option>
+        <option value="value-set">set value to target component value</option>
+      </select>
+
+      <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+
+      ${action == 'popup'
+            ? html `
+            <things-editor-board-selector
+              value-key="target"
+              .value=${target}
+              custom-editor
+            ></things-editor-board-selector>
+          `
+            : html `
+            <input
+              value-key="target"
+              .value=${target || ''}
+              list="target-list"
+              .placeholder="${this._getPlaceHoder(action)}"
+            />
+
+            <datalist id="target-list">
+              ${this._getTargetList(action).map(item => html ` <option .value=${item}></option> `)}
+            </datalist>
+          `}
+      ${action == 'data-set' || action == 'value-set'
+            ? html `
+            <label> <i18n-msg msgid="label.value">value</i18n-msg> </label>
+            <things-editor-data value-key="value" .value=${value} custom-editor fullwidth></things-editor-data>
+          `
+            : html ``}
+
+      <input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
+      <label for="checkbox-restore" class="checkbox-label">
+        <i18n-msg msgid="label.restore-on-leave">restore on leave</i18n-msg>
+      </label>
+    `;
+    }
+    _getPlaceHoder(action) {
+        switch (action) {
+            case 'popup':
+            case 'goto':
+                return 'SCENE-100';
+            case 'link-open':
+            case 'link-move':
+                return 'http://www.hatiolab.com/';
+            default:
+                return '';
+        }
+    }
+    _getTargetList(action) {
+        switch (action) {
+            case 'data-toggle':
+            case 'data-tristate':
+            case 'data-set':
+            case 'value-set':
+                let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || [];
+                ids.unshift('(self)');
+                return ids;
+            case 'infoWindow':
+                return ((this.scene &&
+                    this.scene.ids
+                        .filter(i => {
+                        return this.scene.findById(i.key).get('type') == 'info-window';
+                    })
+                        .map(i => `${i.key}`)) ||
+                    []);
+            default:
+                return [];
+        }
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this.value = {
+            ...this.value,
+            [key]: convert(element)
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+PropertyEventHover.styles = [EffectsSharedStyle];
+__decorate([
+    property({ type: Object })
+], PropertyEventHover.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyEventHover.prototype, "scene", void 0);
+PropertyEventHover = __decorate([
+    customElement('property-event-hover')
+], PropertyEventHover);
+//# sourceMappingURL=property-event-hover.js.map

package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event-hover')\nclass PropertyEventHover extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value: Properties = {}\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value\n\n    return html`\n      <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n      <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n        <i18n-msg msgid=\"label.emphasize\">emphasize</i18n-msg>\n      </label>\n\n      <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n      </select>\n\n      <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n\n      ${action == 'popup'\n        ? html`\n            <things-editor-board-selector\n              value-key=\"target\"\n              .value=${target}\n              custom-editor\n            ></things-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target || ''}\n              list=\"target-list\"\n              .placeholder=\"${this._getPlaceHoder(action)}\"\n            />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n            <things-editor-data value-key=\"value\" .value=${value} custom-editor fullwidth></things-editor-data>\n          `\n        : html``}\n\n      <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n      <label for=\"checkbox-restore\" class=\"checkbox-label\">\n        <i18n-msg msgid=\"label.restore-on-leave\">restore on leave</i18n-msg>\n      </label>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string) {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n        ids.unshift('(self)')\n        return ids\n      case 'infoWindow':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => `${i.key}`)) ||\n          []\n        )\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/effects/property-event-tap.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/i18n-base';

package/dist/src/modeller/property-sidebar/effects/property-event-tap.js

@@ -0,0 +1,124 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/i18n-base';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { EffectsSharedStyle } from './effects-shared-style';
+import { convert } from './value-converter';
+let PropertyEventTap = class PropertyEventTap extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    render() {
+        var { action, value = '', target = '', pressed } = this.value;
+        return html `
+      <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
+      <label for="checkbox-pressed" class="checkbox-label"> <i18n-msg msgid="label.pressed">pressed</i18n-msg> </label>
+
+      <label> <i18n-msg msgid="label.action">action</i18n-msg> </label>
+      <select id="tap-select" value-key="action" .value=${action || ''}>
+        <option value=""></option>
+        <option value="goto">go to target board</option>
+        <option value="link-open">open new window for target link</option>
+        <option value="link-move">move to target link</option>
+        <option value="route-page">route to page</option>
+        <option value="popup">popup target board</option>
+        <option value="modal-popup">modal popup target board</option>
+        <option value="close-scene">close current board</option>
+        <option value="infoWindow">open infowindow</option>
+        <option value="toggle-info-window">toggle infowindow</option>
+        <option value="data-toggle">toggle(true/false) target component data</option>
+        <option value="data-tristate">tristate(0/1/2) target component data</option>
+        <option value="data-set">set value to target component data</option>
+        <option value="value-set">set value to target component value</option>
+      </select>
+
+      <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
+
+      ${action == 'goto' || action == 'popup'
+            ? html `
+            <things-editor-board-selector
+              value-key="target"
+              .value=${target}
+              custom-editor
+            ></things-editor-board-selector>
+          `
+            : html `
+            <input value-key="target" .value=${target} list="target-list" .placeholder=${this._getPlaceHoder(action)} />
+
+            <datalist id="target-list">
+              ${this._getTargetList(action).map(item => html ` <option .value=${item}></option> `)}
+            </datalist>
+          `}
+      ${action == 'data-set' || action == 'value-set'
+            ? html `
+            <label> <i18n-msg msgid="label.value">value</i18n-msg> </label>
+            <things-editor-data value-key="value" .value=${value} custom-editor fullwidth></things-editor-data>
+          `
+            : html ``}
+    `;
+    }
+    _getPlaceHoder(action) {
+        switch (action) {
+            case 'popup':
+            case 'goto':
+                return 'SCENE-100';
+            case 'link-open':
+            case 'link-move':
+                return 'http://www.hatiolab.com/';
+            default:
+                return '';
+        }
+    }
+    _getTargetList(action) {
+        switch (action) {
+            case 'data-toggle':
+            case 'data-tristate':
+            case 'data-set':
+            case 'value-set':
+                let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || [];
+                ids.unshift('(self)');
+                return ids;
+            case 'infoWindow':
+            case 'toggle-info-window':
+                return ((this.scene &&
+                    this.scene.ids
+                        .filter(i => {
+                        return this.scene.findById(i.key).get('type') == 'info-window';
+                    })
+                        .map(i => `${i.key}`)) ||
+                    []);
+            default:
+                return [];
+        }
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this.value = {
+            ...this.value,
+            [key]: convert(element)
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+PropertyEventTap.styles = [EffectsSharedStyle];
+__decorate([
+    property({ type: Object })
+], PropertyEventTap.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyEventTap.prototype, "scene", void 0);
+PropertyEventTap = __decorate([
+    customElement('property-event-tap')
+], PropertyEventTap);
+//# sourceMappingURL=property-event-tap.js.map

package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-tap.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event-tap')\nclass PropertyEventTap extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value: Properties = {}\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed } = this.value\n\n    return html`\n      <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n      <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <i18n-msg msgid=\"label.pressed\">pressed</i18n-msg> </label>\n\n      <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"goto\">go to target board</option>\n        <option value=\"link-open\">open new window for target link</option>\n        <option value=\"link-move\">move to target link</option>\n        <option value=\"route-page\">route to page</option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"modal-popup\">modal popup target board</option>\n        <option value=\"close-scene\">close current board</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"toggle-info-window\">toggle infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n      </select>\n\n      <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n\n      ${action == 'goto' || action == 'popup'\n        ? html`\n            <things-editor-board-selector\n              value-key=\"target\"\n              .value=${target}\n              custom-editor\n            ></things-editor-board-selector>\n          `\n        : html`\n            <input value-key=\"target\" .value=${target} list=\"target-list\" .placeholder=${this._getPlaceHoder(action)} />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n            <things-editor-data value-key=\"value\" .value=${value} custom-editor fullwidth></things-editor-data>\n          `\n        : html``}\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string) {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n        ids.unshift('(self)')\n        return ids\n      case 'infoWindow':\n      case 'toggle-info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => `${i.key}`)) ||\n          []\n        )\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/effects/property-event.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/i18n-base';
+import './property-event-hover';
+import './property-event-tap';

package/dist/src/modeller/property-sidebar/effects/property-event.js

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/i18n-base';
+import './property-event-hover';
+import './property-event-tap';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators';
+import { PropertySharedStyle } from '../property-shared-style';
+import { convert } from './value-converter';
+let PropertyEvent = class PropertyEvent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    render() {
+        return html `
+      <fieldset>
+        <legend>
+          <title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></title-with-help>
+        </legend>
+
+        <property-event-hover value-key="hover" .scene=${this.scene} .value=${this.value.hover || {}}>
+        </property-event-hover>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></title-with-help>
+        </legend>
+
+        <property-event-tap value-key="tap" .scene=${this.scene} .value=${this.value.tap || {}}> </property-event-tap>
+      </fieldset>
+    `;
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        this.value = {
+            ...this.value,
+            [key]: convert(element)
+        };
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+PropertyEvent.styles = [PropertySharedStyle];
+__decorate([
+    property({ type: Object })
+], PropertyEvent.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyEvent.prototype, "scene", void 0);
+PropertyEvent = __decorate([
+    customElement('property-event')
+], PropertyEvent);
+//# sourceMappingURL=property-event.js.map

package/dist/src/modeller/property-sidebar/effects/property-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAG8B,UAAK,GAAe,EAAE,CAAA;IA2CpD,CAAC;IAxCC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;yDAM0C,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS/C,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEzF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AA7CQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAJrC,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CA8ClB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './property-event-hover'\nimport './property-event-tap'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event')\nclass PropertyEvent extends LitElement {\n  static styles = [PropertySharedStyle]\n\n  @property({ type: Object }) value: Properties = {}\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.hover-event\" topic=\"board-modeller/effects/hover-event\"></title-with-help>\n        </legend>\n\n        <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${this.value.hover || {}}>\n        </property-event-hover>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></title-with-help>\n        </legend>\n\n        <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${this.value.tap || {}}> </property-event-tap>\n      </fieldset>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}