@hatiolab/things-scene 9.0.0-beta.2 → 9.0.0-beta.21

package/dist/components/shape.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component } from '@hatiolab/things-scene';
+/**
+ * Shape 컴포넌트는 단순한 형태의 컴포넌트의 공통 기능을 정의한 추상클래스이다.
+ * 단순한 형태의 컴포넌트란
+ * - 컴포넌트 전체에서 라인 스타일이 하나만 사용된다.
+ * - 컴포넌트 전체에서 FILL 스타일이 하나만 사용된다.
+ *
+ * 이런 단순한 컴포넌트는 render 메쏘드에서 모든 패스를 lineTo로 그리기만 하고
+ * postrender에서 Fill, Stroke을 일괄적으로 한다.
+ */
+export default class Shape extends Component {
+    set rotationX(angle) {
+        this.setState('rotationX', angle);
+    }
+    get rotationX() {
+        return this.getState('rotationX');
+    }
+    set rotationY(angle) {
+        this.setState('rotationY', angle);
+    }
+    get rotationY() {
+        return this.getState('rotationY');
+    }
+    set rotationZ(angle) {
+        this.setState('rotation', angle);
+    }
+    get rotationZ() {
+        return this.getState('rotation');
+    }
+    set zPos(zPos) {
+        this.setState('zPos', zPos);
+    }
+    get zPos() {
+        return this.getState('zPos');
+    }
+    set depth(depth) {
+        this.setState('depth', depth);
+    }
+    get depth() {
+        return this.getState('depth');
+    }
+    postrender(context) {
+        this.drawFill(context);
+        this.drawStroke(context);
+        super.postrender(context);
+    }
+    render(ctx) {
+        var path = this.drawPath;
+        var { round = 0 } = this.state;
+        if (path.length <= 1) {
+            return;
+        }
+        ctx.beginPath();
+        for (var i = 0; i < path.length; i++) {
+            const prev = path[(i - 1 + path.length) % path.length];
+            const cursor = path[(i + path.length) % path.length];
+            const next = path[(i + 1) % path.length];
+            if (prev.x === cursor.x && prev.y === cursor.y) {
+                continue;
+            }
+            var length = Math.sqrt((prev.x - cursor.x) * (prev.x - cursor.x) + (prev.y - cursor.y) * (prev.y - cursor.y));
+            var theta = length !== 0 ? Math.atan2(prev.x - cursor.x, prev.y - cursor.y) : 0;
+            var x = Math.sin(theta) * Math.min(round, length / 2) + cursor.x;
+            var y = Math.cos(theta) * Math.min(round, length / 2) + cursor.y;
+            const p1 = round > 0 || length !== 0 ? { x, y } : cursor;
+            var length = Math.sqrt((next.x - cursor.x) * (next.x - cursor.x) + (next.y - cursor.y) * (next.y - cursor.y));
+            theta = length !== 0 ? Math.atan2(next.x - cursor.x, next.y - cursor.y) : 0;
+            x = Math.sin(theta) * Math.min(round, length / 2) + cursor.x;
+            y = Math.cos(theta) * Math.min(round, length / 2) + cursor.y;
+            const p2 = round > 0 || length !== 0 ? { x, y } : cursor;
+            i == 0 ? ctx.moveTo(p1.x, p1.y) : ctx.lineTo(p1.x, p1.y);
+            round > 0 && ctx.quadraticCurveTo(cursor.x, cursor.y, p2.x, p2.y);
+        }
+        ctx.closePath();
+    }
+}
+//# sourceMappingURL=shape.js.map

