@operato/process 1.4.48 → 1.4.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.4.48",
+  "version": "1.4.50",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -69,7 +69,7 @@
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
     "@operato/app": "^1.4.47",
-    "@operato/board": "^1.4.48",
+    "@operato/board": "^1.4.50",
     "@operato/data-grist": "^1.4.39",
     "@operato/font": "^1.4.39",
     "@operato/graphql": "^1.4.20",
@@ -128,5 +128,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "98c601e3a5a8bd67ad66f64746cdeff4d762d747"
+  "gitHead": "fafd040b94cba363dd96359543fd221cb7d27d64"
 }

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 '@operato/input/ox-input-value-map.js'
+import '@operato/input/ox-input-value-ranges.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,35 @@ export class DataBindingMapper extends LitElement {
     changes.has('mapping') && this._onChangedMapping()
   }
 
+  findComponentIds() {
+    this._componentIds =
+      (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 +236,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> `
         )}
@@ -363,7 +390,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()