@operato/scene-visualizer 7.3.18 → 7.3.19

package/src/templates/cube.ts

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

package/src/templates/cylinder.ts

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

package/src/templates/desk.ts

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

package/src/templates/gltf-object.ts

@@ -1,20 +0,0 @@
-const icon = new URL('../../icons/gltf-object.png', import.meta.url).href
-
-export default {
-  type: 'gltf-object',
-  description: '3D gltf-object',
-  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'gltf-object',
-    left: 100,
-    top: 100,
-    width: 200,
-    height: 200,
-    depth: 200,
-    fillStyle: '#CCAA76',
-    strokeStyle: '#999',
-    lineWidth: 1,
-    alpha: 1
-  }
-}

package/src/templates/index.ts

@@ -1,29 +0,0 @@
-import threeContainer from './3d-container'
-import visualizer from './visualizer'
-import rackTable from './rack-table'
-import cube from './cube'
-import cylinder from './cylinder'
-import sphere from './sphere'
-import banner from './banner'
-import sprite from './sprite'
-import wall from './wall'
-import desk from './desk'
-import camera from './camera'
-import light from './light'
-import GLTFObject from './gltf-object'
-
-export default [
-  threeContainer,
-  visualizer,
-  rackTable,
-  camera,
-  light,
-  cube,
-  cylinder,
-  sphere,
-  sprite,
-  banner,
-  wall,
-  desk,
-  GLTFObject
-]

package/src/templates/light.ts

@@ -1,23 +0,0 @@
-const icon = new URL('../../icons/light.png', import.meta.url).href
-
-export default {
-  type: 'light',
-  description: 'Light',
-  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'light',
-    rx: 10,
-    ry: 10,
-    cx: 150,
-    cy: 150,
-    zPos: 1000,
-    fillStyle: '#fff',
-    strokeStyle: '#000',
-    alpha: 1,
-    hidden: false,
-    lineWidth: 1,
-    lineDash: 'solid',
-    lineCap: 'butt'
-  }
-}

package/src/templates/pallet.ts

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

package/src/templates/rack-table.ts

@@ -1,21 +0,0 @@
-const icon = new URL('../../icons/rack-table.png', import.meta.url).href
-
-export default {
-  type: 'rack-table',
-  description: '3D rack-table',
-  group: '3D' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'rack-table',
-    top: 100,
-    left: 100,
-    width: 500,
-    height: 200,
-    locPattern: '{z}{s}-{u}{sh}',
-    increasePattern: '+u+s',
-    strokeStyle: '#999',
-    lineWidth: 2,
-    rows: 5,
-    columns: 5
-  }
-}

package/src/templates/sphere.ts

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

package/src/templates/sprite.ts

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

package/src/templates/visualizer.ts

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

package/src/templates/wall.ts

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

package/src/text.ts

@@ -1,10 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Text } from '@hatiolab/things-scene'
-import { RealObjectText } from './threed/real-object-text'
-
-Text.prototype.buildRealObject = function () {
-  return new RealObjectText(this)
-}

package/src/three-container-editor.ts