package/dist/components/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"","sources":["../../src/components/shape.js"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component } from '@hatiolab/things-scene'\n\n/**\n * Shape 컴포넌트는 단순한 형태의 컴포넌트의 공통 기능을 정의한 추상클래스이다.\n * 단순한 형태의 컴포넌트란\n * - 컴포넌트 전체에서 라인 스타일이 하나만 사용된다.\n * - 컴포넌트 전체에서 FILL 스타일이 하나만 사용된다.\n *\n * 이런 단순한 컴포넌트는 render 메쏘드에서 모든 패스를 lineTo로 그리기만 하고\n * postrender에서 Fill, Stroke을 일괄적으로 한다.\n */\nexport default class Shape extends Component {\n  set rotationX(angle) {\n    this.setState('rotationX', angle)\n  }\n\n  get rotationX() {\n    return this.getState('rotationX')\n  }\n\n  set rotationY(angle) {\n    this.setState('rotationY', angle)\n  }\n\n  get rotationY() {\n    return this.getState('rotationY')\n  }\n\n  set rotationZ(angle) {\n    this.setState('rotation', angle)\n  }\n\n  get rotationZ() {\n    return this.getState('rotation')\n  }\n\n  set zPos(zPos) {\n    this.setState('zPos', zPos)\n  }\n\n  get zPos() {\n    return this.getState('zPos')\n  }\n\n  set depth(depth) {\n    this.setState('depth', depth)\n  }\n\n  get depth() {\n    return this.getState('depth')\n  }\n\n  postrender(context) {\n    this.drawFill(context)\n    this.drawStroke(context)\n    super.postrender(context)\n  }\n\n  render(ctx) {\n    var path = this.drawPath\n    var { round = 0 } = this.state\n\n    if (path.length <= 1) {\n      return\n    }\n\n    ctx.beginPath()\n\n    for (var i = 0; i < path.length; i++) {\n      const prev = path[(i - 1 + path.length) % path.length]\n      const cursor = path[(i + path.length) % path.length]\n      const next = path[(i + 1) % path.length]\n\n      if (prev.x === cursor.x && prev.y === cursor.y) {\n        continue\n      }\n\n      var length = Math.sqrt((prev.x - cursor.x) * (prev.x - cursor.x) + (prev.y - cursor.y) * (prev.y - cursor.y))\n      var theta = length !== 0 ? Math.atan2(prev.x - cursor.x, prev.y - cursor.y) : 0\n      var x = Math.sin(theta) * Math.min(round, length / 2) + cursor.x\n      var y = Math.cos(theta) * Math.min(round, length / 2) + cursor.y\n\n      const p1 = round > 0 || length !== 0 ? { x, y } : cursor\n\n      var length = Math.sqrt((next.x - cursor.x) * (next.x - cursor.x) + (next.y - cursor.y) * (next.y - cursor.y))\n      theta = length !== 0 ? Math.atan2(next.x - cursor.x, next.y - cursor.y) : 0\n      x = Math.sin(theta) * Math.min(round, length / 2) + cursor.x\n      y = Math.cos(theta) * Math.min(round, length / 2) + cursor.y\n\n      const p2 = round > 0 || length !== 0 ? { x, y } : cursor\n\n      i == 0 ? ctx.moveTo(p1.x, p1.y) : ctx.lineTo(p1.x, p1.y)\n      round > 0 && ctx.quadraticCurveTo(cursor.x, cursor.y, p2.x, p2.y)\n    }\n\n    ctx.closePath()\n  }\n}\n"]}

package/dist/components/star.d.ts

@@ -0,0 +1,13 @@
+import { Component, ComponentNature, Ellipse } from '@hatiolab/things-scene';
+export default class Star extends Ellipse {
+    is3dish(): boolean;
+    render(ctx: CanvasRenderingContext2D): void;
+    get controls(): {
+        x: any;
+        y: number;
+        handler: {
+            ondragmove: (point: import("@hatiolab/things-scene").DIMENSION, index: number, component: Component) => void;
+        };
+    }[];
+    get nature(): ComponentNature;
+}

