@things-factory/scene-visualizer 6.0.1 → 6.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@things-factory/scene-visualizer",
   "description": "The visualizer component for things-scene.",
-  "version": "6.0.1",
+  "version": "6.0.5",
   "things-scene": true,
   "browser": "src/index.js",
   "author": "heartyoh <heartyoh@hatiolab.com>",
@@ -19,5 +19,5 @@
     "lit": "^2.5.0",
     "three": "^0.122.0"
   },
-  "gitHead": "e5fe832cd3b1ac14b80d5bc9be2a2e650ab31d51"
+  "gitHead": "af75b451e62cdeeab8b42ff3c49a213cd1ad1ea5"
 }

package/src/index.js

@@ -1,25 +1,21 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
+export { default } from './object-3d-overload'
+
 export { default as Banner } from './banner'
 export { default as Component3d } from './component-3d'
-export { default as Cone } from './cone'
 export { default as Cube } from './cube'
 export { default as Cylinder } from './cylinder'
 export { default as Desk } from './desk'
-// export { default as Door } from './door'
 export { default as EllipseExtrude } from './ellipse-extrude'
 export { default as GLTFObject } from './gltf-object'
-// export { default as HumiditySensor } from './humidity-sensor'
-export { default } from './object-3d-overload'
 export { default as PolygonExtrude } from './polygon-extrude'
 export { default as Rack } from './rack'
 export { default as RackTable } from './rack-table'
 export { default as RackTableCell } from './rack-table-cell'
 export { default as RectExtrude } from './rect-extrude'
 export { default as Sphere } from './sphere'
-// export { default as Stock } from './stock'
 export { default as TextTextureObject } from './text-texture-object'
-// export { default as VideoPlayer360 } from './video-player-360'
 export { default as Visualizer } from './visualizer'
 export { default as Wall } from './wall'

package/src/mesh.js

