@operato/scene-visualizer 1.2.28 → 1.2.30

package/logs/connections-2023-04-30-22.log

@@ -0,0 +1,41 @@
+2023-04-30T22:12:53+09:00 info: Initializing ConnectionManager...
+2023-04-30T22:12:53+09:00 info: Connector 'echo-back-server' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'echo-back' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'http-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'graphql-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'sqlite-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'postgresql-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'mqtt-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'mssql-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'oracle-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'mysql-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'socket-server' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'msgraph-connector' started to ready
+2023-04-30T22:12:53+09:00 info: Connector 'openai-connector' started to ready
+2023-04-30T22:12:53+09:00 info: echo-back-servers are ready
+2023-04-30T22:12:53+09:00 info: echo-back connections are ready
+2023-04-30T22:12:53+09:00 info: http-connector connections are ready
+2023-04-30T22:12:53+09:00 info: graphql-connector connections are ready
+2023-04-30T22:12:53+09:00 info: sqlite-connector connections are ready
+2023-04-30T22:12:53+09:00 info: postgresql-connector connections are ready
+2023-04-30T22:12:53+09:00 info: mqtt-connector connections are ready
+2023-04-30T22:12:53+09:00 info: mssql-connector connections are ready
+2023-04-30T22:12:53+09:00 info: oracle-connector connections are ready
+2023-04-30T22:12:53+09:00 info: mysql-connector connections are ready
+2023-04-30T22:12:53+09:00 info: socket servers are ready
+2023-04-30T22:12:53+09:00 info: msgraph-connector connections are ready
+2023-04-30T22:12:53+09:00 info: openai-connector connections are ready
+2023-04-30T22:12:53+09:00 info: All connector for 'echo-back-server' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'echo-back' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'http-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'graphql-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'sqlite-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'postgresql-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'mqtt-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'mssql-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'oracle-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'mysql-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'socket-server' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'msgraph-connector' ready
+2023-04-30T22:12:53+09:00 info: All connector for 'openai-connector' ready
+2023-04-30T22:12:53+09:00 info: ConnectionManager initialization done:

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/scene-visualizer",
   "description": "visualizer component for operato-scene",
   "author": "heartyoh",
-  "version": "1.2.28",
+  "version": "1.2.30",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -28,26 +28,26 @@
   "dependencies": {
     "@hatiolab/things-scene": "^3.2.0",
     "lit": "^2.5.0",
-    "three": "^0.151.3",
+    "three": "^0.152.2",
     "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
     "@things-factory/builder": "^6.0.0",
     "@things-factory/operato-board": "^6.0.0",
-    "@types/three": "^0.149.0",
+    "@types/three": "^0.151.0",
     "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.28",
-    "concurrently": "^5.3.0",
-    "eslint": "^7.32.0",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
     "prettier": "^2.4.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.9.4"
+    "typescript": "^5.0.4"
   },
   "prettier": "@hatiolab/prettier-config",
   "husky": {
@@ -61,5 +61,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2c1bee379705a2be351f86208284d7acc2315da3"
+  "gitHead": "a5bdc6934e745129aaa7d1ba72c452de7b6c2a4f"
 }

package/src/effects/outline.ts

