@operato/process 1.1.5 → 1.1.6

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.1.6](https://github.com/heartyoh/ioperato/compare/v1.1.5...v1.1.6) (2022-11-09)
+
+
+### :bug: Bug Fix
+
+* process modeller ([19cb2ca](https://github.com/heartyoh/ioperato/commit/19cb2ca5d78b9a32a0dd58a8b5c330f52d151a16))
+
+
+
 ### [1.1.5](https://github.com/heartyoh/ioperato/compare/v1.1.4...v1.1.5) (2022-11-09)
 
 **Note:** Version bump only for package @operato/process

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

@@ -5,6 +5,7 @@ import '@operato/i18n/ox-i18n.js';
 import '@operato/help/ox-title-with-help.js';
 import { Properties, Scene } from '@hatiolab/things-scene';
 import { AbstractProperty } from '../abstract-property.js';
+import { PropertyEvent } from './property-event.js';
 import { PropertyShadow } from './property-shadow.js';
 declare const PropertyEffects_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
 export declare class PropertyEffects extends PropertyEffects_base {
@@ -14,6 +15,7 @@ export declare class PropertyEffects extends PropertyEffects_base {
     firstUpdated(): void;
     static get scopedElements(): {
         'process-property-shadow': typeof PropertyShadow;
+        'process-property-event': typeof PropertyEvent;
     };
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -9,6 +9,7 @@ import { property } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { AbstractProperty } from '../abstract-property.js';
 import { PropertySharedStyle } from '../property-shared-style.js';
+import { PropertyEvent } from './property-event.js';
 import { PropertyShadow } from './property-shadow.js';
 export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
     firstUpdated() {
@@ -16,7 +17,8 @@ export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
     }
     static get scopedElements() {
         return {
-            'process-property-shadow': PropertyShadow
+            'process-property-shadow': PropertyShadow,
+            'process-property-event': PropertyEvent
         };
     }
     render() {
@@ -29,6 +31,9 @@ export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
 
         <process-property-shadow value-key="shadow" .value=${value.shadow || {}}> </process-property-shadow>
       </fieldset>
+
+      <process-property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}>
+      </process-property-event>
     `;
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,MAAM,OAAO,eAAgB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAMxE,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,yBAAyB,EAAE,cAAc;SAC1C,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;6DAM8C,KAAK,CAAC,MAAM,IAAI,EAAE;;KAE1E,CAAA;IACH,CAAC;;AA3BM,sBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\nimport { PropertyShadow } from './property-shadow.js'\n\nexport class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {\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  static get scopedElements() {\n    return {\n      'process-property-shadow': PropertyShadow\n    }\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-title-with-help topic=\"process-modeller/effects/shadow\" msgid=\"label.shadow\">shadow</ox-title-with-help>\n        </legend>\n\n        <process-property-shadow value-key=\"shadow\" .value=${value.shadow || {}}> </process-property-shadow>\n      </fieldset>\n    `\n  }\n}\n"]}
+{"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,MAAM,OAAO,eAAgB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAMxE,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,yBAAyB,EAAE,cAAc;YACzC,wBAAwB,EAAE,aAAa;SACxC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;6DAM8C,KAAK,CAAC,MAAM,IAAI,EAAE;;;yDAGtB,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;;KAE1F,CAAA;IACH,CAAC;;AA/BM,sBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\nimport { PropertyEvent } from './property-event.js'\nimport { PropertyShadow } from './property-shadow.js'\n\nexport class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {\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  static get scopedElements() {\n    return {\n      'process-property-shadow': PropertyShadow,\n      'process-property-event': PropertyEvent\n    }\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-title-with-help topic=\"process-modeller/effects/shadow\" msgid=\"label.shadow\">shadow</ox-title-with-help>\n        </legend>\n\n        <process-property-shadow value-key=\"shadow\" .value=${value.shadow || {}}> </process-property-shadow>\n      </fieldset>\n\n      <process-property-event value-key=\"event\" .scene=${this.scene} .value=${value.event || {}}>\n      </process-property-event>\n    `\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/input/ox-input-data.js';
+import '@operato/i18n/ox-i18n.js';
+import { LitElement } from 'lit';
+import { Properties, Scene } from '@hatiolab/things-scene';
+export declare class PropertyEventHover extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene?: Scene;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _getPlaceHoder(action: string): "" | "SCENE-100" | "http://www.hatiolab.com/";
+    _getTargetList(action: string): {
+        value: string;
+        description: string;
+    }[];
+    _onValueChange(e: Event): void;
+}

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

@@ -0,0 +1,127 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-data.js';
+import '@operato/i18n/ox-i18n.js';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EffectsSharedStyle } from './effects-shared-style.js';
+import { convert } from './value-converter';
+export class PropertyEventHover extends LitElement {
+    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">
+        <ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
+      </label>
+
+      <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
+      <select id="tap-select" value-key="action" .value=${action || ''}>
+        <option value=""></option>
+        <option value="popup">popup target board</option>
+      </select>
+
+      <label> <ox-i18n msgid="label.target">target</ox-i18n> </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(({ value, description }) => html ` <option .value=${value}>${description}</option> `)}
+            </datalist>
+          `}
+      ${action == 'data-set' || action == 'value-set'
+            ? html `
+            <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
+            <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
+          `
+            : html ``}
+
+      <input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
+      <label for="checkbox-restore" class="checkbox-label">
+        <ox-i18n msgid="label.restore-on-leave">restore on leave</ox-i18n>
+      </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 => {
+                        var _a;
+                        const id = i.key;
+                        return { value: `#${id}`, description: (_a = this.scene.findById(id)) === null || _a === void 0 ? void 0 : _a.get('type') };
+                    })) ||
+                    [];
+                ids.unshift({ value: '(self)', description: 'self component' });
+                return ids;
+            case 'infoWindow':
+                return ((this.scene &&
+                    this.scene.ids
+                        .filter(i => {
+                        return this.scene.findById(i.key).get('type') == 'info-window';
+                    })
+                        .map(i => {
+                        var _a;
+                        const id = i.key;
+                        return { value: `#${id}`, description: (_a = this.scene.findById(id)) === null || _a === void 0 ? void 0 : _a.get('type') };
+                    })) ||
+                    []);
+            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);
+//# 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 '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style.js'\nimport { convert } from './value-converter'\n\nexport class 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        <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n      </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target board</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </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(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-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        <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\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): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\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 => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\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,28 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/input/ox-input-data.js';
+import '@operato/i18n/ox-i18n.js';
+import { LitElement } from 'lit';
+import { Properties, Scene } from '@hatiolab/things-scene';
+export declare class PropertyEventTap extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene?: Scene;
+    scenarios: {
+        value: string;
+        description: string;
+    }[];
+    targetList: {
+        value: string;
+        description: string;
+    }[];
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    _getPlaceHoder(action: string): "" | "http://www.hatiolab.com/";
+    _getInputList(action: string): {
+        value: string;
+        description: string;
+    }[];
+    _onValueChange(e: Event): void;
+}

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