package/dist/components/star.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Ellipse } from '@hatiolab/things-scene';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'ratio',
+            name: 'ratio',
+            property: 'ratio'
+        },
+        {
+            type: 'number',
+            label: 'wing',
+            name: 'wing',
+            property: 'wing'
+        }
+    ],
+    help: 'scene/component/star'
+};
+var controlHandler = {
+    ondragmove: function (point, index, component) {
+        var controls = component.controls;
+        var { cy, ry } = component.model;
+        var transcoorded = component.transcoordP2S(point.x, point.y);
+        var ratio = ((transcoorded.y - cy) / ry) * 100 + 100;
+        if (ratio >= 100)
+            ratio = 100;
+        else if (ratio <= 0)
+            ratio = 0;
+        component.set({ ratio }); // ratio: ratio  => ratio
+    }
+};
+export default class Star extends Ellipse {
+    is3dish() {
+        return false;
+    }
+    render(ctx) {
+        var { ratio = 30, wing = 5, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state;
+        // 박스 그리기
+        if (wing < 3)
+            return;
+        const RADIAN = 1.5707963267948966; // 90도 뒤틀기
+        var a = (Math.PI * 2) / wing;
+        var xRatio = rx - (ratio / 100) * rx;
+        var yRatio = ry - (ratio / 100) * ry;
+        ctx.save();
+        ctx.beginPath();
+        ctx.translate(cx, cy);
+        ctx.moveTo(rx * Math.cos(-RADIAN), ry * Math.sin(-RADIAN));
+        ctx.lineTo(((rx - xRatio) * (Math.cos(a - RADIAN) + Math.cos(0 - RADIAN))) / 2, ((ry - yRatio) * (Math.sin(a - RADIAN) + Math.sin(0 - RADIAN))) / 2);
+        for (var i = 1; i < wing; i++) {
+            ctx.lineTo(rx * Math.cos(a * i - RADIAN), ry * Math.sin(a * i - RADIAN));
+            ctx.lineTo(((rx - xRatio) * (Math.cos(a * (i + 1) - RADIAN) + Math.cos(a * i - RADIAN))) / 2, ((ry - yRatio) * (Math.sin(a * (i + 1) - RADIAN) + Math.sin(a * i - RADIAN))) / 2);
+        }
+        // ratio /= 1.5;
+        ctx.closePath();
+        ctx.restore();
+    }
+    get controls() {
+        var { cx, cy, ry, ratio } = this.state;
+        return [
+            {
+                x: cx,
+                y: cy - ry + ry * (ratio / 100),
+                handler: controlHandler
+            }
+        ];
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.memoize(Star.prototype, 'controls', false);
+Component.register('star', Star);
+//# sourceMappingURL=star.js.map

package/dist/components/star.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"star.js","sourceRoot":"","sources":["../../src/components/star.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Ellipse, POSITION } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'ratio',\n      name: 'ratio',\n      property: 'ratio'\n    },\n    {\n      type: 'number',\n      label: 'wing',\n      name: 'wing',\n      property: 'wing'\n    }\n  ],\n  help: 'scene/component/star'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var controls = component.controls\n    var { cy, ry } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var ratio = ((transcoorded.y - cy) / ry) * 100 + 100\n\n    if (ratio >= 100) ratio = 100\n    else if (ratio <= 0) ratio = 0\n\n    component.set({ ratio }) // ratio: ratio  => ratio\n  }\n}\n\nexport default class Star extends Ellipse {\n  is3dish() {\n    return false\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { ratio = 30, wing = 5, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n\n    // 박스 그리기\n\n    if (wing < 3) return\n\n    const RADIAN = 1.5707963267948966 // 90도 뒤틀기\n    var a = (Math.PI * 2) / wing\n    var xRatio = rx - (ratio / 100) * rx\n    var yRatio = ry - (ratio / 100) * ry\n\n    ctx.save()\n    ctx.beginPath()\n\n    ctx.translate(cx, cy)\n\n    ctx.moveTo(rx * Math.cos(-RADIAN), ry * Math.sin(-RADIAN))\n    ctx.lineTo(\n      ((rx - xRatio) * (Math.cos(a - RADIAN) + Math.cos(0 - RADIAN))) / 2,\n      ((ry - yRatio) * (Math.sin(a - RADIAN) + Math.sin(0 - RADIAN))) / 2\n    )\n\n    for (var i = 1; i < wing; i++) {\n      ctx.lineTo(rx * Math.cos(a * i - RADIAN), ry * Math.sin(a * i - RADIAN))\n\n      ctx.lineTo(\n        ((rx - xRatio) * (Math.cos(a * (i + 1) - RADIAN) + Math.cos(a * i - RADIAN))) / 2,\n        ((ry - yRatio) * (Math.sin(a * (i + 1) - RADIAN) + Math.sin(a * i - RADIAN))) / 2\n      )\n    }\n    // ratio /= 1.5;\n    ctx.closePath()\n    ctx.restore()\n  }\n\n  get controls() {\n    var { cx, cy, ry, ratio } = this.state\n\n    return [\n      {\n        x: cx,\n        y: cy - ry + ry * (ratio / 100),\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Star.prototype, 'controls', false)\n\nComponent.register('star', Star)\n"]}

package/dist/components/text/substitutor.d.ts

@@ -0,0 +1,3 @@
+export function access(expression: any): any;
+export function substitute(expression: any, customObjToVal: any): string | undefined;
+export function buildSubstitutor(expression: any, component: any, customObjToVal: any): (() => string) | undefined;

package/dist/components/text.d.ts

@@ -0,0 +1,8 @@
+import { Component } from '@hatiolab/things-scene';
+import RealObject from '../threed/real-object';
+declare const Text_base: typeof Component;
+export default class Text extends Text_base {
+    is3dish(): boolean;
+    buildRealObject(): RealObject | undefined;
+}
+export {};

package/dist/components/text.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath } from '@hatiolab/things-scene';
+import RealObjectText from '../threed/real-object-text';
+export default class Text extends RectPath(Component) {
+    is3dish() {
+        return true;
+    }
+    buildRealObject() {
+        return new RealObjectText(this);
+    }
+}
+Component.register('text', Text);
+//# sourceMappingURL=text.js.map

package/dist/components/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,cAAc,MAAM,4BAA4B,CAAA;AAEvD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,QAAQ,CAAC,SAAS,CAAC;IACnD,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe;QACb,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,CAAA;IACjC,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath } from '@hatiolab/things-scene'\nimport RealObject from '../threed/real-object'\nimport RealObjectText from '../threed/real-object-text'\n\nexport default class Text extends RectPath(Component) {\n  is3dish() {\n    return true\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new RealObjectText(this)\n  }\n}\n\nComponent.register('text', Text)\n"]}

