mxdraw 0.1.12 → 0.1.13

package/dist/lib/MxModule/MxThreeJS/MxThreeJS.js

@@ -1,283 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-///////////////////////////////////////////////////////////////////////////////
-//版权所有（C）2002-2022，成都梦想凯德科技有限公司。
-//本软件代码及其文档和相关资料归成都梦想凯德科技有限公司,应用包含本软件的程序必须包括以下版权声明
-//此应用程序与成都梦想凯德科技有限公司成协议。通过使用本软件、其文档或相关材料
-///////////////////////////////////////////////////////////////////////////////
-var three_1 = require("three");
-var math_1 = require("../../tools/algorithm/math");
-var formatting_1 = require("../../tools/formatting");
-/**
- * MxThreeJS 模块
- * ##### 使用说明:
- *
- * > 基于three.js实现创建直线对象、加载图片、SVG等功能，以下是使用的流程:
- * - 模块中大部分方法返回的{@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/core/Object3D | THREE.Object3D}类型继承创建的对象都可以通过取点对象{@link MrxDbgUiPrPointClass.value} 得到鼠标对应位置
- * - {@link MrxDbgUiPrPointClass.go}和{@link MrxDbgUiPrPointClass.goWhile}方法监听鼠标点击事件回调中通过
- * - {@link MxDrawObject.addObject} 方法添加到场景{@link MxDrawObject.getScene}中
- * - 最后调用{@link MxFun.updateDisplay} 更新视图显示完成
- *
- * > 提示: 在实际开发中MxThreeJS是配合着{@link MxDrawObject} 和 {@link MrxDbgUiPrPointClass} 完成绘制线段、文字、图片等功能,当然你也可以使用{@link http://www.yanhuangxueyuan.com/threejs/docs/index.html | three.js}来完成MxThreeJS模块的这些工作
- *
- * > 该模块导出库时已实例化为对象，只需要调用实例方法 例如：
- *
- * ```typescript
- * // html
- * <button id="line">line</button>
- *
- * // js
- * import Mx from "mxdraw"
- * import Three from "three"
- * Mx.loadCoreCode().then(()=> {
- *  Mx.MxFun.setMxServer()
- *  Mx.MxFun.createMxObject({
- *    callback(mxDraw, dom) {
- *      document.getElementById("line").onclick = ()=> {
- *       const getPoint = new Mx.MrxDbgUiPrPointClass()
- *       let lastPt, isLine
- *       getPoint.goWhile(()=> {
- *         const pt1 = getPoint.value()
- *         if(isLine) {
- *              const line = Mx.MxThreeJS.createLine(pt1, lastPt, 0xffffff)
- *              const currentDraw = Mx.MxFun.getCurrentDraw()
- *              currentDraw.addObject(line)
- *              Mx.MxFun.updateDisplay()
- *          }
- *          lastPt = pt1.clone()
- *          isLine = !isLine
- *       })
- *      }
- *    }
- * })
- * })
- * ```
- */
-var MxThreeJS = /** @class */ (function () {
-    function MxThreeJS() {
-    }
-    /**
-     * 创建Three.js直线对象。
-     * @param vPt1  {@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/math/Vector3 | THREE.Vector3} 点1
-     * @param vPt2  {@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/math/Vector3 | THREE.Vector3} 点2
-     * @param iColor 颜色Color
-     * @returns  {@link http://www.yanhuangxueyuan.com/threejs/docs/index.html#api/zh/objects/Line |THREE.Line}
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.createLine(new Three.Vector3(1,10,0), new Three.Vector3(1,300,0), 0)
-     * ```
-     */
-    MxThreeJS.prototype.createLine = function (vPt1, vPt2, iColor) {
-        var lineGeometry = new three_1.Geometry();
-        var lineMaterial = new three_1.LineBasicMaterial({ color: iColor });
-        lineGeometry.vertices.push(vPt1, vPt2);
-        return new three_1.Line(lineGeometry, lineMaterial);
-    };
-    /**
-     * 创建Three.js圆对象。
-     * @param mCenterPt 圆中心点
-     * @param dRadius 圆半径
-     * @param iColor 颜色
-     * @returns THREE.Object3D
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.createCircle(new Three.Vector3(1,10,0), 10, 0)
-     * ```
-     */
-    MxThreeJS.prototype.createCircle = function (mCenterPt, dRadius, iColor) {
-        var geometry = new three_1.CircleGeometry(dRadius, 64, 3, 2 * Math.PI);
-        var material = new three_1.LineBasicMaterial({ color: iColor });
-        geometry.vertices.shift();
-        var mEnt = new three_1.LineLoop(geometry, material);
-        mEnt.position.x = mCenterPt.x;
-        mEnt.position.y = mCenterPt.y;
-        mEnt.position.z = mCenterPt.z;
-        return mEnt;
-    };
-    /**
-     * 创建Three.js点对象。
-     * @param mPt 点位置
-     * @param iColor 颜色
-     * @returns THREE.Points
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.createPoint(new Three.Vector3(1,10,0), 0)
-     * ```
-     */
-    MxThreeJS.prototype.createPoint = function (mPt, iColor) {
-        var pointsGeometry = new three_1.Geometry();
-        pointsGeometry.vertices.push(mPt);
-        var pointsMaterial = new three_1.PointsMaterial({ color: iColor, size: 3 });
-        var points = new three_1.Points(pointsGeometry, pointsMaterial);
-        return points;
-    };
-    /**
-     * 创建Three.js 文字
-     * @param message 文字信息
-     * @param pt 位置
-     * @param iSize 文字大小
-     * @param fAngle 旋转角度
-     * @param iColor 颜色
-     * @returns THREE.Sprite
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.creatTextSprite("hello",new Three.Vector3(1,10,0), 90, 60, 0)
-     * ```
-     */
-    MxThreeJS.prototype.creatTextSprite = function (message, pt, iSize, fAngle, iColor) {
-        var textHeight = 256;
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
-        var textWidth = 0;
-        var sFont = (0, formatting_1.formatString)('normal {0}px Arial', '' + textHeight);
-        /* istanbul ignore next */
-        if (context == null) {
-            /* istanbul ignore next */
-            return null;
-        }
-        context.font = sFont;
-        var metrics = context.measureText(message);
-        // 保证纹理的尺寸是2次方。
-        textWidth = (0, math_1.floorPowerOfTwo)(metrics.width) * 2;
-        canvas.width = textWidth;
-        canvas.height = textHeight;
-        context.font = sFont;
-        context.textAlign = 'center';
-        context.textBaseline = 'middle';
-        context.fillStyle = (0, formatting_1.formatString)('rgba({0}, {1}, {2}, 1.0)', ((iColor >> 16) & 0xff) + '', ((iColor >> 8) & 0xff) + '', (iColor & 0xff) + '');
-        //const sColor = formatString('#{0}', iColor.toString(16))
-        context.fillText(message, textWidth / 2, textHeight / 2);
-        var texture = new three_1.Texture(canvas);
-        texture.needsUpdate = true;
-        var material = new three_1.SpriteMaterial({
-            transparent: true,
-            depthTest: false,
-            map: texture
-        });
-        //material.transparent = false;
-        material.rotation = fAngle;
-        var sprite = new three_1.Sprite(material);
-        sprite.scale.set((textWidth / textHeight) * iSize, iSize, 1);
-        sprite.position.set(pt.x, pt.y, pt.z);
-        return sprite;
-    };
-    /**
-     * 根据三角形数组，创建Three.js Mesh
-     * @param points 由三个点组成的数组
-     * @param iColor 颜色
-     * @param opacity 透明度
-     * @returns THREE.Mesh
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.createTriangle(
-     * [new THREE.Vector3(1,2,2),new THREE.Vector3(1,65,4),new THREE.Vector3(12,2,2)],
-     *  0,
-     *  1
-     * )
-     * ```
-     */
-    MxThreeJS.prototype.createTriangle = function (points, iColor, opacity) {
-        if (opacity === void 0) { opacity = 1.0; }
-        if (points.length < 3) {
-            return null;
-        }
-        var iLen = points.length;
-        var geometry = new three_1.Geometry();
-        for (var i = 0; i + 2 < iLen; i += 3) {
-            geometry.vertices.push(points[i]);
-            geometry.vertices.push(points[i + 1]);
-            geometry.vertices.push(points[i + 2]);
-            var face = new three_1.Face3(i, i + 1, i + 2);
-            geometry.faces.push(face);
-        }
-        geometry.computeFaceNormals();
-        geometry.computeVertexNormals();
-        // 如果需要renderOrder管用，必须在Material属性中，加入transparent: true,depthTest:false这两个值才行。
-        var material = new three_1.MeshBasicMaterial({
-            color: iColor,
-            transparent: true,
-            depthTest: false,
-            side: three_1.DoubleSide,
-            opacity: opacity
-        });
-        var mTriangle = new three_1.Mesh(geometry, material);
-        return mTriangle;
-    };
-    /**
-     * 创建连续直线
-     * @param points 由多个点组成的数组
-     * @param iColor 颜色
-     * @returns THREE.Line
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.createLines([new THREE.Vector3(1,2,2),new THREE.Vector3(1,65,4),new THREE.Vector3(12,2,2)], 0)
-     * ```
-     */
-    MxThreeJS.prototype.createLines = function (points, iColor) {
-        var lineGeometry = new three_1.Geometry();
-        lineGeometry.vertices = points;
-        //var lineMaterial = new LineBasicMaterial({ color: iColor,linewidth: 500 });
-        var lineMaterial = new three_1.LineBasicMaterial({ color: iColor });
-        var line = new three_1.Line(lineGeometry, lineMaterial);
-        return line;
-    };
-    /**
-     * 创建虚线
-     * @param points 由多个点组成的数组
-     * @param iColor 颜色
-     * @param dashSize 短划线的大小
-     * @param gapSize 短划线之间的距离
-     * @returns THREE.Line
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.createDashedLines([new THREE.Vector3(1,2,2),new THREE.Vector3(1,65,4),new THREE.Vector3(12,2,2)], 10, 20, 2)
-     * ```
-     */
-    MxThreeJS.prototype.createDashedLines = function (points, iColor, dashSize, gapSize) {
-        var lineGeometry = new three_1.Geometry();
-        lineGeometry.vertices = points;
-        var line = new three_1.Line(lineGeometry, new three_1.LineDashedMaterial({
-            color: iColor,
-            dashSize: dashSize,
-            gapSize: gapSize //短划线之间的距离
-        }));
-        line.computeLineDistances();
-        return line;
-    };
-    /**
-     * 创建Image
-     * @param pos 图片中心点位置,屏幕坐标，屏幕坐标的Y轴向上。坐标原点在左下角.
-     * @param w 图片宽度
-     * @param h 图片高度
-     * @param imageUrlPath 图片URl地址
-     * @param callResult 图片加载完成的回调 回调参数：THREE.Mesh
-     * @returns void
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.createImage(new THREE.Vector3(12,2,2), 10, 20, "../img/icon.png", (mesh)=> {
-     *      console.log(mesh)
-     * })
-     * ```
-     */
-    MxThreeJS.prototype.createImage = function (pos, w, h, imageUrlPath, callResult) { };
-    /**
-     * 加载SVG
-     * @param url SVG路径地址,该函数具有缓存功能，下次加载同样的图片，可以直接返回.
-     * @param color 颜色
-     * @param callResult SVG加载完成的回调 回调参数：THREE.Object3D和Array<THREE.MeshBasicMaterial>
-     * @returns void
-     * @example
-     * ```typescript
-     * Mx.MxThreeJS.loadSVG("../img/icon.svg", 10, 20, 1.5, new THREE.Color(0xff0000), (threeobj, aryMeterial)=> {
-     *      console.log(threeobj, aryMeterial)
-     * })
-     * ```
-     */
-    MxThreeJS.prototype.loadSVG = function (url, color, callResult) {
-        return new Promise(function (resolve) {
-            resolve(null);
-        });
-    };
-    return MxThreeJS;
-}());
-exports.default = MxThreeJS;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var three_1=require("three"),math_1=require("../../tools/algorithm/math"),formatting_1=require("../../tools/formatting"),MxThreeJS=function(){function e(){}return e.prototype.createLine=function(e,t,r){var n=new three_1.Geometry,o=new three_1.LineBasicMaterial({color:r});return n.vertices.push(e,t),new three_1.Line(n,o)},e.prototype.createCircle=function(e,t,r){var n=new three_1.CircleGeometry(t,64,3,2*Math.PI),o=new three_1.LineBasicMaterial({color:r});n.vertices.shift();var i=new three_1.LineLoop(n,o);return i.position.x=e.x,i.position.y=e.y,i.position.z=e.z,i},e.prototype.createPoint=function(e,t){var r=new three_1.Geometry;r.vertices.push(e);var n=new three_1.PointsMaterial({color:t,size:3});return new three_1.Points(r,n)},e.prototype.creatTextSprite=function(e,t,r,n,o){var i,a=document.createElement("canvas"),s=a.getContext("2d"),c=(0,formatting_1.formatString)("normal {0}px Arial","256");if(null==s)return null;s.font=c;var h=s.measureText(e);i=2*(0,math_1.floorPowerOfTwo)(h.width),a.width=i,a.height=256,s.font=c,s.textAlign="center",s.textBaseline="middle",s.fillStyle=(0,formatting_1.formatString)("rgba({0}, {1}, {2}, 1.0)",(o>>16&255)+"",(o>>8&255)+"",(255&o)+""),s.fillText(e,i/2,128);var l=new three_1.Texture(a);l.needsUpdate=!0;var p=new three_1.SpriteMaterial({transparent:!0,depthTest:!1,map:l});p.rotation=n;var u=new three_1.Sprite(p);return u.scale.set(i/256*r,r,1),u.position.set(t.x,t.y,t.z),u},e.prototype.createTriangle=function(e,t,r){if(void 0===r&&(r=1),e.length<3)return null;for(var n=e.length,o=new three_1.Geometry,i=0;i+2<n;i+=3){o.vertices.push(e[i]),o.vertices.push(e[i+1]),o.vertices.push(e[i+2]);var a=new three_1.Face3(i,i+1,i+2);o.faces.push(a)}o.computeFaceNormals(),o.computeVertexNormals();var s=new three_1.MeshBasicMaterial({color:t,transparent:!0,depthTest:!1,side:three_1.DoubleSide,opacity:r});return new three_1.Mesh(o,s)},e.prototype.createLines=function(e,t){var r=new three_1.Geometry;r.vertices=e;var n=new three_1.LineBasicMaterial({color:t});return new three_1.Line(r,n)},e.prototype.createDashedLines=function(e,t,r,n){var o=new three_1.Geometry;o.vertices=e;var i=new three_1.Line(o,new three_1.LineDashedMaterial({color:t,dashSize:r,gapSize:n}));return i.computeLineDistances(),i},e.prototype.createImage=function(e,t,r,n,o){},e.prototype.loadSVG=function(e,t,r){return new Promise(function(e){e(null)})},e}();exports.default=MxThreeJS;