@@ -0,0 +1,199 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-data.js';
+import '@operato/i18n/ox-i18n.js';
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { scenarios } from '../../../graphql/scenario';
+import { EffectsSharedStyle } from './effects-shared-style';
+import { convert } from './value-converter';
+export class PropertyEventTap extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.scenarios = [];
+        this.targetList = [];
+    }
+    async firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    render() {
+        var { action, value = '', target = '', pressed, options } = this.value || {};
+        var { input = '(self)', output = true } = options || {};
+        return html `
+      <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
+      <label for="checkbox-pressed" class="checkbox-label"> <ox-i18n msgid="label.pressed">pressed</ox-i18n> </label>
+
+      <label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
+      <select
+        id="tap-select"
+        value-key="action"
+        .value=${action || ''}
+        @change=${async (e) => {
+            if (e.target.value === 'start-scenario') {
+                this.scenarios = (await scenarios()).map(({ name, description }) => {
+                    return { value: name, description };
+                });
+            }
+        }}
+      >
+        <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>
+      </select>
+
+      <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
+
+      ${action === 'goto' || (action === null || action === void 0 ? void 0 : action.includes('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)}
+              @focusin=${() => {
+                this.targetList = this._getInputList(action);
+            }}
+            />
+
+            <datalist id="target-list">
+              ${this.targetList.map(({ value, description }) => html ` <option .value=${value}>${description}</option> `)}
+            </datalist>
+          `}
+      ${action === 'goto' || (action === null || action === void 0 ? void 0 : action.includes('popup'))
+            ? html `
+            <label for="input"> <ox-i18n msgid="label.input-data">input</ox-i18n> </label>
+            <input
+              id="input"
+              value-key="input"
+              .value=${input}
+              list="input-list"
+              @focusin=${() => {
+                this.targetList = this._getInputList(action);
+            }}
+            />
+            <datalist id="input-list">
+              ${this.targetList.map(({ value, description }) => html ` <option .value=${value}>${description}</option> `)}
+            </datalist>
+            ${
+            /* currently 'goto' does not support returning result */
+            (action === null || action === void 0 ? void 0 : action.includes('popup'))
+                ? html ` <input id="checkbox-output" type="checkbox" value-key="output" .checked=${output} />
+                    <label for="checkbox-output" class="checkbox-label">
+                      <ox-i18n msgid="label.will-get-return">will-get-return</ox-i18n>
+                    </label>`
+                : html ``}
+          `
+            : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'
+                ? html `
+            <label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
+            <ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
+          `
+                : html ``}
+    `;
+    }
+    _getPlaceHoder(action) {
+        switch (action) {
+            case 'link-open':
+            case 'link-move':
+                return 'http://www.hatiolab.com/';
+            default:
+                return '';
+        }
+    }
+    _getInputList(action) {
+        switch (action) {
+            case 'data-toggle':
+            case 'data-tristate':
+            case 'data-set':
+            case 'value-set':
+            case 'popup':
+            case 'modal-popup':
+                let ids = (this.scene &&
+                    this.scene.ids.map(i => {
+                        var _a;
+                        const id = i.key;
+                        return { value: `#${id}`, description: (_a = this.scene.findById(id)) === null || _a === void 0 ? void 0 : _a.get('type') };
+                    })) ||
+                    [];
+                ids.unshift({ value: '(self)', description: 'self component' });
+                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 => {
+                        var _a;
+                        const id = i.key;
+                        return { value: `#${id}`, description: (_a = this.scene.findById(id)) === null || _a === void 0 ? void 0 : _a.get('type') };
+                    })) ||
+                    []);
+            case 'start-scenario':
+            case 'run-scenario':
+                return this.scenarios;
+            default:
+                return [];
+        }
+    }
+    _onValueChange(e) {
+        var element = e.target;
+        var key = element.getAttribute('value-key');
+        if (!key) {
+            return;
+        }
+        if (key === 'input' || key === 'output') {
+            var { options = {} } = this.value || {};
+            this.value = {
+                ...this.value,
+                options: {
+                    ...options,
+                    [key]: convert(element)
+                }
+            };
+        }
+        else {
+            this.value = {
+                ...this.value,
+                [key]: convert(element)
+            };
+        }
+        var { action } = this.value;
+        if (action !== 'goto' && !(action === null || action === void 0 ? void 0 : action.includes('popup'))) {
+            /* clear unused options */
+            delete this.value.options;
+        }
+        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);
+__decorate([
+    state()
+], PropertyEventTap.prototype, "scenarios", void 0);
+__decorate([
+    state()
+], PropertyEventTap.prototype, "targetList", void 0);
+//# 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 '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { scenarios } from '../../../graphql/scenario'\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\nexport class PropertyEventTap extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() scenarios: { value: string; description: string }[] = []\n  @state() targetList: { value: string; description: string }[] = []\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed, options } = this.value || {}\n    var { input = '(self)', output = true } = options || {}\n\n    return html`\n      <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n      <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select\n        id=\"tap-select\"\n        value-key=\"action\"\n        .value=${action || ''}\n        @change=${async (e: Event) => {\n          if ((e.target as HTMLSelectElement).value === 'start-scenario') {\n            this.scenarios = (await scenarios()).map(({ name, description }) => {\n              return { value: name, description }\n            })\n          }\n        }}\n      >\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      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action === 'goto' || action?.includes('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              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n\n            <datalist id=\"target-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <label for=\"input\"> <ox-i18n msgid=\"label.input-data\">input</ox-i18n> </label>\n            <input\n              id=\"input\"\n              value-key=\"input\"\n              .value=${input}\n              list=\"input-list\"\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n            <datalist id=\"input-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n            ${\n              /* currently 'goto' does not support returning result */\n              action?.includes('popup')\n                ? html` <input id=\"checkbox-output\" type=\"checkbox\" value-key=\"output\" .checked=${output} />\n                    <label for=\"checkbox-output\" class=\"checkbox-label\">\n                      <ox-i18n msgid=\"label.will-get-return\">will-get-return</ox-i18n>\n                    </label>`\n                : html``\n            }\n          `\n        : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getInputList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'popup':\n      case 'modal-popup':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\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 => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      case 'start-scenario':\n      case 'run-scenario':\n        return this.scenarios\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    if (key === 'input' || key === 'output') {\n      var { options = {} } = this.value || {}\n\n      this.value = {\n        ...this.value,\n        options: {\n          ...options,\n          [key]: convert(element)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    var { action } = this.value\n    if (action !== 'goto' && !action?.includes('popup')) {\n      /* clear unused options */\n      delete this.value.options\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,22 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/help/ox-title-with-help.js';
+import { LitElement } from 'lit';
+import { Properties, Scene } from '@hatiolab/things-scene';
+import { PropertyEventHover } from './property-event-hover';
+import { PropertyEventTap } from './property-event-tap';
+declare const PropertyEvent_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class PropertyEvent extends PropertyEvent_base {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene?: Scene;
+    firstUpdated(): void;
+    static get scopedElements(): {
+        'property-event-hover': typeof PropertyEventHover;
+        'property-event-tap': typeof PropertyEventTap;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    _onValueChange(e: Event): void;
+}
+export {};

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

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/help/ox-title-with-help.js';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { PropertySharedStyle } from '../property-shared-style';
+import { PropertyEventHover } from './property-event-hover';
+import { PropertyEventTap } from './property-event-tap';
+import { convert } from './value-converter';
+export class PropertyEvent extends ScopedElementsMixin(LitElement) {
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
+    }
+    static get scopedElements() {
+        return {
+            'property-event-hover': PropertyEventHover,
+            'property-event-tap': PropertyEventTap
+        };
+    }
+    render() {
+        const value = this.value || {};
+        return html `
+      <fieldset>
+        <legend>
+          <ox-title-with-help
+            msgid="label.hover-event"
+            topic="process-modeller/effects/hover-event"
+          ></ox-title-with-help>
+        </legend>
+
+        <property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
+        </property-event-hover>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help msgid="label.tap-event" topic="process-modeller/effects/tap-event"></ox-title-with-help>
+        </legend>
+
+        <property-event-tap value-key="tap" .scene=${this.scene} .value=${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);
+//# 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,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C,MAAM,OAAO,aAAc,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAMhE,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,sBAAsB,EAAE,kBAAkB;YAC1C,oBAAoB,EAAE,gBAAgB;SACvC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;;;;yDAS0C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS1C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEpF,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;;AAxDM,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/help/ox-title-with-help.js'\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { PropertyEventHover } from './property-event-hover'\nimport { PropertyEventTap } from './property-event-tap'\nimport { convert } from './value-converter'\n\nexport class PropertyEvent extends ScopedElementsMixin(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  static get scopedElements() {\n    return {\n      'property-event-hover': PropertyEventHover,\n      'property-event-tap': PropertyEventTap\n    }\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-title-with-help\n            msgid=\"label.hover-event\"\n            topic=\"process-modeller/effects/hover-event\"\n          ></ox-title-with-help>\n        </legend>\n\n        <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${value.hover || {}}>\n        </property-event-hover>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-title-with-help msgid=\"label.tap-event\" topic=\"process-modeller/effects/tap-event\"></ox-title-with-help>\n        </legend>\n\n        <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${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"]}

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

@@ -4,6 +4,7 @@
 import '@material/mwc-icon';
 import { LitElement, PropertyValues } from 'lit';
 import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene';
+import { PropertyEffects } from './effects/effects.js';
 import { PropertyShapes } from './shapes/shapes.js';
 import { PropertySpecific } from './specifics/specifics.js';
 import { PropertyStyles } from './styles/styles.js';
@@ -26,6 +27,7 @@ export declare class PropertySidebar extends PropertySidebar_base {
     static get scopedElements(): {
         'process-property-shape': typeof PropertyShapes;
         'process-property-style': typeof PropertyStyles;
+        'process-property-effect': typeof PropertyEffects;
         'process-property-specific': typeof PropertySpecific;
         'process-scene-inspector': typeof SceneInspector;
     };