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

package/src/rack.ts

@@ -1,232 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import * as THREE from 'three'
-import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-
-import { Stock } from './stock'
-import { Material } from 'three'
-import { RackTable } from './rack-table'
-import { RealObject } from './threed/real-object'
-import { Visualizer } from './visualizer'
-
-export class Rack extends RealObject {
-  private _frame?: THREE.BufferGeometry
-  private _board?: THREE.BufferGeometry
-
-  static frameMaterial: Material = new THREE.MeshStandardMaterial({
-    color: 0xcccccc,
-    roughness: 0.5,
-    metalness: 0.3
-  })
-  static rackFrameGeometry = new THREE.BoxGeometry(1, 1, 1)
-  static boardGeometry = new THREE.PlaneGeometry(1, 1, 1, 1)
-
-  private static _boardMaterial?: THREE.MeshStandardMaterial
-
-  get visualizer(): Visualizer | undefined {
-    var component = this.component
-
-    while (component) {
-      if (component.state.type == 'visualizer') {
-        return component as Visualizer
-      }
-      component = component.parent
-    }
-  }
-
-  get rackTable(): RackTable | undefined {
-    var component = this.component
-
-    while (component) {
-      if (component.state.type == 'rack-table') {
-        return component as RackTable
-      }
-      component = component.parent
-    }
-  }
-
-  get cz() {
-    var { shelves = 1, depth = 1 } = this.rackTable!.state
-
-    return 0.5 * depth * shelves
-  }
-
-  static get boardMaterial() {
-    if (!Rack._boardMaterial) {
-      Rack._boardMaterial = new THREE.MeshStandardMaterial({
-        color: '#dedede',
-        side: THREE.DoubleSide,
-        polygonOffset: true,
-        polygonOffsetFactor: -0.1
-      })
-    }
-
-    return Rack._boardMaterial
-  }
-
-  get frame() {
-    return this._frame
-  }
-
-  get board() {
-    return this._board
-  }
-
-  build() {
-    super.build()
-
-    var { depth, hideRackFrame, shelves, shelfLocations: commonShelfLocation, stockScale = 0.7 } = this.rackTable!.state
-
-    var { width, height, shelfLocations = commonShelfLocation, binLocations = '' } = this.component.state
-
-    let scale = stockScale
-
-    var shelfLocIds
-
-    if (!shelfLocations) {
-      shelfLocIds = []
-      for (var i = 0; i < shelves; i++) shelfLocIds.push(i + 1)
-    } else shelfLocIds = shelfLocations.split(/\s*,\s*/)
-
-    var shelfBins = binLocations.trim().split('\n').reverse()
-
-    if (!hideRackFrame) {
-      this._frame = this.createRackFrame(width, height, depth * shelves)
-      this._board = this.createRackBoards(shelves, width, height, depth, shelfLocIds)
-    }
-
-    for (var i = 0; i < shelves; i++) {
-      let bottom = -depth * shelves * 0.5
-      if (shelfLocIds[i] == '') {
-        continue
-      }
-
-      var bins = (shelfBins[i] || '').trim().split(/\s*,\s*/)
-
-      var binWidth = width / (bins.length || 1)
-      for (var b = 0; b < bins.length; b++) {
-        let stock = new Stock(this.component, {
-          width: binWidth * scale,
-          height: height * scale,
-          depth: depth * scale
-        })
-        stock.update()
-
-        let stockDepth = depth * scale
-
-        stock.object3d.position.set(
-          (width / 2) * ((2 * b - (bins.length - 1)) / bins.length),
-          bottom + depth * i + stockDepth * 0.5,
-          0
-        )
-        var binCode = (bins[b] || '').replace('.', '')
-        stock.object3d.name = `${this.makeLocationString(shelfLocIds[i])}${binCode}`
-
-        this.object3d.add(stock.object3d)
-        this.visualizer!.putObject(stock.object3d.name, stock)
-      }
-    }
-  }
-
-  createRackFrame(w: number, h: number, d: number): THREE.BufferGeometry {
-    const frameWeight = Math.round(Math.min(w, h) / 10)
-    const geometries = []
-
-    for (let i = 0; i < 4; i++) {
-      const geometry = Rack.rackFrameGeometry.clone()
-      geometry.scale(frameWeight, d, frameWeight)
-
-      switch (i) {
-        case 0:
-          geometry.translate(w / 2, 0, h / 2)
-          break
-        case 1:
-          geometry.translate(w / 2, 0, -h / 2)
-          break
-        case 2:
-          geometry.translate(-w / 2, 0, h / 2)
-          break
-        case 3:
-          geometry.translate(-w / 2, 0, -h / 2)
-          break
-      }
-
-      geometries.push(geometry)
-    }
-
-    return BufferGeometryUtils.mergeGeometries(geometries)
-  }
-
-  createRackBoards(
-    shelves: number,
-    width: number,
-    height: number,
-    depth: number,
-    shelfLocIds: string[]
-  ): THREE.BufferGeometry {
-    let bottom = -depth * shelves * 0.5
-    const geometries = []
-
-    for (let i = 1; i < shelves; i++) {
-      if (shelfLocIds[i] === '') {
-        continue
-      }
-
-      const geometry = Rack.boardGeometry.clone()
-
-      geometry.scale(width, height, 1)
-      geometry.rotateX(Math.PI / 2)
-      geometry.translate(0, bottom + depth * i, 0)
-
-      geometries.push(geometry)
-    }
-
-    return BufferGeometryUtils.mergeGeometries(geometries)
-  }
-
-  makeLocationString(shelfString: string) {
-    var { section = '', unit = '' } = this.component.state
-    var { locPattern = '{z}{s}-{u}-{sh}', zone = '' } = this.rackTable!.state
-
-    var locationString = locPattern
-
-    locationString = locationString.replace(/{z}/i, zone)
-    locationString = locationString.replace(/{s}/i, section)
-    locationString = locationString.replace(/{u}/i, unit)
-    locationString = locationString.replace(/{sh}/i, shelfString)
-
-    return locationString
-  }
-
-  makeShelfString(pattern: string, shelf: number, length: number) {
-    /**
-     *  pattern #: 숫자
-     *  pattern 0: 고정 자리수
-     *  pattern -: 역순
-     */
-
-    if (!pattern || !shelf || !length) return
-
-    var isReverse = /^\-/.test(pattern)
-    pattern = pattern.replace(/#+/, '#')
-
-    var fixedLength = (pattern.match(/0/g) || []).length || 0
-    var shelfString = String(isReverse ? length - shelf + 1 : shelf)
-
-    if (shelfString.length > fixedLength && fixedLength > 0) {
-      shelfString = shelfString.substring(shelfString.length - fixedLength)
-    } else {
-      var prefix = ''
-      for (var i = 0; i < fixedLength - shelfString.length; i++) {
-        prefix += '0'
-      }
-      shelfString = prefix + shelfString
-    }
-
-    return shelfString
-  }
-
-  updateAlpha() {}
-}

package/src/rect.ts

@@ -1,39 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Rect } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObjectExtrude } from './threed/real-object-extrude'
-
-export class RectExtrude extends RealObjectExtrude {
-  get shape() {
-    var { width, height, round } = this.component.state
-    var shape = new THREE.Shape()
-
-    if (round > 0) {
-      var radius = (round / 100) * (width / 2)
-
-      shape.moveTo(radius, 0)
-      shape.lineTo(width - radius, 0)
-      shape.quadraticCurveTo(width, 0, width, radius)
-      shape.lineTo(width, height - radius)
-      shape.quadraticCurveTo(width, height, width - radius, height)
-      shape.lineTo(radius, height)
-      shape.quadraticCurveTo(0, height, 0, height - radius)
-      shape.lineTo(0, radius)
-      shape.quadraticCurveTo(0, 0, radius, 0)
-    } else {
-      shape.moveTo(0, 0)
-      shape.lineTo(width, 0)
-      shape.lineTo(width, height)
-      shape.lineTo(0, height)
-      shape.lineTo(0, 0)
-    }
-
-    return shape
-  }
-}
-
-Rect.prototype.buildRealObject = function () {
-  return new RectExtrude(this)
-}

