@operato/scene-visualizer 8.0.0-beta.1 → 8.0.0-beta.2

package/src/threed/texture/canvas-texture.ts

@@ -1,67 +0,0 @@
-import * as THREE from 'three'
-import { Component } from '@hatiolab/things-scene'
-
-import { createCanvas } from '../html/elements'
-
-function nextPowerOf2(n: number) {
-  var count = 0
-
-  if (n && !(n & (n - 1))) {
-    return n
-  }
-
-  while (n != 0) {
-    n >>= 1
-    count += 1
-  }
-
-  return 1 << count
-}
-
-export function createCanvasTexture(component: Component): THREE.Texture {
-  var { lineWidth = 0 } = component.state
-  var { width, height } = component.bounds
-
-  width += lineWidth
-  height += lineWidth
-
-  // Factor for increasing image resolution.
-  // TODO to be able to redraw according to the change in zoom value.
-  const scale = 2 // component.realObject?.threeContainer?.zoom as number
-
-  var poweredWidth = nextPowerOf2(width * scale)
-  var poweredHeight = nextPowerOf2(height * scale)
-
-  let canvas = createCanvas(poweredWidth, poweredHeight)
-
-  var texture = new THREE.CanvasTexture(canvas)
-
-  renderCanvasTexture(canvas, component, scale)
-
-  texture.needsUpdate = true
-  texture.wrapS = THREE.RepeatWrapping
-  texture.wrapT = THREE.RepeatWrapping
-  texture.offset.set(0, 1 - (height * scale) / poweredHeight)
-  texture.repeat.set((width * scale) / poweredWidth, (height * scale) / poweredHeight)
-  texture.magFilter = THREE.NearestFilter
-  texture.minFilter = THREE.LinearFilter
-  // texture.minFilter = THREE.LinearMipMapLinearFilter
-  texture.colorSpace = THREE.SRGBColorSpace
-
-  return texture
-}
-
-export function renderCanvasTexture(canvas: HTMLCanvasElement, component: Component, scale: number) {
-  var { lineWidth = 0 } = component.state
-  var { left, top } = component.bounds
-
-  left -= lineWidth / 2
-  top -= lineWidth / 2
-
-  let context = canvas.getContext('2d')
-
-  context!.scale(scale, scale)
-  context!.translate(-left, -top)
-  component.render(context!)
-  component.postrender(context!)
-}

package/src/threed/texture/text-texture.ts

@@ -1,100 +0,0 @@
-import * as THREE from 'three'
-
-import { createCanvas } from '../html/elements'
-
-export function fontStyle(bold: boolean, italic: boolean, fontSize: number, fontFamily: string): string {
-  return [
-    ['bold', bold],
-    ['italic', italic],
-    [fontSize + 'px', true],
-    [fontFamily, true]
-  ]
-    .filter(p => p[1])
-    .map(p => p[0])
-    .join(' ')
-}
-
-function nextPowerOf2(n: number) {
-  var count = 0
-
-  if (n && !(n & (n - 1))) {
-    return n
-  }
-
-  while (n != 0) {
-    n >>= 1
-    count += 1
-  }
-
-  return 1 << count
-}
-
-export function drawTextTexture(canvas: HTMLCanvasElement, text: string, textStyle: any) {
-  var { bold = false, italic = false, fontFamily = 'Serif', fontSize = 10, fontColor = 'black' } = textStyle || {}
-
-  var ctx = canvas.getContext('2d')
-  ctx!.imageSmoothingEnabled = false
-
-  ctx!.fillStyle = fontColor
-  ctx!.strokeStyle = fontColor
-  ctx!.font = fontStyle(bold, italic, fontSize, fontFamily)
-  ctx!.textBaseline = 'top'
-  ctx!.textAlign = 'left'
-  ctx!.fillText(String(text), 0, 0)
-
-  /* TODO multiline 시 검토 */
-  // var lineText = String(text).split('\n')
-  // lineText.forEach((t, i) => {
-  //   ctx.fillText(t, 0, Number(i) * lineHeight)
-  //   ctx.strokeText(t, 0, Number(i) * lineHeight)
-  // })
-}
-
-export function textTexture(text: string, width: number, height: number, textStyle: any) {
-  // TODO component.text의 heavy한 로직을 반복적으로 실행하지 않도록, 캐싱하자.
-  var poweredWidth = nextPowerOf2(width)
-  var poweredHeight = nextPowerOf2(height)
-
-  let canvas = createCanvas(poweredWidth, poweredHeight)
-
-  drawTextTexture(canvas, text, textStyle)
-
-  var texture = new THREE.CanvasTexture(canvas)
-
-  texture.needsUpdate = true
-  texture.wrapS = THREE.RepeatWrapping
-  texture.wrapT = THREE.RepeatWrapping
-  texture.offset.set(0, 1 - height / poweredHeight)
-  texture.repeat.set(width / poweredWidth, height / poweredHeight)
-  texture.minFilter = THREE.LinearFilter
-
-  return texture
-}
-
-export function textBounds(text: string, textStyle: any): { width: number; height: number } {
-  let { bold = false, italic = false, fontFamily = 'Serif', fontSize = 10, lineHeight = 'normal' } = textStyle || {}
-
-  if (text === undefined || text == '') {
-    text = ' '
-  } else {
-    text = String(text)
-  }
-
-  let span = document.createElement('span')
-  span.style.font = fontStyle(bold, italic, fontSize, fontFamily)
-  span.style.lineHeight = String(lineHeight)
-  span.style.whiteSpace = 'pre'
-  span.style.position = 'absolute'
-  span.textContent = text
-
-  document.body.appendChild(span)
-
-  let textBounds = span.getBoundingClientRect()
-
-  document.body.removeChild(span)
-
-  return {
-    width: textBounds.width,
-    height: textBounds.height
-  }
-}

