@operato/scene-legend 8.0.0-beta.0 → 8.0.0-beta.2

package/src/legend.ts

@@ -1,232 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, Container, Model, POSITION, Properties, TableLayout } from '@hatiolab/things-scene'
-
-const NATURE: ComponentNature = {
-  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.state
-
-    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.state
-    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.state
-
-    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/svg.ts

@@ -1,201 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'image-selector',
-      label: 'image-src',
-      name: 'src',
-      property: {
-        displayField: 'id',
-        displayFullUrl: true,
-        baseUrlAlias: '$base_url',
-        defaultStorage: 'scene-image',
-        storageFilters: {
-          type: Array,
-          value: [
-            {
-              name: 'category',
-              value: 'image'
-            }
-          ]
-        },
-        useUpload: true
-      },
-      observe: function (this: HTMLElement, src: string) {
-        const info: any = this.parentNode!.querySelector('[name=svgInfo]')
-        info.src = src
-      }
-    },
-    {
-      type: 'svg-info',
-      label: 'svg-info',
-      name: 'svgInfo',
-      readonly: true,
-      editor: {
-        fullwidth: true
-      }
-    },
-    {
-      type: 'id-input',
-      label: 'legend-target',
-      name: 'legendTarget',
-      property: {
-        component: 'legend'
-      }
-    },
-    {
-      type: 'string',
-      label: 'id-field',
-      name: 'idField'
-    },
-    {
-      type: 'string',
-      label: 'value-field',
-      name: 'valueField'
-    }
-  ]
-}
-
-import { Component, ComponentNature, HTMLOverlayElement, Properties } from '@hatiolab/things-scene'
-import Legend from './legend'
-
-export default class Svg extends HTMLOverlayElement {
-  static get nature() {
-    return NATURE
-  }
-
-  async oncreate_element(div: HTMLDivElement) {
-    await this.loadSVG(div)
-  }
-
-  private _value?: any
-  private _legendTarget?: Component
-
-  get legendTarget() {
-    var { legendTarget } = this.state
-
-    if (!this._legendTarget && legendTarget) {
-      this._legendTarget = this.root.findById(legendTarget)
-      this._legendTarget && this._legendTarget.on('change', this.onchangeData, this)
-    }
-
-    return this._legendTarget
-  }
-
-  async loadSVG(div: HTMLElement) {
-    try {
-      const parser = new DOMParser()
-
-      const response = await fetch(this.src)
-
-      div.innerHTML = ''
-
-      if (response.ok) {
-        const text = await response.text()
-        const doc = await parser.parseFromString(text, 'image/svg+xml')
-        const element = doc.querySelector('svg')
-
-        element && div.appendChild(element)
-      } else {
-        const error = await response.text()
-        console.error('load SVG error', error)
-      }
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  async setElementProperties(div: HTMLDivElement) {}
-
-  get src() {
-    return this.getState('src')
-  }
-
-  set src(src) {
-    this.setState('src', src)
-  }
-
-  onchange(after: Properties, before: Properties) {
-    'src' in after && this.onchangeSrc(after.src)
-    'value' in after && this.onchangeValue(after.value)
-  }
-
-  onchangeSrc(src: string) {
-    this.loadSVG(this.element)
-  }
-
-  onchangeValue(value: any): void {
-    if (typeof this.value !== 'object' || !Array.isArray(this.value)) {
-      return
-    }
-
-    const { idField, valueField } = this.state
-    const legendTarget = this.legendTarget
-
-    if (!legendTarget) {
-      return
-    }
-
-    const {
-      field: statusField,
-      defaultColor,
-      ranges
-    } = legendTarget.getState('status') as {
-      field: string
-      defaultColor: string
-      ranges: { min: number; max: number; color: string }[]
-    }
-
-    if (!(statusField && ranges)) {
-      return
-    }
-
-    this.value.forEach(item => {
-      if (!(idField in item) || !(valueField in item)) {
-        return
-      }
-
-      var id = item[idField]
-      var status = Number(item[valueField])
-
-      var range = ranges.find((range, index) => {
-        let { min, max } = range
-
-        min = Number(min) || min
-        max = Number(max) || max
-
-        return max > status && (min === undefined || min <= status)
-      })
-
-      const paths = this.element.querySelectorAll(`path[id="${String(id)}"]`) as NodeListOf<SVGPathElement>
-      paths.forEach(path => {
-        path.style.fill = range?.color || defaultColor || 'transparent'
-      })
-    })
-  }
-
-  get tagName() {
-    return 'div'
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  get value() {
-    return this._value
-  }
-
-  set value(value) {
-    this._value = value
-    this.onchangeValue(value)
-  }
-}
-
-Component.register('svg', Svg)

package/src/templates/index.ts

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

package/src/templates/legend.ts

@@ -1,19 +0,0 @@
-const icon = new URL('../../icons/legend.png', import.meta.url).href
-
-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
-  }
-}

package/src/templates/svg.ts

@@ -1,19 +0,0 @@
-const icon = new URL('../../icons/svg.png', import.meta.url).href
-
-export default {
-  type: 'svg',
-  description: 'svg for visualizer',
-  group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'svg',
-    left: 100,
-    top: 100,
-    width: 400,
-    height: 300,
-    fillStyle: '#efefef',
-    direction: 'vertical',
-    strokeStyle: 'rgba(0, 0, 0, 0.3)',
-    lineWidth: 1
-  }
-}

