@operato/scene-legend 0.0.11

package/src/editors/editor-legend-status.ts

@@ -0,0 +1,339 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+@customElement('editor-legend-status')
+class EditorLegendStatus extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-size: 0.8em;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 5px;
+      }
+
+      :host > * {
+        order: 2;
+        grid-column: 4 / -1;
+      }
+
+      :host > legend {
+        order: 1;
+        grid-column: 1 / -1;
+        font-size: 11px;
+        color: rgb(228, 108, 46);
+        font-weight: bold;
+        text-transform: capitalize;
+        padding: 5px 0px 0px 5px;
+      }
+
+      :host > label {
+        grid-column: 1 / 4;
+        text-align: right;
+        color: var(--primary-text-color);
+      }
+
+      div[data-record] input {
+        width: 20%;
+      }
+      :host > table {
+        grid-column: 1 / -1;
+      }
+      table input {
+        width: 25px;
+        margin: 3px 0 2px 0;
+        padding: 3px;
+        font-size: 12px;
+      }
+      table td span {
+        padding: 5px 0 0 0;
+      }
+      table td things-editor-color {
+        width: 81px;
+        height: 25px;
+      }
+      table td button {
+        margin-left: 0;
+      }
+      table th {
+        background-color: rgba(0, 0, 0, 0.1);
+        padding: 2px 0;
+        text-align: center;
+      }
+
+      table tr > th:first-child {
+        width: 40px;
+      }
+
+      table tr > th:nth-child(2) {
+        width: 85px;
+      }
+
+      table tr > th:nth-child(4) {
+        width: 30px;
+      }
+
+      table *.things-editor-legend-status {
+        float: none !important;
+      }
+      table td {
+        text-align: center;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      table tr.stock-new {
+        background-color: rgba(179, 145, 117, 0.3);
+      }
+      table td input[data-description] {
+        width: 100%;
+        box-sizing: border-box;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+
+  @state() private _statusField?: string
+  @state() private _defaultColor?: string
+  @state() private _ranges: any[] = []
+
+  private boundOnChange?: any
+  private _changingNow: boolean = false
+
+  render() {
+    return html`
+      <legend>
+        <i18n-msg msgid="label.status">Status</i18n-msg>
+      </legend>
+
+      <label class="stock-field">
+        <i18n-msg msgid="label.field">Field</i18n-msg>
+      </label>
+      <input
+        type="text"
+        .value=${this._statusField || ''}
+        @change=${(e: Event) => {
+          this._statusField = (e.target as HTMLInputElement).value
+        }}
+      />
+      <label class="default-color">
+        <i18n-msg msgid="label.default-color">Default Color</i18n-msg>
+      </label>
+      <things-editor-color
+        name="default-color"
+        .value=${this._defaultColor || ''}
+        placeholder="default color"
+        @change=${(e: Event) => {
+          this._defaultColor = (e.target as HTMLInputElement).value
+        }}
+      ></things-editor-color>
+
+      <table>
+        <tr>
+          <th>
+            Min &le; <br />Field<br />
+            &lt; Max
+          </th>
+          <th>color</th>
+          <th>disp. text</th>
+          <th></th>
+        </tr>
+        ${this._ranges.map(
+          item => html`
+            <tr data-record>
+              <td>
+                <input type="text" data-min placeholder="min" .value="${item.min}" />
+                <span>~</span>
+                <input type="text" data-max placeholder="max" .value="${item.max}" />
+              </td>
+              <td>
+                <things-editor-color data-color .value="${item.color}" placeholder="color"></things-editor-color>
+              </td>
+              <td>
+                <input type="text" data-description .value="${item.description || ''}" placeholder="display text" />
+              </td>
+              <td>
+                <button class="record-action" @tap=${(e: TouchEvent) => this._delete(e)} tabindex="-1">-</button>
+              </td>
+            </tr>
+          `
+        )}
+
+        <tr data-record-new class="stock-new">
+          <td>
+            <input type="text" data-min placeholder="min" value="" />
+            <span>~</span>
+            <input type="text" data-max placeholder="max" value="" />
+          </td>
+          <td>
+            <things-editor-color data-color value="" placeholder="color"></things-editor-color>
+          </td>
+          <td>
+            <input type="text" data-description value="" placeholder="display text" />
+          </td>
+          <td>
+            <button class="record-action" @tap=${() => this._add()} tabindex="-1">+</button>
+          </td>
+        </tr>
+      </table>
+    `
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    if (!this.boundOnChange) this.boundOnChange = this._onChange.bind(this)
+
+    this.renderRoot.addEventListener('change', this.boundOnChange)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.renderRoot.removeEventListener('change', this.boundOnChange)
+  }
+
+  _valueChanged(value: any) {
+    var val = value || this._getDefaultValue()
+    this._statusField = val.field
+    this._defaultColor = val.defaultColor
+    this._ranges = [...val.ranges]
+
+    this.requestUpdate()
+  }
+
+  _onChange(e: Event) {
+    e.stopPropagation()
+    this._changingNow = true
+
+    var input = e.target as HTMLInputElement
+    var value = input.value
+
+    var tr = input.closest('tr')
+
+    if (tr) {
+      if (tr.hasAttribute('data-record')) this._build(true)
+      else if (tr.hasAttribute('data-record-new') && input.hasAttribute('data-color')) this._add()
+    }
+
+    this.value = {
+      field: this._statusField,
+      defaultColor: this._defaultColor,
+      ranges: this._ranges
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true
+      })
+    )
+    this.requestUpdate()
+  }
+
+  _build(includeNewRecord: boolean) {
+    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
+    else var records = this.renderRoot.querySelectorAll('[data-record]')
+
+    var newRanges = []
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      var min = (record.querySelector('[data-min]') as HTMLInputElement).value
+      var max = (record.querySelector('[data-max]') as HTMLInputElement).value
+      var description = (record.querySelector('[data-description]') as HTMLInputElement).value
+      var inputs = record.querySelectorAll('[data-color]:not([style*="display: none"])') as NodeListOf<HTMLInputElement>
+      if (!inputs || inputs.length == 0) continue
+
+      var input = inputs[inputs.length - 1]
+      var color = input.value
+
+      if (min != undefined && max != undefined && color)
+        newRanges.push({
+          min: min.trim(),
+          max: max.trim(),
+          color: color.trim(),
+          description: description.trim()
+        })
+    }
+
+    newRanges.sort(function (range1, range2) {
+      var min1 = Number(range1.min)
+      var min2 = Number(range2.min)
+
+      var result = min1 - min2
+
+      if (Number.isNaN(result)) {
+        var strMin1 = String(min1)
+        var strMin2 = String(min2)
+
+        if (strMin1 > strMin2) result = 1
+        else if (strMin1 == strMin2) result = 0
+        else result = -1
+      }
+
+      return result
+    })
+
+    this._ranges = newRanges
+    this.requestUpdate()
+  }
+
+  _add() {
+    this._build(true)
+
+    var inputs = this.renderRoot.querySelectorAll(
+      '[data-record-new] input:not([style*="display: none"]), [data-record-new] [data-color]:not([style*="display: none"])'
+    ) as NodeListOf<HTMLInputElement>
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i]
+      input.value = ''
+    }
+  }
+
+  _delete(e: Event) {
+    var record = (e.target as Element).closest('tr[data-record]')
+
+    ;(record!.querySelector('[data-min]') as HTMLInputElement).value = ''
+    ;(record!.querySelector('[data-max]') as HTMLInputElement).value = ''
+    ;(record!.querySelector('[data-color]') as HTMLInputElement).value = ''
+
+    this._build(false)
+
+    this.value = {
+      field: this._statusField,
+      defaultColor: this._defaultColor,
+      ranges: this._ranges
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  _getDefaultValue() {
+    return {
+      field: '',
+      defaultColor: '',
+      ranges: []
+    }
+  }
+
+  _onRepeaterChanged() {
+    var inputs = this.renderRoot.querySelectorAll(
+      '[data-record] input:not([style*="display: none"])[value=""], [data-record-new] input:not([style*="display: none"])[value=""]'
+    ) as NodeListOf<HTMLInputElement>
+
+    inputs[0].focus()
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('value')) this._valueChanged(this.value)
+  }
+}

