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

package/src/editors/property-editor-location-increase-pattern.ts

@@ -1,260 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import { css, html, TemplateResult } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('property-editor-location-increase-pattern')
-export default class LocationIncreasePatternEditor extends OxPropertyEditor {
-  static styles = [
-    ...OxPropertyEditor.styles,
-    css`
-      fieldset {
-        border: none;
-        border-bottom: 1px solid #cfd8dc;
-        color: var(--primary-text-color);
-        font-size: 12px;
-        padding: 0 0 10px 0;
-        margin: 0 0 10px 0;
-      }
-
-      fieldset legend {
-        padding: 5px 0 0 5px;
-        font-size: 11px;
-        color: #e46c2e;
-        font-weight: bold;
-        text-transform: capitalize;
-      }
-
-      .property-grid {
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-        margin: 10px 0 0 0;
-      }
-
-      .property-grid > * {
-        line-height: 1.5;
-      }
-
-      #border-set > mwc-icon {
-        grid-column: span 2;
-        margin: 0 0 0 8px;
-        width: 32px;
-        height: 32px;
-      }
-
-      .property-grid > label {
-        grid-column: span 3;
-        text-align: right;
-        text-transform: capitalize;
-      }
-
-      .property-grid > paper-dropdown-menu,
-      .property-grid > input {
-        grid-column: span 7;
-        padding: 0;
-        margin: 0;
-      }
-
-      .property-grid > .checkbox-row {
-        grid-column: span 10;
-
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-        align-items: center;
-      }
-
-      .checkbox-row > input {
-        grid-column: span 4 / auto;
-        order: 1;
-        place-self: center end;
-      }
-
-      .checkbox-row > label {
-        grid-column: span 6;
-        text-align: left;
-      }
-
-      #pattern-set {
-        overflow: hidden;
-        grid-column: 1 / -1;
-      }
-
-      #pattern-set paper-button {
-        background: url('data:image/png;base64,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')
-          no-repeat;
-        display: block;
-        float: left;
-        margin: 0 7px 10px 0 !important;
-        width: 55px;
-        height: 40px;
-        min-width: inherit;
-      }
-      #pattern-set paper-button iron-icon {
-        display: none;
-      }
-      #pattern-set paper-button[data-value='+u+s'] {
-        background-position: 50% 3px;
-      }
-      #pattern-set paper-button[data-value='+u-s'] {
-        background-position: 50% -97px;
-      }
-      #pattern-set paper-button[data-value='-u+s'] {
-        background-position: 50% -197px;
-      }
-      #pattern-set paper-button[data-value='-u-s'] {
-        background-position: 50% -297px;
-      }
-      #pattern-set paper-button[data-value='+s+u'] {
-        background-position: 50% -397px;
-      }
-      #pattern-set paper-button[data-value='+s-u'] {
-        background-position: 50% -497px;
-      }
-      #pattern-set paper-button[data-value='-s+u'] {
-        background-position: 50% -597px;
-      }
-      #pattern-set paper-button[data-value='-s-u'] {
-        background-position: 50% -697px;
-      }
-      #pattern-set paper-button[data-value='cw'] {
-        background-position: 50% -797px;
-      }
-      #pattern-set paper-button[data-value='ccw'] {
-        background-position: 50% -897px;
-      }
-      #pattern-set paper-button[data-value='zigzag'] {
-        background-position: 50% -997px;
-      }
-      #pattern-set paper-button[data-value='zigzag-reverse'] {
-        background-position: 50% -1097px;
-      }
-
-      label {
-        order: initial;
-      }
-
-      input {
-        order: initial;
-      }
-
-      #skip-numbering {
-        order: initial;
-        grid-column: span 4;
-      }
-      label[for='skip-numbering'] {
-        order: 1;
-        grid-column: span 5;
-        text-align: left;
-      }
-    `
-  ]
-
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    // TODO: background image change to use the url-loader
-    return html`
-      <fieldset fullwidth>
-        <legend><ox-i18n msgid="label.location-increase-pattern">Increase Pattern</ox-i18n></legend>
-
-        <div class="property-grid">
-          <label> <ox-i18n msgid="label.start-section">Start Section</ox-i18n> </label>
-          <input
-            type="number"
-            data-start-section
-            value="${this.startSection}"
-            @change=${(e: Event) => (this.startSection = (e.target! as HTMLInputElement).valueAsNumber)}
-          />
-
-          <label> <ox-i18n msgid="label.start-unit">Start Unit</ox-i18n> </label>
-          <input
-            type="number"
-            data-start-unit
-            value="${this.startUnit}"
-            @change=${(e: Event) => (this.startUnit = (e.target! as HTMLInputElement).valueAsNumber)}
-          />
-
-          <div class="checkbox-row" fullwidth>
-            <input id="skip-numbering" type="checkbox" data-skip-numbering ?checked="${this.skipNumbering}" />
-            <label for="skip-numbering">
-              <ox-i18n msgid="label.skip-numbering">Skip Numbering</ox-i18n>
-            </label>
-          </div>
-
-          <div
-            id="pattern-set"
-            class="property-grid location-increase-pattern-btn"
-            @click=${(e: Event) => this._onTapType(e)}
-          >
-            <paper-button data-value="cw"> <iron-icon icon="editor:border-outer"></iron-icon> </paper-button>
-            <paper-button data-value="ccw">
-              <iron-icon icon="editor:border-inner"></iron-icon>
-            </paper-button>
-            <paper-button data-value="zigzag">
-              <iron-icon icon="editor:border-inner"></iron-icon>
-            </paper-button>
-            <paper-button data-value="zigzag-reverse">
-              <iron-icon icon="editor:border-inner"></iron-icon>
-            </paper-button>
-          </div>
-        </div>
-      </fieldset>
-    `
-  }
-
-  @property({ type: Number }) startSection: number = 1
-  @property({ type: Number }) startUnit: number = 1
-  @property({ type: Boolean }) skipNumbering: boolean = true
-  @property({ type: Object }) _specificPropEl: HTMLElement | null = null
-
-  connectedCallback() {
-    super.connectedCallback()
-    if (this.property && this.property.event) {
-      Object.entries(this.property.event).forEach(entry => {
-        if (entry[0]) {
-          document.addEventListener(entry[0] as any, entry[1] as any)
-        }
-      })
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    if (this.property && this.property.event) {
-      Object.entries(this.property.event).forEach(entry => {
-        if (entry[0]) {
-          document.removeEventListener(entry[0] as any, entry[1] as any)
-        }
-      })
-    }
-  }
-
-  _onTapType(e: Event) {
-    var target = e.target as HTMLElement
-
-    const increasingDirection = target?.closest('[data-value]')?.getAttribute('data-value')
-    if (!increasingDirection) {
-      return
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('i-need-selected', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          callback: (selected: any[]) => {
-            const table = selected[0].parent
-            table.increaseLocation(increasingDirection, this.skipNumbering, this.startSection, this.startUnit)
-          }
-        }
-      })
-    )
-
-    e.stopPropagation()
-  }
-}