package/src/threed/three-dimensional-container.ts

@@ -1,9 +0,0 @@
-import { Component } from '@hatiolab/things-scene'
-
-export interface ThreeDimensionalContainer extends Component {
-  is3dContainer(): boolean
-  get scene3d(): THREE.Scene | undefined
-  get renderer3d(): THREE.WebGLRenderer | undefined
-  get mixer(): THREE.AnimationMixer | undefined
-  get zoom(): number | undefined
-}

package/src/threed/utils/bound-uv-generator.ts

@@ -1,80 +0,0 @@
-import * as THREE from 'three'
-
-type ExtrudedOptions = {
-  depth: number
-}
-
-export class BoundUVGenerator {
-  bb?: THREE.Box2
-  extrudedShape?: THREE.Shape
-  extrudedOptions?: ExtrudedOptions
-
-  setShape({ extrudedShape, extrudedOptions }: { extrudedShape: THREE.Shape; extrudedOptions: ExtrudedOptions }) {
-    this.extrudedShape = extrudedShape
-    this.bb = new THREE.Box2()
-
-    this.bb.setFromPoints(this.extrudedShape?.extractPoints(0).shape)
-    this.extrudedOptions = extrudedOptions
-  }
-
-  generateTopUV(geometry: THREE.BufferGeometry, vertices: number[], indexA: number, indexB: number, indexC: number) {
-    const ax = vertices[indexA * 3],
-      ay = vertices[indexA * 3 + 1],
-      bx = vertices[indexB * 3],
-      by = vertices[indexB * 3 + 1],
-      cx = vertices[indexC * 3],
-      cy = vertices[indexC * 3 + 1],
-      bb = this.bb!, //extrudedShape.getBoundingBox(),
-      bbx = bb.max.x - bb.min.x,
-      bby = bb.max.y - bb.min.y
-
-    return [
-      new THREE.Vector2((ax - bb.min.x) / bbx, 1.0 - (ay - bb.min.y) / bby),
-      new THREE.Vector2((bx - bb.min.x) / bbx, 1.0 - (by - bb.min.y) / bby),
-      new THREE.Vector2((cx - bb.min.x) / bbx, 1.0 - (cy - bb.min.y) / bby)
-    ]
-  }
-
-  generateSideWallUV(
-    geometry: THREE.BufferGeometry,
-    vertices: number[],
-    indexA: number,
-    indexB: number,
-    indexC: number,
-    indexD: number
-  ) {
-    const ax = vertices[indexA * 3],
-      ay = vertices[indexA * 3 + 1],
-      az = vertices[indexA * 3 + 2],
-      bx = vertices[indexB * 3],
-      by = vertices[indexB * 3 + 1],
-      bz = vertices[indexB * 3 + 2],
-      cx = vertices[indexC * 3],
-      cy = vertices[indexC * 3 + 1],
-      cz = vertices[indexC * 3 + 2],
-      dx = vertices[indexD * 3],
-      dy = vertices[indexD * 3 + 1],
-      dz = vertices[indexD * 3 + 2]
-
-    const amt = this.extrudedOptions?.depth || 100,
-      bb = this.bb!, //extrudedShape.getBoundingBox(),
-      bbx = bb.max.x - bb.min.x,
-      bby = bb.max.y - bb.min.y
-
-    if (Math.abs(ay - by) < 0.01) {
-      return [
-        new THREE.Vector2(ax / bbx, 1.0 - az / amt),
-        new THREE.Vector2(bx / bbx, 1.0 - bz / amt),
-        new THREE.Vector2(cx / bbx, 1.0 - cz / amt),
-        new THREE.Vector2(dx / bbx, 1.0 - dz / amt)
-      ]
-    } else {
-      return [
-        new THREE.Vector2(ay / bby, 1.0 - az / amt),
-        new THREE.Vector2(by / bby, 1.0 - bz / amt),
-        new THREE.Vector2(cy / bby, 1.0 - cz / amt),
-        new THREE.Vector2(dy / bby, 1.0 - dz / amt)
-      ]
-    }
-  }
-}