package/src/editors/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { PropertyEditorLegendStatus } from './property-editor-legend-status'
+
+export default [
+  {
+    type: 'legend-status',
+    element: PropertyEditorLegendStatus.is
+  }
+]

package/src/editors/property-editor-legend-status.ts

@@ -0,0 +1,17 @@
+import './editor-legend-status'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { Properties } from '@hatiolab/things-scene'
+import { html } from 'lit-element'
+
+export class PropertyEditorLegendStatus extends OxPropertyEditor {
+  static get is() {
+    return 'property-editor-legend-status'
+  }
+
+  editorTemplate(props: Properties) {
+    return html` <editor-legend-status .value=${props.value} fullwidth></editor-legend-status> `
+  }
+}
+
+customElements.define(PropertyEditorLegendStatus.is, PropertyEditorLegendStatus)

package/src/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+export { default as Legend } from './legend'
+export { default as LegendItem } from './legend-item'

package/src/legend-item.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Model, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+const NATURE = {
+  mutable: false,
+  resizable: false,
+  rotatable: false,
+  properties: []
+}
+
+export default class LegendItem extends RectPath(Shape) {
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, height, color } = this.model
+
+    context.beginPath()
+
+    var c = height / 2
+    var r = c / 2
+
+    context.save()
+
+    context.fillStyle = color
+    context.ellipse(left + c, top + c, r, r, 0, 0, Math.PI * 2, true)
+    context.shadowColor = 'rgba(0,0,0,0.15)'
+    context.shadowBlur = 2
+    context.shadowOffsetX = 1
+    context.shadowOffsetY = 2
+    context.fill()
+
+    context.restore()
+  }
+
+  onchange(after: Properties) {
+    if (after.hasOwnProperty('height')) this.set('paddingLeft', after.height)
+  }
+
+  get stuck() {
+    return true
+  }
+
+  get capturable() {
+    return false
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('legend-item', LegendItem)

package/src/legend.ts

@@ -0,0 +1,232 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Container, Model, POSITION, Properties, TableLayout } from '@hatiolab/things-scene'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'rows',
+      name: 'rows'
+    },
+    {
+      type: 'number',
+      label: 'columns',
+      name: 'columns'
+    },
+    {
+      type: 'select',
+      label: 'direction',
+      name: 'direction',
+      property: {
+        options: [
+          {
+            display: 'Horizontal',
+            value: 'horizontal'
+          },
+          {
+            display: 'Vertical',
+            value: 'vertical'
+          }
+        ]
+      }
+    },
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round'
+    },
+    {
+      type: 'legend-status',
+      label: '',
+      name: 'status'
+    }
+  ],
+  help: 'scene/component/legend'
+}
+
+var controlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { left, top, width, height } = component.model
+    /*
+     * point의 좌표는 부모 레이어 기준의 x, y 값이다.
+     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
+     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
+     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
+     */
+    var transcoorded = component.transcoordP2S(point.x, point.y)
+    var round = ((transcoorded.x - left) / (width / 2)) * 100
+
+    round = roundSet(round, width, height)
+
+    component.set({ round })
+  }
+}
+
+function roundSet(round: number, width: number, height: number) {
+  var max = width > height ? (height / width) * 100 : 100
+
+  if (round >= max) round = max
+  else if (round <= 0) round = 0
+
+  return round
+}
+
+export default class Legend extends Container {
+  ready() {
+    this.rebuildLegendItems()
+  }
+
+  get showMoveHandle() {
+    return false
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { round = 0 } = this.model
+
+    var { left, top, width, height } = this.bounds
+
+    // 박스 그리기
+    context.beginPath()
+
+    round = roundSet(round, width, height)
+
+    if (round > 0) {
+      var radius = (round / 100) * (width / 2)
+
+      context.moveTo(left + radius, top)
+      context.lineTo(left + width - radius, top)
+      context.quadraticCurveTo(left + width, top, left + width, top + radius)
+      context.lineTo(left + width, top + height - radius)
+      context.quadraticCurveTo(left + width, top + height, left + width - radius, top + height)
+      context.lineTo(left + radius, top + height)
+      context.quadraticCurveTo(left, top + height, left, top + height - radius)
+      context.lineTo(left, top + radius)
+      context.quadraticCurveTo(left, top, left + radius, top)
+
+      this.model.padding = {
+        top: round / 2,
+        left: round / 2,
+        right: round / 2,
+        bottom: round / 2
+      }
+    } else {
+      context.rect(left, top, width, height)
+    }
+
+    this.drawFill(context)
+    this.drawStroke(context)
+  }
+
+  get controls() {
+    var { left, top, width, round, height } = this.model
+    round = round == undefined ? 0 : roundSet(round, width, height)
+
+    return [
+      {
+        x: left + (width / 2) * (round / 100),
+        y: top,
+        handler: controlHandler
+      }
+    ]
+  }
+
+  get layout() {
+    return TableLayout
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  rebuildLegendItems() {
+    if (this.components.length) {
+      this.components.slice().forEach(m => m.dispose())
+    }
+
+    var {
+      left,
+      top,
+      width,
+      height,
+      fillStyle,
+      strokeStyle,
+      fontColor,
+      fontFamily,
+      fontSize,
+      lineHeight,
+      textAlign = 'left',
+      round = 0,
+      italic,
+      bold,
+      lineWidth = 0,
+      rows,
+      columns,
+      status = {}
+    } = this.model
+
+    let statusRanges: {
+      min: string
+      max: string
+      description: string
+      color: string
+    }[] = status.ranges || []
+
+    var count = statusRanges.length
+
+    this.add(
+      statusRanges.map(range =>
+        Model.compile({
+          type: 'legend-item',
+          text: range.description || `${range.min || ''} ~ ${range.max || ''}`,
+          width: 1,
+          height: 1,
+          color: range.color,
+          fontColor,
+          fontFamily,
+          fontSize,
+          lineHeight,
+          italic,
+          bold,
+          textAlign
+        })
+      )
+    )
+
+    var rows, columns
+
+    if (!columns && !rows) {
+      rows = count
+      columns = 1
+    } else if (columns && !rows) {
+      rows = Math.ceil(count / Number(columns))
+    } else if (rows && !columns) {
+      columns = Math.ceil(count / Number(rows))
+    }
+
+    this.set({
+      layoutConfig: {
+        rows,
+        columns
+      }
+    })
+  }
+
+  get hasTextProperty() {
+    return true
+  }
+
+  get textHidden() {
+    return true
+  }
+
+  onchange(after: Properties, before: Properties) {
+    this.rebuildLegendItems()
+  }
+}
+
+Component.register('legend', Legend)

package/src/templates/index.ts

@@ -0,0 +1,3 @@
+import legend from './legend'
+
+export default [legend]

package/src/templates/legend.ts

@@ -0,0 +1,19 @@
+import icon from '../../assets/legend.png'
+
+export default {
+  type: 'legend',
+  description: 'legend for visualizer',
+  group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+  icon,
+  model: {
+    type: 'legend',
+    left: 100,
+    top: 100,
+    width: 200,
+    height: 150,
+    fillStyle: '#efefef',
+    direction: 'vertical',
+    strokeStyle: 'rgba(0, 0, 0, 0.3)',
+    lineWidth: 1
+  }
+}