package/src/effects/outline.ts

@@ -1,54 +0,0 @@
-import * as THREE from 'three'
-import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
-
-const vertexShader = `
-uniform float outline;
-void main() {
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position + normal * outline, 1.0);
-}
-`
-
-const fragmentShader = `
-uniform vec3 color;
-uniform float opacity;
-void main() {
-  gl_FragColor = vec4(color, opacity);
-}
-`
-const outlineMaterial = new THREE.ShaderMaterial({
-  uniforms: {
-    color: { value: new THREE.Color('#f00') },
-    opacity: { value: 1.0 },
-    outline: { value: 0.2 }
-  },
-  vertexShader,
-  fragmentShader,
-  side: THREE.BackSide
-})
-
-function outlineMesh(mesh: THREE.Mesh) {
-  // let outlineGeometry
-  // if (mesh.geometry.isBufferGeometry) {
-  // outlineGeometry = new THREE.BufferGeometry().fromBufferGeometry(mesh.geometry)
-  // } else {
-  let outlineGeometry = mesh.geometry.clone()
-  // }
-  BufferGeometryUtils.mergeBufferGeometries([mesh.geometry, outlineGeometry]) //.mergeVertices()
-  outlineGeometry.computeVertexNormals()
-  const newMesh = new THREE.Mesh(outlineGeometry, outlineMaterial.clone())
-  mesh.add(newMesh)
-  newMesh.name = 'outline'
-  return newMesh
-}
-
-// function outlineAnimate(mesh, t) {
-//   mesh.rotation.x += 0.01
-//   mesh.rotation.y += 0.02
-//   mesh.rotation.z += 0.01
-//   let color = mesh.getObjectByName('outline').material.uniforms.color.value
-//   color.r = Math.sin(t * 0.01 + Math.PI) * 0.5 + 0.5
-//   color.g = Math.sin(t * 0.01 + Math.PI * 0.5) * 0.5 + 0.5
-//   color.b = Math.sin(t * 0.01 + Math.PI) * 0.5 + 0.5
-//   renderer.render(scene, camera)
-//   window.requestAnimationFrame(animate)
-// }