@@ -8,6 +8,7 @@ export default class Mesh extends THREE.Mesh {
     super()
 
     this._model = model
+    this.type = model.type
 
     this._visualizer = visualizer
     this._canvasSize = canvasSize
@@ -25,13 +26,6 @@ export default class Mesh extends THREE.Mesh {
     return this._model
   }
 
-  get type() {
-    return this.model.type || this._type
-  }
-  set type(type) {
-    this._type = type
-  }
-
   get cx() {
     if (!this._cx) {
       var { left = 0, width = 0 } = this.model

package/src/object3d.js

@@ -7,6 +7,7 @@ export default class Object3D extends THREE.Object3D {
     super()
 
     this._model = model
+    this.type = model.type
 
     this._visualizer = visualizer
     this._canvasSize = canvasSize
@@ -36,13 +37,6 @@ export default class Object3D extends THREE.Object3D {
     return this._model
   }
 
-  get type() {
-    return this.model.type || this._type
-  }
-  set type(type) {
-    this._type = type
-  }
-
   get cx() {
     if (!this._cx) {
       var { left = 0, width = 0 } = this.model

package/src/rack-table-cell.js

@@ -182,9 +182,9 @@ export default class RackTableCell extends RectPath(Component) {
     context.restore()
   }
 
-  get tag() {
+  get decotag() {
     var rackTable = this.parent
-    var { locPattern, zone } = rackTable.model
+    var { locPattern, zone = '' } = rackTable.model
 
     locPattern = locPattern.substring(0, locPattern.indexOf('{u}') + 3)
 
@@ -348,11 +348,11 @@ export default class RackTableCell extends RectPath(Component) {
   }
 
   onmouseenter() {
-    this.trigger('tag', this)
+    this.trigger('tag')
   }
 
   onmouseleave() {
-    this.trigger('tagreset', this)
+    this.trigger('tagreset')
   }
 
   contains(x, y) {

package/src/visualizer.js

@@ -2,10 +2,10 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 // import OBJExporter from 'three-obj-exporter'
-import { Component, ContainerAbstract, error, FPS, Layer, Layout, ScriptLoader } from '@hatiolab/things-scene'
+import { Component, ContainerAbstract, ScenePopup, FPS, Layout } from '@hatiolab/things-scene'
 import * as THREE from 'three'
+import { TGALoader } from 'three/examples/jsm/loaders/TGALoader.js'
 import Component3d from './component-3d'
-import TGALoader from './loaders/TGALoader'
 import ThreeControls from './three-controls'
 import './three-layout'
 
@@ -247,29 +247,6 @@ export default class Visualizer extends ContainerAbstract {
     return this._objects[id]
   }
 
-  added() {
-    if (!this.app.isViewMode) return
-
-    var loadLoaders = () => {
-      if (!THREE) return
-
-      // ScriptLoader.load(OBJLoader);
-      // ScriptLoader.load(MTLLoader);
-      // ScriptLoader.load(TGALoader);
-    }
-
-    if (!THREE) {
-      ScriptLoader.load(three).then(() => {
-        THREE.Cache.enabled = true
-        // require('./object-3d-overload');
-        // ScriptLoader.load
-        // loadLoaders();
-      }, error)
-    }
-    //  else
-    //   loadLoaders();
-  }
-
   /* THREE Object related .. */
 
   createFloor(color, width, height) {
@@ -411,26 +388,6 @@ export default class Visualizer extends ContainerAbstract {
     if (this._scene3d) this.destroy_scene3d()
 
     this._initalizeComplete = new Promise(async resolve => {
-      // var self = this;
-
-      // THREE.DefaultLoadingManager.onStart = function (item, loaded, total) {
-      //   createProgressbar(self.root.target_element);
-      //   self._loadComplete = false;
-      // }
-
-      // THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
-      //   var a = this;
-      //   showProgressbar(self.root.target_element, loaded, total)
-      // }
-      // THREE.DefaultLoadingManager.onLoad = function (item, loaded, total) {
-      //   removeProgressBar(self.root.target_element)
-      //   self._loadComplete = true;
-      // }
-
-      // THREE.DefaultLoadingManager.onError = function (url) {
-      //   console.warn('There was an error loading ' + url);
-      // }
-
       registerLoaders()
       this._textureLoader = new THREE.TextureLoader(THREE.DefaultLoadingManager)
       this._textureLoader.withCredential = true
@@ -862,8 +819,6 @@ export default class Visualizer extends ContainerAbstract {
     if (this._controls) {
       if (this._lastFocused) this._lastFocused._focused = false
 
-      var modelLayer = Layer.register('model-layer')
-      var popup = modelLayer.Popup
       var ref = this.model.popupScene
       var pointer = this.transcoordC2S(e.offsetX, e.offsetY)
 
@@ -875,7 +830,7 @@ export default class Visualizer extends ContainerAbstract {
       if (object && object.onmouseup) {
         if (ref)
           object.onmouseup(e, this, data => {
-            popup.show(this, ref, {
+            ScenePopup.show(this, ref, {
               ...data,
               location: this.state.popupPosition || 'right-top'
             })
@@ -885,7 +840,7 @@ export default class Visualizer extends ContainerAbstract {
         object._focusedAt = performance.now()
         this._lastFocused = object
       } else {
-        popup.hide(this.root)
+        ScenePopup.hide(this.root)
       }
 
       this.invalidate()

package/src/cone.js

@@ -1,88 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, Ellipse } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import Component3d from './component-3d'
-
-const NATURE = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'number',
-      label: 'depth',
-      name: 'rz',
-      property: 'rz'
-    }
-  ],
-  help: 'scene/component/cone'
-}
-
-export default class Cone extends THREE.Mesh {
-  constructor(model, canvasSize) {
-    super()
-
-    this._model = model
-
-    this.createObject(model, canvasSize)
-  }
-
-  async createObject(model, canvasSize) {
-    let cx = model.cx - canvasSize.width / 2
-    let cy = model.cy - canvasSize.height / 2
-    let cz = this.model.rx
-
-    let rotation = model.rotation
-    this.type = model.type
-
-    this.createCone(this.model.rx, this.model.rz)
-
-    this.position.set(cx, cz, cy) // z좌표는 땅에 붙어있게 함
-    this.rotation.y = rotation || 0
-  }
-
-  createCone(rx, rz) {
-    let { fillStyle = 'lightgray' } = this.model
-
-    this.geometry = new THREE.ConeBufferGeometry(rx, rz, 20)
-    this.material = new THREE.MeshStandardMaterial({
-      color: fillStyle,
-      side: THREE.FrontSide
-    })
-
-    // this.castShadow = true
-  }
-
-  setEuler(euler) {
-    var { yaw, pitch, roll } = euler
-
-    this.setRotationFromEuler(new THREE.Vector3(roll, pitch, yaw))
-  }
-
-  setQuaternion(quaternion) {
-    var { x, y, z, w } = quaternion
-
-    this.setRotationFromQuaternion(new THREE.Quaternion(x, y, z, w))
-  }
-
-  get model() {
-    return this._model
-  }
-}
-
-export class Cone2d extends Ellipse {
-  is3dish() {
-    return true
-  }
-
-  get controls() {}
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('cone', Cone2d)
-Component3d.register('cone', Cone)

package/src/door.js

@@ -1,52 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Component, Rect } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import Component3d from './component-3d'
-
-export default class Door extends THREE.Mesh {
-  constructor(model, canvasSize) {
-    super()
-
-    this._model = model
-
-    this.createObject(model, canvasSize)
-  }
-
-  async createObject(model, canvasSize) {
-    let cx = model.left + model.width / 2 - canvasSize.width / 2
-    let cy = model.top + model.height / 2 - canvasSize.height / 2
-    let cz = 0.5 * model.depth
-
-    let rotation = model.rotation
-    this.type = model.type
-
-    this.createDoor(model.width, model.height, model.depth)
-
-    this.position.set(cx, cz, cy)
-    this.rotation.y = rotation || 0
-  }
-
-  createDoor(w, h, d) {
-    let { fillStyle = 'saddlebrown' } = this.model
-
-    this.geometry = new THREE.BoxBufferGeometry(w, d, h)
-    this.material = new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })
-
-    // this.castShadow = true
-  }
-
-  get model() {
-    return this._model
-  }
-}
-
-export class Door2d extends Rect {
-  is3dish() {
-    return true
-  }
-}
-
-Component.register('door', Door2d)
-Component3d.register('door', Door)

package/src/floor.js

@@ -1,162 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import Cube from './cube'
-
-export default class Floor extends Cube {
-  createColors() {
-    var colorsOfFaces = [
-      [1.0, 0.3, 0.3, 1.0], // Front face: cyan
-      [1.0, 0.3, 0.3, 1.0], // Back face: red
-      [1.0, 0.3, 0.3, 1.0], // Top face: green
-      [1.0, 0.3, 0.3, 1.0], // Bottom face: blue
-      [1.0, 0.3, 0.3, 1.0], // Right face: yellow
-      [1.0, 0.3, 0.3, 1.0] // Left face: purple
-    ]
-
-    var colors = []
-
-    for (var j = 0; j < 6; j++) {
-      var polygonColor = colorsOfFaces[j]
-
-      for (var i = 0; i < 4; i++) {
-        colors = colors.concat(polygonColor)
-      }
-    }
-
-    return colors
-  }
-
-  createPositions() {
-    var positions = [
-      // Front face
-      -1.0,
-      -1.0,
-      1.0,
-      1.0,
-      -1.0,
-      1.0,
-      1.0,
-      1.0,
-      1.0,
-      -1.0,
-      1.0,
-      1.0,
-
-      // Back face
-      -1.0,
-      -1.0,
-      -1.0,
-      -1.0,
-      1.0,
-      -1.0,
-      1.0,
-      1.0,
-      -1.0,
-      1.0,
-      -1.0,
-      -1.0,
-
-      // Top face
-      -1.0,
-      1.0,
-      -1.0,
-      -1.0,
-      1.0,
-      1.0,
-      1.0,
-      1.0,
-      1.0,
-      1.0,
-      1.0,
-      -1.0,
-
-      // Bottom face
-      -1.0,
-      -1.0,
-      -1.0,
-      1.0,
-      -1.0,
-      -1.0,
-      1.0,
-      -1.0,
-      1.0,
-      -1.0,
-      -1.0,
-      1.0,
-
-      // Right face
-      1.0,
-      -1.0,
-      -1.0,
-      1.0,
-      1.0,
-      -1.0,
-      1.0,
-      1.0,
-      1.0,
-      1.0,
-      -1.0,
-      1.0,
-
-      // Left face
-      -1.0,
-      -1.0,
-      -1.0,
-      -1.0,
-      -1.0,
-      1.0,
-      -1.0,
-      1.0,
-      1.0,
-      -1.0,
-      1.0,
-      -1.0
-    ]
-
-    return positions
-  }
-
-  createElements() {
-    var elements = [
-      0,
-      1,
-      2,
-      0,
-      2,
-      3, // front
-      4,
-      5,
-      6,
-      4,
-      6,
-      7, // back
-      8,
-      9,
-      10,
-      8,
-      10,
-      11, // top
-      12,
-      13,
-      14,
-      12,
-      14,
-      15, // bottom
-      16,
-      17,
-      18,
-      16,
-      18,
-      19, // right
-      20,
-      21,
-      22,
-      20,
-      22,
-      23 // left
-    ]
-
-    return elements
-  }
-}