mac/behavior3editor
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize node render size

Browse Source
This commit is contained in:
codetypes committed 2024-05-10 00:25:09 +08:00
1 parent e462261faf
commit b757d68430
5 files changed
+68 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/icons/Debug.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M370 378c28.89 23.52 46 46.07 46 86M142 378c-28.89 23.52-46 46.06-46 86M384 208c28.89-23.52 32-56.07 32-96M128 206c-28.89-23.52-32-54.06-32-94M464 288.13h-80M128 288.13H48M256 192v256" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M256 448h0c-70.4 0-128-57.6-128-128v-96.07c0-65.07 57.6-96 128-96h0c70.4 0 128 25.6 128 96V320c0 70.4-57.6 128-128 128z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M179.43 143.52a49.08 49.08 0 01-3.43-15.73A80 80 0 01255.79 48h.42A80 80 0 01336 127.79a41.91 41.91 0 01-3.12 14.3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 833 B

After

Width:  |  Height:  |  Size: 1.0 KiB

src/components/editor.tsx
+3 -3
View File
@@ -730,7 +730,7 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
direction: "LR",
getHGap: () => 60,
getWidth: (d: TreeGraphData) => {
return 150;
return 160;
},
getHeight: (d: TreeGraphData) => {
if (d.size) {
@@ -1145,10 +1145,10 @@ export const Editor: FC<EditorProps> = ({ onUpdate: updateState, data: editor, .
if (data.parent) {
recursiveFun(data.parent);
}
}
};
recursiveFun(id);
updateGrahp();
}
};
return (
<div
src/components/inspector.tsx
+3 -1
View File
@@ -326,7 +326,9 @@ const NodeInspector: FC = () => {
valuePropName={type === "boolean" ? "checked" : undefined}
rules={[{ required, message: t("node.fileRequired", { field: v.desc }) }]}
>
{type === "string" && <Input disabled={disabled} onBlur={form.submit} />}
{type === "string" && (
<TextArea autoSize disabled={disabled} onBlur={form.submit} />
)}
{type === "int" && (
<InputNumber disabled={disabled} onBlur={form.submit} precision={0} />
)}
src/components/register-node.ts
+53 -54
View File
@@ -15,8 +15,6 @@ const NODE_COLORS: any = {
["Error"]: "#ff0000",
};
const SELECTED_LINE_WIDTH = 4;
G6.registerNode(
"TreeNode",
{
@@ -37,17 +35,14 @@ G6.registerNode(
},
stateStyles: {
selected: {
"main-box": {
stroke: "yellow",
lineWidth: SELECTED_LINE_WIDTH,
},
"name-bg-selected": {
fill: "yellow",
"main-box-selected": {
fillOpacity: 0.2,
},
},
hover: {
stroke: "white",
lineWidth: 3,
"main-box-selected": {
fillOpacity: 0.1,
},
},
dragSrc: {
fill: "gray",
@@ -103,9 +98,24 @@ G6.registerNode(
const addShape = (type: string, shapeCfg: ShapeCfg, clickEnabled: boolean = false) => {
shapeCfg.draggable = clickEnabled;
shapeCfg.capture = clickEnabled;
// shapeCfg.attrs.fontFamily = "Menlo, Monaco, 'Courier New', monospace";
return group.addShape(type, shapeCfg);
};
addShape("rect", {
attrs: {
x: -15,
y: -15,
width: w + 30,
height: h + 30,
fill: "#fff",
fillOpacity: 0,
radius: r + 4,
},
name: "main-box-selected",
draggable: true,
});
const shape = addShape(
"rect",
{
@@ -133,9 +143,9 @@ G6.registerNode(
y: -10,
width: w + 20,
height: h + 20,
stroke: "white",
stroke: "#a5b1be",
lineWidth: 2.5,
lineDash: [5, 5],
lineDash: [6, 6],
radius: [r, r, r, r],
},
name: "subtree",
@@ -149,19 +159,7 @@ G6.registerNode(
x: 0,
y: 0,
width: w,
height: 20,
fill: color,
radius: [r, r, 0, 0],
},
name: "name-bg-selected",
draggable: true,
});
addShape("rect", {
attrs: {
x: SELECTED_LINE_WIDTH / 2,
y: SELECTED_LINE_WIDTH / 2,
width: w - 4,
height: 20 - SELECTED_LINE_WIDTH / 2,
height: 25,
fill: color,
radius: [r, r, 0, 0],
},
@@ -195,22 +193,37 @@ G6.registerNode(
addShape("image", {
attrs: {
x: 5,
y: 2,
height: 14,
width: 14,
y: 4,
height: 16,
width: 16,
img,
},
name: "node-icon",
});
// name text
addShape("text", {
attrs: {
textBaseline: "top",
x: 25,
y: 5,
fontWeight: 800,
lineHeight: 20,
text: cfg.name,
fill: textColor,
fontSize: 14,
},
name: "name-text",
});
// debug
if (cfg.debug) {
addShape("image", {
attrs: {
x: 182,
y: 2,
height: 14,
width: 14,
x: 200,
y: 4,
height: 16,
width: 16,
img: `./icons/Debug.svg`,
},
name: "node-debug-icon",
@@ -220,37 +233,23 @@ G6.registerNode(
if (cfg.disabled) {
addShape("image", {
attrs: {
x: 182 - (cfg.debug ? 14 : 0),
y: 2,
height: 14,
width: 14,
x: 200 - (cfg.debug ? 18 : 0),
y: 4,
height: 16,
width: 16,
img: `./icons/Disabled.svg`,
},
name: "node-disabled-icon",
});
}
// name text
addShape("text", {
attrs: {
textBaseline: "top",
x: 22,
y: 3,
fontWeight: 800,
lineHeight: 20,
text: cfg.name,
fill: textColor,
},
name: "name-text",
});
const x = 6;
let y = 24;
let y = 32;
// desc text
let desc = (cfg.desc || nodeDef.desc) as string;
if (desc) {
desc = i18n.t("regnode.mark") + desc;
desc = cutWordTo(desc, 31);
desc = cutWordTo(desc, 33);
addShape("text", {
attrs: {
textBaseline: "top",
@@ -267,7 +266,7 @@ G6.registerNode(
const args: any = cfg.args;
if (nodeDef.args && args && Object.keys(args).length > 0) {
const { str, line } = toBreakWord(`${i18n.t("regnode.args")}${JSON.stringify(args)}`, 34);
const { str, line } = toBreakWord(`${i18n.t("regnode.args")}${JSON.stringify(args)}`, 37);
addShape("text", {
attrs: {
textBaseline: "top",
@@ -358,7 +357,7 @@ G6.registerNode(
if (cfg.path) {
let path = (i18n.t("regnode.subtree") + cfg.path) as string;
path = cutWordTo(path, 33);
path = cutWordTo(path, 35);
addShape("text", {
attrs: {
textBaseline: "top",
src/misc/b3util.ts
+8 -4
View File
@@ -207,7 +207,7 @@ export const refreshTreeDataId = (data: TreeGraphData, id?: number) => {
};
export const calcTreeDataSize = (data: TreeGraphData) => {
let height = 40 + 2;
let height = 50 + 2;
const updateHeight = (obj: any) => {
if (Array.isArray(obj) || (obj && Object.keys(obj).length > 0)) {
const { str, line } = toBreakWord(`参数:${JSON.stringify(obj)}`, 35);
@@ -220,7 +220,7 @@ export const calcTreeDataSize = (data: TreeGraphData) => {
updateHeight(data.args);
updateHeight(data.input);
updateHeight(data.output);
return [200, height];
return [220, height];
};
export const checkTreeData = (data: TreeGraphData) => {
@@ -378,13 +378,17 @@ const isAsciiChar = (c: number) => {
return (c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f);
};
const isUppercase = (c: number) => {
return c >= 0x0041 && c <= 0x005a;
};
export const toBreakWord = (str: string, maxlen: number) => {
const chars: string[] = [];
let line = 1;
let len = 0;
for (let i = 0; i < str.length; i++) {
const c = str.charCodeAt(i);
len += isAsciiChar(c) ? 1 : 2;
len += isAsciiChar(c) ? (isUppercase(c) ? 1.5 : 1) : 2;
chars.push(String.fromCharCode(c));
if (len >= maxlen && i < str.length - 1) {
len = 0;
@@ -402,7 +406,7 @@ export const cutWordTo = (str: string, maxlen: number) => {
let i = 0;
for (; i < str.length; i++) {
const c = str.charCodeAt(i);
maxlen -= isAsciiChar(c) ? 1 : 2;
maxlen -= isAsciiChar(c) ? (isUppercase(c) ? 1.5 : 1) : 2;
if (maxlen <= 0) {
break;
}