@operato/scene-tab 8.0.0-beta.1 → 9.0.0-beta.0

package/src/tab.ts

@@ -1,300 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import {
-  Component,
-  ComponentNature,
-  Container,
-  LinearHorizontalLayout,
-  LinearVerticalLayout,
-  Model,
-  State,
-  Style
-} from '@hatiolab/things-scene'
-import TabButton from './tab-button'
-
-const HANDLE_WIDTH = 25
-const HANDLE_HEIGHT = 25
-
-function rgba(r: number, g: number, b: number, a: number) {
-  return `rgba(${r}, ${g}, ${b}, ${a})`
-}
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'id-input',
-      label: 'tab-reference',
-      name: 'reference',
-      property: {
-        component: (c: Component) => {
-          /* this means compare target component */
-          const ret = ['tab-container', 'indoor-map'].includes(c.model.type as string)
-          return ret
-        }
-      }
-    },
-    {
-      type: 'number',
-      label: 'tab-active-index',
-      name: 'activeIndex',
-      property: {
-        min: 0,
-        step: 1
-      }
-    },
-    {
-      type: 'color',
-      label: 'active-fill-style',
-      name: 'activeFillStyle',
-      property: 'activeFillStyle'
-    },
-    {
-      type: 'color',
-      label: 'active-font-color',
-      name: 'activeFontColor',
-      property: 'activeFontColor'
-    },
-    {
-      type: 'color',
-      label: 'active-line-color',
-      name: 'activeLineColor',
-      property: 'activeLineColor'
-    },
-    {
-      type: 'number',
-      label: 'active-line-width',
-      name: 'activeLineWidth',
-      property: 'activeLineWidth'
-    }
-  ],
-  'value-property': 'activeIndex',
-  help: 'scene/component/tab'
-}
-
-export default class Tab extends Container {
-  get layout() {
-    let { width, height } = this.state
-
-    if (width >= height) {
-      return LinearHorizontalLayout
-    } else {
-      return LinearVerticalLayout
-    }
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  get focusible() {
-    return false
-  }
-
-  get reference() {
-    var { reference } = this.state
-    if (!reference) {
-      return null
-    }
-
-    if (!this._reference) {
-      this._reference = this.root.findById(reference)
-      // this._reference?.on('change', this.onRefChanged, this)
-    }
-
-    return this._reference
-  }
-
-  get activeIndex() {
-    return this.getState('activeIndex')
-  }
-
-  private _reference: any
-
-  set reference(reference) {
-    // this.reference?.off('change', this.onRefChanged, this)
-
-    this._reference = null
-    this.model.reference = reference
-  }
-
-  set activeIndex(index) {
-    this.setState('activeIndex', index)
-    if (this.reference) {
-      this.reference.activeIndex = index
-    }
-  }
-
-  ready() {
-    super.ready()
-
-    this.data = this.state?.activeIndex || 0
-
-    this.setTabButtonsStyle(this.state)
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    super.render(context)
-
-    if (this.reference) {
-      if (this.size() !== this.reference.size()) {
-        this.rebuildTabButtons()
-      }
-    } else {
-      // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..
-      var componentsLength = this.components.length
-
-      for (var i = componentsLength - 1; i >= 0; i--) {
-        var tabBtn = this.components[i]
-        this.removeComponent(tabBtn)
-      }
-    }
-  }
-
-  contains(x: number, y: number) {
-    if (!this.app.isEditMode) {
-      return super.contains(x, y)
-    }
-
-    if (super.contains(x, y)) {
-      return true
-    }
-
-    var { left, top, width } = this.bounds
-
-    var right = left + width
-
-    var h = HANDLE_HEIGHT
-
-    return (
-      x < Math.max(right + HANDLE_WIDTH, right) &&
-      x > Math.min(right + HANDLE_WIDTH, right) &&
-      y < Math.max(top + h, top) &&
-      y > Math.min(top + h, top)
-    )
-  }
-
-  // dispose() {
-  // this.reference?.off('change', this.onRefChanged, this)
-
-  // super.dispose()
-  // }
-
-  rebuildTabButtons() {
-    var {
-      width,
-      height,
-      fillStyle,
-      activeFillStyle,
-      activeLineColor,
-      activeLineWidth,
-      strokeStyle,
-      fontColor,
-      activeFontColor,
-      fontFamily,
-      fontSize,
-      lineHeight,
-      italic,
-      bold,
-      lineWidth = 0
-    } = this.state
-
-    var reference = this.reference
-    let children = []
-
-    let components = reference.components
-
-    let componentsLength = this.components.length
-
-    for (var i = componentsLength - 1; i >= 0; i--) {
-      this.removeComponent(this.components[i])
-    }
-
-    for (let i = 0; i < components.length; i++) {
-      const componentType = components[i].model.type
-      if (componentType != 'tab-card' && componentType != 'floor') {
-        continue
-      }
-
-      let tabCardText = components[i].text || ''
-
-      children.push(
-        Model.compile({
-          type: 'tab-button',
-          index: i,
-          text: tabCardText || String(i + 1),
-          fillStyle: fillStyle || 'transparent',
-          activeFillStyle: activeFillStyle,
-          activeLineColor: activeLineColor,
-          activeLineWidth: activeLineWidth,
-          activeFontColor: activeFontColor || fontColor,
-          fontColor: fontColor,
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          lineHeight: lineHeight,
-          italic: italic,
-          bold: bold,
-          strokeStyle: strokeStyle,
-          lineWidth: lineWidth,
-          left: 0,
-          top: 0,
-          width: width,
-          height: height
-        })
-      )
-    }
-
-    this.add(children)
-
-    this.reflow()
-
-    this.activeIndex = this.state.activeIndex || 0
-  }
-
-  setTabButtonsStyle(style: Style) {
-    const toCopy = {} as any
-
-    if ('fillStyle' in style) toCopy.fillStyle = style.fillStyle
-    if ('fontColor' in style) toCopy.fontColor = style.fontColor
-    if ('strokeStyle' in style) toCopy.strokeStyle = style.strokeStyle
-    if ('lineWidth' in style) toCopy.lineWidth = style.lineWidth
-
-    if ('activeFillStyle' in style) toCopy.activeFillStyle = style.activeFillStyle
-    if ('activeFontColor' in style) toCopy.activeFontColor = style.activeFontColor
-    if ('activeLineWidth' in style) toCopy.activeLineWidth = style.activeLineWidth
-    if ('activeLineColor' in style) toCopy.activeLineColor = style.activeLineColor
-
-    var children = this.components
-
-    for (var i in children) {
-      var tabBtn = children[i]
-      ;(tabBtn as TabButton).setStylesFromParent(toCopy)
-    }
-  }
-
-  // onRefChanged(after: any, before: any, hint: any) {
-  //   let sourceIndex = hint.deliverer.indexOf(hint.origin)
-  //   if (this.components[sourceIndex]) {
-  //     this.components[sourceIndex].set(after)
-  //     this.invalidate()
-  //   }
-  // }
-
-  onchange(after: State, before: State) {
-    if ('reference' in after) {
-      this.reference = after.reference
-      this.invalidate()
-    }
-
-    if ('activeIndex' in after) {
-      this.data = after.activeIndex
-    }
-
-    this.setTabButtonsStyle(after)
-  }
-}
-
-Component.register('tab', Tab)

package/src/templates/index.ts

@@ -1,4 +0,0 @@
-import TabContainer from './tab-container'
-import Tab from './tab'
-
-export default [TabContainer, Tab]

package/src/templates/tab-container.ts

@@ -1,17 +0,0 @@
-const icon = new URL('../../icons/tab-container.png', import.meta.url).href
-
-export default {
-  type: 'tab-container',
-  description: 'tab container(card layout)',
-  group: 'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'tab-container',
-    left: 100,
-    top: 100,
-    width: 200,
-    height: 200,
-    fontSize: 80,
-    lineWidth: 1
-  }
-}

