@operato/scene-visualizer 1.2.12 → 1.2.13

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.2.13](https://github.com/things-scene/operato-scene/compare/v1.2.12...v1.2.13) (2023-03-05)
+
+
+### :bug: Bug Fix
+
+* lighten data binding for 3d objects ([09db97e](https://github.com/things-scene/operato-scene/commit/09db97e1fe70563a734113e70538bdf6d18c6bc7))
+* visualizer 3D component update efficiently ([8065089](https://github.com/things-scene/operato-scene/commit/80650891a837750b23e1bd026850ec045518c8bb))
+
+
+
 ### [1.2.12](https://github.com/things-scene/operato-scene/compare/v1.2.11...v1.2.12) (2023-03-03)
 
 

package/dist/cube.d.ts

@@ -1,10 +1,8 @@
 import { Shape } from '@hatiolab/things-scene';
-import * as THREE from 'three';
 import { RealObject } from './threed/real-object';
 import { RealObjectMesh } from './threed/real-object-mesh';
 export declare class Cube3D extends RealObjectMesh {
-    buildGeometry(): THREE.BoxGeometry;
-    buildMaterial(): THREE.MeshStandardMaterial;
+    buildGeometry(): void;
 }
 declare const Cube_base: typeof Shape;
 export declare class Cube extends Cube_base {

package/dist/cube.js

@@ -14,11 +14,7 @@ const NATURE = {
 export class Cube3D extends RealObjectMesh {
     buildGeometry() {
         var { width = 0, height = 0, depth = 0 } = this.component.state;
-        return new THREE.BoxGeometry(width, depth, height);
-    }
-    buildMaterial() {
-        var { fillStyle = 'lightgray' } = this.component.state;
-        return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide });
+        this.object3d.geometry = new THREE.BoxGeometry(width, depth, height);
     }
 }
 export class Cube extends RectPath(Shape) {

package/dist/cube.js.map

@@ -1 +1 @@
-{"version":3,"file":"cube.js","sourceRoot":"","sources":["../src/cube.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAQ,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,sBAAsB;CAC7B,CAAA;AAED,MAAM,OAAO,MAAO,SAAQ,cAAc;IACxC,aAAa;QACX,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAE/D,OAAO,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IACpD,CAAC;IAED,aAAa;QACX,IAAI,EAAE,SAAS,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAEtD,OAAO,IAAI,KAAK,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAA;IACpF,CAAC;CACF;AAED,MAAM,OAAO,IAAK,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACvC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Rect, RectPath, Shape } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  help: 'scene/component/cube'\n}\n\nexport class Cube3D extends RealObjectMesh {\n  buildGeometry() {\n    var { width = 0, height = 0, depth = 0 } = this.component.state\n\n    return new THREE.BoxGeometry(width, depth, height)\n  }\n\n  buildMaterial() {\n    var { fillStyle = 'lightgray' } = this.component.state\n\n    return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })\n  }\n}\n\nexport class Cube extends RectPath(Shape) {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Cube3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('cube', Cube)\n"]}
+{"version":3,"file":"cube.js","sourceRoot":"","sources":["../src/cube.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAQ,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,sBAAsB;CAC7B,CAAA;AAED,MAAM,OAAO,MAAO,SAAQ,cAAc;IACxC,aAAa;QACX,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAE/D,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;IACtE,CAAC;CACF;AAED,MAAM,OAAO,IAAK,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACvC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Rect, RectPath, Shape } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  help: 'scene/component/cube'\n}\n\nexport class Cube3D extends RealObjectMesh {\n  buildGeometry() {\n    var { width = 0, height = 0, depth = 0 } = this.component.state\n\n    this.object3d.geometry = new THREE.BoxGeometry(width, depth, height)\n  }\n}\n\nexport class Cube extends RectPath(Shape) {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Cube3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('cube', Cube)\n"]}

package/dist/cylinder.d.ts

@@ -1,10 +1,8 @@
 import { Ellipse } from '@hatiolab/things-scene';
-import * as THREE from 'three';
 import { RealObject } from './threed/real-object';
 import { RealObjectMesh } from './threed/real-object-mesh';
 export declare class Cylinder3D extends RealObjectMesh {
-    buildGeometry(): THREE.CylinderGeometry;
-    buildMaterial(): THREE.MeshStandardMaterial;
+    buildGeometry(): void;
 }
 export declare class Cylinder extends Ellipse {
     is3dish(): boolean;

package/dist/cylinder.js

@@ -14,11 +14,7 @@ const NATURE = {
 export class Cylinder3D extends RealObjectMesh {
     buildGeometry() {
         var { depth = 0, rx = 0 } = this.component.state;
-        return new THREE.CylinderGeometry(rx, rx, depth, 25);
-    }
-    buildMaterial() {
-        var { fillStyle = 'lightgray' } = this.component.state;
-        return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide });
+        this.object3d.geometry = new THREE.CylinderGeometry(rx, rx, depth, 25);
     }
 }
 export class Cylinder extends Ellipse {

package/dist/cylinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"cylinder.js","sourceRoot":"","sources":["../src/cylinder.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,0BAA0B;CACjC,CAAA;AAED,MAAM,OAAO,UAAW,SAAQ,cAAc;IAC5C,aAAa;QACX,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAEhD,OAAO,IAAI,KAAK,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAA;IACtD,CAAC;IAED,aAAa;QACX,IAAI,EAAE,SAAS,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAEtD,OAAO,IAAI,KAAK,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAA;IACpF,CAAC;CACF;AAED,MAAM,OAAO,QAAS,SAAQ,OAAO;IACnC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Ellipse } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  help: 'scene/component/cylinder'\n}\n\nexport class Cylinder3D extends RealObjectMesh {\n  buildGeometry() {\n    var { depth = 0, rx = 0 } = this.component.state\n\n    return new THREE.CylinderGeometry(rx, rx, depth, 25)\n  }\n\n  buildMaterial() {\n    var { fillStyle = 'lightgray' } = this.component.state\n\n    return new THREE.MeshStandardMaterial({ color: fillStyle, side: THREE.FrontSide })\n  }\n}\n\nexport class Cylinder extends Ellipse {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Cylinder3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('cylinder', Cylinder)\n"]}
+{"version":3,"file":"cylinder.js","sourceRoot":"","sources":["../src/cylinder.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,0BAA0B;CACjC,CAAA;AAED,MAAM,OAAO,UAAW,SAAQ,cAAc;IAC5C,aAAa;QACX,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAEhD,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,KAAK,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAA;IACxE,CAAC;CACF;AAED,MAAM,OAAO,QAAS,SAAQ,OAAO;IACnC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,UAAU,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Ellipse } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  help: 'scene/component/cylinder'\n}\n\nexport class Cylinder3D extends RealObjectMesh {\n  buildGeometry() {\n    var { depth = 0, rx = 0 } = this.component.state\n\n    this.object3d.geometry = new THREE.CylinderGeometry(rx, rx, depth, 25)\n  }\n}\n\nexport class Cylinder extends Ellipse {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Cylinder3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('cylinder', Cylinder)\n"]}

package/dist/rack.js

@@ -36,10 +36,10 @@ export class Rack extends RealObject {
         if (!Rack._boardMaterial) {
             Rack._boardMaterial = new THREE.MeshStandardMaterial({
                 color: '#dedede',
-                side: THREE.DoubleSide
+                side: THREE.DoubleSide,
+                polygonOffset: true,
+                polygonOffsetFactor: -0.1
             });
-            Rack._boardMaterial.polygonOffset = true;
-            Rack._boardMaterial.polygonOffsetFactor = -0.1;
         }
         return Rack._boardMaterial;
     }

package/dist/rack.js.map

@@ -1 +1 @@
-{"version":3,"file":"rack.js","sourceRoot":"","sources":["../src/rack.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\n\nimport { Stock } from './stock'\nimport { Material } from 'three'\nimport { RackTable } from './rack-table'\nimport { RealObject } from './threed/real-object'\nimport { Visualizer } from './visualizer'\n\nexport class Rack extends RealObject {\n  _frames: any[] = []\n  _boards: any[] = []\n\n  static frameMaterial: Material = new THREE.MeshStandardMaterial({\n    color: 0xcccccc,\n    roughness: 0.5,\n    metalness: 0.3\n  })\n  static rackFrameGeometry = new THREE.BoxGeometry(1, 1, 1)\n  static boardGeometry = new THREE.PlaneGeometry(1, 1, 1, 1)\n  static _boardMaterial?: THREE.MeshStandardMaterial\n\n  get visualizer(): Visualizer | undefined {\n    var component = this.component\n\n    while (component) {\n      if (component.state.type == 'visualizer') {\n        return component as Visualizer\n      }\n      component = component.parent\n    }\n  }\n\n  get rackTable(): RackTable | undefined {\n    var component = this.component\n\n    while (component) {\n      if (component.state.type == 'rack-table') {\n        return component as RackTable\n      }\n      component = component.parent\n    }\n  }\n\n  get cz() {\n    var { shelves = 1, depth = 1 } = this.rackTable!.state\n\n    return 0.5 * depth * shelves\n  }\n\n  static get boardMaterial() {\n    if (!Rack._boardMaterial) {\n      Rack._boardMaterial = new THREE.MeshStandardMaterial({\n        color: '#dedede',\n        side: THREE.DoubleSide\n      })\n\n      Rack._boardMaterial.polygonOffset = true\n      Rack._boardMaterial.polygonOffsetFactor = -0.1\n    }\n\n    return Rack._boardMaterial\n  }\n\n  get frames() {\n    return this._frames\n  }\n\n  get boards() {\n    return this._boards\n  }\n\n  build() {\n    super.build()\n\n    var { depth, hideRackFrame, shelves, shelfLocations: commonShelfLocation, stockScale = 0.7 } = this.rackTable!.state\n\n    var { width, height, shelfLocations = commonShelfLocation, binLocations = '' } = this.component.state\n\n    let scale = stockScale\n\n    if (!hideRackFrame) {\n      var frame = this.createRackFrame(width, height, depth * shelves)\n\n      this.object3d.add(frame)\n    }\n\n    var shelfLocIds\n\n    if (!shelfLocations) {\n      shelfLocIds = []\n      for (var i = 0; i < shelves; i++) shelfLocIds.push(i + 1)\n    } else shelfLocIds = shelfLocations.split(/\\s*,\\s*/)\n\n    var shelfBins = binLocations.trim().split('\\n').reverse()\n\n    for (var i = 0; i < shelves; i++) {\n      let bottom = -depth * shelves * 0.5\n      if (shelfLocIds[i] == '') continue\n\n      if (i > 0 && !hideRackFrame) {\n        let board = this.createRackBoard(width, height)\n        board.position.set(0, bottom + depth * i, 0)\n        board.rotation.x = Math.PI / 2\n        board.material.opacity = 0.5\n        board.material.transparent = true\n\n        this.object3d.add(board)\n        // frame.geometry.merge(board.geometry, board.matrix)\n\n        // this._boards.push(board)\n      }\n\n      var bins = (shelfBins[i] || '').trim().split(/\\s*,\\s*/)\n\n      var binWidth = width / (bins.length || 1)\n      for (var b = 0; b < bins.length; b++) {\n        let stock = new Stock(this.component, {\n          width: binWidth * scale,\n          height: height * scale,\n          depth: depth * scale\n        })\n        stock.update()\n\n        let stockDepth = depth * scale\n\n        stock.object3d.position.set(\n          (width / 2) * ((2 * b - (bins.length - 1)) / bins.length),\n          bottom + depth * i + stockDepth * 0.5,\n          0\n        )\n        var binCode = (bins[b] || '').replace('.', '')\n        stock.object3d.name = `${this.makeLocationString(shelfLocIds[i])}${binCode}`\n\n        this.object3d.add(stock.object3d)\n        this.visualizer!.putObject(stock.object3d.name, stock)\n      }\n    }\n  }\n\n  createRackFrame(w: number, h: number, d: number) {\n    var frameWeight = Math.round(Math.min(w, h) / 10)\n\n    var frames = new THREE.Group()\n    for (var i = 0; i < 4; i++) {\n      var geometry = Rack.rackFrameGeometry\n      var material = Rack.frameMaterial\n      var frame = new THREE.Mesh(geometry, material)\n      frame.scale.set(frameWeight, d, frameWeight)\n      switch (i) {\n        case 0:\n          frame.position.set(w / 2, 0, h / 2)\n          break\n        case 1:\n          frame.position.set(w / 2, 0, -h / 2)\n          break\n        case 2:\n          frame.position.set(-w / 2, 0, h / 2)\n          break\n        case 3:\n          frame.position.set(-w / 2, 0, -h / 2)\n          break\n      }\n\n      frames.add(frame)\n    }\n\n    return frames\n  }\n\n  createRackBoard(w: number, h: number) {\n    var boardMaterial = Rack.boardMaterial\n    var boardGeometry = Rack.boardGeometry\n    var board = new THREE.Mesh(boardGeometry, boardMaterial)\n\n    board.scale.set(w, h, 1)\n\n    return board\n  }\n\n  makeLocationString(shelfString: string) {\n    var { section = '', unit = '' } = this.component.state\n    var { locPattern = '{z}{s}-{u}-{sh}', zone = '' } = this.rackTable!.state\n\n    var locationString = locPattern\n\n    locationString = locationString.replace(/{z}/i, zone)\n    locationString = locationString.replace(/{s}/i, section)\n    locationString = locationString.replace(/{u}/i, unit)\n    locationString = locationString.replace(/{sh}/i, shelfString)\n\n    return locationString\n  }\n\n  makeShelfString(pattern: string, shelf: number, length: number) {\n    /**\n     *  pattern #: 숫자\n     *  pattern 0: 고정 자리수\n     *  pattern -: 역순\n     */\n\n    if (!pattern || !shelf || !length) return\n\n    var isReverse = /^\\-/.test(pattern)\n    pattern = pattern.replace(/#+/, '#')\n\n    var fixedLength = (pattern.match(/0/g) || []).length || 0\n    var shelfString = String(isReverse ? length - shelf + 1 : shelf)\n\n    if (shelfString.length > fixedLength && fixedLength > 0) {\n      shelfString = shelfString.substring(shelfString.length - fixedLength)\n    } else {\n      var prefix = ''\n      for (var i = 0; i < fixedLength - shelfString.length; i++) {\n        prefix += '0'\n      }\n      shelfString = prefix + shelfString\n    }\n\n    return shelfString\n  }\n\n  updateAlpha() {}\n}\n"]}
+{"version":3,"file":"rack.js","sourceRoot":"","sources":["../src/rack.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\n\nimport { Stock } from './stock'\nimport { Material } from 'three'\nimport { RackTable } from './rack-table'\nimport { RealObject } from './threed/real-object'\nimport { Visualizer } from './visualizer'\n\nexport class Rack extends RealObject {\n  _frames: any[] = []\n  _boards: any[] = []\n\n  static frameMaterial: Material = new THREE.MeshStandardMaterial({\n    color: 0xcccccc,\n    roughness: 0.5,\n    metalness: 0.3\n  })\n  static rackFrameGeometry = new THREE.BoxGeometry(1, 1, 1)\n  static boardGeometry = new THREE.PlaneGeometry(1, 1, 1, 1)\n  static _boardMaterial?: THREE.MeshStandardMaterial\n\n  get visualizer(): Visualizer | undefined {\n    var component = this.component\n\n    while (component) {\n      if (component.state.type == 'visualizer') {\n        return component as Visualizer\n      }\n      component = component.parent\n    }\n  }\n\n  get rackTable(): RackTable | undefined {\n    var component = this.component\n\n    while (component) {\n      if (component.state.type == 'rack-table') {\n        return component as RackTable\n      }\n      component = component.parent\n    }\n  }\n\n  get cz() {\n    var { shelves = 1, depth = 1 } = this.rackTable!.state\n\n    return 0.5 * depth * shelves\n  }\n\n  static get boardMaterial() {\n    if (!Rack._boardMaterial) {\n      Rack._boardMaterial = new THREE.MeshStandardMaterial({\n        color: '#dedede',\n        side: THREE.DoubleSide,\n        polygonOffset: true,\n        polygonOffsetFactor: -0.1\n      })\n    }\n\n    return Rack._boardMaterial\n  }\n\n  get frames() {\n    return this._frames\n  }\n\n  get boards() {\n    return this._boards\n  }\n\n  build() {\n    super.build()\n\n    var { depth, hideRackFrame, shelves, shelfLocations: commonShelfLocation, stockScale = 0.7 } = this.rackTable!.state\n\n    var { width, height, shelfLocations = commonShelfLocation, binLocations = '' } = this.component.state\n\n    let scale = stockScale\n\n    if (!hideRackFrame) {\n      var frame = this.createRackFrame(width, height, depth * shelves)\n\n      this.object3d.add(frame)\n    }\n\n    var shelfLocIds\n\n    if (!shelfLocations) {\n      shelfLocIds = []\n      for (var i = 0; i < shelves; i++) shelfLocIds.push(i + 1)\n    } else shelfLocIds = shelfLocations.split(/\\s*,\\s*/)\n\n    var shelfBins = binLocations.trim().split('\\n').reverse()\n\n    for (var i = 0; i < shelves; i++) {\n      let bottom = -depth * shelves * 0.5\n      if (shelfLocIds[i] == '') continue\n\n      if (i > 0 && !hideRackFrame) {\n        let board = this.createRackBoard(width, height)\n        board.position.set(0, bottom + depth * i, 0)\n        board.rotation.x = Math.PI / 2\n        board.material.opacity = 0.5\n        board.material.transparent = true\n\n        this.object3d.add(board)\n        // frame.geometry.merge(board.geometry, board.matrix)\n\n        // this._boards.push(board)\n      }\n\n      var bins = (shelfBins[i] || '').trim().split(/\\s*,\\s*/)\n\n      var binWidth = width / (bins.length || 1)\n      for (var b = 0; b < bins.length; b++) {\n        let stock = new Stock(this.component, {\n          width: binWidth * scale,\n          height: height * scale,\n          depth: depth * scale\n        })\n        stock.update()\n\n        let stockDepth = depth * scale\n\n        stock.object3d.position.set(\n          (width / 2) * ((2 * b - (bins.length - 1)) / bins.length),\n          bottom + depth * i + stockDepth * 0.5,\n          0\n        )\n        var binCode = (bins[b] || '').replace('.', '')\n        stock.object3d.name = `${this.makeLocationString(shelfLocIds[i])}${binCode}`\n\n        this.object3d.add(stock.object3d)\n        this.visualizer!.putObject(stock.object3d.name, stock)\n      }\n    }\n  }\n\n  createRackFrame(w: number, h: number, d: number) {\n    var frameWeight = Math.round(Math.min(w, h) / 10)\n\n    var frames = new THREE.Group()\n    for (var i = 0; i < 4; i++) {\n      var geometry = Rack.rackFrameGeometry\n      var material = Rack.frameMaterial\n      var frame = new THREE.Mesh(geometry, material)\n      frame.scale.set(frameWeight, d, frameWeight)\n      switch (i) {\n        case 0:\n          frame.position.set(w / 2, 0, h / 2)\n          break\n        case 1:\n          frame.position.set(w / 2, 0, -h / 2)\n          break\n        case 2:\n          frame.position.set(-w / 2, 0, h / 2)\n          break\n        case 3:\n          frame.position.set(-w / 2, 0, -h / 2)\n          break\n      }\n\n      frames.add(frame)\n    }\n\n    return frames\n  }\n\n  createRackBoard(w: number, h: number) {\n    var boardMaterial = Rack.boardMaterial\n    var boardGeometry = Rack.boardGeometry\n    var board = new THREE.Mesh(boardGeometry, boardMaterial)\n\n    board.scale.set(w, h, 1)\n\n    return board\n  }\n\n  makeLocationString(shelfString: string) {\n    var { section = '', unit = '' } = this.component.state\n    var { locPattern = '{z}{s}-{u}-{sh}', zone = '' } = this.rackTable!.state\n\n    var locationString = locPattern\n\n    locationString = locationString.replace(/{z}/i, zone)\n    locationString = locationString.replace(/{s}/i, section)\n    locationString = locationString.replace(/{u}/i, unit)\n    locationString = locationString.replace(/{sh}/i, shelfString)\n\n    return locationString\n  }\n\n  makeShelfString(pattern: string, shelf: number, length: number) {\n    /**\n     *  pattern #: 숫자\n     *  pattern 0: 고정 자리수\n     *  pattern -: 역순\n     */\n\n    if (!pattern || !shelf || !length) return\n\n    var isReverse = /^\\-/.test(pattern)\n    pattern = pattern.replace(/#+/, '#')\n\n    var fixedLength = (pattern.match(/0/g) || []).length || 0\n    var shelfString = String(isReverse ? length - shelf + 1 : shelf)\n\n    if (shelfString.length > fixedLength && fixedLength > 0) {\n      shelfString = shelfString.substring(shelfString.length - fixedLength)\n    } else {\n      var prefix = ''\n      for (var i = 0; i < fixedLength - shelfString.length; i++) {\n        prefix += '0'\n      }\n      shelfString = prefix + shelfString\n    }\n\n    return shelfString\n  }\n\n  updateAlpha() {}\n}\n"]}

package/dist/sphere.d.ts

@@ -1,10 +1,8 @@
 import { Ellipse } from '@hatiolab/things-scene';
-import * as THREE from 'three';
 import { RealObject } from './threed/real-object';
 import { RealObjectMesh } from './threed/real-object-mesh';
 export declare class Sphere3D extends RealObjectMesh {
-    buildGeometry(): THREE.SphereGeometry;
-    buildMaterial(): THREE.MeshStandardMaterial;
+    buildGeometry(): void;
 }
 export declare class Sphere extends Ellipse {
     is3dish(): boolean;

package/dist/sphere.js

@@ -14,14 +14,7 @@ const NATURE = {
 export class Sphere3D extends RealObjectMesh {
     buildGeometry() {
         var { rx = 0 } = this.component.state;
-        return new THREE.SphereGeometry(rx, 20, 20);
-    }
-    buildMaterial() {
-        var { fillStyle = 'gray' } = this.component.state;
-        return new THREE.MeshStandardMaterial({
-            color: fillStyle,
-            side: THREE.FrontSide
-        });
+        this.object3d.geometry = new THREE.SphereGeometry(rx, 20, 20);
     }
 }
 export class Sphere extends Ellipse {

package/dist/sphere.js.map

@@ -1 +1 @@
-{"version":3,"file":"sphere.js","sourceRoot":"","sources":["../src/sphere.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,wBAAwB;CAC/B,CAAA;AAED,MAAM,OAAO,QAAS,SAAQ,cAAc;IAC1C,aAAa;QACX,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAErC,OAAO,IAAI,KAAK,CAAC,cAAc,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAC7C,CAAC;IAED,aAAa;QACX,IAAI,EAAE,SAAS,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAEjD,OAAO,IAAI,KAAK,CAAC,oBAAoB,CAAC;YACpC,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,KAAK,CAAC,SAAS;SACtB,CAAC,CAAA;IACJ,CAAC;CACF;AAED,MAAM,OAAO,MAAO,SAAQ,OAAO;IACjC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Ellipse } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  help: 'scene/component/sphere'\n}\n\nexport class Sphere3D extends RealObjectMesh {\n  buildGeometry() {\n    var { rx = 0 } = this.component.state\n\n    return new THREE.SphereGeometry(rx, 20, 20)\n  }\n\n  buildMaterial() {\n    var { fillStyle = 'gray' } = this.component.state\n\n    return new THREE.MeshStandardMaterial({\n      color: fillStyle,\n      side: THREE.FrontSide\n    })\n  }\n}\n\nexport class Sphere extends Ellipse {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Sphere3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('sphere', Sphere)\n"]}
+{"version":3,"file":"sphere.js","sourceRoot":"","sources":["../src/sphere.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,wBAAwB;CAC/B,CAAA;AAED,MAAM,OAAO,QAAS,SAAQ,cAAc;IAC1C,aAAa;QACX,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAErC,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,KAAK,CAAC,cAAc,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAC/D,CAAC;CACF;AAED,MAAM,OAAO,MAAO,SAAQ,OAAO;IACjC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Ellipse } from '@hatiolab/things-scene'\nimport * as THREE from 'three'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectMesh } from './threed/real-object-mesh'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  help: 'scene/component/sphere'\n}\n\nexport class Sphere3D extends RealObjectMesh {\n  buildGeometry() {\n    var { rx = 0 } = this.component.state\n\n    this.object3d.geometry = new THREE.SphereGeometry(rx, 20, 20)\n  }\n}\n\nexport class Sphere extends Ellipse {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Sphere3D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('sphere', Sphere)\n"]}

package/dist/sprite.js

@@ -16,12 +16,6 @@ export class Sprite extends RectPath(Shape) {
     buildRealObject() {
         return new RealObjectSprite2D(this);
     }
-    // ready() {
-    //   super.ready()
-    //   setInterval(() => {
-    //     this.text = String(Math.random())
-    //   }, 1000)
-    // }
     get nature() {
         return NATURE;
     }

package/dist/sprite.js.map

@@ -1 +1 @@
-{"version":3,"file":"sprite.js","sourceRoot":"","sources":["../src/sprite.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAmB,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;CACf,CAAA;AAED,MAAM,OAAO,MAAO,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACzC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC;IAED,YAAY;IACZ,kBAAkB;IAElB,wBAAwB;IACxB,wCAAwC;IACxC,aAAa;IACb,IAAI;IAEJ,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectSprite2D } from './threed/real-object-sprite-2d'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: []\n}\n\nexport class Sprite extends RectPath(Shape) {\n  is3dish(): boolean {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new RealObjectSprite2D(this)\n  }\n\n  // ready() {\n  //   super.ready()\n\n  //   setInterval(() => {\n  //     this.text = String(Math.random())\n  //   }, 1000)\n  // }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('sprite', Sprite)\n"]}
+{"version":3,"file":"sprite.js","sourceRoot":"","sources":["../src/sprite.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAmB,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAEnE,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;CACf,CAAA;AAED,MAAM,OAAO,MAAO,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACzC,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAA;IACrC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'\nimport { RealObject } from './threed/real-object'\nimport { RealObjectSprite2D } from './threed/real-object-sprite-2d'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: []\n}\n\nexport class Sprite extends RectPath(Shape) {\n  is3dish(): boolean {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new RealObjectSprite2D(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('sprite', Sprite)\n"]}

package/dist/threed/common.js

@@ -2,14 +2,15 @@ import tinycolor from 'tinycolor2';
 export const SCALE_MIN = 0.001;
 export function applyAlpha(material, alpha, fillStyle) {
     var opacity = 1;
-    if (!fillStyle || fillStyle == 'none') {
-        opacity = alpha;
+    if (!fillStyle || fillStyle == 'none' || fillStyle == 'transparent') {
+        opacity = 0;
     }
     else {
         var fillAlpha = typeof fillStyle == 'string' ? tinycolor(fillStyle).getAlpha() : 1;
         opacity = alpha * fillAlpha;
     }
     material.opacity = opacity;
+    material.transparent = opacity < 1;
 }
 export const UNIT_DIMENSION = { width: 1, height: 1, depth: 1 };
 export const UNIT_SCALE = { x: 1, y: 1, z: 1 };

package/dist/threed/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/threed/common.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAA;AAE9B,MAAM,UAAU,UAAU,CAAC,QAAa,EAAE,KAAa,EAAE,SAAc;IACrE,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,MAAM,EAAE;QACrC,OAAO,GAAG,KAAK,CAAA;KAChB;SAAM;QACL,IAAI,SAAS,GAAG,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;QAClF,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;KAC5B;IAED,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAA;AAC5B,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;AAC/D,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAC9C,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAClD,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA","sourcesContent":["import tinycolor from 'tinycolor2'\n\nexport const SCALE_MIN = 0.001\n\nexport function applyAlpha(material: any, alpha: number, fillStyle: any) {\n  var opacity = 1\n  if (!fillStyle || fillStyle == 'none') {\n    opacity = alpha\n  } else {\n    var fillAlpha = typeof fillStyle == 'string' ? tinycolor(fillStyle).getAlpha() : 1\n    opacity = alpha * fillAlpha\n  }\n\n  material.opacity = opacity\n}\n\nexport const UNIT_DIMENSION = { width: 1, height: 1, depth: 1 }\nexport const UNIT_SCALE = { x: 1, y: 1, z: 1 }\nexport const UNIT_TRANSLATE = { x: 0, y: 0, z: 0 }\nexport const UNIT_ROTATE = { x: 0, y: 0, z: 0 }\n"]}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/threed/common.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAA;AAE9B,MAAM,UAAU,UAAU,CAAC,QAAa,EAAE,KAAa,EAAE,SAAc;IACrE,IAAI,OAAO,GAAG,CAAC,CAAA;IACf,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,MAAM,IAAI,SAAS,IAAI,aAAa,EAAE;QACnE,OAAO,GAAG,CAAC,CAAA;KACZ;SAAM;QACL,IAAI,SAAS,GAAG,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;QAClF,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;KAC5B;IAED,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,WAAW,GAAG,OAAO,GAAG,CAAC,CAAA;AACpC,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;AAC/D,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAC9C,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAClD,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA","sourcesContent":["import tinycolor from 'tinycolor2'\n\nexport const SCALE_MIN = 0.001\n\nexport function applyAlpha(material: any, alpha: number, fillStyle: any) {\n  var opacity = 1\n  if (!fillStyle || fillStyle == 'none' || fillStyle == 'transparent') {\n    opacity = 0\n  } else {\n    var fillAlpha = typeof fillStyle == 'string' ? tinycolor(fillStyle).getAlpha() : 1\n    opacity = alpha * fillAlpha\n  }\n\n  material.opacity = opacity\n  material.transparent = opacity < 1\n}\n\nexport const UNIT_DIMENSION = { width: 1, height: 1, depth: 1 }\nexport const UNIT_SCALE = { x: 1, y: 1, z: 1 }\nexport const UNIT_TRANSLATE = { x: 0, y: 0, z: 0 }\nexport const UNIT_ROTATE = { x: 0, y: 0, z: 0 }\n"]}

package/dist/threed/real-object-camera-meshed.d.ts

@@ -8,5 +8,5 @@ export declare class RealObjectCamera extends RealObjectMesh {
     updateCamera(): void;
     build(): void;
     clear(): THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>;
-    buildGeometry(): THREE.SphereGeometry;
+    buildGeometry(): void;
 }

package/dist/threed/real-object-camera-meshed.js

@@ -43,7 +43,7 @@ export class RealObjectCamera extends RealObjectMesh {
     buildGeometry() {
         var { width = 1, height = 1, depth = 1 } = this.component.state.dimension || UNIT_DIMENSION;
         var radius = Math.min(width, height, depth) / 2;
-        return new THREE.SphereGeometry(radius, 32, 32);
+        this.object3d.geometry = new THREE.SphereGeometry(radius, 32, 32);
     }
 }
 //# sourceMappingURL=real-object-camera-meshed.js.map

package/dist/threed/real-object-camera-meshed.js.map

@@ -1 +1 @@
-{"version":3,"file":"real-object-camera-meshed.js","sourceRoot":"","sources":["../../src/threed/real-object-camera-meshed.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAEzC,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,CAAC;IACP,IAAI,EAAE,CAAC;CACR,CAAA;AAED,MAAM,OAAO,gBAAiB,SAAQ,cAAc;IAGlD,MAAM;QACJ,KAAK,CAAC,MAAM,EAAE,CAAA;QAEd,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;YAClC,IAAI,CAAC,YAAY,EAAE,CAAA;SACpB;QAED,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,YAAY;QACV,OAAO,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAA;IACtC,CAAC;IAED,YAAY;QACV,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAE7G,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAA;QACrB,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAA;QACrB,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;IACzB,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChC,CAAC;IAED,KAAK;QACH,OAAO,IAAI,CAAC,OAAO,CAAA;QAEnB,OAAO,KAAK,CAAC,KAAK,EAAE,CAAA;IACtB,CAAC;IAED,aAAa;QACX,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,IAAI,cAAc,CAAA;QAE3F,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;QAE/C,OAAO,IAAI,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IACjD,CAAC;CACF","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\n\nimport { RealObjectMesh } from './real-object-mesh'\nimport { UNIT_DIMENSION } from './common'\n\nconst DEFAULT = {\n  far: 100000,\n  fov: 80,\n  near: 1,\n  zoom: 1\n}\n\nexport class RealObjectCamera extends RealObjectMesh {\n  protected _camera?: THREE.PerspectiveCamera\n\n  update() {\n    super.update()\n\n    this.updateCamera()\n  }\n\n  get camera(): THREE.PerspectiveCamera {\n    if (!this._camera) {\n      this._camera = this.createCamera()\n      this.updateCamera()\n    }\n\n    return this._camera\n  }\n\n  createCamera() {\n    return new THREE.PerspectiveCamera()\n  }\n\n  updateCamera() {\n    var { near = DEFAULT.near, far = DEFAULT.far, fov = DEFAULT.fov, zoom = DEFAULT.zoom } = this.component.state\n\n    this.camera.far = far\n    this.camera.fov = fov\n    this.camera.near = near\n    this.camera.zoom = zoom\n  }\n\n  build() {\n    super.build()\n\n    this.object3d.add(this.camera)\n  }\n\n  clear() {\n    delete this._camera\n\n    return super.clear()\n  }\n\n  buildGeometry() {\n    var { width = 1, height = 1, depth = 1 } = this.component.state.dimension || UNIT_DIMENSION\n\n    var radius = Math.min(width, height, depth) / 2\n\n    return new THREE.SphereGeometry(radius, 32, 32)\n  }\n}\n"]}
+{"version":3,"file":"real-object-camera-meshed.js","sourceRoot":"","sources":["../../src/threed/real-object-camera-meshed.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAEzC,MAAM,OAAO,GAAG;IACd,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,CAAC;IACP,IAAI,EAAE,CAAC;CACR,CAAA;AAED,MAAM,OAAO,gBAAiB,SAAQ,cAAc;IAGlD,MAAM;QACJ,KAAK,CAAC,MAAM,EAAE,CAAA;QAEd,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;YAClC,IAAI,CAAC,YAAY,EAAE,CAAA;SACpB;QAED,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,YAAY;QACV,OAAO,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAA;IACtC,CAAC;IAED,YAAY;QACV,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QAE7G,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAA;QACrB,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAA;QACrB,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;IACzB,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChC,CAAC;IAED,KAAK;QACH,OAAO,IAAI,CAAC,OAAO,CAAA;QAEnB,OAAO,KAAK,CAAC,KAAK,EAAE,CAAA;IACtB,CAAC;IAED,aAAa;QACX,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,IAAI,cAAc,CAAA;QAE3F,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;QAE/C,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IACnE,CAAC;CACF","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\n\nimport { RealObjectMesh } from './real-object-mesh'\nimport { UNIT_DIMENSION } from './common'\n\nconst DEFAULT = {\n  far: 100000,\n  fov: 80,\n  near: 1,\n  zoom: 1\n}\n\nexport class RealObjectCamera extends RealObjectMesh {\n  protected _camera?: THREE.PerspectiveCamera\n\n  update() {\n    super.update()\n\n    this.updateCamera()\n  }\n\n  get camera(): THREE.PerspectiveCamera {\n    if (!this._camera) {\n      this._camera = this.createCamera()\n      this.updateCamera()\n    }\n\n    return this._camera\n  }\n\n  createCamera() {\n    return new THREE.PerspectiveCamera()\n  }\n\n  updateCamera() {\n    var { near = DEFAULT.near, far = DEFAULT.far, fov = DEFAULT.fov, zoom = DEFAULT.zoom } = this.component.state\n\n    this.camera.far = far\n    this.camera.fov = fov\n    this.camera.near = near\n    this.camera.zoom = zoom\n  }\n\n  build() {\n    super.build()\n\n    this.object3d.add(this.camera)\n  }\n\n  clear() {\n    delete this._camera\n\n    return super.clear()\n  }\n\n  buildGeometry() {\n    var { width = 1, height = 1, depth = 1 } = this.component.state.dimension || UNIT_DIMENSION\n\n    var radius = Math.min(width, height, depth) / 2\n\n    this.object3d.geometry = new THREE.SphereGeometry(radius, 32, 32)\n  }\n}\n"]}

package/dist/threed/real-object-dom-element.d.ts

@@ -3,9 +3,6 @@ import { RealObject } from './real-object';
 export declare class RealObjectDomElement extends RealObject<CSS3DObject> {
     protected getObject3dInstance(): CSS3DObject;
     build(): void;
-    /**
-     * Component의 상태값의 변화를 Object3D에 반영 - translate, rotation, scale
-     */
     updateDimension(): void;
     updateAlpha(): void;
 }

package/dist/threed/real-object-dom-element.js

@@ -7,25 +7,6 @@ export class RealObjectDomElement extends RealObject {
     getObject3dInstance() {
         return new CSS3DObject(this.component.element);
     }
-    // private _cssObject3d?: THREE.Object3D
-    // buildGeometry() {
-    //   var { width, height } = this.component.bounds
-    //   return new THREE.PlaneGeometry(width, height)
-    // }
-    // buildMaterial() /* : THREE.MeshMaterialType | THREE.MeshMaterialType[] */ {
-    //   var material = new THREE.MeshBasicMaterial()
-    //   material.color.set('black')
-    //   material.opacity = 0
-    //   material.side = THREE.DoubleSide
-    //   material.blending = THREE.NoBlending
-    //   return material
-    // }
-    // get cssObject3d(): THREE.Object3D {
-    //   if (!this._cssObject3d) {
-    //     this._cssObject3d = this.buildCSS3DObject()
-    //   }
-    //   return this._cssObject3d
-    // }
     build() {
         super.build();
         var element = this.component.element;
@@ -34,39 +15,7 @@ export class RealObjectDomElement extends RealObject {
         element.style.height = height + 'px';
         element.style.left = '';
         element.style.top = '';
-        // this.object3d.add()
-        // const cssobj = new CSS3DObject(element)
-        // cssobj.position.set(-1, -1, 0)
-        // this.object3d.add(cssobj)
-        // return cssobj
     }
-    /**
-     * Component의 상태값의 변화를 Object3D에 반영 - translate, rotation, scale
-     */
-    // updateTransform() {
-    //   super.updateTransform()
-    //   var { x: tx, y: ty, z: tz } = this.position
-    //   var { x: rx, y: ry, z: rz } = this.rotation
-    //   var { x: sx, y: sy, z: sz } = this.scale
-    //   this.cssObject3d.position.set(tx, ty, tz)
-    //   this.cssObject3d.rotation.set(rx, ry, rz)
-    //   this.cssObject3d.scale.set(Math.max(sx, SCALE_MIN), Math.max(sy, SCALE_MIN), Math.max(sz, SCALE_MIN))
-    // }
-    // updatePosition() {
-    //   super.updatePosition()
-    //   var { x: tx, y: ty, z: tz } = this.position
-    //   this.cssObject3d.position.set(tx, ty, tz)
-    // }
-    // updateRotate() {
-    //   super.updateRotate()
-    //   var { x: rx, y: ry, z: rz } = this.rotation
-    //   this.cssObject3d.rotation.set(rx, ry, rz)
-    // }
-    // updateScale() {
-    //   super.updateScale()
-    //   var { x: sx, y: sy, z: sz } = this.scale
-    //   this.cssObject3d.scale.set(Math.max(sx, SCALE_MIN), Math.max(sy, SCALE_MIN), Math.max(sz, SCALE_MIN))
-    // }
     updateDimension() {
         super.updateDimension();
         var dimension = this.dimension;

package/dist/threed/real-object-dom-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"real-object-dom-element.js","sourceRoot":"","sources":["../../src/threed/real-object-dom-element.ts"],"names":[],"mappings":"AAAA;;GAEG;AAMH,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,MAAM,OAAO,oBAAqB,SAAQ,UAAuB;IACrD,mBAAmB;QAC3B,OAAO,IAAI,WAAW,CAAE,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,CAAA;IAC/F,CAAC;IAED,wCAAwC;IAExC,oBAAoB;IACpB,kDAAkD;IAElD,kDAAkD;IAClD,IAAI;IAEJ,8EAA8E;IAC9E,iDAAiD;IAEjD,gCAAgC;IAChC,yBAAyB;IACzB,qCAAqC;IACrC,yCAAyC;IAEzC,oBAAoB;IACpB,IAAI;IAEJ,sCAAsC;IACtC,8BAA8B;IAC9B,kDAAkD;IAClD,MAAM;IACN,6BAA6B;IAC7B,IAAI;IAEJ,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,OAAO,GAAI,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAA;QAEnF,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA;QAE7C,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,GAAG,IAAI,CAAA;QAClC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;QAEpC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAA;QACvB,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAA;QAEtB,sBAAsB;QAEtB,0CAA0C;QAC1C,iCAAiC;QAEjC,4BAA4B;QAE5B,gBAAgB;IAClB,CAAC;IAED;;OAEG;IACH,sBAAsB;IACtB,4BAA4B;IAE5B,gDAAgD;IAChD,gDAAgD;IAChD,6CAA6C;IAE7C,8CAA8C;IAC9C,8CAA8C;IAC9C,0GAA0G;IAC1G,IAAI;IAEJ,qBAAqB;IACrB,2BAA2B;IAE3B,gDAAgD;IAChD,8CAA8C;IAC9C,IAAI;IAEJ,mBAAmB;IACnB,yBAAyB;IAEzB,gDAAgD;IAChD,8CAA8C;IAC9C,IAAI;IAEJ,kBAAkB;IAClB,wBAAwB;IAExB,6CAA6C;IAC7C,0GAA0G;IAC1G,IAAI;IAEJ,eAAe;QACb,KAAK,CAAC,eAAe,EAAE,CAAA;QAEvB,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAC7B;QAAC,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,IAAI,CAC1G;QAAC,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,IAAI,CAAA;IAC/G,CAAC;IAED,WAAW;QACT,KAAK,CAAC,WAAW,EAAE,CAAA;QAEnB,sCAAsC;QACtC,uCAAuC;QACvC,iEAAiE;QACjE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAEvC;QAAC,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;IAC9F,CAAC;CACF","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\nimport { HTMLOverlayElement, HTMLOverlayContainer } from '@hatiolab/things-scene'\n\nimport { RealObjectMesh } from './real-object-mesh'\nimport { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'\nimport { RealObject } from './real-object'\nimport { SCALE_MIN } from './common'\n\nexport class RealObjectDomElement extends RealObject<CSS3DObject> {\n  protected getObject3dInstance() {\n    return new CSS3DObject((this.component as HTMLOverlayElement | HTMLOverlayContainer).element)\n  }\n\n  // private _cssObject3d?: THREE.Object3D\n\n  // buildGeometry() {\n  //   var { width, height } = this.component.bounds\n\n  //   return new THREE.PlaneGeometry(width, height)\n  // }\n\n  // buildMaterial() /* : THREE.MeshMaterialType | THREE.MeshMaterialType[] */ {\n  //   var material = new THREE.MeshBasicMaterial()\n\n  //   material.color.set('black')\n  //   material.opacity = 0\n  //   material.side = THREE.DoubleSide\n  //   material.blending = THREE.NoBlending\n\n  //   return material\n  // }\n\n  // get cssObject3d(): THREE.Object3D {\n  //   if (!this._cssObject3d) {\n  //     this._cssObject3d = this.buildCSS3DObject()\n  //   }\n  //   return this._cssObject3d\n  // }\n\n  build() {\n    super.build()\n\n    var element = (this.component as HTMLOverlayElement | HTMLOverlayContainer).element\n\n    var { width, height } = this.component.bounds\n\n    element.style.width = width + 'px'\n    element.style.height = height + 'px'\n\n    element.style.left = ''\n    element.style.top = ''\n\n    // this.object3d.add()\n\n    // const cssobj = new CSS3DObject(element)\n    // cssobj.position.set(-1, -1, 0)\n\n    // this.object3d.add(cssobj)\n\n    // return cssobj\n  }\n\n  /**\n   * Component의 상태값의 변화를 Object3D에 반영 - translate, rotation, scale\n   */\n  // updateTransform() {\n  //   super.updateTransform()\n\n  //   var { x: tx, y: ty, z: tz } = this.position\n  //   var { x: rx, y: ry, z: rz } = this.rotation\n  //   var { x: sx, y: sy, z: sz } = this.scale\n\n  //   this.cssObject3d.position.set(tx, ty, tz)\n  //   this.cssObject3d.rotation.set(rx, ry, rz)\n  //   this.cssObject3d.scale.set(Math.max(sx, SCALE_MIN), Math.max(sy, SCALE_MIN), Math.max(sz, SCALE_MIN))\n  // }\n\n  // updatePosition() {\n  //   super.updatePosition()\n\n  //   var { x: tx, y: ty, z: tz } = this.position\n  //   this.cssObject3d.position.set(tx, ty, tz)\n  // }\n\n  // updateRotate() {\n  //   super.updateRotate()\n\n  //   var { x: rx, y: ry, z: rz } = this.rotation\n  //   this.cssObject3d.rotation.set(rx, ry, rz)\n  // }\n\n  // updateScale() {\n  //   super.updateScale()\n\n  //   var { x: sx, y: sy, z: sz } = this.scale\n  //   this.cssObject3d.scale.set(Math.max(sx, SCALE_MIN), Math.max(sy, SCALE_MIN), Math.max(sz, SCALE_MIN))\n  // }\n\n  updateDimension() {\n    super.updateDimension()\n\n    var dimension = this.dimension\n    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.width = dimension.width + 'px'\n    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.height = dimension.height + 'px'\n  }\n\n  updateAlpha() {\n    super.updateAlpha()\n\n    // material의 opacity는 항상 0으로 유지되어야 하며,\n    // dom element의 opacity에 alpha를 적용해야한다.\n    // 하지만, 컬러톤의 반영 외에 transparent 기능은 하지 못하므로, 뒤에 있는 오브젝트를 보여주지 못한다.\n    var { alpha = 1 } = this.component.state\n\n    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.opacity = alpha\n  }\n}\n"]}
+{"version":3,"file":"real-object-dom-element.js","sourceRoot":"","sources":["../../src/threed/real-object-dom-element.ts"],"names":[],"mappings":"AAAA;;GAEG;AAMH,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,MAAM,OAAO,oBAAqB,SAAQ,UAAuB;IACrD,mBAAmB;QAC3B,OAAO,IAAI,WAAW,CAAE,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,CAAA;IAC/F,CAAC;IAED,KAAK;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,OAAO,GAAI,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAA;QAEnF,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA;QAE7C,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,GAAG,IAAI,CAAA;QAClC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;QAEpC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAA;QACvB,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAA;IACxB,CAAC;IAED,eAAe;QACb,KAAK,CAAC,eAAe,EAAE,CAAA;QAEvB,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAC7B;QAAC,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,IAAI,CAC1G;QAAC,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,IAAI,CAAA;IAC/G,CAAC;IAED,WAAW;QACT,KAAK,CAAC,WAAW,EAAE,CAAA;QAEnB,sCAAsC;QACtC,uCAAuC;QACvC,iEAAiE;QACjE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAEvC;QAAC,IAAI,CAAC,SAAuD,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;IAC9F,CAAC;CACF","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport * as THREE from 'three'\nimport { HTMLOverlayElement, HTMLOverlayContainer } from '@hatiolab/things-scene'\n\nimport { RealObjectMesh } from './real-object-mesh'\nimport { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'\nimport { RealObject } from './real-object'\nimport { SCALE_MIN } from './common'\n\nexport class RealObjectDomElement extends RealObject<CSS3DObject> {\n  protected getObject3dInstance() {\n    return new CSS3DObject((this.component as HTMLOverlayElement | HTMLOverlayContainer).element)\n  }\n\n  build() {\n    super.build()\n\n    var element = (this.component as HTMLOverlayElement | HTMLOverlayContainer).element\n\n    var { width, height } = this.component.bounds\n\n    element.style.width = width + 'px'\n    element.style.height = height + 'px'\n\n    element.style.left = ''\n    element.style.top = ''\n  }\n\n  updateDimension() {\n    super.updateDimension()\n\n    var dimension = this.dimension\n    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.width = dimension.width + 'px'\n    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.height = dimension.height + 'px'\n  }\n\n  updateAlpha() {\n    super.updateAlpha()\n\n    // material의 opacity는 항상 0으로 유지되어야 하며,\n    // dom element의 opacity에 alpha를 적용해야한다.\n    // 하지만, 컬러톤의 반영 외에 transparent 기능은 하지 못하므로, 뒤에 있는 오브젝트를 보여주지 못한다.\n    var { alpha = 1 } = this.component.state\n\n    ;(this.component as HTMLOverlayElement | HTMLOverlayContainer).element.style.opacity = alpha\n  }\n}\n"]}

package/dist/threed/real-object-extrude.d.ts

@@ -10,12 +10,11 @@ export declare class RealObjectExtrude extends RealObject {
     get boundUVGenerator(): BoundUVGenerator;
     build(): void;
     createGeometry(shape: THREE.Shape): THREE.BufferGeometry;
-    createMaterial(): THREE.MeshStandardMaterial;
-    createMesh(geometry: THREE.BufferGeometry, material: THREE.Material): THREE.Mesh<THREE.BufferGeometry, THREE.Material>;
+    createMainMaterial(): THREE.MeshStandardMaterial;
+    createMainMesh(geometry: THREE.BufferGeometry, material: THREE.Material): THREE.Mesh<THREE.BufferGeometry, THREE.Material>;
     createSideMesh(geometry: THREE.BufferGeometry, shape: THREE.Shape): THREE.Mesh<THREE.ExtrudeGeometry, THREE.MeshStandardMaterial>;
     createTexture(): THREE.CanvasTexture;
     updateAlpha(): void;
     updateStrokeStyle(): void;
     updateFillStyle(): void;
-    get rebuildingProperties(): string[];
 }

package/dist/threed/real-object-extrude.js

@@ -2,7 +2,6 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 import * as THREE from 'three';
-import tinycolor from 'tinycolor2';
 import { RealObject } from './real-object';
 import { BoundUVGenerator } from './utils/bound-uv-generator';
 import { createCanvas } from './html/elements';
@@ -21,7 +20,7 @@ export class RealObjectExtrude extends RealObject {
     }
     build() {
         super.build();
-        var { depth = 1, fillStyle = 0xffffff, strokeStyle = 0x636363, lineWidth = 1, alpha = 1 } = this.component.state;
+        var { depth = 1 } = this.component.state;
         // 다각형 그리기
         var shape = this.shape;
         if (!shape) {
@@ -37,17 +36,15 @@ export class RealObjectExtrude extends RealObject {
             });
         }
         var geometry = this.createGeometry(shape);
-        if (fillStyle && fillStyle != 'none') {
-            var material = this.createMaterial();
-            this._mainMesh = this.createMesh(geometry, material);
-            this._mainMesh.castShadow = true;
-            this.object3d.add(this._mainMesh);
-        }
-        if (strokeStyle && strokeStyle != 'transparent' && lineWidth > 0) {
-            this._sideMesh = this.createSideMesh(geometry, shape /* FIXME , extrudeSettings */);
-            this._sideMesh.castShadow = true;
-            this.object3d.add(this._sideMesh);
-        }
+        var material = this.createMainMaterial();
+        this._mainMesh = this.createMainMesh(geometry, material);
+        this._mainMesh.castShadow = true;
+        this.object3d.add(this._mainMesh);
+        this._sideMesh = this.createSideMesh(geometry, shape /* FIXME , extrudeSettings */);
+        this._sideMesh.castShadow = true;
+        this.object3d.add(this._sideMesh);
+        this.updateFillStyle();
+        this.updateStrokeStyle();
     }
     createGeometry(shape) {
         const { depth = 1 } = this.component.state;
@@ -61,35 +58,13 @@ export class RealObjectExtrude extends RealObject {
         geometry.center();
         return geometry;
     }
-    createMaterial() {
-        var { fillStyle = 'black', alpha = 1 } = this.component.state;
-        var params = {};
-        var opacity = alpha;
-        const texture = RealObject.buildFillStyleTexture(this.component);
-        if (texture) {
-            params = {
-                map: texture,
-                side: THREE.FrontSide
-            };
-        }
-        else if (typeof fillStyle == 'string') {
-            if (fillStyle !== 'transparent') {
-                params.color = fillStyle;
-                opacity *= tinycolor(fillStyle).getAlpha();
-            }
-            else {
-                opacity = 0;
-            }
-        }
+    createMainMaterial() {
         return new THREE.MeshStandardMaterial({
-            ...params,
-            opacity,
-            transparent: opacity < 1,
             metalness: 0.5,
             roughness: 0.5
         });
     }
-    createMesh(geometry, material) {
+    createMainMesh(geometry, material) {
         var mesh = new THREE.Mesh(geometry, material);
         mesh.rotation.x = -Math.PI / 2;
         mesh.rotation.y = -Math.PI;
@@ -97,21 +72,16 @@ export class RealObjectExtrude extends RealObject {
         return mesh;
     }
     createSideMesh(geometry, shape) {
-        var { strokeStyle = 0x000000, depth = 1, lineWidth = 0, alpha = 1 } = this.component.state;
+        var { depth = 1, lineWidth = 0 } = this.component.state;
         var hole = new THREE.Path();
         hole.setFromPoints(shape.getPoints());
         var sideMaterial = new THREE.MeshStandardMaterial({
-            color: strokeStyle,
             metalness: 0.5,
-            roughness: 0.5
+            roughness: 0.5,
+            // prevent overlapped layers flickering
+            polygonOffset: true,
+            polygonOffsetFactor: -0.1
         });
-        var tinyStrokeStyle = tinycolor(strokeStyle);
-        var strokeAlpha = tinyStrokeStyle.getAlpha();
-        sideMaterial.opacity = alpha * strokeAlpha;
-        sideMaterial.transparent = alpha < 1 || strokeAlpha < 1;
-        // prevent overlapped layers flickering
-        sideMaterial.polygonOffset = true;
-        sideMaterial.polygonOffsetFactor = -0.1;
         shape = this.sideShape || shape;
         shape.holes.push(hole);
         var sideExtrudeSettings = {
@@ -143,7 +113,6 @@ export class RealObjectExtrude extends RealObject {
             return 1 << count;
         }
         var { width, height } = this.component.bounds;
-        // TODO component.text의 heavy한 로직을 반복적으로 실행하지 않도록, 캐싱하자.
         var poweredWidth = nextPowerOf2(width);
         var poweredHeight = nextPowerOf2(height);
         let canvas = createCanvas(poweredWidth, poweredHeight);
@@ -158,21 +127,22 @@ export class RealObjectExtrude extends RealObject {
         return texture;
     }
     updateAlpha() {
-        var { alpha = 1, fillStyle, lineStyle } = this.component.state;
+        var { alpha = 1, fillStyle, strokeStyle } = this.component.state;
         this._mainMesh && applyAlpha(this._mainMesh.material, alpha, fillStyle);
-        this._sideMesh && applyAlpha(this._sideMesh.material, alpha, lineStyle && lineStyle.strokeStyle);
+        this._sideMesh && applyAlpha(this._sideMesh.material, alpha, strokeStyle);
     }
     updateStrokeStyle() {
         var _a;
-        var { strokeStyle } = this.component.state;
-        if (typeof strokeStyle == 'string') {
-            ;
-            ((_a = this._sideMesh) === null || _a === void 0 ? void 0 : _a.material).color.set(strokeStyle);
+        const material = (_a = this._sideMesh) === null || _a === void 0 ? void 0 : _a.material;
+        if (!material) {
+            return;
         }
+        var { strokeStyle } = this.component.state;
+        material.color.set(strokeStyle);
     }
     updateFillStyle() {
         var _a;
-        var { fillStyle } = this.component.state;
+        var { fillStyle, alpha = 1 } = this.component.state;
         var material = (_a = this._mainMesh) === null || _a === void 0 ? void 0 : _a.material;
         if (!material) {
             return;
@@ -181,18 +151,9 @@ export class RealObjectExtrude extends RealObject {
         if (texture) {
             material.map = texture;
         }
-        else if (typeof fillStyle == 'string') {
-            if (fillStyle !== 'transparent') {
-                material.color.set(fillStyle);
-            }
-            else {
-                // material.color.set(fillStyle)
-                material.opacity = 0;
-            }
+        else {
+            material.color.set(fillStyle);
         }
     }
-    get rebuildingProperties() {
-        return ['width', 'height', 'depth', 'text', 'path'];
-    }
 }
 //# sourceMappingURL=real-object-extrude.js.map