@openglobus/og 0.17.2 → 0.18.1

package/src/og/control/drawing/PolygonDrawingScene.js

@@ -1,785 +0,0 @@
-'use strict';
-
-import * as math from "../../math.js";
-import { Entity } from '../../entity/Entity.js';
-import { Events } from '../../Events.js';
-import { Vector } from '../../layer/Vector.js';
-import { Vec2 } from '../../math/Vec2.js';
-import { Object3d } from '../../Object3d.js';
-import { RenderNode } from '../../scene/RenderNode.js';
-import { Vec3 } from '../../math/Vec3.js';
-import { Line3 } from '../../math/Line3.js';
-import { LonLat } from '../../LonLat.js';
-import { Geometry, GeometryType } from "../../entity/Geometry.js";
-
-const POINTER_OBJ3D = Object3d.createCylinder(1, 1, 2.0, 20, 1, true, false, 0, -0.5, 0);
-
-export const NUM_SEGMENTS = 200;
-export const OUTLINE_ALT = 0.3;
-export const COORDINATES_COLOR = "rgb(350, 350, 0)";
-export const CENTER_COLOR = "rgb(0, 350, 50)";
-export const OUTLINE_COLOR = "rgb(0, 350, 50)";
-export const OUTLINE_THICKNESS = 3.5;
-
-export const CORNER_OPTIONS = {
-    scale: 0.5,
-    instanced: true,
-    tag: "corners",
-    color: COORDINATES_COLOR,
-    object3d: POINTER_OBJ3D
-};
-
-export const CENTER_OPTIONS = {
-    scale: 0.4,
-    instanced: true,
-    tag: "centers",
-    color: CENTER_COLOR,
-    object3d: POINTER_OBJ3D
-};
-
-export const OUTLINE_OPTIONS = {
-    thickness: OUTLINE_THICKNESS,
-    color: OUTLINE_COLOR
-}
-
-class PolygonDrawingScene extends RenderNode {
-    constructor(options = {}) {
-        super(options.name);
-
-        this.events = new Events(EVENT_NAMES);
-
-        this._planet = null;
-
-        this._initCoordinates = options.coordinates || [];
-
-        this._pickedCorner = null;
-        this._pickedCenter = null;
-
-        this._startPos = null;
-        this._startClick = new Vec2();
-
-        this._geometryLayer = new Vector();
-
-        //
-        // outline vectors
-        //
-        this._cornerLayer = new Vector("corners", {
-            pickingScale: 3,
-            pickingEnabled: true,
-            polygonOffsetUnits: -5,
-            relativeToGround: true,
-            scaleByDistance: [100, 4000000, 1.0]
-        });
-
-        this._centerLayer = new Vector("centers", {
-            pickingScale: 3,
-            pickingEnabled: true,
-            polygonOffsetUnits: -5,
-            relativeToGround: true,
-            scaleByDistance: [100, 4000000, 1.0]
-        });
-
-        this._outlineLayer = new Vector("outline", {
-            entities: [new Entity({
-                polyline: {
-                    path3v: [],
-                    isClosed: false,
-                    ...OUTLINE_OPTIONS
-                },
-                properties: {
-                    index: 0
-                }
-            })],
-            pickingEnabled: false,
-            polygonOffsetUnits: -5,
-            relativeToGround: true
-        });
-
-        this._outlineLayer.getEntities()[0].polyline.altitude = OUTLINE_ALT;
-
-        //
-        // Ghost cursor pointer
-        //
-        this._ghostCorner = new Entity({
-            geoObject: CORNER_OPTIONS,
-        });
-
-        this._ghostOutlineLayer = new Vector("ghost-pointer", {
-            pickingEnabled: false,
-            polygonOffsetUnits: -5,
-            relativeToGround: true,
-            scaleByDistance: [100, 4000000, 1.0],
-            opacity: 0.5
-        });
-
-        this._showGhostPointer = false;
-
-        this._isStartPoint = false;
-
-        this._insertCornerIndex = -1;
-    }
-
-    get geometryType() {
-        return "Polygon";
-    }
-
-    getCoordinates() {
-        let corners = this._cornerLayer.getEntities();
-        if (corners.length > 0) {
-            return corners.map((c) => {
-                let ll = c.getLonLat();
-                return [ll.lon, ll.lat, ll.height];
-            });
-        } else {
-            return this._initCoordinates;
-        }
-    }
-
-    bindPlanet(planet) {
-        this._planet = planet;
-    }
-
-    init() {
-
-        this._initEvents();
-
-        this._initGhostLayerPointer();
-
-        if (this._initCoordinates.length) {
-            this.setCoordinates(this._initCoordinates);
-        }
-
-        this._planet.addLayer(this._outlineLayer);
-        this._planet.addLayer(this._cornerLayer);
-        this._planet.addLayer(this._centerLayer);
-
-        this.showGhostPointer();
-        this.startNewPoint();
-
-        this._planet.renderer.controls.mouseNavigation.deactivateDoubleClickZoom();
-
-        this._geometryLayer.addTo(this._planet);
-
-        this._onChange_ = this._onChange.bind(this);
-        this.events.on("change", this._onChange_, this);
-    }
-
-    _onChange(e) {
-        if (e.geometryType === "Polygon") {
-            let coords = this.getCoordinates();
-            let entity = new Entity({
-                'geometry': {
-                    'type': e.geometryType,
-                    'coordinates': [coords],
-                    'style': {
-                        'fillColor': "rgba(0,146,247,0.2)"
-                    }
-                }
-            });
-            this._geometryLayer.clear();
-            this._geometryLayer.add(entity);
-        }
-    }
-
-    onremove() {
-        this._clearEvents();
-        this.hideGhostPointer();
-        this.stopNewPoint();
-        this.clear();
-        this._geometryLayer.remove();
-    }
-
-    clear() {
-
-        this._geometryLayer.clear();
-
-        let corners = this._cornerLayer.getEntities();
-
-        let i = corners.length;
-        while (i--) {
-            corners[i].remove();
-        }
-
-        let centers = this._centerLayer.getEntities();
-        i = centers.length;
-        while (i--) {
-            centers[i].remove();
-        }
-
-        let entities = this._outlineLayer.getEntities();
-        i = entities.length;
-        while (i--) {
-            entities[i].polyline.clear();
-            if (i > 0) {
-                entities[i].remove();
-            }
-        }
-
-        this._clearGhostPointer();
-    }
-
-    setCoordinates(coords) {
-        this.clear();
-        for (let i = 0; i < coords.length; i++) {
-            let ci = coords[i];
-            let cart = this._planet.ellipsoid.lonLatToCartesian(new LonLat(ci[0], ci[1], ci[2]));
-            this._appendCart(cart);
-        }
-        this.events.dispatch(this.events.change, this);
-    }
-
-    stopNewPoint() {
-        if (this.renderer) {
-            this.renderer.events.off("ldblclick", this._onMouseDblClick_);
-            this._onMouseDblClick_ = null;
-        }
-    }
-
-    startNewPoint() {
-        this._onMouseDblClick_ = this._onMouseDblClick.bind(this);
-        this.renderer.events.on("ldblclick", this._onMouseDblClick_, this);
-    }
-
-    showGhostPointer() {
-        this._showGhostPointer = true;
-        this._planet.addLayer(this._ghostOutlineLayer);
-        this._insertCornerIndex = this._cornerLayer.getEntities().length;
-    }
-
-    hideGhostPointer() {
-        this._showGhostPointer = false;
-        this._ghostOutlineLayer.remove();
-        this._insertCornerIndex = -1;
-    }
-
-    setGhostPointerPosition(groundPos) {
-        if (groundPos) {
-            this._ghostCorner.setCartesian3v(groundPos);
-            this._updateGhostOutlinePointer(groundPos);
-        }
-    }
-
-    _onCornerMouseEnter(e) {
-        e.renderer.handler.canvas.style.cursor = "pointer";
-        this.hideGhostPointer();
-    }
-
-    _onCornerMouseLeave(e) {
-        e.renderer.handler.canvas.style.cursor = "default";
-        this.showGhostPointer();
-    }
-
-    _onCenterMouseEnter(e) {
-        e.renderer.handler.canvas.style.cursor = "pointer";
-        this.hideGhostPointer();
-    }
-
-    _onCenterMouseLeave(e) {
-        e.renderer.handler.canvas.style.cursor = "default";
-        if (!(this._pickedCenter || this._pickedCorner)) {
-            this.showGhostPointer();
-        }
-    }
-
-    _onLup(e) {
-        this._planet.renderer.controls.mouseNavigation.activate();
-        if (this._pickedCorner || this._pickedCenter) {
-            this.events.dispatch(this.events.change, this);
-            this.setGhostPointerPosition(this._planet.getCartesianFromPixelTerrain(e));
-            this.showGhostPointer();
-            this._pickedCorner = null;
-            this._pickedCenter = null;
-        }
-    }
-
-    _getLdown(e) {
-        this._planet.renderer.controls.mouseNavigation.deactivate();
-        this._startClick.set(e.x, e.y);
-        let coords = e.pickingObject.getCartesian();
-        this._startPos = this._planet.getPixelFromCartesian(coords);
-        return e.pickingObject;
-    }
-
-    _onCornerLdown(e) {
-        this._pickedCorner = this._getLdown(e);
-    }
-
-    _onCenterLdown(e) {
-        this._pickedCenter = this._getLdown(e);
-    }
-
-    _onMouseMove(e) {
-        if (this._pickedCenter) {
-            this._moveCenterPoint();
-        } else if (this._pickedCorner) {
-            this._moveCornerPoint(e);
-        } else {
-            this.setGhostPointerPosition(this._planet.getCartesianFromPixelTerrain(e));
-        }
-    }
-
-    _onCornerLdblclick(e) {
-        this._cornerDblClick = true;
-        let coords = this.getCoordinates();
-        coords.splice(e.pickingObject.layerIndex, 1);
-        this.setCoordinates(coords);
-    }
-
-    _onMouseDblClick(e) {
-
-        if (this._cornerDblClick) {
-            this._cornerDblClick = false;
-            return;
-        }
-
-        if (!this._showGhostPointer) {
-            return;
-        }
-
-        let cart = this._planet.getCartesianFromPixelTerrain(e);
-        if (cart) {
-            this._addNew(cart);
-            if (!this._isStartPoint && this._cornerLayer.getEntities().length > 2) {
-                this._isStartPoint = true;
-                this.events.dispatch(this.events.startpoint, this);
-            }
-            this.events.dispatch(this.events.change, this);
-        }
-    }
-
-    _initEvents() {
-
-        this._onCornerLdblclick_ = this._onCornerLdblclick.bind(this);
-        this._cornerLayer.events.on("ldblclick", this._onCornerLdblclick_, this);
-
-        this._onCornerLdown_ = this._onCornerLdown.bind(this);
-        this._cornerLayer.events.on("ldown", this._onCornerLdown_, this);
-
-        this._onCenterLdown_ = this._onCenterLdown.bind(this);
-        this._centerLayer.events.on("ldown", this._onCenterLdown_, this);
-
-        this._onLup_ = this._onLup.bind(this);
-        this.renderer.events.on("lup", this._onLup_, this);
-
-        this._onMouseMove_ = this._onMouseMove.bind(this);
-        this.renderer.events.on("mousemove", this._onMouseMove_, this);
-
-        this._onCornerMouseEnter_ = this._onCornerMouseEnter.bind(this);
-        this._cornerLayer.events.on("mouseenter", this._onCornerMouseEnter_, this);
-
-        this._onCornerMouseLeave_ = this._onCornerMouseLeave.bind(this);
-        this._cornerLayer.events.on("mouseleave", this._onCornerMouseLeave_, this);
-
-        this._onCenterMouseEnter_ = this._onCenterMouseEnter.bind(this);
-        this._centerLayer.events.on("mouseenter", this._onCenterMouseEnter_, this);
-
-        this._onCenterMouseLeave_ = this._onCenterMouseLeave.bind(this);
-        this._centerLayer.events.on("mouseleave", this._onCenterMouseLeave_, this);
-    }
-
-    _clearEvents() {
-        this._cornerLayer.events.off("ldblclick", this._onCornerLdblclick_);
-        this._onCornerLdblclick_ = null;
-
-        this._cornerLayer.events.off("ldown", this._onCornerLdown_);
-        this._onCornerLdown_ = null;
-
-        this._centerLayer.events.off("ldown", this._onCenterLdown_);
-        this._onCenterLdown_ = null;
-
-        this.renderer.events.off("lup", this._onLup_);
-        this._onLup_ = null;
-
-        this.renderer.events.off("mousemove", this._onMouseMove_);
-        this._onMouseMove_ = null;
-
-        this._cornerLayer.events.off("mouseenter", this._onCornerMouseEnter_);
-        this._onCornerMouseEnter_ = null;
-
-        this._cornerLayer.events.off("mouseleave", this._onCornerMouseLeave_);
-        this._onCornerMouseLeave_ = null;
-
-        this._centerLayer.events.off("mouseenter", this._onCenterMouseEnter_);
-        this._onCenterMouseEnter_ = null;
-
-        this._centerLayer.events.off("mouseleave", this._onCenterMouseLeave_);
-        this._onCenterMouseLeave_ = null;
-    }
-
-    _drawCorners() {
-        let corners = this._cornerLayer.getEntities();
-        for (let i = 0; i < corners.length; i++) {
-            let ai = corners[i];
-            this._checkTerrainCollision(ai);
-        }
-    }
-
-    _drawCenters() {
-        let centers = this._centerLayer.getEntities();
-        for (let i = 0; i < centers.length; i++) {
-            let ai = centers[i];
-            this._checkTerrainCollision(ai);
-        }
-    }
-
-    _drawGhostCorner() {
-        if (this._showGhostPointer) {
-            this._checkTerrainCollision(this._ghostCorner);
-        }
-    }
-
-    frame() {
-        this._drawCorners();
-        this._drawCenters();
-        this._drawGhostCorner();
-    }
-
-    _checkTerrainCollision(entity) {
-        let _tempTerrPoint = new Vec3();
-        let nodes = this._planet._renderedNodes;
-        for (let j = 0; j < nodes.length; j++) {
-            let seg = nodes[j].segment;
-            if (seg && seg._extentLonLat.isInside(entity.getLonLat())) {
-                seg.getEntityTerrainPoint(entity, _tempTerrPoint);
-                entity.setCartesian3v(_tempTerrPoint);
-                break;
-            }
-        }
-    }
-
-    _moveCenterPoint() {
-        let coords = this.getCoordinates(),
-            index = this._pickedCenter.layerIndex + 1,
-            ll = this._pickedCenter.getLonLat();
-        let newCorner = [ll.lon, ll.lat, ll.height];
-
-        coords.splice(index, 0, newCorner);
-
-        this.setCoordinates(coords);
-
-        this._pickedCenter = null;
-
-        this._pickedCorner = this._cornerLayer.getEntities()[index];
-    }
-
-    //
-    // virtual
-    //
-
-    _addNew(cart) {
-        if (this._insertCornerIndex === -1 || this._cornerLayer.getEntities().length < 2) {
-            this._appendCart(cart);
-        } else {
-            let area = this.getCoordinates(),
-                index = this._insertCornerIndex;
-            let ll = this._planet.ellipsoid.cartesianToLonLat(cart);
-            let newCorner = [ll.lon, ll.lat, ll.height];
-            area.splice(index, 0, newCorner);
-            this.clear();
-            this.setCoordinates(area);
-        }
-    }
-
-    _appendCart(cart) {
-        let corners = this._cornerLayer.getEntities();
-
-        let segNum = corners.length - 1;
-        let prevCorn = corners[segNum];
-
-        let corner = new Entity({
-            geoObject: CORNER_OPTIONS,
-        });
-
-        corner.setCartesian3v(cart);
-        corner.addTo(this._cornerLayer);
-        this._checkTerrainCollision(corner);
-
-        if (prevCorn) {
-
-            let firstCart = corners[0].getCartesian(),
-                prevCart = prevCorn.getCartesian();
-
-            let vecPrev = corner.getCartesian().sub(prevCart),
-                vecFirst = corner.getCartesian().sub(firstCart);
-
-            let distPrev = vecPrev.length(),
-                distFirst = vecFirst.length();
-
-            vecPrev.normalize();
-            vecFirst.normalize();
-
-            let prevPath = [],
-                firstPath = [];
-
-            for (let i = 0; i <= NUM_SEGMENTS; i++) {
-                let p = vecPrev.scaleTo(i * distPrev / NUM_SEGMENTS).addA(prevCart);
-                prevPath.push(p);
-
-                let f = vecFirst.scaleTo(i * distFirst / NUM_SEGMENTS).addA(firstCart);
-                firstPath.push(f);
-            }
-
-            this._outlineLayer.getEntities()[0].polyline.setPath3v([firstPath]);
-
-            let entity = new Entity({
-                polyline: {
-                    path3v: [prevPath],
-                    isClosed: false,
-                    properties: {
-                        index: segNum + 1
-                    },
-                    ...OUTLINE_OPTIONS
-                }
-            });
-            entity.polyline.altitude = OUTLINE_ALT;
-            this._outlineLayer.add(entity);
-
-            let centers = this._centerLayer.getEntities();
-            let firstCenter = centers[centers.length - 1];
-
-            let prevCenterCart = vecPrev.scaleTo(distPrev * 0.5).addA(prevCart),
-                firstCenterCart = vecFirst.scaleTo(distFirst * 0.5).addA(firstCart);
-
-            let center = new Entity({
-                geoObject: CENTER_OPTIONS,
-            });
-            center.setCartesian3v(prevCenterCart);
-            center.addTo(this._centerLayer);
-            this._checkTerrainCollision(center);
-
-            //moveToEnd
-            firstCenter.remove();
-            firstCenter.addTo(this._centerLayer);
-
-            firstCenter.setCartesian3v(firstCenterCart);
-
-        } else {
-            let center = new Entity({
-                geoObject: CENTER_OPTIONS,
-            });
-            center.addTo(this._centerLayer);
-        }
-    }
-
-    _clearGhostPointer() {
-        this._ghostOutlineLayer.getEntities()[0].polyline.clear();
-        this._ghostOutlineLayer.getEntities()[1].polyline.clear();
-    }
-
-    _moveCornerPoint(e) {
-        let d = new Vec2(e.x, e.y).sub(this._startClick),
-            p = this._startPos.add(d);
-
-        let groundCoords = this._planet.getCartesianFromPixelTerrain(p);
-
-        if (groundCoords) {
-
-            this._pickedCorner.setCartesian3v(groundCoords);
-
-            let corners = this._cornerLayer.getEntities();
-
-            if (corners.length) {
-                let ind = this._pickedCorner.layerIndex;
-                let size = corners.length;
-
-                let cartPrev = corners[ind === 0 ? (size - 1) : (ind - 1)].getCartesian(),
-                    cartNext = corners[(ind + 1) % size].getCartesian();
-
-                let vecPrev = this._pickedCorner.getCartesian().sub(cartPrev),
-                    vecNext = this._pickedCorner.getCartesian().sub(cartNext);
-
-                let distPrev = vecPrev.length(),
-                    distNext = vecNext.length();
-
-                vecPrev.normalize();
-                vecNext.normalize();
-
-                let pathPrev = [],
-                    pathNext = [];
-
-                for (let i = 0; i <= NUM_SEGMENTS; i++) {
-                    let p = vecPrev.scaleTo(i * distPrev / NUM_SEGMENTS).addA(cartPrev);
-                    pathPrev.push(p);
-
-                    let f = vecNext.scaleTo(i * distNext / NUM_SEGMENTS).addA(cartNext);
-                    pathNext.push(f);
-                }
-
-                let entities = this._outlineLayer.getEntities();
-
-                let prevPolyline = entities[ind].polyline,
-                    nextPolyline = entities[(ind + 1) % size].polyline;
-
-                prevPolyline.setPath3v([pathPrev]);
-                nextPolyline.setPath3v([pathNext]);
-
-                //
-                // Move center points
-                let centers = this._centerLayer.getEntities();
-                let prevCenter = centers[ind === 0 ? (size - 1) : (ind - 1)],
-                    nextCenter = centers[ind];
-
-                let prevCenterCart = vecPrev.scaleTo(distPrev * 0.5).addA(cartPrev),
-                    nextCenterCart = vecNext.scaleTo(distNext * 0.5).addA(cartNext);
-
-                prevCenter.setCartesian3v(prevCenterCart);
-                this._checkTerrainCollision(prevCenter);
-
-                nextCenter.setCartesian3v(nextCenterCart);
-                this._checkTerrainCollision(nextCenter);
-            }
-        }
-    }
-
-    _updateGhostOutlinePointer(groundPos) {
-
-        let corners = this._cornerLayer.getEntities();
-        let size = corners.length;
-
-        if (size > 0) {
-
-            let ind = 0;
-
-            let minDist = math.MAX;
-
-            for (let i = 0; i < size; i++) {
-                let ci = corners[i];
-                let dist = ci.getCartesian().distance(groundPos);
-                if (dist < minDist) {
-                    minDist = dist;
-                    ind = i;
-                }
-            }
-
-            let cCurr = corners[ind].getCartesian(),
-                cNext = corners[(ind + 1) % size].getCartesian(),
-                cPrev = corners[ind === 0 ? (size - 1) : (ind - 1)].getCartesian();
-
-            let nPrev = cPrev.sub(cCurr).normalize(),
-                nNext = cNext.sub(cCurr).normalize(),
-                nGround = groundPos.sub(cCurr).normalize();
-
-            let midVec = nPrev.add(nNext).normalize();
-
-            let toMid = nGround.cross(midVec),
-                up = nPrev.cross(nNext);
-
-            if (toMid.dot(up) > 0) {
-                ind--;
-                if (ind < 0) {
-                    ind = size - 1;
-                }
-            }
-
-            let temp = new Vec3();
-
-            for (let i = 0; i < size; i++) {
-                let side = new Line3(corners[i].getCartesian(), corners[(i + 1) % size].getCartesian());
-                let u = side.getNearestDistancePoint(groundPos, temp);
-                if (u) {
-                    let dist = temp.distance(groundPos);
-                    if (dist < minDist) {
-                        minDist = dist;
-                        ind = i;
-                    }
-                }
-            }
-
-            this._insertCornerIndex = (ind + 1) % size;
-
-            let cartPrev = corners[ind % size].getCartesian(),
-                cartNext = corners[(ind + 1) % size].getCartesian();
-
-            let vecPrev = this._ghostCorner.getCartesian().sub(cartPrev),
-                vecNext = this._ghostCorner.getCartesian().sub(cartNext);
-
-            let distPrev = vecPrev.length(),
-                distNext = vecNext.length();
-
-            vecPrev.normalize();
-            vecNext.normalize();
-
-            let pathPrev = [],
-                pathNext = [];
-
-            for (let i = 0; i <= NUM_SEGMENTS; i++) {
-                let p = vecPrev.scaleTo(i * distPrev / NUM_SEGMENTS).addA(cartPrev);
-                pathPrev.push(p);
-
-                let f = vecNext.scaleTo(i * distNext / NUM_SEGMENTS).addA(cartNext);
-                pathNext.push(f);
-            }
-
-            let entities = this._ghostOutlineLayer.getEntities();
-
-            let prevPolyline = entities[0].polyline,
-                nextPolyline = entities[1].polyline;
-
-            prevPolyline.setPath3v([pathPrev]);
-            nextPolyline.setPath3v([pathNext]);
-        }
-    }
-
-    _initGhostLayerPointer() {
-        this._ghostOutlineLayer.setEntities([
-            new Entity({
-                polyline: {
-                    path3v: [],
-                    isClosed: false,
-                    ...OUTLINE_OPTIONS
-                },
-                properties: {
-                    index: 0
-                }
-            }), new Entity({
-                polyline: {
-                    path3v: [],
-                    isClosed: false,
-                    ...OUTLINE_OPTIONS
-                },
-                properties: {
-                    index: 0
-                }
-            }),
-            this._ghostCorner
-        ]);
-
-        this._ghostOutlineLayer.getEntities()[0].polyline.altitude =
-            this._ghostOutlineLayer.getEntities()[1].polyline.altitude = OUTLINE_ALT;
-    }
-}
-
-const EVENT_NAMES = [
-    "startpoint",
-    "change",
-    "add",
-    "remove",
-    "mousemove",
-    "mouseenter",
-    "mouseleave",
-    "lclick",
-    "rclick",
-    "mclick",
-    "ldblclick",
-    "rdblclick",
-    "mdblclick",
-    "lup",
-    "rup",
-    "mup",
-    "ldown",
-    "rdown",
-    "mdown",
-    "lhold",
-    "rhold",
-    "mhold",
-    "mousewheel",
-    "touchmove",
-    "touchstart",
-    "touchend",
-    "doubletouch",
-    "touchleave",
-    "touchenter"
-];
-
-
-export { PolygonDrawingScene };