package/src/scene/component.ts

@@ -1,38 +0,0 @@
-import { Component } from '@hatiolab/things-scene'
-import { RealObject } from '../threed/real-object'
-import { RealObjectSprite2D } from '../threed/real-object-sprite-2d'
-
-Component.prototype.buildRealObject = function (this: Component): RealObject | undefined {
-  return new RealObjectSprite2D(this)
-}
-
-Component.prototype.is3dish = function (this: Component): boolean {
-  return true
-}
-
-Object.defineProperty(Component.prototype, 'realObject', {
-  get: function (this: Component): RealObject | undefined {
-    if (!this.disposed && !this._realObject) {
-      this._realObject = this.buildRealObject()
-
-      if (!this._realObject) {
-        return
-      }
-
-      this._realObject.update()
-      this._realObject.updateTransform()
-    }
-
-    return this._realObject
-  },
-  enumerable: false,
-  configurable: false
-})
-
-var oldDispose = Component.prototype.dispose
-
-Component.prototype.dispose = function () {
-  oldDispose.call(this)
-
-  this.realObject && (this.realObject as any).dispose()
-}

package/src/sphere.ts

@@ -1,39 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, ComponentNature, Ellipse } 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: [],
-  help: 'scene/component/sphere'
-}
-
-export class Sphere3D extends RealObjectMesh {
-  buildGeometry() {
-    var { rx = 0 } = this.component.state
-
-    this.object3d.geometry = new THREE.SphereGeometry(rx, 20, 20)
-  }
-}
-
-export class Sphere extends Ellipse {
-  is3dish() {
-    return true
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new Sphere3D(this)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('sphere', Sphere)

package/src/sprite.ts

@@ -1,30 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-import { RealObject } from './threed/real-object'
-import { RealObjectSprite2D } from './threed/real-object-sprite-2d'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: []
-}
-
-export class Sprite extends RectPath(Shape) {
-  is3dish(): boolean {
-    return true
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new RealObjectSprite2D(this)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('sprite', Sprite)

package/src/stock.ts

@@ -1,262 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, Model } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObject } from './threed/real-object'
-import { Visualizer } from './visualizer'
-
-const STOCK_COLOR = '#ccaa76'
-
-export class Stock extends RealObject<THREE.Mesh> {
-  static defaultMaterial = new THREE.MeshStandardMaterial({
-    color: STOCK_COLOR,
-    side: THREE.FrontSide,
-    roughness: 0.7
-  })
-  static stockGeometry = new THREE.BoxGeometry(1, 1, 1)
-
-  _hideEmptyStock: boolean = false
-  _focused: boolean = false
-  _focusedAt?: number
-
-  model: Model
-
-  constructor(component: Component, model: Model) {
-    super(component)
-    this.model = model
-  }
-
-  protected getObject3dInstance() {
-    return new THREE.Mesh()
-  }
-
-  getMaterial(index: number) {
-    var visualizer = this.visualizer
-
-    if (!(visualizer && visualizer && visualizer!.legendTarget && visualizer!.legendTarget.getState('status')))
-      return this.userDefineDefaultMaterial
-
-    var stockStatus = visualizer.legendTarget.getState('status')
-    var range = stockStatus.ranges[index]
-    if (!(range && range.color)) {
-      this.stockMaterials[index] = this.userDefineDefaultMaterial
-    }
-
-    if (!this.stockMaterials[index]) {
-      this.stockMaterials[index] = new THREE.MeshStandardMaterial({
-        color: range.color,
-        side: THREE.FrontSide,
-        roughness: 0.7
-      })
-    }
-
-    var alpha = range.color.replace(/^.*,(.+)\)/, '$1')
-    if (alpha > 0 && alpha < 1) {
-      this.stockMaterials[index].opacity = alpha
-      this.stockMaterials[index].transparent = true
-    }
-
-    return this.stockMaterials[index]
-  }
-
-  get visualizer(): Visualizer | undefined {
-    var component = this.component
-
-    while (component) {
-      if (component.state.type == 'visualizer') {
-        return component as Visualizer
-      }
-      component = component.parent
-    }
-  }
-
-  get stockMaterials() {
-    return this.visualizer!._stock_materials
-  }
-
-  get userDefineDefaultMaterial() {
-    var visualizer = this.visualizer
-
-    if (!visualizer!._default_material) {
-      if (!(visualizer && visualizer && visualizer!.legendTarget && visualizer!.legendTarget.getState('status')))
-        return Stock.defaultMaterial
-
-      var stockStatus = visualizer!.legendTarget.getState('status')
-      var defaultColor = stockStatus.defaultColor
-
-      if (!defaultColor) return Stock.defaultMaterial
-
-      visualizer!._default_material = new THREE.MeshStandardMaterial({
-        color: defaultColor,
-        side: THREE.FrontSide,
-        roughness: 0.7
-      })
-      var alpha = defaultColor.replace(/^.*,(.+)\)/, '$1')
-      if (alpha > 0 && alpha < 1) {
-        visualizer!._default_material.opacity = alpha
-        visualizer!._default_material.transparent = true
-      }
-    }
-    return visualizer!._default_material
-  }
-
-  get emptyMaterial() {
-    var visualizer = this.visualizer
-
-    var defaultColor = STOCK_COLOR
-    if (!visualizer!._empty_material) {
-      if (visualizer && visualizer && visualizer!.legendTarget && visualizer!.legendTarget.getState('status')) {
-        var stockStatus = visualizer!.legendTarget.getState('status')
-        defaultColor = stockStatus.defaultColor || STOCK_COLOR
-      }
-
-      visualizer!._empty_material = new THREE.MeshStandardMaterial({
-        color: defaultColor
-      })
-      var alpha = Number(defaultColor.replace(/^.*,(.+)\)/, '$1'))
-      if (alpha > 0 && alpha < 1) {
-        visualizer!._empty_material.opacity = alpha
-        visualizer!._empty_material.transparent = true
-      } else {
-        visualizer!._empty_material.opacity = 0.33
-        visualizer!._empty_material.transparent = true
-      }
-    }
-
-    return visualizer!._empty_material
-  }
-
-  build() {
-    super.build()
-
-    var visualizer = this.visualizer
-    var { width, height, depth } = this.model
-
-    this._hideEmptyStock = visualizer && visualizer!.model.hideEmptyStock
-
-    this.createStock(width, height, depth)
-  }
-
-  createStock(w: number, h: number, d: number) {
-    this.object3d.geometry = Stock.stockGeometry
-    this.object3d.material = this._hideEmptyStock ? this.emptyMaterial : this.userDefineDefaultMaterial
-
-    this.object3d.scale.set(w, d, h)
-
-    this.object3d.receiveShadow = true
-
-    this.object3d.castShadow = true
-    this.object3d.onBeforeRender = () => {
-      this.onBeforeRender()
-    }
-  }
-
-  onchangeStockData(data: any) {
-    this.object3d.userData = {
-      ...this.object3d.userData,
-      data
-    }
-    var visualizer = this.visualizer
-
-    if (!(visualizer && visualizer && visualizer!.legendTarget && visualizer!.legendTarget.getState('status'))) return
-
-    var stockStatus = visualizer!.legendTarget.getState('status') as {
-      field: string
-      ranges: { min: number; max: number }[]
-    }
-
-    var statusField = stockStatus.field
-    var ranges = stockStatus.ranges
-
-    if (!(statusField && ranges)) return
-
-    var items = data.items
-
-    if (!items) {
-      this.object3d.material = this._hideEmptyStock ? this.emptyMaterial : this.userDefineDefaultMaterial
-      return
-    }
-
-    for (let item of items) {
-      var status = item && item[statusField]
-
-      if (status == undefined) {
-        this.object3d.material = this._hideEmptyStock ? this.emptyMaterial : this.userDefineDefaultMaterial
-        return
-      }
-
-      var isInRanges = ranges.some((range, index) => {
-        let { min, max } = range
-
-        min = Number(min) || min
-        max = Number(max) || max
-
-        if (max > status) {
-          if (min !== undefined) {
-            if (min <= status) {
-              this.object3d.material = this.getMaterial(index)
-            } else return false
-          } else {
-            this.object3d.material = this.getMaterial(index)
-          }
-
-          return true
-        } else {
-          this.object3d.material = this._hideEmptyStock ? this.emptyMaterial : this.userDefineDefaultMaterial
-        }
-      })
-      if (!isInRanges) {
-        this.object3d.material = this.userDefineDefaultMaterial
-      }
-    }
-  }
-
-  onBeforeRender = () => {
-    if (this._focused) {
-      var lastTime = performance.now() - this._focusedAt!
-      var progress = lastTime / 2000
-
-      this.object3d.rotation.y = 2 * Math.PI * progress
-      this.component.invalidate()
-    } else if (this._focusedAt) {
-      delete this._focusedAt
-      this.object3d.rotation.y = 0
-      this.component.invalidate()
-    }
-  }
-
-  onmouseup(e: MouseEvent, visualizer: Visualizer, callback: (arg: { data: any; location: string }) => void) {
-    if (!this.object3d.visible) return
-
-    if (!this.object3d.userData || !this.object3d.userData.data)
-      this.object3d.userData = {
-        ...this.object3d.userData,
-        data: {
-          loc: this.object3d.name,
-          items: [
-            {
-              loc: this.object3d.name
-            }
-          ]
-        }
-      }
-
-    if (callback && typeof callback == 'function') {
-      callback({
-        ...this.object3d.userData.data,
-        color: '#' + (this.object3d.material as any).color?.getHexString()
-      })
-    }
-  }
-
-  // all update functions should be intentionally empty. important!
-  updateTransform() {}
-  updateDimension() {}
-  updateAlpha() {}
-  updateFillStyle() {}
-  updateStrokeStyle() {}
-  updateHidden() {}
-  updateText() {}
-}

