@operato/process 1.4.48 → 1.4.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.4.48",
+  "version": "1.4.49",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "98c601e3a5a8bd67ad66f64746cdeff4d762d747"
+  "gitHead": "6ff22981035977f248f2f9ef452c1f14d0284227"
 }

package/src/modeller/property-sidebar/data-binding/data-binding-mapper copy.ts

@@ -0,0 +1,458 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/input/ox-buttons-radio.js'
+import '@operato/input/ox-input-code.js'
+import '@operato/i18n/ox-i18n.js'
+import '@operato/help/ox-help-icon.js'
+import './data-binding-value-map.js'
+import './data-binding-value-range.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { property, query, state } from 'lit/decorators.js'
+
+import { Properties, Scene } from '@hatiolab/things-scene'
+
+export type Rule =
+  | {
+      map?: Properties
+      range?: Properties[]
+      eval?: string
+    }
+  | any
+
+export type Mapping = {
+  source?: string
+  rule: 'map' | 'range' | 'eval' | 'value'
+  accessor?: string
+  target?: string
+  property?: string
+  param?: Rule
+  ndnsp?: boolean
+}
+
+/**
+element for mapping data value editing
+
+Example:
+
+  <data-binding-mapper mapping=${mapping}>
+  </data-binding-mapper>
+*/
+
+export class DataBindingMapper extends LitElement {
+  static styles = [
+    css`
+      :host {
+        background-color: rgba(255, 255, 255, 0.5);
+        overflow: hidden;
+        padding: 7px 0 0 0;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-width: 0 1px 1px 1px;
+        padding: 4px;
+        line-height: 2;
+
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 4px;
+        grid-auto-rows: minmax(24px, auto);
+
+        align-items: center;
+      }
+
+      :host > * {
+        align-self: stretch;
+      }
+
+      label {
+        grid-column: span 3;
+        text-align: right;
+        text-transform: capitalize;
+      }
+
+      input,
+      select,
+      ox-buttons-radio,
+      [mapping-rule] {
+        grid-column: span 7;
+      }
+      input,
+      select {
+        border: var(--property-sidebar-fieldset-border);
+      }
+
+      ox-buttons-radio {
+        display: flex;
+        padding: 0 4px;
+      }
+
+      ox-buttons-radio > * {
+        text-align: center;
+        flex: 1;
+        margin: 2px;
+        border-bottom: 2px solid #fff;
+      }
+
+      ox-buttons-radio div[active] {
+        border-color: #f2471c;
+      }
+
+      select {
+        height: 22px;
+      }
+
+      [mapping-rule] {
+        display: flex;
+      }
+
+      [mapping-rule] * {
+        flex: auto;
+        margin: 0;
+        text-align: left;
+        align-self: center;
+      }
+
+      [rule-editors] {
+        grid-column: span 10;
+
+        display: 'flex';
+        align-content: auto;
+      }
+
+      [rule-editors] :not([active]) {
+        display: none;
+      }
+
+      ox-input-code {
+        height: 300px;
+        overflow: auto;
+      }
+
+      /* checkbox-row */
+      .checkbox-row {
+        grid-column: span 10;
+
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 5px;
+        grid-auto-rows: minmax(24px, auto);
+        align-items: center;
+      }
+
+      .checkbox-row > input {
+        grid-column: 4 / 5;
+      }
+
+      .checkbox-row > label {
+        grid-column: span 6;
+        text-align: left;
+      }
+    `
+  ]
+
+  @property({ type: Object }) mapping: Mapping = {
+    rule: 'value'
+  }
+  @property({ type: Object }) rule: Rule = {}
+  @property({ type: Array }) properties: Properties[] = []
+  @property({ type: Object }) scene?: Scene
+
+  @state() _valueTypes: any = {
+    play: 'boolean',
+    hidden: 'boolean',
+    started: 'boolean',
+
+    rotation: 'number',
+    value: 'number',
+
+    fillStyle: 'color',
+    strokeStyle: 'color',
+    fontColor: 'color',
+
+    data: 'object',
+    source: 'attachment',
+    location: 'object',
+    dimension: 'object',
+
+    text: 'string',
+    ref: 'string'
+  }
+  @state() _componentIds: { value: string; description: string }[] = []
+
+  @query('#eval-editor') editor!: HTMLInputElement
+  @query('#source-input') source!: HTMLInputElement
+  @query('#target-input') target!: HTMLInputElement
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', e => this._onChange(e))
+  }
+
+  updated(changes: PropertyValues<this>) {
+    changes.has('mapping') && this._onChangedMapping()
+  }
+
+  findComponentIds() {
+    return (
+      (this.scene &&
+        this.scene.ids.map(i => {
+          const id = i.key
+          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
+        })) ||
+      []
+    )
+  }
+
+  render() {
+    const mapping = this.mapping || {
+      rule: 'value'
+    }
+
+    return html`
+      <label for="source-input"> <ox-i18n msgid="label.source">source</ox-i18n> </label>
+      <input
+        id="source-input"
+        type="text"
+        value-key="source"
+        list="source-list"
+        .value=${mapping.source || ''}
+        @focusin=${() => this.findComponentIds()}
+      />
+
+      <label for="accessor-input">
+        <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"></ox-help-icon>
+      </label>
+      <input
+        id="accessor-input"
+        value-key="accessor"
+        type="text"
+        data-mapping-accessor
+        .value=${mapping.accessor || ''}
+      />
+
+      <label for="target-input"> <ox-i18n msgid="label.target">target</ox-i18n> </label>
+      <input
+        id="target-input"
+        type="text"
+        value-key="target"
+        list="target-list"
+        .value=${mapping.target || ''}
+        @focusin=${() => this.findComponentIds()}
+      />
+
+      <datalist id="source-list">
+        <option value="">(self)</option>
+        ${this._componentIds.length
+          ? html`
+              ${this._componentIds.map(
+                ({ value, description }) => html` <option value=${value}>${description}</option> `
+              )}
+            `
+          : html``}
+      </datalist>
+
+      <datalist id="target-list">
+        <option value="(self)"></option>
+        <option value="(children)"></option>
+        <option value="(key)"></option>
+        <option value="[propkey]"></option>
+        ${this._componentIds.length
+          ? html`
+              ${this._componentIds.map(
+                ({ value, description }) => html` <option value=${value}>${description}</option> `
+              )}
+            `
+          : html``}
+      </datalist>
+
+      <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>
+      <select id="property-input" value-key="property" .value=${mapping.property || ''}>
+        ${this.properties.map(
+          item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `
+        )}
+      </select>
+
+      <label> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
+      <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>
+        <div data-value="value"><ox-i18n msgid="label.value"></ox-i18n></div>
+        <div data-value="map"><ox-i18n msgid="label.map"></ox-i18n></div>
+        <div data-value="range"><ox-i18n msgid="label.range"></ox-i18n></div>
+        <div data-value="eval"><ox-i18n msgid="label.eval"></ox-i18n></div>
+      </ox-buttons-radio>
+
+      <div rule-editors ?hidden=${mapping.rule == 'value'}>
+        <data-binding-value-map
+          value-key="map"
+          .value=${this.rule.map || {}}
+          .valuetype=${this._valuetype(mapping.property!)}
+          ?active=${mapping.rule == 'map'}
+        >
+        </data-binding-value-map>
+
+        <data-binding-value-range
+          value-key="range"
+          .value=${this.rule.range || []}
+          .valuetype=${this._valuetype(mapping.property!)}
+          ?active=${mapping.rule == 'range'}
+        >
+        </data-binding-value-range>
+
+        <ox-input-code
+          value-key="eval"
+          id="eval-editor"
+          .value=${this.rule.eval || ''}
+          ?active=${mapping.rule == 'eval'}
+        >
+        </ox-input-code>
+      </div>
+
+      <div class="checkbox-row">
+        <input id="checkbox-ndnsp" type="checkbox" value-key="ndnsp" .checked=${mapping.ndnsp === true} />
+        <label for="checkbox-ndnsp"> <ox-i18n msgid="label.ndnsp">No Data No Spreading</ox-i18n> </label>
+      </div>
+    `
+  }
+
+  _valuetype(property: string) {
+    return this._valueTypes[property] || 'string'
+  }
+
+  private _keep_saved_rule_params: boolean = false
+
+  async _onChangedMapping() {
+    if (this._keep_saved_rule_params) {
+      this._keep_saved_rule_params = false
+    } else {
+      await this.updateComplete
+
+      var rule: Rule = {}
+
+      if (this.mapping) {
+        switch (this.mapping.rule) {
+          case 'map':
+            rule.map = this.mapping.param || {}
+            break
+          case 'range':
+            rule.range = this.mapping.param || []
+            break
+          case 'eval':
+            rule.eval = this.mapping.param || ''
+            break
+          default:
+            this.mapping.rule = 'value'
+            break
+        }
+      }
+
+      this.rule = rule
+      this.requestUpdate()
+    }
+  }
+
+  _onChangeRule(e: Event) {
+    var element = e.target as HTMLInputElement
+    var value = element.value
+
+    let param
+
+    switch (value) {
+      case 'map':
+        param = this.rule.map
+        break
+      case 'range':
+        param = this.rule.range
+        break
+      case 'eval':
+        param = this.rule.eval || ''
+
+        // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.
+        if (!param) {
+          this.editor.value = 'return'
+        }
+        break
+      default:
+    }
+
+    this.mapping = {
+      ...this.mapping,
+      rule: value as 'value' | 'map' | 'range' | 'eval',
+      param
+    }
+
+    this._keep_saved_rule_params = true
+    this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))
+  }
+
+  _onChange(e: Event) {
+    var element = e.target as HTMLInputElement
+    var key = element.getAttribute('value-key')
+
+    if (!key) return
+
+    var value: string | boolean = element.value
+
+    if (key === 'source') {
+      if (value.length > 0) {
+        value = value.trim()
+
+        this.source.value = value
+      }
+
+      this.mapping = {
+        ...this.mapping,
+        source: value
+      }
+    } else if (key === 'target') {
+      if (value.length > 0 && !/^[.#(\[]/.test(value)) {
+        value = '#' + value.trim()
+
+        this.target.value = value
+      }
+
+      this.mapping = {
+        ...this.mapping,
+        target: value
+      }
+    } else if (key === 'accessor') {
+      this.mapping = {
+        ...this.mapping,
+        accessor: (value || '').trim()
+      }
+    } else if (key === 'property') {
+      this.mapping = {
+        ...this.mapping,
+        property: (value || '').trim()
+      }
+    } else if (key === 'map' || key === 'range' || key === 'eval') {
+      this.rule[key] = value
+      this.mapping = {
+        ...this.mapping,
+        param: value
+      }
+    } else if (key === 'ndnsp' /* no data no spreading */) {
+      value = element.checked
+
+      this.mapping = {
+        ...this.mapping,
+        ndnsp: value
+      }
+    }
+
+    if (!this.mapping.rule) {
+      this.mapping.rule = 'value'
+    }
+
+    this._keep_saved_rule_params = true
+    this.dispatchEvent(
+      new CustomEvent('value-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          changed: {
+            [key]: value
+          }
+        }
+      })
+    )
+  }
+}

package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts

@@ -2,12 +2,12 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@operato/input/ox-input-value-map.js'
-import '@operato/input/ox-input-value-ranges.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-help-icon.js'
+import './data-binding-value-map.js'
+import './data-binding-value-range.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
@@ -23,6 +23,7 @@ export type Rule =
   | any
 
 export type Mapping = {
+  source?: string
   rule: 'map' | 'range' | 'eval' | 'value'
   accessor?: string
   target?: string
@@ -170,7 +171,7 @@ export class DataBindingMapper extends LitElement {
     fontColor: 'color',
 
     data: 'object',
-    source: 'object',
+    source: 'attachment',
     location: 'object',
     dimension: 'object',
 
@@ -180,6 +181,7 @@ export class DataBindingMapper extends LitElement {
   @state() _componentIds: { value: string; description: string }[] = []
 
   @query('#eval-editor') editor!: HTMLInputElement
+  @query('#source-input') source!: HTMLInputElement
   @query('#target-input') target!: HTMLInputElement
 
   firstUpdated() {
@@ -190,13 +192,36 @@ export class DataBindingMapper extends LitElement {
     changes.has('mapping') && this._onChangedMapping()
   }
 
+  findComponentIds() {
+    return (
+      (this.scene &&
+        this.scene.ids.map(i => {
+          const id = i.key
+          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
+        })) ||
+      []
+    )
+  }
+
   render() {
     const mapping = this.mapping || {
       rule: 'value'
     }
 
     return html`
