Skip to content

Commit

Permalink
refactor: dsp坐标加回Point
Browse files Browse the repository at this point in the history
  • Loading branch information
@army8735
army8735 committed Jan 14, 2025
1 parent 2893b5d commit 0f8eba0
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 73 deletions.
92 changes: 44 additions & 48 deletions src/control/PointPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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 = '';
Expand All @@ -187,15 +182,15 @@ class PointPanel extends Panel {
d = value;
}
else {
d = value - arr[i];
d = value - item.dspX!;
}
}
else {
if (y.placeholder) {
d = value;
}
else {
d = value - arr[i];
d = value - item.dspY!;
}
}
if (listener.shiftKey) {
Expand All @@ -214,38 +209,37 @@ 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 {
if (y.placeholder) {
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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -415,8 +404,6 @@ class PointPanel extends Panel {
}
panel.querySelector(`.type .${t}`)?.classList.add('cur');
}
this.updateCoords(idx);
this.updateRange(idx);
}
};

Expand All @@ -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!);
}
});
}
Expand All @@ -474,8 +466,6 @@ class PointPanel extends Panel {
else {
y.value = toPrecision(ys[0]).toString();
}
this.xs = xs;
this.ys = ys;
}

updateRange(idx: number[]) {
Expand All @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions src/format/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
54 changes: 35 additions & 19 deletions src/tools/polyline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand All @@ -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,
};

0 comments on commit 0f8eba0

Please sign in to comment.