package/dist/lib/MxModule/MxThreeJS/MxThreeJS.mixin.js

@@ -1,146 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var three_1 = require("three");
-// import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'
-var SVGLoader_1 = require("./SVGLoader");
-var three_2 = require("../../tools/three");
-var MxThreeJSSVGData = /** @class */ (function () {
-    function MxThreeJSSVGData() {
-        this.svg = new three_1.Group();
-        this.aryMeterial = [];
-    }
-    return MxThreeJSSVGData;
-}());
-var MxThreeJSBuffer = /** @class */ (function () {
-    function MxThreeJSBuffer() {
-        this.mapSvgUrlToData = new Map();
-    }
-    MxThreeJSBuffer.prototype.loadSVGImp = function (url, color, callResult) {
-        var loader = new SVGLoader_1.SVGLoader();
-        loader.load(url, function (data) {
-            var aryMeterial = [];
-            var paths = data.paths;
-            var group = new three_1.Group();
-            var drawStrokes = false;
-            var drawFillShapes = true;
-            var fillShapesWireframe = false;
-            var strokesWireframe = false;
-            for (var i = 0; i < paths.length; i++) {
-                var path = paths[i];
-                var fillColor = path.userData.style.fill;
-                if (drawFillShapes && fillColor !== undefined && fillColor !== 'none') {
-                    var material = new three_1.MeshBasicMaterial({
-                        color: color ? color : new three_1.Color().setStyle(fillColor),
-                        opacity: path.userData.style.fillOpacity,
-                        transparent: path.userData.style.fillOpacity < 1,
-                        side: three_1.DoubleSide,
-                        depthWrite: false,
-                        wireframe: fillShapesWireframe
-                    });
-                    // const shapes = path.toShapes( true );
-                    var shapes = SVGLoader_1.SVGLoader.createShapes(path);
-                    for (var j = 0; j < shapes.length; j++) {
-                        var shape = shapes[j];
-                        var geometry = new three_1.ShapeBufferGeometry(shape);
-                        var mesh = new three_1.Mesh(geometry, material);
-                        group.add(mesh);
-                    }
-                    aryMeterial.push(material);
-                }
-                var strokeColor = path.userData.style.stroke;
-                if (drawStrokes && strokeColor !== undefined && strokeColor !== 'none') {
-                    var material = new three_1.MeshBasicMaterial({
-                        color: color ? color : new three_1.Color().setStyle(strokeColor),
-                        opacity: path.userData.style.strokeOpacity,
-                        transparent: path.userData.style.strokeOpacity < 1,
-                        side: three_1.DoubleSide,
-                        depthWrite: false,
-                        wireframe: strokesWireframe
-                    });
-                    for (var j = 0, jl = path.subPaths.length; j < jl; j++) {
-                        var subPath = path.subPaths[j];
-                        var geometry = SVGLoader_1.SVGLoader.pointsToStroke(subPath.getPoints(), path.userData.style, 12, 0.001);
-                        if (geometry) {
-                            var mesh = new three_1.Mesh(geometry, material);
-                            group.add(mesh);
-                        }
-                    }
-                    aryMeterial.push(material);
-                }
-            }
-            callResult && callResult(group, aryMeterial);
-        }, undefined, function () {
-            callResult && callResult(null, null);
-        });
-    };
-    MxThreeJSBuffer.prototype.loadSVG = function (url, color, callResult) {
-        var _this = this;
-        var data = this.mapSvgUrlToData.get(url);
-        if (data) {
-            if (callResult) {
-                if (data == null)
-                    callResult(null, null);
-                else
-                    callResult(data.svg.clone(), data.aryMeterial);
-            }
-            return;
-        }
-        else {
-            this.loadSVGImp(url, color, function (group, aryMeterial) {
-                if (group && aryMeterial) {
-                    var data_1 = new MxThreeJSSVGData();
-                    data_1.svg = group;
-                    data_1.aryMeterial = aryMeterial;
-                    _this.mapSvgUrlToData.set(url, data_1);
-                    callResult && callResult(data_1.svg.clone(), data_1.aryMeterial);
-                }
-                else {
-                    _this.mapSvgUrlToData.set(url, null);
-                    callResult && callResult(null, null);
-                }
-            });
-        }
-    };
-    return MxThreeJSBuffer;
-}());
-function default_1(MxThreeJS) {
-    var mxThreeJsBuffer = new MxThreeJSBuffer();
-    MxThreeJS.createImage = function (pos, w, h, imageUrlPath, callResult) {
-        new three_1.TextureLoader().load(imageUrlPath, function (texture) {
-            var geometry = new three_1.PlaneGeometry(w, h);
-            // 测试 transparent: true,打开，renderOrder才管用。
-            var materialTexture = new three_1.MeshLambertMaterial({
-                map: texture,
-                transparent: true,
-                side: three_1.DoubleSide
-            });
-            if (materialTexture.map)
-                materialTexture.map.needsUpdate = true;
-            (0, three_2.setGeometrPostion)(geometry, pos);
-            //var mesh = new Mesh(geometry, material);
-            var mesh = new three_1.Mesh(geometry, materialTexture);
-            mesh.material['depthTest'] = false;
-            //mesh.renderOrder = renderOrder;
-            callResult && callResult(mesh);
-        }, undefined, function (err) {
-            console.log(err);
-            callResult && callResult(null);
-        });
-    };
-    MxThreeJS.loadSVG = function (url, color, callResult) {
-        if (callResult) {
-            mxThreeJsBuffer.loadSVG(url, color, callResult);
-            return new Promise(function (resolve) {
-                resolve(null);
-            });
-        }
-        else {
-            return new Promise(function (resolve) {
-                mxThreeJsBuffer.loadSVG(url, color, function (threeobj) {
-                    resolve(threeobj);
-                });
-            });
-        }
-    };
-}
-exports.default = default_1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var three_1=require("three"),SVGLoader_1=require("./SVGLoader"),three_2=require("../../tools/three"),MxThreeJSSVGData=function(){return function(){this.svg=new three_1.Group,this.aryMeterial=[]}}(),MxThreeJSBuffer=function(){function e(){this.mapSvgUrlToData=new Map}return e.prototype.loadSVGImp=function(e,t,r){(new SVGLoader_1.SVGLoader).load(e,function(e){for(var a=[],n=e.paths,o=new three_1.Group,l=0;l<n.length;l++){var i=n[l],u=i.userData.style.fill;if(void 0!==u&&"none"!==u){for(var s=new three_1.MeshBasicMaterial({color:t||(new three_1.Color).setStyle(u),opacity:i.userData.style.fillOpacity,transparent:i.userData.style.fillOpacity<1,side:three_1.DoubleSide,depthWrite:!1,wireframe:!1}),h=SVGLoader_1.SVGLoader.createShapes(i),f=0;f<h.length;f++){var d=h[f],p=new three_1.ShapeBufferGeometry(d),c=new three_1.Mesh(p,s);o.add(c)}a.push(s)}i.userData.style.stroke}r&&r(o,a)},void 0,function(){r&&r(null,null)})},e.prototype.loadSVG=function(e,t,r){var a=this,n=this.mapSvgUrlToData.get(e);n?r&&(null==n?r(null,null):r(n.svg.clone(),n.aryMeterial)):this.loadSVGImp(e,t,function(t,n){if(t&&n){var o=new MxThreeJSSVGData;o.svg=t,o.aryMeterial=n,a.mapSvgUrlToData.set(e,o),r&&r(o.svg.clone(),o.aryMeterial)}else a.mapSvgUrlToData.set(e,null),r&&r(null,null)})},e}();function default_1(e){var t=new MxThreeJSBuffer;e.createImage=function(e,t,r,a,n){(new three_1.TextureLoader).load(a,function(a){var o=new three_1.PlaneGeometry(t,r),l=new three_1.MeshLambertMaterial({map:a,transparent:!0,side:three_1.DoubleSide});l.map&&(l.map.needsUpdate=!0),(0,three_2.setGeometrPostion)(o,e);var i=new three_1.Mesh(o,l);i.material.depthTest=!1,n&&n(i)},void 0,function(e){console.log(e),n&&n(null)})},e.loadSVG=function(e,r,a){return a?(t.loadSVG(e,r,a),new Promise(function(e){e(null)})):new Promise(function(a){t.loadSVG(e,r,function(e){a(e)})})}}exports.default=default_1;