package/src/ellipse.ts

@@ -1,37 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Ellipse } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObjectExtrude } from './threed/real-object-extrude'
-
-export class EllipseExtrude extends RealObjectExtrude {
-  get shape() {
-    var {
-      cx = 0,
-      cy = 0,
-      rx = 1,
-      ry = 1,
-      startAngle = 0,
-      endAngle = 2 * Math.PI,
-      anticlockwise = false
-    } = this.component.state
-
-    const curve = new THREE.EllipseCurve(
-      cx,
-      cy, // ax, aY
-      Math.abs(rx),
-      Math.abs(ry), // xRadius, yRadius
-      startAngle,
-      endAngle, // aStartAngle, aEndAngle
-      anticlockwise, // aClockwise
-      0 // aRotation
-    )
-
-    return new THREE.Shape(curve.getPoints(50))
-  }
-}
-
-Ellipse.prototype.buildRealObject = function () {
-  return new EllipseExtrude(this)
-}

package/src/gltf-object.ts

@@ -1,117 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, Control, RectPath, Shape } from '@hatiolab/things-scene'
-import { RealObject } from './threed/real-object'
-
-import { RealObjectGLTF } from './threed/real-object-gltf'
-
-const BASE_URL_ALIAS = '$base_url'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'gltf-selector',
-      label: 'url',
-      name: 'src',
-      property: {
-        displayField: 'id',
-        displayFullUrl: true,
-        baseUrlAlias: BASE_URL_ALIAS,
-        defaultStorage: '3d-model',
-        storageFilters: {
-          type: Array,
-          value: [
-            {
-              name: 'category',
-              value: 'image'
-            }
-          ]
-        },
-        useUpload: true,
-        category: 'application'
-      },
-      observe: function (this: HTMLElement, src: string) {
-        const info: any = this.parentNode!.querySelector('[name=gltfInfo]')
-        info.src = src
-      }
-    },
-    {
-      type: 'gltf-info',
-      label: '',
-      name: 'gltfInfo',
-      readonly: true,
-      property: {
-        action: (component: GLTFObject, options: any) => {
-          component.set(options)
-        }
-      },
-      editor: {
-        fullwidth: true
-      }
-    }
-  ],
-  'value-property': 'source',
-  help: 'scene/component/gltf-object'
-}
-
-export class GLTFObject extends RectPath(Shape) {
-  static _image: HTMLImageElement
-
-  is3dish() {
-    return true
-  }
-
-  static get image() {
-    if (!GLTFObject._image) {
-      GLTFObject._image = new Image()
-      GLTFObject._image.src = new URL('../icons/canvasicon-gltf.png', import.meta.url).href
-    }
-
-    return GLTFObject._image
-  }
-
-  get controls(): Array<Control> | undefined {
-    return []
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-
-    context.beginPath()
-    this.drawImage(context, GLTFObject.image, left, top, width, height)
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new RealObjectGLTF(this)
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  get source() {
-    return this.getState('src')
-  }
-
-  set source(source) {
-    this.setState('src', source)
-  }
-
-  set dimension(dimension: { width: number; height: number; depth: number }) {
-    const { width = 1, height = 1, depth = 1 } = dimension
-    this.setState({
-      width,
-      height,
-      depth
-    })
-
-    this.realObject?.updateDimension()
-  }
-}
-
-Component.register('gltf-object', GLTFObject)

package/src/html-overlay-element.ts

@@ -1,13 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { HTMLOverlayContainer, HTMLOverlayElement } from '@hatiolab/things-scene'
-import { RealObjectDomElement } from './threed/real-object-dom-element'
-
-HTMLOverlayElement.prototype.buildRealObject = function () {
-  return new RealObjectDomElement(this)
-}
-
-HTMLOverlayContainer.prototype.buildRealObject = function () {
-  return new RealObjectDomElement(this)
-}

package/src/index.ts

@@ -1,29 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import './scene/component'
-
-import './text'
-import './html-overlay-element'
-
-export * from './threed'
-export * from './gltf-object'
-
-export * from './camera'
-export * from './banner'
-export * from './sprite'
-export * from './cube'
-export * from './cylinder'
-export * from './desk'
-export * from './ellipse'
-export * from './polygon'
-export * from './rack'
-export * from './rack-table'
-export * from './rack-table-cell'
-export * from './rect'
-export * from './sphere'
-export * from './visualizer'
-export * from './three-container'
-export * from './wall'
-export * from './light'

package/src/light.ts

@@ -1,155 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Anchor, Component, ComponentNature, Ellipse } from '@hatiolab/things-scene'
-import * as THREE from 'three'
-import { RealObject } from './threed/real-object'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'select',
-      label: 'light-type',
-      name: 'lightType',
-      property: {
-        options: ['', 'point', 'directional']
-      }
-    },
-    {
-      type: 'number',
-      label: 'intensity',
-      name: 'intensity'
-    },
-    {
-      type: 'number',
-      label: 'distance',
-      name: 'distance'
-    },
-    {
-      type: 'number',
-      label: 'decay',
-      name: 'decay'
-    },
-    {
-      type: 'checkbox',
-      label: 'cast-shadow',
-      name: 'castShadow'
-    },
-    {
-      type: 'number',
-      label: 'near',
-      name: 'near',
-      placeholder: '0.5'
-    },
-    {
-      type: 'number',
-      label: 'far',
-      name: 'far',
-      placeholder: '1000'
-    },
-    {
-      type: 'number',
-      label: 'fov',
-      name: 'fov',
-      placeholder: '90'
-    },
-    {
-      type: 'number',
-      label: 'zoom',
-      name: 'zoom',
-      placeholder: '1'
-    },
-    {
-      type: 'checkbox',
-      label: 'show-helper',
-      name: 'showHelper'
-    }
-  ],
-  help: 'scene/component/light'
-}
-
-export class LightObject extends RealObject<THREE.Light> {
-  helper?: THREE.CameraHelper
-
-  updatePointLight() {
-    var {
-      lightType = 'point',
-      distance = 0, // unlimited
-      intensity = 10,
-      decay = 1,
-      fillStyle: color = 'white',
-      castShadow,
-      near = 0.5,
-      far = 1000,
-      fov = 90,
-      zoom = 1,
-      showHelper
-    } = this.component.state
-
-    this.object3d!.color = new THREE.Color(color)
-    if (lightType == 'point') {
-      ;(this.object3d as THREE.PointLight)!.distance = distance
-      ;(this.object3d as THREE.PointLight)!.decay = decay
-    }
-    this.object3d!.intensity = intensity
-    this.object3d!.castShadow = castShadow
-    if (castShadow) {
-      const camera = this.object3d!.shadow?.camera as THREE.PerspectiveCamera
-      camera.far = far
-      camera.near = near
-      camera.fov = fov
-      camera.zoom = zoom
-    }
-
-    if (showHelper) {
-      const camera = this.object3d!.shadow?.camera as THREE.PerspectiveCamera
-
-      if (!this.helper) {
-        this.helper = new THREE.CameraHelper(camera!)
-        this.object3d.add(this.helper)
-      }
-    } else if (this.helper) {
-      this.object3d.remove(this.helper)
-      delete this.helper
-    }
-  }
-
-  protected getObject3dInstance(): THREE.Light {
-    var { lightType = 'point' } = this.component.state
-
-    return lightType == 'point' ? new THREE.PointLight() : new THREE.DirectionalLight()
-  }
-
-  update() {
-    this.clear()
-    this.build()
-
-    this.updateDimension()
-    this.updateHidden()
-
-    this.updatePointLight()
-  }
-}
-
-export class PointLight extends Ellipse {
-  is3dish() {
-    return true
-  }
-
-  buildRealObject(): RealObject | undefined {
-    return new LightObject(this)
-  }
-
-  get anchors(): Array<Anchor> {
-    return []
-  }
-
-  get nature(): ComponentNature {
-    return NATURE
-  }
-}
-
-Component.register('light', PointLight)