package/dist/components/three-container.d.ts

@@ -0,0 +1,60 @@
+/// <reference path="../../things-scene.d.ts" />
+/// <reference path="../../src/component.d.ts" />
+import { Component, ComponentNature, ContainerAbstract, Properties } from '@hatiolab/things-scene';
+import * as THREE from 'three';
+import { ThreeDimensionalContainer } from '../threed/three-dimensional-container';
+import './three-layout';
+export default class ThreeContainer extends ContainerAbstract implements ThreeDimensionalContainer {
+    _scene3d?: THREE.Scene;
+    _initalizeComplete?: Promise<void>;
+    _mixer?: THREE.AnimationMixer;
+    _camera?: THREE.PerspectiveCamera;
+    _canvas?: HTMLCanvasElement;
+    _renderer3d?: THREE.WebGLRenderer;
+    _mouse?: THREE.Vector2;
+    _clock?: THREE.Clock;
+    _controls?: any;
+    _onFocus?: (e: FocusEvent) => void;
+    _noSupportWebgl: boolean;
+    _raycaster: THREE.Raycaster;
+    _lastFocused?: THREE.Object3D;
+    containable(component: Component): boolean;
+    is3dContainer(): boolean;
+    createObjects(components: Component[]): void;
+    destroy_scene3d(): void;
+    update(): void;
+    init_scene3d(): void;
+    threed_animate(): void;
+    stop(): void;
+    get scene3d(): THREE.Scene | undefined;
+    get renderer3d(): THREE.WebGLRenderer | undefined;
+    get mixer(): THREE.AnimationMixer | undefined;
+    render_threed(): void;
+    render(ctx: CanvasRenderingContext2D): void;
+    postrender(ctx: CanvasRenderingContext2D): void;
+    dispose(): void;
+    get layout(): import("@hatiolab/things-scene").LAYOUT;
+    get nature(): ComponentNature;
+    getObjectByRaycast(): THREE.Object3D<THREE.Event> | undefined;
+    getObjectsByRaycast(): THREE.Intersection<THREE.Object3D<THREE.Event>>[] | undefined;
+    _showWebglNoSupportText(context: CanvasRenderingContext2D): void;
+    createFloor(width: number, height: number): void;
+    onchange(after: Properties, before: Properties): void;
+    onmousedown(e: MouseEvent): void;
+    onmouseup(e: MouseEvent): void;
+    onmousemove(e: MouseEvent): void;
+    onmouseleave(e: MouseEvent): void;
+    onwheel(e: WheelEvent): void;
+    ondblclick(e: MouseEvent): void;
+    ondragstart(e: DragEvent): void;
+    ondragmove(e: DragEvent): void;
+    ondragend(e: DragEvent): void;
+    ontouchstart(e: TouchEvent): void;
+    onpan(e: TouchEvent): void;
+    ontouchend(e: TouchEvent): void;
+    onkeydown(e: KeyboardEvent): void;
+    onpinch(e: TouchEvent): void;
+    ondoubletap(): void;
+    handleMouseWheel(event: WheelEvent): void;
+    onredraw(): void;
+}