package/src/templates/tab.ts

@@ -1,20 +0,0 @@
-const icon = new URL('../../icons/tab.png', import.meta.url).href
-
-export default {
-  type: 'tab',
-  description: 'tab-container control tab',
-  group: 'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'tab',
-    left: 100,
-    top: 100,
-    width: 100,
-    height: 400,
-    lineWidth: 5,
-    fillStyle: 'navy',
-    activeFillStyle: 'red',
-    strokeStyle: 'white',
-    fontColor: 'white'
-  }
-}

package/test/basic-test.html

@@ -1,67 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright © HatioLab Inc. All rights reserved.
--->
-<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-tab.html">
-  </head>
-  <body>
-
-    <!-- You can use the document as a place to set up your fixtures. -->
-    <test-fixture id="things-scene-tab-fixture">
-      <template>
-        <things-scene-tab>
-          <h2>things-scene-tab</h2>
-        </things-scene-tab>
-      </template>
-    </test-fixture>
-
-    <script>
-      suite('<things-scene-tab>', function() {
-
-        var myEl;
-
-        setup(function() {
-          myEl = fixture('things-scene-tab-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-tab says, Hello World!');
-
-          var greetings = myEl.sayHello('greetings Earthlings');
-          assert.equal(greetings, 'things-scene-tab says, greetings Earthlings');
-        });
-
-        test('fires lasers', function(done) {
-          myEl.addEventListener('things-scene-tab-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,22 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright © HatioLab Inc. All rights reserved.
--->
-<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/tsconfig.json

@@ -1,24 +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,
-    "types": []
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}

package/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2016.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/tslib/tslib.d.ts","../../node_modules/@hatiolab/things-scene/things-scene.d.ts","./src/tab-container.ts","./src/tab-card.ts","./src/tab-button.ts","./src/tab.ts","./src/index.ts","./src/templates/tab-container.ts","./src/templates/tab.ts","./src/templates/index.ts"],"fileIdsList":[[38,40,41,42,43],[38,39,43],[38,39,40],[38,39,41],[38,39,42],[38,45,46],[38]],"fileInfos":[{"version":"e41c290ef7dd7dab3493e6cbe5909e0148edf4a8dad0271be08edec368a0f7b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"4fd3f3422b2d2a3dfd5cdd0f387b3a8ec45f006c6ea896a4cb41264c2100bb2c","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"62bb211266ee48b2d0edf0d8d1b191f0c24fc379a82bd4c1692a082c540bc6b1","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"936e80ad36a2ee83fc3caf008e7c4c5afe45b3cf3d5c24408f039c1d47bdc1df","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"fef8cfad2e2dc5f5b3d97a6f4f2e92848eb1b88e897bb7318cef0e2820bceaab","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"a6a5253138c5432c68a1510c70fe78a644fe2e632111ba778e1978010d6edfec","impliedFormat":1},{"version":"ef4e4dc2fd14de20903f5010671dab9cf547c831dce4802306676c80649b990b","impliedFormat":1},{"version":"43157af160186026ab64fb0b618b19e8fcfe5427e9f72b93b7e86266707e8a14","signature":"4272b1b18af2ee717d5ee74400c801837c5a9ac2509d792c177827fd6d7c563a"},{"version":"61b8b1a87df8810b18d96e5540ce18140708b6ff9bcd6e0a41da5b01834dd77f","signature":"903336d4b0a83371879de11f43ac82d819d200198638bc27d1c5324575863569"},{"version":"068cb3bf28e623cc10c030b3530b36fe8f62cfe835e537d819a2fce13ea82069","signature":"021a7c1be310ba85bf00556b0caf252ebd327042e3b469ac9c1c58f5a9ce6370"},{"version":"5c0b95b23a0fde245ff0b23bd9b7acfc36113e343cff0aead0364d50cf1698c2","signature":"b53d976bb1f6724b4c0cddbb416f52b79e20adc9c7efb5aac5f9da2861c46439"},{"version":"0f300668d702080921c78d3c4edd493925de582dce2a50c0993ac4b8c62bb7d4","signature":"88132cd35f670e57b6d85e802f4453aff313270908886369da0561fbc599c354"},{"version":"b668e19c84a1d923f78e4def083d7eb2cb0cc7b834d38e130be5a60f33d2a41f","signature":"ce7354820bf2fb9fad3221a704dbede20b61e9f30f384128b3be81f685c63a08"},{"version":"9958af937b59735fadadb4cac852bdde6aea78bfcf803deecc2f63a2f3127918","signature":"b21130ee402d2f055d24259958864b717e89897989b3663d6fe8fafbf692dd7f"},{"version":"66603f5a0bd2d7052120523791e8edb77078229aaf5314522886798ce92151bb","signature":"05890472fb38b7b901355c9294924f1da43644a9150fe916eab7b020d77aadb6"}],"root":[[40,47]],"options":{"allowJs":true,"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":false,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./dist","rootDir":"./src","skipLibCheck":true,"sourceMap":true,"strict":true,"target":5},"referencedMap":[[44,1],[42,2],[41,3],[40,4],[43,5],[47,6],[45,7],[46,7]],"version":"5.7.2"}