package/src/visualizer.ts

@@ -1,319 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ScenePopup, Properties, ComponentNature } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-
-import { RealObject } from './threed/real-object'
-import './three-layout'
-import { ThreeContainer } from './three-container'
-import { Stock } from './stock'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'number',
-      label: 'fov',
-      name: 'fov',
-      property: 'fov'
-    },
-    {
-      type: 'number',
-      label: 'near',
-      name: 'near',
-      property: 'near'
-    },
-    {
-      type: 'number',
-      label: 'far',
-      name: 'far',
-      property: 'far'
-    },
-    {
-      type: 'number',
-      label: 'zoom',
-      name: 'zoom',
-      property: 'zoom'
-    },
-    {
-      type: 'number',
-      label: 'camera-x',
-      name: 'cameraX'
-    },
-    {
-      type: 'number',
-      label: 'camera-y',
-      name: 'cameraY'
-    },
-    {
-      type: 'number',
-      label: 'camera-z',
-      name: 'cameraZ'
-    },
-    {
-      type: 'select',
-      label: 'precision',
-      name: 'precision',
-      property: {
-        options: [
-          {
-            display: 'High',
-            value: 'highp'
-          },
-          {
-            display: 'Medium',
-            value: 'mediump'
-          },
-          {
-            display: 'Low',
-            value: 'lowp'
-          }
-        ]
-      }
-    },
-    {
-      type: 'checkbox',
-      label: 'anti-alias',
-      name: 'antialias',
-      property: 'antialias'
-    },
-    {
-      type: 'checkbox',
-      label: 'auto-rotate',
-      name: 'autoRotate',
-      property: 'autoRotate'
-    },
-    {
-      type: 'checkbox',
-      label: '3dmode',
-      name: 'threed',
-      property: 'threed'
-    },
-    {
-      type: 'checkbox',
-      label: 'debug',
-      name: 'debug',
-      property: 'debug'
-    },
-    {
-      type: 'string',
-      label: 'location-field',
-      name: 'locationField',
-      placeholder: 'location'
-    },
-    {
-      type: 'board-selector',
-      label: 'popup-scene',
-      name: 'popupScene'
-    },
-    {
-      type: 'id-input',
-      label: 'legend-target',
-      name: 'legendTarget',
-      property: {
-        component: 'legend'
-      }
-    },
-    {
-      type: 'number',
-      label: 'rotation-speed',
-      name: 'rotationSpeed'
-    },
-    {
-      type: 'checkbox',
-      label: 'hide-empty-stock',
-      name: 'hideEmptyStock'
-    },
-    {
-      type: 'select',
-      label: 'popup-position',
-      name: 'popupPosition',
-      property: {
-        options: [
-          { display: '', value: '' },
-          { display: 'CENTER', value: 'center' },
-          { display: 'LEFTTOP', value: 'left-top' },
-          { display: 'RIGHTTOP', value: 'right-top' },
-          { display: 'LEFTBOTTOM', value: 'left-bottom' },
-          { display: 'RIGHTBOTTOM', value: 'right-bottom' }
-        ]
-      }
-    }
-  ],
-  help: 'scene/component/visualizer'
-}
-
-const WEBGL_NO_SUPPORT_TEXT = 'WebGL no support'
-
-export class Visualizer extends ThreeContainer {
-  _legendTarget?: Component
-
-  _objects: { [id: string]: RealObject } = {}
-
-  _stock_materials: THREE.Material[] = []
-  _default_material?: THREE.Material /* only for Stock */
-  _empty_material?: THREE.Material /* only for Stock */
-
-  get legendTarget() {
-    var { legendTarget } = this.state
-
-    if (!this._legendTarget && legendTarget) {
-      this._legendTarget = this.root.findById(legendTarget)
-      this._legendTarget && this._legendTarget.on('change', this.onLegendTargetChanged, this)
-    }
-
-    return this._legendTarget
-  }
-
-  putObject(id: string, object: RealObject) {
-    id && (this._objects[id] = object)
-  }
-
-  getObject(id: string): RealObject {
-    return this._objects[id]
-  }
-
-  /* Container Overides .. */
-
-  dispose() {
-    this._legendTarget && this._legendTarget.off('change', this.onLegendTargetChanged, this)
-    delete this._legendTarget
-
-    super.dispose()
-  }
-
-  get nature(): ComponentNature {
-    return NATURE
-  }
-
-  resetMaterials() {
-    this._stock_materials.forEach(m => {
-      if (m.dispose) m.dispose()
-    })
-
-    this._stock_materials = []
-  }
-
-  /* Event Handlers */
-
-  onchange(after: Properties, before: Properties) {
-    if (before.hasOwnProperty('legendTarget') || after.hasOwnProperty('legendTarget')) {
-      this._legendTarget && this._legendTarget.off('change', this.onLegendTargetChanged, this)
-      delete this._legendTarget
-      this.resetMaterials()
-    }
-
-    super.onchange(after, before)
-  }
-
-  onchangeData(): void {
-    if (typeof this.data !== 'object') {
-      return
-    }
-
-    var data = this.data
-    var locationField = this.getState('locationField') || 'location'
-
-    if (data instanceof Array) {
-      /**
-       *  Array type data
-       *  (e.g. data: [{
-       *    'location' : 'A0101-01',
-       *    'description': 'description1',
-       *    ...
-       *  }, {
-       *    ...
-       *  }])
-       */
-
-      data = data.reduce((acc, value, i, arr) => {
-        var location = value[locationField]
-
-        if (!location) {
-          return acc
-        }
-
-        // 하나의 로케이션에 여러 레코드 정보가 올 수 있으므로, 하나이 로케이션의 스탁정보를 items 배열에 담는다.
-        if (acc[location]) {
-          acc[location]['items'].push(value)
-        } else {
-          acc[location] = { items: [value] }
-        }
-
-        return acc
-      }, {})
-    }
-
-    /**
-     *  Object type data
-     *  (e.g. data: {
-     *    'A0101-01': { items: [{ location: 'A0101-01', qty: 10, description: 'description', ... }, {...}] },
-     *    ...
-     *  })
-     */
-    for (var key in data) {
-      let id = key
-      if (data.hasOwnProperty(id)) {
-        let d = data[id]
-        let object = this.getObject(id)
-        if (object) {
-          ;(object as Stock).onchangeStockData(d)
-        }
-      }
-    }
-  }
-
-  onLegendTargetChanged(after: { [key: string]: any }, before: { [key: string]: any }) {
-    if (after.hasOwnProperty('status') && before.hasOwnProperty('status')) this.resetMaterials()
-  }
-
-  onmouseup(e: MouseEvent) {
-    if (this._controls) {
-      if (this._lastFocused) {
-        ;(this._lastFocused as any)._focused = false
-      }
-
-      const { popupScene, left, top, width, height } = this.state
-
-      var ref = popupScene
-      var pointer = this.transcoordC2S(e.offsetX, e.offsetY)
-
-      this._mouse!.x = ((pointer.x - left) / width) * 2 - 1
-      this._mouse!.y = -((pointer.y - top) / height) * 2 + 1
-
-      var object = this.getObjectByRaycast()
-      var realObject = object?.userData.context
-
-      if (realObject) {
-        if (ref && realObject instanceof Stock) {
-          ;(realObject as any).onmouseup(e, this, (data: any) => {
-            ScenePopup.show(this, ref, {
-              data,
-              modal: false,
-              closable: true,
-              output: false,
-              location: this.state.popupPosition || 'right-top'
-            })
-          })
-        }
-
-        ;(realObject as any)._focused = true
-        ;(realObject as any)._focusedAt = performance.now()
-        this._lastFocused = realObject
-        realObject.component?.trigger('click', e)
-      } else {
-        ScenePopup.hide(this.root)
-      }
-
-      this.invalidate()
-
-      e.stopPropagation()
-    }
-  }
-}
-
-Component.register('visualizer', Visualizer)

package/src/wall.ts

@@ -1,50 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObject } from './threed/real-object'
-import { RealObjectMesh } from './threed/real-object-mesh'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'number',
-      label: 'depth',
-      name: 'depth',
-      property: 'depth'
-    }
-  ],
-  help: 'scene/component/wall'
-}
-
-export class Wall3D extends RealObjectMesh {
-  buildGeometry() {
-    this.object3d.geometry = new THREE.BoxGeometry(1, 1, 1)
-  }
-
-  updateDimension(): void {
-    var { width, height, depth = 1 } = this.component.state
-
-    this.object3d.scale.set(width, depth, height)
-  }
-}
-
-export class Wall extends RectPath(Shape) {
-  is3dish() {
-    return true
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new Wall3D(this)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('wall', Wall)

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"]
-}