npm - @operato/scene-tab - Versions diffs - 8.0.0-beta.0 → 8.0.0-beta.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json +4 -4
package/CHANGELOG.md +0 -775
package/demo/index.html +0 -288
package/demo/things-scene-tab.html +0 -5
package/src/index.ts +0 -8
package/src/tab-button.ts +0 -74
package/src/tab-card.ts +0 -76
package/src/tab-container.ts +0 -210
package/src/tab.ts +0 -300
package/src/templates/index.ts +0 -4
package/src/templates/tab-container.ts +0 -17
package/src/templates/tab.ts +0 -20
package/test/basic-test.html +0 -67
package/test/index.html +0 -22
package/tsconfig.json +0 -24
package/tsconfig.tsbuildinfo +0 -1

package/demo/index.html DELETED Viewed

@@ -1,288 +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" />
-    <title>things-scene-tab Demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
-    <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html" />
-    <link rel="import" href="../../things-scene-indoor-map/things-scene-indoor-map.html" />
-    <link rel="import" href="../../things-scene-modeler/things-scene-properties.html" />
-    <script src="../things-scene-tab.js"></script>
-    <style is="custom-style">
-      @font-face {
-        font-family: 'Bitstream Vera Serif Bold';
-        src: url('fonts/VeraSeBd.ttf');
-      }
-      things-scene-viewer {
-        display: block;
-        width: 100%;
-        height: 560px;
-      }
-    </style>
-  </head>
-  <body unresolved>
-    <template is="dom-bind" id="app">
-      <p>An example of <code>&lt;things-scene-tab&gt;</code>:</p>
-      <things-scene-viewer id="scene" scene="{{scene}}" selected="{{selected}}" model="[[model]]" mode="1">
-        <things-scene-layer type="selection-layer"></things-scene-layer>
-        <things-scene-layer type="modeling-layer"></things-scene-layer>
-        <things-scene-handler type="text-editor"></things-scene-handler>
-        <things-scene-handler type="move-handler"></things-scene-handler>
-      </things-scene-viewer>
-      <things-scene-properties scene="[[scene]]" selected="[[selected]]" model="{{target}}" bounds="{{bounds}}">
-        <fieldset class="same-width">
-          <legend>Stack style</legend>
-          <label>Active TabCard</label>
-          <input
-            type="number"
-            value-as-number="{{target.layoutConfig.activeIndex::change}}"
-            min="0"
-            max="100"
-            step="1"
-            numberonly="true"
-          />
-          <label>reference</label>
-          <input type="text" value="{{target.reference::change}}" />
-        </fieldset>
-      </things-scene-properties>
-    </template>
-    <script>
-      window.addEventListener('WebComponentsReady', function (e) {
-        var app = document.querySelector('#app')
-        app.model = {
-          width: 500,
-          height: 500,
-          components: [
-            {
-              type: 'tab',
-              reference: 'indoor-map',
-              left: 100,
-              top: 100,
-              width: 100,
-              height: 400,
-              lineWidth: 10,
-              // lineWidth: 0,
-              fillStyle: 'navy',
-              strokeStyle: 'red',
-              activeFillStyle: 'red',
-              fontColor: 'black',
-              activeFontColor: 'white',
-              activeIndex: 2
-            },
-            {
-              type: 'tab-container',
-              id: 'tab-container',
-              left: 250,
-              top: 100,
-              width: 600,
-              height: 400,
-              fontSize: 80,
-              fontColor: '#000000',
-              lineWidth: 10,
-              strokeStyle: 'red',
-              active: 0,
-              components: [
-                {
-                  type: 'tab-card',
-                  fillStyle: 'orange',
-                  width: 100,
-                  height: 100,
-                  text: 'first',
-                  components: [
-                    {
-                      type: 'rect',
-                      left: 100,
-                      top: 220,
-                      width: 100,
-                      height: 100,
-                      fillStyle: 'red',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'ellipse',
-                      cx: 400,
-                      cy: 200,
-                      rx: 100,
-                      ry: 100,
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'polygon',
-                      path: [
-                        {
-                          x: 100,
-                          y: 100
-                        },
-                        {
-                          x: 200,
-                          y: 150
-                        },
-                        {
-                          x: 150,
-                          y: 200
-                        }
-                      ],
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    }
-                  ]
-                },
-                {
-                  type: 'tab-card',
-                  fillStyle: 'navy',
-                  width: 100,
-                  height: 100,
-                  components: [
-                    {
-                      type: 'rect',
-                      left: 100,
-                      top: 220,
-                      width: 100,
-                      height: 100,
-                      fillStyle: 'red',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'ellipse',
-                      cx: 400,
-                      cy: 200,
-                      rx: 100,
-                      ry: 100,
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'polygon',
-                      path: [
-                        {
-                          x: 100,
-                          y: 100
-                        },
-                        {
-                          x: 200,
-                          y: 150
-                        },
-                        {
-                          x: 150,
-                          y: 200
-                        }
-                      ],
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    }
-                  ]
-                },
-                {
-                  type: 'tab-card',
-                  fillStyle: 'black',
-                  width: 100,
-                  height: 100,
-                  components: [
-                    {
-                      type: 'rect',
-                      left: 100,
-                      top: 220,
-                      width: 100,
-                      height: 100,
-                      fillStyle: 'red',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'ellipse',
-                      cx: 400,
-                      cy: 200,
-                      rx: 100,
-                      ry: 100,
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'polygon',
-                      path: [
-                        {
-                          x: 100,
-                          y: 100
-                        },
-                        {
-                          x: 200,
-                          y: 150
-                        },
-                        {
-                          x: 150,
-                          y: 200
-                        }
-                      ],
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    }
-                  ]
-                },
-                {
-                  type: 'tab-card',
-                  fillStyle: 'green',
-                  width: 100,
-                  height: 100,
-                  components: [
-                    {
-                      type: 'rect',
-                      left: 100,
-                      top: 220,
-                      width: 100,
-                      height: 100,
-                      fillStyle: 'red',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'ellipse',
-                      cx: 400,
-                      cy: 200,
-                      rx: 100,
-                      ry: 100,
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    },
-                    {
-                      type: 'polygon',
-                      path: [
-                        {
-                          x: 100,
-                          y: 100
-                        },
-                        {
-                          x: 200,
-                          y: 150
-                        },
-                        {
-                          x: 150,
-                          y: 200
-                        }
-                      ],
-                      fillStyle: 'blue',
-                      lineWidth: 4
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      })
-    </script>
-  </body>
-</html>

package/demo/things-scene-tab.html DELETED Viewed

@@ -1,5 +0,0 @@
-<!--
-@license
-Copyright © HatioLab Inc. All rights reserved.
--->
-<script src="../things-scene-tab.js"></script>

package/src/index.ts DELETED Viewed

@@ -1,8 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-export { default as TabCard } from './tab-card'
-export { default as TabContainer } from './tab-container'
-export { default as Tab } from './tab'
-export { default as TabButton } from './tab-button'

package/src/tab-button.ts DELETED Viewed

@@ -1,74 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, RectPath, State } from '@hatiolab/things-scene'
-import Tab from './tab'
-export default class TabButton extends RectPath(Component) {
-  get index() {
-    return (this.parent as Tab).indexOf(this)
-  }
-  get activated() {
-    return (this.parent as Tab).activeIndex === this.index
-  }
-  private _fillStyle?: string
-  private _fontColor?: string
-  private _strokeStyle?: string
-  private _lineWidth?: string
-  prerender(context: CanvasRenderingContext2D) {
-    super.prerender(context)
-    let { activeFillStyle, activeLineColor, activeLineWidth, activeFontColor } = this.state
-    if (this.activated) {
-      this.model.fillStyle = activeFillStyle
-      this.model.fontColor = activeFontColor
-      this.model.strokeStyle = activeLineColor
-      this.model.lineWidth = activeLineWidth
-    } else {
-      this.model.fillStyle = this._fillStyle
-      this.model.fontColor = this._fontColor
-      this.model.strokeStyle = this._strokeStyle
-      this.model.lineWidth = this._lineWidth
-    }
-  }
-  render(context: CanvasRenderingContext2D) {
-    var { left = 0, top = 0, width, height } = this.bounds
-    context.beginPath()
-    context.rect(left, top, width, height)
-    this.drawFill(context)
-    this.drawStroke(context)
-  }
-  onclick(e: MouseEvent) {
-    ;(this.parent as Tab).activeIndex = this.index
-    this.parent.invalidate()
-  }
-  setStylesFromParent(style: State) {
-    if ('fillStyle' in style) this._fillStyle = style.fillStyle
-    if ('fontColor' in style) this._fontColor = style.fontColor
-    if ('strokeStyle' in style) this._strokeStyle = style.strokeStyle
-    if ('lineWidth' in style) this._lineWidth = style.lineWidth
-    this.set(style)
-  }
-  onchange(after: State) {
-    if ('text' in after) {
-      ;(this.parent as Tab).reference?.getAt(this.index).setState('text', after.text)
-    }
-    this.invalidate()
-  }
-}
-Component.register('tab-button', TabButton)

package/src/tab-card.ts DELETED Viewed

@@ -1,76 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, Container } from '@hatiolab/things-scene'
-import TabContainer from './tab-container'
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'action',
-      label: 'remove',
-      name: 'remove',
-      property: {
-        icon: 'remove_circle',
-        action: function (tabCard: TabCard) {
-          let tabContainer = tabCard.parent as TabContainer
-          tabContainer.removeComponent(tabCard)
-          tabContainer.set('activeIndex', 0)
-        }
-      }
-    }
-  ]
-}
-export default class TabCard extends Container {
-  private _clickPoint?: Component
-  get hasTextProperty() {
-    return false
-  }
-  get showMoveHandle() {
-    return false
-  }
-  /*
-   * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.
-   *
-   * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)
-   * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)
-   *
-   * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.
-   */
-  get mutable() {
-    return false
-  }
-  /*
-   * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.
-   *
-   * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)
-   * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)
-   */
-  get resizable() {
-    return false
-  }
-  /*
-   * 회전을 할 수 있는 지를 결정한다.
-   *
-   * 일반적으로 모든 컴포넌트는 가능하다.(return true)
-   */
-  get rotatable() {
-    return false
-  }
-  get nature() {
-    return NATURE
-  }
-}
-Component.register('tab-card', TabCard)

package/src/tab-container.ts DELETED Viewed

@@ -1,210 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { CardLayout, Component, ComponentNature, Container, Model, POINT, State } from '@hatiolab/things-scene'
-import TabCard from './tab-card'
-const LABEL_WIDTH = 25
-const LABEL_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: 'action',
-      label: 'add-card',
-      name: 'addCard',
-      property: {
-        icon: 'add_circle',
-        action: (tabContainer: TabContainer) => {
-          tabContainer.addCard()
-        }
-      }
-    },
-    {
-      type: 'number',
-      label: 'active index',
-      name: 'activeIndex'
-    }
-  ],
-  'value-property': 'activeIndex',
-  help: 'scene/component/tab-container'
-}
-export default class TabContainer extends Container {
-  private _focused: boolean = false
-  private __down_point?: POINT
-  get nature() {
-    return NATURE
-  }
-  get layout() {
-    return CardLayout
-  }
-  get layoutConfig() {
-    return this.getState('layoutConfig')
-  }
-  set layoutConfig(config) {
-    this.setState('layoutConfig', config)
-  }
-  get activeCard(): TabCard {
-    return this.components[this.getState('layoutConfig').activeIndex || 0] as TabCard
-  }
-  get activeIndex() {
-    return this.getState('activeIndex') || 0
-  }
-  set activeIndex(activeIndex: number) {
-    this.setState('activeIndex', Number(activeIndex))
-  }
-  ready() {
-    super.ready()
-    if (this.components.length == 0) {
-      this.addCard()
-    }
-    this.data = this.state.activeIndex
-  }
-  postrender(context: CanvasRenderingContext2D) {
-    if (!this.app.isViewMode && this._focused) {
-      var { left, top, width, fillStyle } = this.state
-      // tabCard 선택 탭 그리기
-      for (let i = 0; i < this.components.length; i++) {
-        context.beginPath()
-        context.rect(left - LABEL_WIDTH, top + i * LABEL_HEIGHT, LABEL_WIDTH, LABEL_HEIGHT)
-        let color = 255 - ((20 * (i + 1)) % 255)
-        context.fillStyle = rgba(color, color, color, 1)
-        context.fill()
-        context.closePath()
-      }
-      context.beginPath()
-      context.moveTo(left, top)
-      context.lineTo(left - LABEL_WIDTH, top)
-      context.lineTo(left - LABEL_WIDTH, top + this.components.length * LABEL_HEIGHT)
-      context.lineTo(left, top + this.components.length * LABEL_HEIGHT)
-      context.strokeStyle = '#ccc'
-      context.stroke()
-      context.closePath()
-    }
-    super.postrender(context)
-  }
-  contains(x: number, y: number) {
-    var contains = super.contains(x, y)
-    if (this.app.isViewMode) return contains
-    var { left, top, width } = this.bounds
-    var h = LABEL_HEIGHT
-    contains =
-      contains ||
-      // card selector 영역에 포함되는지
-      (x < Math.max(left - LABEL_WIDTH, left) &&
-        x > Math.min(left - LABEL_WIDTH, left) &&
-        y < Math.max(top + h * this.size(), top) &&
-        y > Math.min(top + h * this.size(), top))
-    if (contains) this._focused = true
-    else this._focused = false
-    this.invalidate()
-    return contains
-  }
-  onchange(after: State) {
-    if ('activeIndex' in after) {
-      this.layoutConfig = {
-        ...this.layoutConfig,
-        activeIndex: after.activeIndex
-      }
-      this.data = after.activeIndex
-    }
-  }
-  onmouseup(e: MouseEvent) {
-    var down_point = this.__down_point
-    delete this.__down_point
-    if (!down_point || down_point.x != e.offsetX || down_point.y != e.offsetY) {
-      return
-    }
-    var point = this.transcoordC2S(e.offsetX, e.offsetY)
-    var { left, top } = this.state
-    var x = point.x - left
-    var y = point.y - top
-    if (x > 0) return
-    y /= LABEL_HEIGHT
-    y = Math.floor(y)
-    if (!this.layoutConfig) this.layoutConfig = {}
-    if (y >= this.components.length) return
-    // /* 생성 버튼이 클릭되면, 새로운 tabCard를 추가한다. */
-    // if(y == this.components.length) {
-    //   this.add(Model.compile({
-    //     type: 'tab-card',
-    //     width: 100,
-    //     height: 100
-    //   }))
-    // }
-    this.setState('activeIndex', y)
-  }
-  onmousedown(e: MouseEvent) {
-    this.__down_point = {
-      x: e.offsetX,
-      y: e.offsetY
-    }
-  }
-  addCard() {
-    const color = 255 - ((20 * (this.components.length + 1)) % 255)
-    const hex = color.toString(16)
-    const tabCard = Model.compile({
-      type: 'tab-card',
-      fillStyle: `#${hex}${hex}${hex}`,
-      top: 0,
-      left: 0,
-      width: 100,
-      height: 100
-    })
-    this.addComponent(tabCard)
-    this.setState('activeIndex', this.components.length - 1)
-  }
-}
-Component.register('tab-container', TabContainer)