@realsee/dnalogel 2.0.0-alpha.39 → 2.0.0-alpha.41

package/dist/index.js

@@ -405,7 +405,7 @@ const CSS3DRenderPlugin = (five) => {
     };
 };
 
-function createLine(point1, point2, color = new THREE.Vector3(1, 1, 1), dashed = false) {
+function createLine$1(point1, point2, color = new THREE.Vector3(1, 1, 1), dashed = false) {
     const line$1 = new line.Line(point1, point2);
     line$1.setMaterial({ dashed, color, linewidth: 1 });
     line$1.remove(line$1.points);
@@ -441,7 +441,7 @@ const PanoCursorRaycasterPlugin = (five) => {
         const helperCenterPoint = movePointTowardsCamera(point, fixDistance);
         const p = helperCenterPoint;
         const pointAxesHelperMesh = new THREE.Group();
-        pointAxesHelperMesh.add(createLine(new THREE.Vector3(p.x + halfLength, p.y, p.z), new THREE.Vector3(p.x - halfLength, p.y, p.z), new THREE.Vector3(1, 0, 0)), createLine(new THREE.Vector3(p.x, p.y + halfLength, p.z), new THREE.Vector3(p.x, p.y - halfLength, p.z), new THREE.Vector3(0, 1, 0)), createLine(new THREE.Vector3(p.x, p.y, p.z + halfLength), new THREE.Vector3(p.x, p.y, p.z - halfLength), new THREE.Vector3(0, 0, 1)));
+        pointAxesHelperMesh.add(createLine$1(new THREE.Vector3(p.x + halfLength, p.y, p.z), new THREE.Vector3(p.x - halfLength, p.y, p.z), new THREE.Vector3(1, 0, 0)), createLine$1(new THREE.Vector3(p.x, p.y + halfLength, p.z), new THREE.Vector3(p.x, p.y - halfLength, p.z), new THREE.Vector3(0, 1, 0)), createLine$1(new THREE.Vector3(p.x, p.y, p.z + halfLength), new THREE.Vector3(p.x, p.y, p.z - halfLength), new THREE.Vector3(0, 0, 1)));
         five.scene.add(pointAxesHelperMesh);
         five.needsRender = true;
         // 清理函数
@@ -9937,7 +9937,7 @@ const lightLineOpts = {
     pointsRenderOrder: 10,
 };
 
-function creatLine(start, end, opts) {
+function createLine(start, end, opts) {
     var _a, _b, _c, _d, _e;
     const lineWidth = (_a = opts === null || opts === void 0 ? void 0 : opts.lineWidth) !== null && _a !== void 0 ? _a : 2;
     const lineColor = (_b = opts === null || opts === void 0 ? void 0 : opts.lineColor) !== null && _b !== void 0 ? _b : new THREE.Color(0xffffff);
@@ -9960,10 +9960,10 @@ function creatLine(start, end, opts) {
         pointMaterial.map = opts.pointTexture;
     return line$1;
 }
-function creatLineMesh(line, type) {
+function createLineMesh(line, type) {
     const [point, anotherPoint] = line.points;
     const opts = type === 'light' ? lightLineOpts : normalLineOpts;
-    const fiveLine = creatLine(point.position, anotherPoint.position, opts);
+    const fiveLine = createLine(point.position, anotherPoint.position, opts);
     fiveLine.name = 'normalLine_' + line.id;
     return fiveLine;
 }
@@ -9975,7 +9975,7 @@ function isNDCPointInScreen(ndcPoint) {
     return true;
 }
 
-function creatContentDom() {
+function createContentDom() {
     const contentDom = document.createElement('div');
     contentDom.setAttribute('style', `backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);`);
     contentDom.style.padding = '3px 6px';
@@ -10003,7 +10003,7 @@ function createContainerDom(line) {
     containerDom.style.transformOrigin = 'left top';
     return containerDom;
 }
-function creatDistanceItem(props) {
+function createDistanceItem(props) {
     function handleClick() {
         var _a;
         // 线被选中时才高亮，外部手动触发高亮
@@ -10077,7 +10077,7 @@ function creatDistanceItem(props) {
     }
     const { line } = props;
     const lineID = line.id;
-    const contentDom = creatContentDom();
+    const contentDom = createContentDom();
     const containerDom = createContainerDom(line);
     const userDistanceItem = props.userDistanceItem;
     const ndcPosition = new THREE.Vector3(0, 0, 0);
@@ -10162,9 +10162,9 @@ class Line {
             throw new Error('无效的线段, 一个点无法构成线段');
         this.hook = new five.Subscribe();
         this.points = [point, anotherPoint];
-        this.mesh = creatLineMesh(this, 'normal');
-        this.lightMesh = creatLineMesh(this, 'light');
-        this.distanceItem = creatDistanceItem({
+        this.mesh = createLineMesh(this, 'normal');
+        this.lightMesh = createLineMesh(this, 'light');
+        this.distanceItem = createDistanceItem({
             line: this,
             clickCallback: () => this.hook.emit('selected', this),
             userDistanceItem: this.model.params.userDistanceItemCreator
@@ -10877,6 +10877,227 @@ class EditController extends BaseController {
     }
 }
 
+/**
+ * 获取一点对于线段上最近的一点，
+ * 如果可以是过直线垂线的垂足，不行的话取线段的两端
+ * @param point
+ * @param linePoints
+ * @return
+ */
+function closestPointOnLine(point, linePoints) {
+    const tA = point.x - linePoints[0].x;
+    const tB = point.y - linePoints[0].y;
+    const tC = linePoints[1].x - linePoints[0].x;
+    const tD = linePoints[1].y - linePoints[0].y;
+    // 设线段为 AB 线段，线段外一点为 P
+    // tDot = AP 向量与 AB 向量乘积，tLenSq 为 |AB|平方。
+    // tParam 是 AP 向量在 AB 向量投影向量 AC 与 AB 向量的比。
+    const tDot = tA * tC + tB * tD;
+    const tLenSq = tC * tC + tD * tD;
+    const tParam = tDot / tLenSq;
+    let tXx, tYy;
+    if (tParam < 0 || samePointAt(linePoints[0], linePoints[1])) {
+        tXx = linePoints[0].x;
+        tYy = linePoints[0].y;
+    }
+    else if (tParam > 1) {
+        tXx = linePoints[1].x;
+        tYy = linePoints[1].y;
+    }
+    else {
+        tXx = linePoints[0].x + tParam * tC;
+        tYy = linePoints[0].y + tParam * tD;
+    }
+    return new THREE.Vector2(tXx, tYy);
+}
+/**
+ * 检查两个点是否位置相同
+ * point: { x: number, y: number }
+ * @param  point1
+ * @param  point2
+ * @return
+ */
+function samePointAt(point1, point2) {
+    return point1.x === point2.x && point1.y === point2.y;
+}
+
+function findAssociatedLines(line) {
+    // 找跟这个线段相邻的线
+    const mergeNextLine = (point, nextIndex, target) => {
+        const nextLine = point.lines.find((line) => {
+            const pointIndex = line.points.findIndex(({ id }) => id === point.id);
+            if (pointIndex === nextIndex)
+                return false;
+            return true;
+        });
+        if (!nextLine)
+            return target;
+        const nextPoint = nextLine.points[nextIndex];
+        if (!nextPoint)
+            return target;
+        return mergeNextLine(nextPoint, nextIndex, target.concat(nextLine));
+    };
+    const rightLines = mergeNextLine(line.points[0], 1, []);
+    const leftLines = mergeNextLine(line.points[0], 0, []);
+    const lines = rightLines.concat(leftLines);
+    return lines;
+}
+
+class ViewController extends BaseController {
+    constructor(params) {
+        super(params);
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'view'
+        });
+        Object.defineProperty(this, "highlightedLines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "hammer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (raycaster) => {
+                // 不存在线
+                if (this.model.lines.length === 0)
+                    return;
+                const [target] = this.five.model.intersectRaycaster(raycaster);
+                // 点击射线与模型没有交点
+                if (!target)
+                    return;
+                const camera = this.five.camera;
+                const ndcTarget = target.point.clone().project(camera);
+                const screenWidth = this.container.clientWidth;
+                const screenHeight = this.container.clientHeight;
+                const targetScreenPosition = new THREE.Vector2(ndcTarget.x * screenWidth, ndcTarget.y * screenHeight);
+                // 把线的端点全部映射到屏幕上，过滤掉不在视野内的线，同时乘以屏幕宽 & 高
+                const screenLines = this.model.lines
+                    .map((line) => {
+                    const [startPoint, endPoint] = line.points;
+                    const ndcStartPoint = startPoint.position.clone().project(camera);
+                    const ndcEndPoint = endPoint.position.clone().project(camera);
+                    if (!isNDCPointInScreen(ndcStartPoint) && !isNDCPointInScreen(ndcEndPoint))
+                        return null;
+                    const startScreenPosition = new THREE.Vector2(ndcStartPoint.x * screenWidth, ndcStartPoint.y * screenHeight);
+                    const endScreenPosition = new THREE.Vector2(ndcEndPoint.x * screenWidth, ndcEndPoint.y * screenHeight);
+                    return { id: line.id, points: [startScreenPosition, endScreenPosition] };
+                })
+                    .filter((line) => !!line);
+                if (screenLines.length === 0)
+                    return;
+                // 找这些线距离鼠标点击位置最近的线
+                const distanceLines = screenLines
+                    .map((line) => {
+                    const closestPoint = closestPointOnLine(targetScreenPosition, line.points);
+                    return { id: line.id, distance: closestPoint.distanceTo(targetScreenPosition) };
+                })
+                    .sort((a, b) => a.distance - b.distance);
+                const closestScreenLine = distanceLines[0];
+                const closestLine = closestScreenLine.distance > 20
+                    ? undefined
+                    : this.model.lines.find(({ id }) => id === closestScreenLine.id);
+                if (this.highlightedLines.length > 0 && !closestLine) {
+                    this.clearHighlightLines();
+                    return false;
+                }
+                if (closestLine) {
+                    this.chooseLine(closestLine);
+                    return false;
+                }
+            }
+        });
+        Object.defineProperty(this, "chooseLine", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (line) => {
+                const highlightLines = findAssociatedLines(line);
+                this.highlightLines(highlightLines);
+                this.five.needsRender = true;
+                this.hook.emit('selectedChange', highlightLines.map((line) => line.toCompletelyJson()));
+            }
+        });
+        Object.defineProperty(this, "lineRemoved", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (line) => {
+                this.removeLine(line);
+                // TODO: 这个逻辑不太好，改进一下
+                this.hook.emit('selectedChange', this.model.lines.filter((line) => line.selected).map((line) => line.toCompletelyJson()));
+            }
+        });
+        Object.defineProperty(this, "onCameraUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.updateDistanceUI();
+            }
+        });
+        this.model.lines.forEach((line) => {
+            line.distanceItem.appendTo(this.container);
+            line.distanceItem.update(this.five);
+            line.hook.on('selected', this.chooseLine);
+            this.group.add(line.mesh);
+        });
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            const hammer = new Hammer__default["default"](fiveElement);
+            this.hammer = hammer;
+        }
+        this.model.hook.on('lineRemoved', this.lineRemoved);
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsTapGesture', this.wantsTapGesture);
+        this.five.needsRender = true;
+    }
+    dispose() {
+        var _a;
+        super.dispose();
+        this.model.hook.off('lineRemoved', this.lineRemoved);
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsTapGesture', this.wantsTapGesture);
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', []);
+        (_a = this.hammer) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    highlightLine(line) {
+        if (line.selected)
+            return;
+        line.selected = true;
+        this.group.add(line.lightMesh);
+        line.distanceItem.highlight();
+        this.five.needsRender = true;
+    }
+    clearHighlightLines() {
+        if (this.group.children.length === 0)
+            return;
+        this.model.lines.forEach((line) => {
+            line.selected = false;
+            line.distanceItem.unHighlight();
+            this.group.remove(line.lightMesh);
+        });
+        this.highlightedLines = [];
+        this.five.needsRender = true;
+    }
+    highlightLines(lines) {
+        this.clearHighlightLines();
+        this.highlightedLines = lines;
+        lines.forEach((line) => this.highlightLine(line));
+    }
+}
+
 const svg = `
 <svg class="fpm__delete-icon" width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
@@ -11081,50 +11302,6 @@ class DeleteDom {
     }
 }
 
-/**
- * 获取一点对于线段上最近的一点，
- * 如果可以是过直线垂线的垂足，不行的话取线段的两端
- * @param point
- * @param linePoints
- * @return
- */
-function closestPointOnLine(point, linePoints) {
-    const tA = point.x - linePoints[0].x;
-    const tB = point.y - linePoints[0].y;
-    const tC = linePoints[1].x - linePoints[0].x;
-    const tD = linePoints[1].y - linePoints[0].y;
-    // 设线段为 AB 线段，线段外一点为 P
-    // tDot = AP 向量与 AB 向量乘积，tLenSq 为 |AB|平方。
-    // tParam 是 AP 向量在 AB 向量投影向量 AC 与 AB 向量的比。
-    const tDot = tA * tC + tB * tD;
-    const tLenSq = tC * tC + tD * tD;
-    const tParam = tDot / tLenSq;
-    let tXx, tYy;
-    if (tParam < 0 || samePointAt(linePoints[0], linePoints[1])) {
-        tXx = linePoints[0].x;
-        tYy = linePoints[0].y;
-    }
-    else if (tParam > 1) {
-        tXx = linePoints[1].x;
-        tYy = linePoints[1].y;
-    }
-    else {
-        tXx = linePoints[0].x + tParam * tC;
-        tYy = linePoints[0].y + tParam * tD;
-    }
-    return new THREE.Vector2(tXx, tYy);
-}
-/**
- * 检查两个点是否位置相同
- * point: { x: number, y: number }
- * @param  point1
- * @param  point2
- * @return
- */
-function samePointAt(point1, point2) {
-    return point1.x === point2.x && point1.y === point2.y;
-}
-
 function ndc2Screen(ndcPosition, containerSize) {
     const left = ((ndcPosition.x + 1) / 2) * containerSize.width;
     const top = (-(ndcPosition.y - 1) / 2) * containerSize.height;
@@ -11157,28 +11334,6 @@ function findClosestPoint(five, points, tapPoint, maxDistance) {
     return ndcPoints[0];
 }
 
-function findAssociatedLines(line) {
-    // 找跟这个线段相邻的线
-    const mergeNextLine = (point, nextIndex, target) => {
-        const nextLine = point.lines.find((line) => {
-            const pointIndex = line.points.findIndex(({ id }) => id === point.id);
-            if (pointIndex === nextIndex)
-                return false;
-            return true;
-        });
-        if (!nextLine)
-            return target;
-        const nextPoint = nextLine.points[nextIndex];
-        if (!nextPoint)
-            return target;
-        return mergeNextLine(nextPoint, nextIndex, target.concat(nextLine));
-    };
-    const rightLines = mergeNextLine(line.points[0], 1, []);
-    const leftLines = mergeNextLine(line.points[0], 0, []);
-    const lines = rightLines.concat(leftLines);
-    return lines;
-}
-
 class WatchController extends BaseController {
     constructor(params) {
         super(params);
@@ -11452,6 +11607,7 @@ class WatchController extends BaseController {
         super.dispose();
         this.deleteDom.dispose();
         this.model.hook.off('lineRemoved', this.lineRemoved);
+        this.model.lines.forEach((line) => line.hook.off('selected', this.chooseLine));
         this.five.off('cameraUpdate', this.onCameraUpdate);
         this.five.off('wantsPanGesture', this.wantsPanGesture);
         this.five.off('wantsTapGesture', this.wantsTapGesture);
@@ -13210,6 +13366,7 @@ class MeasureController {
                     return new Error('不支持切换的Mode');
                 (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
                 const controllerMap = {
+                    View: ViewController,
                     Watch: WatchController,
                     Edit: EditController,
                 };
@@ -15605,7 +15762,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (235:2) {#if itemLabelItem.visible}
+// (234:2) {#if itemLabelItem.visible}
 function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
@@ -15649,7 +15806,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (234:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (233:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let if_block_anchor;
@@ -15872,8 +16029,6 @@ function instance($$self, $$props, $$invalidate) {
 	};
 
 	const getFormatedItemLabels = (five$1, labels) => {
-		console.log(labels);
-
 		// 计算位置 & 可见性
 		const newLabels = labels.map(label => {
 			// 不在绑定点位则直接不可见