-      <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"> </label>
+      <label for="source-input"> <ox-i18n msgid="label.source">source</ox-i18n> </label>
+      <input
+        id="source-input"
+        type="text"
+        value-key="source"
+        list="source-list"
+        .value=${mapping.source || ''}
+        @focusin=${() => this.findComponentIds()}
+      />
+
+      <label for="accessor-input">
+        <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"></ox-help-icon>
+      </label>
       <input
         id="accessor-input"
         value-key="accessor"
@@ -212,33 +237,36 @@ export class DataBindingMapper extends LitElement {
         value-key="target"
         list="target-list"
         .value=${mapping.target || ''}
-        @focusin=${() => {
-          this._componentIds =
-            (this.scene &&
-              this.scene.ids.map(i => {
-                const id = i.key
-                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }
-              })) ||
-            []
-        }}
+        @focusin=${() => this.findComponentIds()}
       />
+
+      <datalist id="source-list">
+        <option value="">(self)</option>
+        ${this._componentIds.length
+          ? html`
+              ${this._componentIds.map(
+                ({ value, description }) => html` <option value=${value}>${description}</option> `
+              )}
+            `
+          : html``}
+      </datalist>
+
       <datalist id="target-list">
         <option value="(self)"></option>
+        <option value="(children)"></option>
         <option value="(key)"></option>
         <option value="[propkey]"></option>
