From 239ad13924a286656fc3768234fe8205d42d834d Mon Sep 17 00:00:00 2001 From: codetypes Date: Mon, 14 Apr 2025 10:08:56 +0800 Subject: [PATCH] fix layout --- src/components/graph.ts | 2 +- src/components/register-node.ts | 74 ++++++++++++++++++--------------- 2 files changed, 41 insertions(+), 35 deletions(-) diff --git a/src/components/graph.ts b/src/components/graph.ts index 0612881..2bf8c5a 100644 --- a/src/components/graph.ts +++ b/src/components/graph.ts @@ -91,7 +91,7 @@ export class Graph { }, getHeight: ({ data }: { data: NodeData }) => data.size![1], getWidth: ({ data }: { data: NodeData }) => data.size![0], - getVGap: () => 20, + getVGap: () => 10, getHGap: () => 30, }, }); diff --git a/src/components/register-node.ts b/src/components/register-node.ts index 94cbc01..530c413 100644 --- a/src/components/register-node.ts +++ b/src/components/register-node.ts @@ -278,8 +278,6 @@ export const TreeNodeStyle: { [s in TreeNodeState]?: { [n in ShapeName]?: NodeSt }; class TreeNode extends Rect { - private _x = 0; - private _y = 0; private _width = 0; private _height = 0; private _radius = 0; @@ -293,6 +291,24 @@ class TreeNode extends Rect { private _contentY = 0; private _states: TreeNodeState[] = []; + protected override getKeyStyle(attributes: Required) { + const style = super.getKeyStyle(attributes); + if (style) { + style.x = 0; + style.y = 0; + } + return style; + } + + protected override getHaloStyle(attributes: Required) { + const style = super.getHaloStyle(attributes); + if (style) { + style.x = 0; + style.y = 0; + } + return style; + } + private drawBackground(attributes: Required, container: Group) { attributes.size = [this._width, this._height]; attributes.lineWidth = 2; @@ -306,8 +322,6 @@ class TreeNode extends Rect { "name-bg", GRect, { - x: this._x, - y: this._y, width: this._nodeLayout === "compact" ? this._width : 40, height: this._nodeLayout === "compact" ? 25 : this._height, fill: attributes.stroke, @@ -324,8 +338,8 @@ class TreeNode extends Rect { GPath, { d: [ - ["M", this._x + 46, this._y + 23], - ["L", this._x + this._width - 40, this._y + 23], + ["M", 46, 23], + ["L", this._width - 40, 23], ], stroke: "#666", lineWidth: 1, @@ -348,8 +362,8 @@ class TreeNode extends Rect { text: this._prefix + this.id, textAlign: "right", textBaseline: "top", - x: this._x - 3, - y: this._y + this._height / 2 - 8, + x: -3, + y: this._height / 2 - 8, }, container ); @@ -363,8 +377,8 @@ class TreeNode extends Rect { "icon", GImage, { - x: this._x + 5, - y: this._y + (this._nodeLayout === "compact" ? 3 : this._height / 2 - 16), + x: 5, + y: this._nodeLayout === "compact" ? 3 : this._height / 2 - 16, height: this._nodeLayout === "compact" ? 18 : 30, width: this._nodeLayout === "compact" ? 18 : 30, src: img, @@ -379,8 +393,8 @@ class TreeNode extends Rect { "status", GImage, { - x: this._x + this._width - 18, - y: this._y + 3, + x: this._width - 18, + y: 3, height: this._nodeLayout === "compact" ? 18 : 20, width: this._nodeLayout === "compact" ? 18 : 20, src: `./icons/status${status}.svg`, @@ -399,8 +413,8 @@ class TreeNode extends Rect { fontWeight: "bolder", text: this._data.name, textBaseline: "top", - x: this._x + (this._nodeLayout === "compact" ? 26 : 46), - y: this._y + 5, + x: this._nodeLayout === "compact" ? 26 : 46, + y: 5, }, container ); @@ -411,8 +425,8 @@ class TreeNode extends Rect { "debug", GImage, { - x: this._x + this._width - 30, - y: this._y + 4, + x: this._width - 30, + y: 4, height: 16, width: 16, src: `./icons/Debug.svg`, @@ -427,8 +441,8 @@ class TreeNode extends Rect { "disabled", GImage, { - x: this._x + this._width - 30 - (this._data.debug ? 18 : 0), - y: this._y + 4, + x: this._width - 30 - (this._data.debug ? 18 : 0), + y: 4, height: 16, width: 16, src: `./icons/Disabled.svg`, @@ -582,8 +596,8 @@ class TreeNode extends Rect { "subtree", GRect, { - x: this._x - 10, - y: this._y - 10, + x: -10, + y: -10, width: this._width + 20, height: this._height + 20, stroke: "#a5b1be", @@ -619,8 +633,6 @@ class TreeNode extends Rect { "drag-src", GRect, { - x: this._x, - y: this._y, width: this._width, height: this._height, lineWidth: 0, @@ -636,8 +648,6 @@ class TreeNode extends Rect { "drag-up", GRect, { - x: this._x, - y: this._y, width: this._width, height: this._height / 2, lineWidth: 2, @@ -655,8 +665,7 @@ class TreeNode extends Rect { "drag-down", GRect, { - x: this._x, - y: this._y + this._height / 2, + y: this._height / 2, width: this._width, height: this._height / 2, lineWidth: 2, @@ -674,8 +683,7 @@ class TreeNode extends Rect { "drag-right", GRect, { - x: this._x + this._width / 2, - y: this._y, + x: this._width / 2, width: this._width / 2, height: this._height, lineWidth: 2, @@ -709,8 +717,8 @@ class TreeNode extends Rect { text: attributes.collapsed ? "+" : "-", textAlign: "center", textBaseline: "middle", - x: this._width / 2, - y: 0, + x: this._width, + y: this._height / 2, visibility: this._data.children?.length ? "visible" : "hidden", }, container @@ -754,8 +762,6 @@ class TreeNode extends Rect { const [width, height] = data.size; this._prefix = (node.prefix as string) ?? ""; - this._x = -width / 2; - this._y = -height / 2; this._width = width; this._height = height; this._radius = 4; @@ -764,8 +770,8 @@ class TreeNode extends Rect { this._classify = classify; this._nodeLayout = useSetting.getState().data.layout; this._contentWidth = 220; - this._contentX = this._x + (this._nodeLayout === "compact" ? 6 : 46); - this._contentY = this._y + 28; + this._contentX = this._nodeLayout === "compact" ? 6 : 46; + this._contentY = 28; this._states = this.context.graph.getElementState(this.id) as TreeNodeState[]; this.resetStyle();