@openglobus/og 0.22.2 → 0.23.0

package/lib/js/control/geoObjectEditor/GeoObjectEditorDialog.js

@@ -0,0 +1,502 @@
+import { Dialog } from "../../ui/Dialog";
+import { Input } from "../../ui/Input";
+import { Checkbox } from "../../ui/Checkbox";
+import { Button } from "../../ui/Button";
+import { Vec3 } from "../../math/Vec3";
+import { ToggleButton } from "../../ui/ToggleButton";
+const ICON_LOCK_BUTTON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="filter-center-focus">
+  <path d="M5 15H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zM12 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
+</svg>`;
+export class GeoObjectPropertiesDialog extends Dialog {
+    constructor(params) {
+        super({
+            title: "GeoObject Properties",
+            visible: false,
+            resizable: true,
+            useHide: true,
+            top: 25,
+            right: 85,
+            width: 252,
+            height: 480,
+            minHeight: 100,
+            minWidth: 100,
+            model: params.model
+        });
+        this._onVisibility = (vis) => {
+            this.model.setVisibility(vis);
+        };
+        this._onSelect = (entity) => {
+            this.show();
+            this._refresh(entity);
+        };
+        this._onUnselect = (entity) => {
+            this.hide();
+        };
+        this._onChangeRelativePosition = (checked) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                entity.relativePosition = checked;
+                this._refresh(entity);
+            }
+        };
+        this._onPosition = (pos, entity) => {
+            this._refresh(entity);
+            // let ll = entity.getLonLat();
+            // this._lonView.stopPropagation();
+            // this._latView.stopPropagation();
+            // this._heightView.stopPropagation();
+            // this._lonView.value = ll.lon;
+            // this._latView.value = ll.lat;
+            // this._heightView.value = ll.height;
+            //
+            // let cart = entity.getCartesian();
+            // this._xView.stopPropagation();
+            // this._yView.stopPropagation();
+            // this._zView.stopPropagation();
+            // this._xView.value = cart.x;
+            // this._yView.value = cart.y;
+            // this._zView.value = cart.z;
+        };
+        this._onPitch = (a, entity) => {
+            this._pitchView.stopPropagation();
+            this._pitchView.value = entity.getPitch();
+            this._absolutePitchView.stopPropagation();
+            this._absolutePitchView.value = entity.getAbsolutePitch();
+        };
+        this._onYaw = (a, entity) => {
+            this._yawView.stopPropagation();
+            this._yawView.value = entity.getYaw();
+            this._absoluteYawView.stopPropagation();
+            this._absoluteYawView.value = entity.getAbsoluteYaw();
+        };
+        this._onRoll = (a, entity) => {
+            this._rollView.stopPropagation();
+            this._rollView.value = entity.getRoll();
+            this._absoluteRollView.stopPropagation();
+            this._absoluteRollView.value = entity.getAbsoluteRoll();
+        };
+        this._onChangeLon = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let ll = entity.getLonLat();
+                entity.setLonLat2(parseFloat(val), ll.lat, ll.height);
+                this._refresh(entity);
+            }
+        };
+        this._onChangeLat = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let ll = entity.getLonLat();
+                entity.setLonLat2(ll.lon, parseFloat(val), ll.height);
+                this._refresh(entity);
+            }
+        };
+        this._onChangeHeight = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let ll = entity.getLonLat();
+                entity.setLonLat2(ll.lon, ll.lat, parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeX = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let cart = entity.getCartesian();
+                entity.setCartesian(parseFloat(val), cart.y, cart.z);
+                this._refresh(entity);
+            }
+        };
+        this._onChangeY = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let cart = entity.getCartesian();
+                entity.setCartesian(cart.x, parseFloat(val), cart.z);
+                this._refresh(entity);
+            }
+        };
+        this._onChangeZ = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let cart = entity.getCartesian();
+                entity.setCartesian(cart.x, cart.y, parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeAbsoluteX = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let cart = entity.getAbsoluteCartesian();
+                entity.setAbsoluteCartesian(parseFloat(val), cart.y, cart.z);
+                this._refresh(entity);
+            }
+        };
+        this._onChangeAbsoluteY = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let cart = entity.getAbsoluteCartesian();
+                entity.setAbsoluteCartesian(cart.x, parseFloat(val), cart.z);
+                this._refresh(entity);
+            }
+        };
+        this._onChangeAbsoluteZ = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let cart = entity.getAbsoluteCartesian();
+                entity.setAbsoluteCartesian(cart.x, cart.y, parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangePitch = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                entity.setPitch(parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeYaw = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                entity.setYaw(parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeRoll = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                entity.setRoll(parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeAbsolutePitch = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                entity.setAbsolutePitch(parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeAbsoluteYaw = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                entity.setAbsoluteYaw(parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeAbsoluteRoll = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                entity.setAbsoluteRoll(parseFloat(val));
+                this._refresh(entity);
+            }
+        };
+        this._onChangeScale = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let s = parseFloat(val);
+                entity.setScale(s);
+                this._scaleXView.stopPropagation();
+                this._scaleYView.stopPropagation();
+                this._scaleZView.stopPropagation();
+                this._scaleXView.value = s;
+                this._scaleYView.value = s;
+                this._scaleZView.value = s;
+            }
+        };
+        this._onChangeScaleX = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let s = entity.getScale();
+                entity.setScale3v(new Vec3(parseFloat(val), s.y, s.z));
+            }
+        };
+        this._onChangeScaleY = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let s = entity.getScale();
+                entity.setScale3v(new Vec3(s.x, parseFloat(val), s.z));
+            }
+        };
+        this._onChangeScaleZ = (val) => {
+            let entity = this.model.getSelectedEntity();
+            if (entity) {
+                let s = entity.getScale();
+                entity.setScale3v(new Vec3(s.x, s.y, parseFloat(val)));
+            }
+        };
+        this._onGround = () => {
+            let entity = this.model.getSelectedEntity();
+            if (entity && this.model.planet) {
+                if (this.model.planet.terrain) {
+                    this.model.planet.terrain.getHeightAsync(entity.getLonLat(), (height) => {
+                        this._heightView.value = height;
+                    });
+                }
+                else {
+                    this._heightView.value = 0;
+                }
+            }
+        };
+        this._relativePositionView = new Checkbox({
+            label: "Relative position"
+        });
+        this._lonView = new Input({
+            label: "Lon",
+            type: "number",
+            min: -180,
+            max: 180,
+            maxFixed: 10
+        });
+        this._latView = new Input({
+            label: "Lat",
+            type: "number",
+            min: -90,
+            max: 90,
+            maxFixed: 10
+        });
+        this._heightView = new Input({
+            label: "Height",
+            type: "number",
+            maxFixed: 4
+        });
+        this._xView = new Input({
+            label: "X",
+            type: "number",
+            maxFixed: 10
+        });
+        this._yView = new Input({
+            label: "Y",
+            type: "number",
+        });
+        this._zView = new Input({
+            label: "Z",
+            type: "number",
+        });
+        this._absXView = new Input({
+            label: "Absolute X",
+            type: "number",
+            maxFixed: 10
+        });
+        this._absYView = new Input({
+            label: "Absolute Y",
+            type: "number",
+        });
+        this._absZView = new Input({
+            label: "Absolute Z",
+            type: "number",
+        });
+        this._pitchView = new Input({
+            label: "Pitch",
+            type: "number",
+            maxFixed: 2
+        });
+        this._yawView = new Input({
+            label: "Yaw",
+            type: "number",
+            maxFixed: 2
+        });
+        this._rollView = new Input({
+            label: "Roll",
+            type: "number",
+            maxFixed: 2
+        });
+        this._absolutePitchView = new Input({
+            label: "Absolute pitch",
+            type: "number",
+            maxFixed: 2
+        });
+        this._absoluteYawView = new Input({
+            label: "Absolute yaw",
+            type: "number",
+            maxFixed: 2
+        });
+        this._absoluteRollView = new Input({
+            label: "Absolute roll",
+            type: "number",
+            maxFixed: 2
+        });
+        this._scaleView = new Input({
+            label: "Scale",
+            type: "number",
+            maxFixed: 2
+        });
+        this._scaleXView = new Input({
+            label: "Scale X",
+            type: "number",
+            maxFixed: 2
+        });
+        this._scaleYView = new Input({
+            label: "Scale Y",
+            type: "number",
+            maxFixed: 2
+        });
+        this._scaleZView = new Input({
+            label: "Scale Z",
+            type: "number",
+            maxFixed: 2
+        });
+        this._groundBtn = new Button({
+            text: "Ground",
+            title: "Put on the ground",
+            name: "ground",
+            classList: ["og-editor-ground_button"]
+        });
+    }
+    render(params) {
+        super.render(params);
+        this._initSceneEvents();
+        let $toolbar = document.createElement("div");
+        $toolbar.classList.add("og-editor_toolbar");
+        this.container?.appendChild($toolbar);
+        let cameraLockBtn = new ToggleButton({
+            classList: ["og-editor_toolbar-button"],
+            icon: ICON_LOCK_BUTTON_SVG,
+            title: "Lock/Unlock camera view"
+        });
+        cameraLockBtn.appendTo($toolbar);
+        cameraLockBtn.events.on("change", (isActive) => {
+            if (isActive) {
+                this.model.lockView();
+            }
+            else {
+                this.model.unlockView();
+            }
+        });
+        this.events.on("visibility", (vis) => {
+            if (!vis) {
+                cameraLockBtn.events.stopPropagation();
+                cameraLockBtn.setActive(false);
+            }
+        });
+        this.events.on("visibility", this._onVisibility);
+        this._relativePositionView.appendTo(this.container);
+        if (this.model.planet) {
+            this._lonView.appendTo(this.container);
+            this._latView.appendTo(this.container);
+            this._heightView.appendTo(this.container);
+        }
+        this._xView.appendTo(this.container);
+        this._yView.appendTo(this.container);
+        this._zView.appendTo(this.container);
+        this._absXView.appendTo(this.container);
+        this._absYView.appendTo(this.container);
+        this._absZView.appendTo(this.container);
+        this._pitchView.appendTo(this.container);
+        this._yawView.appendTo(this.container);
+        this._rollView.appendTo(this.container);
+        this._absolutePitchView.appendTo(this.container);
+        this._absoluteYawView.appendTo(this.container);
+        this._absoluteRollView.appendTo(this.container);
+        this._scaleView.appendTo(this.container);
+        this._scaleXView.appendTo(this.container);
+        this._scaleYView.appendTo(this.container);
+        this._scaleZView.appendTo(this.container);
+        if (this.model.planet) {
+            this._groundBtn.appendTo(this.container);
+        }
+        this._relativePositionView.events.on("change", this._onChangeRelativePosition);
+        this._lonView.events.on("change", this._onChangeLon);
+        this._latView.events.on("change", this._onChangeLat);
+        this._heightView.events.on("change", this._onChangeHeight);
+        this._xView.events.on("change", this._onChangeX);
+        this._yView.events.on("change", this._onChangeY);
+        this._zView.events.on("change", this._onChangeZ);
+        this._absXView.events.on("change", this._onChangeAbsoluteX);
+        this._absYView.events.on("change", this._onChangeAbsoluteY);
+        this._absZView.events.on("change", this._onChangeAbsoluteZ);
+        this._pitchView.events.on("change", this._onChangePitch);
+        this._yawView.events.on("change", this._onChangeYaw);
+        this._rollView.events.on("change", this._onChangeRoll);
+        this._absolutePitchView.events.on("change", this._onChangeAbsolutePitch);
+        this._absoluteYawView.events.on("change", this._onChangeAbsoluteYaw);
+        this._absoluteRollView.events.on("change", this._onChangeAbsoluteRoll);
+        this._scaleView.events.on("change", this._onChangeScale);
+        this._scaleXView.events.on("change", this._onChangeScaleX);
+        this._scaleYView.events.on("change", this._onChangeScaleY);
+        this._scaleZView.events.on("change", this._onChangeScaleZ);
+        this._groundBtn.appendTo(this.container);
+        this._groundBtn.events.on("click", this._onGround);
+        return this;
+    }
+    remove() {
+        super.remove();
+        this._clearSceneEvents();
+    }
+    _initSceneEvents() {
+        this.model.events.on("select", this._onSelect);
+        this.model.events.on("unselect", this._onUnselect);
+        this.model.events.on("position", this._onPosition);
+        this.model.events.on("pitch", this._onPitch);
+        this.model.events.on("yaw", this._onYaw);
+        this.model.events.on("roll", this._onRoll);
+    }
+    _clearSceneEvents() {
+        this.model.events.off("select", this._onSelect);
+        this.model.events.off("unselect", this._onUnselect);
+        this.model.events.off("position", this._onPosition);
+        this.model.events.off("pitch", this._onPitch);
+        this.model.events.off("yaw", this._onYaw);
+        this.model.events.off("roll", this._onRoll);
+    }
+    _refresh(entity) {
+        if (!entity.parent) {
+            this._relativePositionView.disabled = true;
+        }
+        else {
+            this._relativePositionView.disabled = false;
+        }
+        //this._relativePositionView.stopPropagation();
+        this._relativePositionView.checked = entity.relativePosition;
+        let ll = entity.getLonLat();
+        this._lonView.stopPropagation();
+        this._latView.stopPropagation();
+        this._heightView.stopPropagation();
+        this._lonView.value = ll.lon;
+        this._latView.value = ll.lat;
+        this._heightView.value = ll.height;
+        let cart = entity.getCartesian();
+        this._xView.stopPropagation();
+        this._yView.stopPropagation();
+        this._zView.stopPropagation();
+        this._xView.value = cart.x;
+        this._yView.value = cart.y;
+        this._zView.value = cart.z;
+        cart = entity.getAbsoluteCartesian();
+        this._absXView.stopPropagation();
+        this._absYView.stopPropagation();
+        this._absZView.stopPropagation();
+        this._absXView.value = cart.x;
+        this._absYView.value = cart.y;
+        this._absZView.value = cart.z;
+        this._pitchView.stopPropagation();
+        this._yawView.stopPropagation();
+        this._rollView.stopPropagation();
+        this._pitchView.value = entity.getPitch();
+        this._yawView.value = entity.getYaw();
+        this._rollView.value = entity.getRoll();
+        this._absolutePitchView.stopPropagation();
+        this._absoluteYawView.stopPropagation();
+        this._absoluteRollView.stopPropagation();
+        this._absolutePitchView.value = entity.getAbsolutePitch();
+        this._absoluteYawView.value = entity.getAbsoluteYaw();
+        this._absoluteRollView.value = entity.getAbsoluteRoll();
+        this._scaleView.stopPropagation();
+        let scl = entity.getScale();
+        if ((scl.x === scl.y) && (scl.y === scl.z)) {
+            this._scaleView.value = scl.x;
+        }
+        else {
+            this._scaleView.value = 1;
+        }
+        this._scaleXView.stopPropagation();
+        this._scaleYView.stopPropagation();
+        this._scaleZView.stopPropagation();
+        this._scaleXView.value = scl.x;
+        this._scaleYView.value = scl.y;
+        this._scaleZView.value = scl.z;
+    }
+    hide() {
+        super.hide();
+        this.model.events.stopPropagation();
+        this.model.unselect();
+    }
+}

package/lib/js/control/geoObjectEditor/GeoObjectEditorScene.d.ts

@@ -1,12 +1,20 @@
 import { EventsHandler } from '../../Events';
 import { Planet } from "../../scene/Planet";
 import { RenderNode } from '../../scene/RenderNode';
-import { Vector } from '../../layer/Vector';
 import { Vec2 } from '../../math/Vec2';
+import { Vec3 } from '../../math/Vec3';
+import { Quat } from '../../math/Quat';
 import { IMouseState } from "../../renderer/RendererEvents";
 import { Ellipsoid } from "../../ellipsoid/Ellipsoid";
+import { Entity } from "../../entity/Entity";
+import { MoveAxisEntity } from "./MoveAxisEntity";
+import { MovePlaneEntity } from "./MovePlaneEntity";
+import { RotateEntity } from "./RotateEntity";
+import { AxisTrackEntity } from "./AxisTrackEntity";
+import { EntityCollection } from "../../entity/EntityCollection";
 export interface IGeoObjectEditorSceneParams {
     planet?: Planet;
+    name?: string;
 }
 type GeoObjectSceneEventsList = [
     "mousemove",
@@ -33,26 +41,87 @@ type GeoObjectSceneEventsList = [
     "touchend",
     "doubletouch",
     "touchleave",
-    "touchenter"
+    "touchenter",
+    "select",
+    "unselect",
+    "change",
+    "position",
+    "pitch",
+    "yaw",
+    "roll",
+    "scale"
 ];
 declare class GeoObjectEditorScene extends RenderNode {
     events: EventsHandler<GeoObjectSceneEventsList>;
     protected _planet: Planet | null;
     protected _startPos: Vec2 | null;
     protected _startClick: Vec2;
-    protected _axisLayer: Vector;
-    protected _rotLayer: Vector;
+    protected _moveLayer: EntityCollection;
+    protected _planeLayer: EntityCollection;
+    protected _rotateLayer: EntityCollection;
+    protected _axisTrackLayer: EntityCollection;
+    protected _selectedEntity: Entity | null;
+    protected _selectedEntityCart: Vec3;
+    protected _selectedEntityPitch: number;
+    protected _selectedEntityYaw: number;
+    protected _selectedEntityRoll: number;
+    protected _clickPos: Vec2;
+    protected _axisEntity: MoveAxisEntity;
+    protected _planeEntity: MovePlaneEntity;
+    protected _rotateEntity: RotateEntity;
+    protected _axisTrackEntity: AxisTrackEntity;
+    protected _selectedMove: string | null;
+    protected _ops: Record<string, (mouseState: IMouseState) => void>;
+    protected _axisTrackVisibility: boolean;
     constructor(options?: IGeoObjectEditorSceneParams);
+    get planet(): Planet | null;
+    bindPlanet(planet: Planet): void;
     init(): void;
     onremove(): void;
-    _activate(): void;
-    protected _deactivate(): void;
-    protected _onLUp: () => void;
+    protected _addAxisLayers(): void;
+    protected _onAxisLayerMouseEnter: (e: IMouseState) => void;
+    protected _onAxisLayerMouseLeave: (e: IMouseState) => void;
+    protected _navActivate(): void;
+    protected _navDeactivate(): void;
+    protected _onAxisLayerLUp: (e: IMouseState) => void;
+    protected _onAxisLayerLDown: (e: IMouseState) => void;
+    protected _onPlaneLayerMouseEnter: (e: IMouseState) => void;
+    protected _onPlaneLayerMouseLeave: (e: IMouseState) => void;
+    protected _onPlaneLayerLUp: (e: IMouseState) => void;
+    protected _onPlaneLayerLDown: (e: IMouseState) => void;
+    protected _onRotateLayerMouseEnter: (e: IMouseState) => void;
+    protected _onRotateLayerMouseLeave: (e: IMouseState) => void;
+    protected _onRotateLayerLUp: (e: IMouseState) => void;
+    protected _onRotateLayerLDown: (e: IMouseState) => void;
+    protected _onMouseMove: (e: IMouseState) => void;
+    protected _removeAxisLayers(): void;
+    activate(): void;
+    protected deactivate(): void;
+    protected _setAxisTrackVisibility(visibility: boolean): void;
     setVisibility(visibility: boolean): void;
+    readyToEdit(entity: Entity): boolean;
+    select(entity: Entity): void;
+    unselect(): void;
     protected _onLclick: (e: IMouseState) => void;
-    protected _onMouseMove: (e: IMouseState) => void;
     clear(): void;
     frame(): void;
-    get ellipsoid(): Ellipsoid | null;
+    protected get _ellipsoid(): Ellipsoid | null;
+    protected _moveX: (e: IMouseState) => void;
+    protected _moveY: (e: IMouseState) => void;
+    protected _moveZ: (e: IMouseState) => void;
+    protected _moveXZ: (e: IMouseState) => void;
+    protected _moveXY: (e: IMouseState) => void;
+    protected _moveZY: (e: IMouseState) => void;
+    getFrameRotation(cartesian: Vec3): Quat;
+    protected _rotatePitch: (e: IMouseState) => void;
+    protected _rotateYaw: (e: IMouseState) => void;
+    protected _rotateRoll: (e: IMouseState) => void;
+    protected _scale: (e: IMouseState) => void;
+    protected _scaleX: (e: IMouseState) => void;
+    protected _scaleY: (e: IMouseState) => void;
+    protected _scaleZ: (e: IMouseState) => void;
+    getSelectedEntity(): Entity | null;
+    lockView(): void;
+    unlockView(): void;
 }
 export { GeoObjectEditorScene };