package/src/templates/3d-container.ts

@@ -1,21 +0,0 @@
-const icon = new URL('../../icons/3d-container.png', import.meta.url).href
-
-export default {
-  type: '3d-container',
-  description: '3D Container',
-  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: '3d-container',
-    left: 100,
-    top: 100,
-    width: 800,
-    height: 600,
-    fillStyle: 'darkgray',
-    fov: 60,
-    near: 10,
-    far: 10000,
-    zoom: 100,
-    threed: false
-  }
-}

package/src/templates/banner.ts

@@ -1,21 +0,0 @@
-const icon = new URL('../../icons/banner.png', import.meta.url).href
-
-export default {
-  type: 'banner',
-  description: '3D banner',
-  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'banner',
-    cx: 100,
-    cy: 100,
-    zPos: 0,
-    width: 100,
-    height: 10,
-    depth: 50,
-    fillStyle: '#ffffff',
-    strokeStyle: '#999',
-    lineWidth: 1,
-    alpha: 1
-  }
-}

package/src/templates/camera.ts

@@ -1,25 +0,0 @@
-const icon = new URL('../../icons/camera.png', import.meta.url).href
-
-export default {
-  type: 'camera',
-  description: '3D camera',
-  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'camera',
-    left: 100,
-    top: 100,
-    width: 100,
-    height: 100,
-    depth: 50,
-    fillStyle: '#CCAA76',
-    strokeStyle: '#999',
-    lineWidth: 1,
-    alpha: 1,
-    far: 100000,
-    fov: 80,
-    near: 1,
-    zoom: 1,
-    showHelper: true
-  }
-}