@@ -1,187 +0,0 @@
-import * as THREE from 'three'
-
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
-
-export class ThreeContainerEditor {
-  private ortho: THREE.OrthographicCamera
-  private persp: THREE.PerspectiveCamera
-
-  private scene: THREE.Scene
-  private camera: THREE.Camera
-  private renderer: THREE.Renderer
-
-  private orbit?: OrbitControls
-  private transform?: TransformControls
-
-  constructor(
-    scene: THREE.Scene,
-    ortho: THREE.OrthographicCamera,
-    persp: THREE.PerspectiveCamera,
-    camera: THREE.Camera,
-    renderer: THREE.Renderer
-  ) {
-    this.ortho = ortho
-    this.persp = persp
-
-    this.scene = scene
-    this.camera = camera
-    this.renderer = renderer
-  }
-
-  dispose() {
-    this.orbit?.dispose()
-    this.transform?.dispose()
-  }
-
-  get orbitControls(): OrbitControls {
-    if (!this.orbit) {
-      this.orbit = new OrbitControls(this.camera!, this.renderer.domElement)
-      this.orbit.update()
-
-      this.orbit.addEventListener('change', this.render)
-    }
-
-    return this.orbit
-  }
-
-  get transformControls(): TransformControls {
-    if (!this.transform) {
-      this.transform = new TransformControls(this.camera!, this.renderer.domElement)
-      this.transform.addEventListener('change', this.render)
-
-      this.transform.addEventListener('dragging-changed', event => {
-        this.orbitControls.enabled = !event.value
-      })
-    }
-
-    return this.transform
-  }
-
-  attach(target: THREE.Object3D) {
-    this.transform?.attach(target)
-    this.scene.add(this.transformControls)
-  }
-
-  detach() {
-    this.scene.remove(this.transformControls)
-  }
-
-  onKeyDown(e: KeyboardEvent) {
-    switch (e.code) {
-      case 'KeyQ':
-        this.transformControls.setSpace(this.transformControls.space === 'local' ? 'world' : 'local')
-        break
-
-      case 'ShiftLeft':
-      case 'ShiftRight':
-        this.transformControls.setTranslationSnap(100)
-        this.transformControls.setRotationSnap(THREE.MathUtils.degToRad(15))
-        this.transformControls.setScaleSnap(0.25)
-        break
-
-      case 'KeyW':
-        this.transformControls.setMode('translate')
-        break
-
-      case 'KeyE':
-        this.transformControls.setMode('rotate')
-        break
-
-      case 'KeyR':
-        this.transformControls.setMode('scale')
-        break
-
-      case 'KeyC':
-        const position = this.camera.position.clone()
-
-        this.camera = (this.camera as THREE.PerspectiveCamera).isPerspectiveCamera ? this.ortho : this.persp
-        this.camera.position.copy(position)
-
-        this.orbitControls.object = this.camera
-        this.transformControls.camera = this.camera
-
-        this.camera.lookAt(this.orbitControls.target.x, this.orbitControls.target.y, this.orbitControls.target.z)
-
-        this.onWindowResize()
-
-        break
-
-      case 'KeyV':
-        const randomFoV = Math.random() + 0.1
-        const randomZoom = Math.random() + 0.1
-
-        this.persp.fov = randomFoV * 160
-        this.ortho.bottom = -randomFoV * 500
-        this.ortho.top = randomFoV * 500
-
-        this.persp.zoom = randomZoom * 5
-        this.ortho.zoom = randomZoom * 5
-
-        this.onWindowResize()
-
-        break
-
-      case 'Equal':
-      case 'NumpadAdd':
-      case 'NumpadEqual':
-        this.transformControls.setSize(this.transformControls.size + 0.1)
-        break
-
-      case 'Minus': // -
-      case 'IntlRo': // _
-      case 'NumpadSubtract': // num-
-        this.transformControls.setSize(Math.max(this.transformControls.size - 0.1, 0.1))
-        break
-
-      case 'KeyX':
-        this.transformControls.showX = !this.transformControls.showX
-        break
-
-      case 'KeyY':
-        this.transformControls.showY = !this.transformControls.showY
-        break
-
-      case 'KeyZ':
-        this.transformControls.showZ = !this.transformControls.showZ
-        break
-
-      case 'Space':
-        this.transformControls.enabled = !this.transformControls.enabled
-        break
-
-      case 'Esc':
-        this.transformControls.reset()
-        break
-    }
-  }
-
-  onKeyUp(e: KeyboardEvent) {
-    switch (e.code) {
-      case 'Shift':
-        this.transformControls.setTranslationSnap(null)
-        this.transformControls.setRotationSnap(null)
-        this.transformControls.setScaleSnap(null)
-        break
-    }
-  }
-
-  onWindowResize() {
-    const aspect = window.innerWidth / window.innerHeight
-
-    this.persp.aspect = aspect
-    this.persp.updateProjectionMatrix()
-
-    this.ortho.left = this.ortho.bottom * aspect
-    this.ortho.right = this.ortho.top * aspect
-    this.ortho.updateProjectionMatrix()
-
-    this.renderer.setSize(window.innerWidth, window.innerHeight)
-
-    this.render()
-  }
-
-  render() {
-    this.renderer.render(this.scene, this.camera)
-  }
-}