From 0f8eba018bece207320619eec1d160cb40fbf046 Mon Sep 17 00:00:00 2001 From: Army Date: Tue, 14 Jan 2025 15:20:45 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20dsp=E5=9D=90=E6=A0=87=E5=8A=A0?= =?UTF-8?q?=E5=9B=9EPoint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/PointPanel.ts | 92 +++++++++++++++++++-------------------- src/format/index.ts | 12 ++--- src/tools/polyline.ts | 54 +++++++++++++++-------- 3 files changed, 85 insertions(+), 73 deletions(-) diff --git a/src/control/PointPanel.ts b/src/control/PointPanel.ts index 875369aa..4e3fa9dd 100644 --- a/src/control/PointPanel.ts +++ b/src/control/PointPanel.ts @@ -9,7 +9,7 @@ import { CURVE_MODE } from '../style/define'; import { Point } from '../format'; import { clone } from '../util/type'; import PointCommand from '../history/PointCommand'; -import { getPointsAbsByDsp, getPointsDspCoords } from '../tools/polyline'; +import { getPointsAbsByDsp, getPointsDspByAbs } from '../tools/polyline'; import { toPrecision } from '../math'; const html = ` @@ -43,15 +43,10 @@ const html = ` class PointPanel extends Panel { panel: HTMLElement; node?: Polyline | ShapeGroup; - xs: number[]; - ys: number[]; constructor(root: Root, dom: HTMLElement, listener: Listener) { super(root, dom, listener); - this.xs = []; - this.ys = []; - const panel = this.panel = document.createElement('div'); panel.className = 'point-panel'; panel.style.display = 'none'; @@ -162,15 +157,15 @@ class PointPanel extends Panel { } } if (node instanceof Polyline) { - let points = node.props.points; - // 激活的顶点或者全部 - if (listener.geometry.idx.length) { - points = listener.geometry.idx.map(i => points[i]); - } - const arr = isX ? this.xs : this.ys; - listener.geometry.idx.forEach((item, i) => { + const points = listener.geometry.idx.map(i => node.props.points[i]); + points.forEach((item, i) => { if (isInput) { - arr[i] = value; + if (isX) { + item.dspX = value; + } + else { + item.dspY = value; + } if (!i) { if (isX) { x.placeholder = ''; @@ -187,7 +182,7 @@ class PointPanel extends Panel { d = value; } else { - d = value - arr[i]; + d = value - item.dspX!; } } else { @@ -195,7 +190,7 @@ class PointPanel extends Panel { d = value; } else { - d = value - arr[i]; + d = value - item.dspY!; } } if (listener.shiftKey) { @@ -214,14 +209,23 @@ class PointPanel extends Panel { d = -0.1; } } - arr[i] += d; + if (isX) { + item.dspX! += d; + item.dspFx! += d; + item.dspTx! += d; + } + else { + item.dspY! += d; + item.dspFy! += d; + item.dspTy! += d; + } if (!i) { if (isX) { if (x.placeholder) { x.value = ''; } else { - x.value = toPrecision(arr[i]).toString(); + x.value = toPrecision(item.dspX!).toString(); } } else { @@ -229,23 +233,13 @@ class PointPanel extends Panel { y.value = ''; } else { - y.value = toPrecision(arr[i]).toString(); + y.value = toPrecision(item.dspY!).toString(); } } } } }); - const dsp = arr.map((item, i) => { - return { x: this.xs[i], y: this.ys[i] }; - }); - const abs = getPointsAbsByDsp(node, dsp); - const { width, height } = node; - points.forEach((item, i) => { - item.absX = abs[i].x; - item.absY = abs[i].y; - item.x = item.absX / width; - item.y = item.absY / height; - }); + getPointsAbsByDsp(node, points); } node.refresh(); listener.geometry.updateVertex(node); @@ -377,15 +371,10 @@ class PointPanel extends Panel { if (this.silence) { return; } + this.updateCoords(idx); + this.updateRange(idx); panel.querySelector('.type.enable')?.classList.remove('enable'); panel.querySelector('.type .cur')?.classList.remove('cur'); - x.value = ''; - x.placeholder = ''; - y.value = ''; - y.placeholder = ''; - range.value = ''; - number.value = ''; - number.placeholder = ''; if (idx.length) { panel.querySelector('.type')?.classList.add('enable'); const node = this.node; @@ -415,8 +404,6 @@ class PointPanel extends Panel { } panel.querySelector(`.type .${t}`)?.classList.add('cur'); } - this.updateCoords(idx); - this.updateRange(idx); } }; @@ -442,23 +429,28 @@ class PointPanel extends Panel { updateCoords(idx: number[]) { const node = this.node; - if (!node || !idx.length) { + if (!node) { return; } const panel = this.panel; const x = panel.querySelector('input.x') as HTMLInputElement; const y = panel.querySelector('input.y') as HTMLInputElement; + if (!idx.length) { + x.value = y.value = ''; + x.placeholder = y.placeholder = ''; + return; + } const xs: number[] = []; const ys: number[] = []; if (node instanceof Polyline) { const points = idx.map(i => node.props.points[i]); - const r = getPointsDspCoords(node, points); - r.forEach(item => { - if (!xs.includes(item.x)) { - xs.push(item.x); + getPointsDspByAbs(node, points); + points.forEach(item => { + if (!xs.includes(item.dspX!)) { + xs.push(item.dspX!); } - if (!ys.includes(item.y)) { - ys.push(item.y); + if (!ys.includes(item.dspY!)) { + ys.push(item.dspY!); } }); } @@ -474,8 +466,6 @@ class PointPanel extends Panel { else { y.value = toPrecision(ys[0]).toString(); } - this.xs = xs; - this.ys = ys; } updateRange(idx: number[]) { @@ -486,6 +476,12 @@ class PointPanel extends Panel { const panel = this.panel; const range = panel.querySelector('input[type="range"]') as HTMLInputElement; const number = panel.querySelector('input.r') as HTMLInputElement; + if (!idx.length) { + range.value = '0'; + number.value = ''; + range.placeholder = number.placeholder = ''; + return; + } const radius: number[] = []; if (node instanceof Polyline) { let points = node.props.points; diff --git a/src/format/index.ts b/src/format/index.ts index b9a6284c..297a3e61 100644 --- a/src/format/index.ts +++ b/src/format/index.ts @@ -289,12 +289,12 @@ export type Point = { absFy?: number; absTx?: number; absTy?: number; - // dspX?: number; // 算上宽高和相对于AP的matrix的值，展示在面板上 - // dspY?: number; - // dspFx?: number; - // dspFy?: number; - // dspTx?: number; - // dspTy?: number; + dspX?: number; // 绝对值和相对于AP的matrix的值，展示在面板上 + dspY?: number; + dspFx?: number; + dspFy?: number; + dspTx?: number; + dspTy?: number; }; export enum TAG_NAME { diff --git a/src/tools/polyline.ts b/src/tools/polyline.ts index 12dbea5e..65ae30f8 100644 --- a/src/tools/polyline.ts +++ b/src/tools/polyline.ts @@ -400,7 +400,6 @@ export function createPolyline( // 框选范围内的顶点 export function getFrameVertexes(node: Polyline, x1: number, y1: number, x2: number, y2: number) { - // console.log(x1, y1, x2, y2); node.buildPoints(); const m = node.matrixWorld; const points = node.props.points; @@ -418,14 +417,14 @@ export function getFrameVertexes(node: Polyline, x1: number, y1: number, x2: num } // 类似node的basicInfo，顶点abs坐标相对于AP的展示坐标 -export function getPointsDspCoords(node: Polyline, points?: Point[]) { +export function getPointsDspByAbs(node: Polyline, points?: Point[]) { const m = getBasicMatrix(node); node.buildPoints(); if (!points) { points = node.props.points; } const { baseX, baseY } = getBaseCoords(node); - return points.map(item => { + points.forEach(item => { const p = calPoint({ x: item.absX! - baseX, y: item.absY! - baseY, @@ -438,32 +437,49 @@ export function getPointsDspCoords(node: Polyline, points?: Point[]) { x: item.absTx! - baseX, y: item.absTy! - baseY, }, m); - return { - x: p.x, - y: p.y, - fx: f.x, - fy: f.y, - tx: t.x, - ty: t.y, - }; + item.dspX = p.x; + item.dspY = p.y; + item.dspFx = f.x; + item.dspFy = f.y; + item.dspTx = t.x; + item.dspTy = t.y; }); + return points; } -export function getPointsAbsByDsp(node: Polyline, points: { x: number, y: number }[]) { +export function getPointsAbsByDsp(node: Polyline, points?: Point[]) { const m = getBasicMatrix(node); + node.buildPoints(); + if (!points) { + points = node.props.points; + } const i = inverse4(m); const { baseX, baseY } = getBaseCoords(node); - return points.map(item => { - const p = calPoint({ x: item.x + baseX, y: item.y + baseY }, i); - return { - x: p.x, - y: p.y, - }; + points.forEach(item => { + const p = calPoint({ + x: item.dspX! + baseX, + y: item.dspY! + baseY, + }, i); + const f = calPoint({ + x: item.dspFx! - baseX, + y: item.dspFy! - baseY, + }, m); + const t = calPoint({ + x: item.dspTx! - baseX, + y: item.dspTy! - baseY, + }, m); + item.absX = p.x; + item.absY = p.y; + item.absFx = f.x; + item.absFy = f.y; + item.absTx = t.x; + item.absTy = t.y; }); + return points; } export default { getFrameVertexes, - getPointsDspCoords, + getPointsDspByAbs, getPointsAbsByDsp, };