-        ${
-          this._componentIds.length
-            ? html`
-                ${this._componentIds.map(
-                  ({ value, description }) => html` <option value=${value}>${description}</option> `
-                )}
-              `
-            : html``
-        }
+        ${this._componentIds.length
+          ? html`
+              ${this._componentIds.map(
+                ({ value, description }) => html` <option value=${value}>${description}</option> `
+              )}
+            `
+          : html``}
       </datalist>
 
       <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>
-      <select id="property-input" value-key="property" .value=${mapping.property}>
+      <select id="property-input" value-key="property" .value=${mapping.property || ''}>
         ${this.properties.map(
           item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `
         )}
@@ -253,21 +281,21 @@ export class DataBindingMapper extends LitElement {
       </ox-buttons-radio>
 
       <div rule-editors ?hidden=${mapping.rule == 'value'}>
-        <ox-input-value-map
+        <data-binding-value-map
           value-key="map"
           .value=${this.rule.map || {}}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'map'}
         >
-        </ox-input-value-map>
+        </data-binding-value-map>
 
-        <ox-input-value-ranges
+        <data-binding-value-range
           value-key="range"
           .value=${this.rule.range || []}
           .valuetype=${this._valuetype(mapping.property!)}
           ?active=${mapping.rule == 'range'}
         >
-        </ox-input-value-ranges>
+        </data-binding-value-range>
 
         <ox-input-code
           value-key="eval"
@@ -363,7 +391,18 @@ export class DataBindingMapper extends LitElement {
 
     var value: string | boolean = element.value
 
-    if (key === 'target') {
+    if (key === 'source') {
+      if (value.length > 0) {
+        value = value.trim()
+
+        this.source.value = value
+      }
+
+      this.mapping = {
+        ...this.mapping,
+        source: value
+      }
+    } else if (key === 'target') {
       if (value.length > 0 && !/^[.#(\[]/.test(value)) {
         value = '#' + value.trim()
 

package/src/modeller/property-sidebar/data-binding/data-binding-value-map.ts

@@ -0,0 +1,19 @@
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { ifDefined } from 'lit/directives/if-defined.js'
+
+import { OxInputValueMap } from '@operato/input'
+
+import '@operato/attachment/ox-attachment-selector.js'
+
+@customElement('data-binding-value-map')
+export class DataBindingValueMap extends OxInputValueMap {
+  static styles = OxInputValueMap.styles
+
+  valueInputTemplate(value?: any) {
+    if (this.valuetype == 'attachment') {
+      return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`
+    }
+    return super.valueInputTemplate(value)
+  }
+}