package/test/basic-test.html

@@ -1,67 +0,0 @@
-<!--
-@license
-Copyright © HatioLab Inc. All rights reserved.
--->
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
-
-    <!-- Step 1: import the element to test -->
-    <link rel="import" href="../things-scene-legend.html">
-  </head>
-  <body>
-
-    <!-- You can use the document as a place to set up your fixtures. -->
-    <test-fixture id="things-scene-legend-fixture">
-      <template>
-        <things-scene-legend>
-          <h2>things-scene-legend</h2>
-        </things-scene-legend>
-      </template>
-    </test-fixture>
-
-    <script>
-      suite('<things-scene-legend>', function() {
-
-        var myEl;
-
-        setup(function() {
-          myEl = fixture('things-scene-legend-fixture');
-        });
-
-        test('defines the "author" property', function() {
-          assert.equal(myEl.author.name, 'Dimitri Glazkov');
-          assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
-        });
-
-        test('says hello', function() {
-          assert.equal(myEl.sayHello(), 'things-scene-legend says, Hello World!');
-
-          var greetings = myEl.sayHello('greetings Earthlings');
-          assert.equal(greetings, 'things-scene-legend says, greetings Earthlings');
-        });
-
-        test('fires lasers', function(done) {
-          myEl.addEventListener('things-scene-legend-lasers', function(event) {
-            assert.equal(event.detail.sound, 'Pew pew!');
-            done();
-          });
-          myEl.fireLasers();
-        });
-
-        test('distributed children', function() {
-          var els = myEl.getContentChildren();
-          assert.equal(els.length, 1, 'one distributed node');
-          assert.equal(els[0], myEl.querySelector('h2'), 'content distributed correctly');
-        });
-
-      });
-    </script>
-
-  </body>
-</html>

package/test/index.html

@@ -1,24 +0,0 @@
-<!--
-@license
-Copyright © HatioLab Inc. All rights reserved.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
-  </head>
-  <body>
-    <script>
-      // Load and run all tests (.html, .js):
-      WCT.loadSuites([
-        'basic-test.html',
-        'basic-test.html?dom=shadow'
-      ]);
-    </script>
-
-  </body>
-</html>

package/test/unit/test-legend.js

@@ -1,33 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import './util'
-
-import { expect } from 'chai'
-
-import '../../bower_components/things-scene-core/things-scene-min'
-import { Legend } from '../../src/index'
-
-describe('Legend', function () {
-
-  var board;
-
-  beforeEach(function () {
-    board = scene.create({
-      model: {
-        components: [{
-          id: 'legend',
-          type: 'legend'
-        }]
-      }
-    })
-  });
-
-  it('component should be found by its id.', function () {
-
-    var component = board.findById('legend')
-
-    expect(!!component).not.to.equal(false);
-  });
-});

package/test/unit/util.js

@@ -1,22 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-var noop = () => {}
-
-global.Canvas = require('canvas');
-
-Canvas.prototype.setAttribute = noop;
-Canvas.prototype.style = {};
-
-global.Image = Canvas.Image;
-global.screen = {
-  width: 1280,
-  height: 800
-};
-
-global.window = global;
-
-global.addEventListener = noop;
-global.location = {};
-global.getComputedStyle = noop;

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2019", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "src",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}