@@ -1,4 +1,5 @@
 import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 
 const vertexShader = `
 uniform float outline;
@@ -32,7 +33,7 @@ function outlineMesh(mesh: THREE.Mesh) {
   // } else {
   let outlineGeometry = mesh.geometry.clone()
   // }
-  THREE.BufferGeometryUtils.mergeBufferGeometries([mesh.geometry, outlineGeometry]) //.mergeVertices()
+  BufferGeometryUtils.mergeBufferGeometries([mesh.geometry, outlineGeometry]) //.mergeVertices()
   outlineGeometry.computeVertexNormals()
   const newMesh = new THREE.Mesh(outlineGeometry, outlineMaterial.clone())
   mesh.add(newMesh)

package/src/rack-table.ts

@@ -1,6 +1,10 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+
 import {
   ApplicationContext,
   Component,
@@ -288,51 +292,72 @@ export class RackTable3d extends RealObjectGroup {
     var { rotation = 0, shelfLocations, shelves = 1 } = this.component.state
 
     this.object3d.rotation.y = -rotation
-    ;(this.component as RackTable).components.forEach((cell: Component) => {
-      let { shelfLocations: shelfLoc = shelfLocations, isEmpty } = cell.state
 
-      if (!isEmpty) {
-        cell.setState('shelfLocations', shelfLoc)
+    const racks = (this.component as RackTable).components
+      .map((cell: Component) => {
+        let { shelfLocations: shelfLoc = shelfLocations, isEmpty } = cell.state
 
-        var rack = new Rack(cell)
-        rack.update()
-        this.object3d.add(rack.object3d)
-      }
-    })
+        if (!isEmpty) {
+          cell.setState('shelfLocations', shelfLoc)
+
+          var rack = new Rack(cell)
+
+          rack.update()
+          this.object3d.add(rack.object3d)
+
+          return rack
+        }
+        return
+      })
+      .filter(rack => !!rack) as Rack[]
+
+    this.mergeAndAddRackCommonObjects(racks)
   }
 
-  mergeObjects() {
-    var frames = [] as any[]
-    var boards = [] as any[]
+  mergeAndAddRackCommonObjects(racks: Rack[]) {
+    var framesGeometries: THREE.BufferGeometry[] = []
+    var boardsGeometries: THREE.BufferGeometry[] = []
 
-    this.object3d.children.forEach((rack: any) => {
-      frames = frames.concat(rack.frames)
-      boards = boards.concat(rack.boards)
-    })
+    if (racks.length > 0) {
+      racks.forEach(rack => {
+        const geometry = rack.frame
 
-    var targetFrame: any
+        if (!geometry) {
+          return
+        }
+
+        geometry.translate(rack.position.x, rack.position.y, rack.position.z)
+        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)
+        framesGeometries.push(geometry)
+      })
+
+      if (framesGeometries.length > 0) {
+        const frameMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(framesGeometries), Rack.frameMaterial)
+        this.object3d.add(frameMesh)
+      }
+
+      racks.forEach(rack => {
+        const geometry = rack.board
 
-    frames.forEach(frameGroup => {
-      frameGroup.children.forEach((f: any) => {
-        if (!targetFrame) {
-          targetFrame = f
+        if (!geometry) {
           return
         }
 
-        targetFrame.geometry.merge(f.geometry)
+        geometry.translate(rack.position.x, rack.position.y, rack.position.z)
+        geometry.scale(rack.scale.x, rack.scale.y, rack.scale.z)
+        boardsGeometries.push(geometry)
       })
-    })
 
-    var targetBoard: any
+      if (boardsGeometries.length > 0) {
+        const material = Rack.boardMaterial
+        material.opacity = 0.5
+        material.transparent = true
 
-    boards.forEach(b => {
-      if (!targetBoard) {
-        targetBoard = b
-        return
-      }
+        const boardMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(boardsGeometries), material)
 
-      targetBoard.geometry.merge(b.geometry)
-    })
+        this.object3d.add(boardMesh)
+      }
+    }
   }
 
   makeShelfString(pattern: string, shelf: number, length: number) {

package/src/rack.ts

@@ -3,6 +3,7 @@
  */
 
 import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
 
 import { Stock } from './stock'
 import { Material } from 'three'
@@ -11,8 +12,8 @@ import { RealObject } from './threed/real-object'
 import { Visualizer } from './visualizer'
 
 export class Rack extends RealObject {
-  _frames: any[] = []
-  _boards: any[] = []
+  private _frame?: THREE.BufferGeometry
+  private _board?: THREE.BufferGeometry
 
   static frameMaterial: Material = new THREE.MeshStandardMaterial({
     color: 0xcccccc,
@@ -21,7 +22,8 @@ export class Rack extends RealObject {
   })
   static rackFrameGeometry = new THREE.BoxGeometry(1, 1, 1)
   static boardGeometry = new THREE.PlaneGeometry(1, 1, 1, 1)
-  static _boardMaterial?: THREE.MeshStandardMaterial
+
+  private static _boardMaterial?: THREE.MeshStandardMaterial
 
   get visualizer(): Visualizer | undefined {
     var component = this.component
@@ -64,12 +66,12 @@ export class Rack extends RealObject {
     return Rack._boardMaterial
   }
 
-  get frames() {
-    return this._frames
+  get frame() {
+    return this._frame
   }
 
-  get boards() {
-    return this._boards
+  get board() {
+    return this._board
   }
 
   build() {
@@ -81,12 +83,6 @@ export class Rack extends RealObject {
 
     let scale = stockScale
 
-    if (!hideRackFrame) {
-      var frame = this.createRackFrame(width, height, depth * shelves)
-
-      this.object3d.add(frame)
-    }
-
     var shelfLocIds
 
     if (!shelfLocations) {
@@ -96,21 +92,15 @@ export class Rack extends RealObject {
 
     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
-
-      if (i > 0 && !hideRackFrame) {
-        let board = this.createRackBoard(width, height)
-        board.position.set(0, bottom + depth * i, 0)
-        board.rotation.x = Math.PI / 2
-        board.material.opacity = 0.5
-        board.material.transparent = true
-
-        this.object3d.add(board)
-        // frame.geometry.merge(board.geometry, board.matrix)
-
-        // this._boards.push(board)
+      if (shelfLocIds[i] == '') {
+        continue
       }
 
       var bins = (shelfBins[i] || '').trim().split(/\s*,\s*/)
@@ -140,44 +130,60 @@ export class Rack extends RealObject {
     }
   }
 
-  createRackFrame(w: number, h: number, d: number) {
-    var frameWeight = Math.round(Math.min(w, h) / 10)
+  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)
 
-    var frames = new THREE.Group()
-    for (var i = 0; i < 4; i++) {
-      var geometry = Rack.rackFrameGeometry
-      var material = Rack.frameMaterial
-      var frame = new THREE.Mesh(geometry, material)
-      frame.scale.set(frameWeight, d, frameWeight)
       switch (i) {
         case 0:
-          frame.position.set(w / 2, 0, h / 2)
+          geometry.translate(w / 2, 0, h / 2)
           break
         case 1:
-          frame.position.set(w / 2, 0, -h / 2)
+          geometry.translate(w / 2, 0, -h / 2)
           break
         case 2:
-          frame.position.set(-w / 2, 0, h / 2)
+          geometry.translate(-w / 2, 0, h / 2)
           break
         case 3:
-          frame.position.set(-w / 2, 0, -h / 2)
+          geometry.translate(-w / 2, 0, -h / 2)
           break
       }
 
-      frames.add(frame)
+      geometries.push(geometry)
     }
 
-    return frames
+    return BufferGeometryUtils.mergeGeometries(geometries)
   }
 
-  createRackBoard(w: number, h: number) {
-    var boardMaterial = Rack.boardMaterial
-    var boardGeometry = Rack.boardGeometry
-    var board = new THREE.Mesh(boardGeometry, boardMaterial)
+  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()
 
-    board.scale.set(w, h, 1)
+      geometry.scale(width, height, 1)
+      geometry.rotateX(Math.PI / 2)
+      geometry.translate(0, bottom + depth * i, 0)
+
+      geometries.push(geometry)
+    }
 
-    return board
+    return BufferGeometryUtils.mergeGeometries(geometries)
   }
 
   makeLocationString(shelfString: string) {

package/src/three-container.ts

@@ -135,6 +135,10 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
 
     if (this._renderer3d) this._renderer3d.clear()
 
+    if (this._controls?.autoRotate) {
+      this._controls.doAutoRotate(false)
+    }
+
     delete this._renderer3d
     delete this._camera
     delete this._controls
@@ -194,11 +198,6 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
     this._camera.lookAt(this._scene3d.position)
     this._camera.zoom = this.getState('zoom') * 0.01
 
-    if (this.state.showAxis) {
-      var axisHelper = new THREE.AxesHelper(width)
-      this._scene3d.add(axisHelper)
-    }
-
     try {
       const canvas = document.createElement('canvas')
       let context = canvas!.getContext('webgl2')!
@@ -218,8 +217,8 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
     this._renderer3d = renderer3d
 
     renderer3d!.autoClear = true
-    renderer3d!.outputEncoding = THREE.sRGBEncoding
     // @ts-ignore for three@0.150.1
+    renderer3d!.outputColorSpace = THREE.SRGBColorSpace
     renderer3d!.useLegacyLights = false
     renderer3d!.toneMappingExposure = Math.pow(exposure, 5.0)
     renderer3d!.toneMapping = THREE.LinearToneMapping
@@ -329,6 +328,11 @@ export class ThreeContainer extends Container implements ThreeDimensionalContain
     }
 
     this._controls.update()
+
+    if (this.state.autoRotate) {
+      this.invalidate()
+    }
+
     this.render_threed()
   }
 

package/src/three-controls.ts

@@ -144,13 +144,7 @@ var ThreeControls = function (this: any, object: THREE.Camera, component: Compon
       spherical.setFromVector3(offset)
 
       if (scope.autoRotate && state === STATE.NONE) {
-        // theta = getAutoRotationAngle();
-        // thetaDelta = - getAutoRotationAngle();
-        // theta = 0;
-
         rotateLeft(getAutoRotationAngle())
-        scope.component.invalidate()
-        // spherical.theta = getAutoRotationAngle();
       }
 
       spherical.theta += sphericalDelta.theta
@@ -213,9 +207,6 @@ var ThreeControls = function (this: any, object: THREE.Camera, component: Compon
         return true
       }
 
-      // if (this.autoRotate) {
-      //   scope.component.invalidate()
-      // }
       return false
     }
   })()

package/src/threed/real-object.ts

@@ -26,7 +26,8 @@ export abstract class RealObject<T extends THREE.Object3D = THREE.Object3D> {
         component.app.url(fillStyle.image),
         texture => {
           texture.minFilter = THREE.LinearFilter
-          texture.encoding = THREE.sRGBEncoding
+          // @ts-ignore
+          texture.colorSpace = THREE.SRGBColorSpace
           texture.repeat.set(1, 1)
           texture.needsUpdate = true
 

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

@@ -23,7 +23,8 @@ export function createCanvasTexture(component: Component): THREE.Texture {
   texture.repeat.set(1, 1)
   texture.magFilter = THREE.NearestFilter
   texture.minFilter = THREE.LinearMipMapLinearFilter
-  texture.encoding = THREE.sRGBEncoding
+  // @ts-ignore
+  texture.colorSpace = THREE.SRGBColorSpace
 
   return texture
 }

package/src/visualizer.ts

@@ -87,12 +87,6 @@ const NATURE = {
       name: 'autoRotate',
       property: 'autoRotate'
     },
-    {
-      type: 'checkbox',
-      label: 'show-axis',
-      name: 'showAxis',
-      property: 'showAxis'
-    },
     {
       type: 'checkbox',
       label: '3dmode',