From a3e582894ef60bfdf43a7c94c813444ff432a039 Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Mon, 1 Dec 2025 14:33:38 +0800 Subject: [PATCH 1/7] fix typeExpr implementation in CustomShapesWithTemplatesWithEditing --- .../Angular/app/app.component.ts | 9 +++++++-- .../CustomShapesWithTemplatesWithEditing/React/App.tsx | 9 +++++++-- .../CustomShapesWithTemplatesWithEditing/ReactJs/App.js | 9 +++++++-- .../CustomShapesWithTemplatesWithEditing/Vue/App.vue | 9 ++++++++- .../CustomShapesWithTemplatesWithEditing/jQuery/index.js | 9 ++++++++- 5 files changed, 37 insertions(+), 8 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts index d8b308c2db29..efa70f6438fe 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts @@ -56,8 +56,13 @@ export class AppComponent { }); } - itemTypeExpr() { - return 'employee'; + itemTypeExpr(obj, value) { + if (value) { + obj.type = value; + } else { + return 'employee'; + } + return null; } itemCustomDataExpr(obj, value) { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx index 1dbb36bde9c0..b9927d084061 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx @@ -59,8 +59,13 @@ function deleteEmployee(employee: Employee) { dataSource.push([{ type: 'remove', key: employee.ID }]); } -function itemTypeExpr() { - return 'employee'; +function itemTypeExpr(obj, value) { + if (value) { + obj.type = value; + } else { + return 'employee'; + } + return null; } function itemCustomDataExpr(obj: Employee, value: Employee) { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js index 5657facdbdb0..bd56bbd0f685 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js @@ -51,8 +51,13 @@ function onRequestLayoutUpdate(e) { function deleteEmployee(employee) { dataSource.push([{ type: 'remove', key: employee.ID }]); } -function itemTypeExpr() { - return 'employee'; +function itemTypeExpr(obj, value) { + if (value) { + obj.type = value; + } else { + return 'employee'; + } + return null; } function itemCustomDataExpr(obj, value) { if (value === undefined) { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue index 7650886ad489..4f639a8ebd1d 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue @@ -186,7 +186,14 @@ const dataSource = new ArrayStore({ const currentEmployee = ref({} as Record); const popupVisible = ref(false); -const itemTypeExpr = () => 'employee'; +const itemTypeExpr = (obj, value) => { + if (value) { + obj.type = value; + } else { + return 'employee'; + } + return null; +}; function itemCustomDataExpr(obj: any, value: any) { if (value === undefined) { return { ...obj }; diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js index 1ab704411bac..07f7a6f602c8 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js @@ -62,7 +62,14 @@ $(function () { nodes: { dataSource: store, keyExpr: 'ID', - typeExpr() { return 'employee'; }, + typeExpr(obj, value) { + if (value) { + obj.type = value; + } else { + return 'employee'; + } + return null; + }, parentKeyExpr: 'Head_ID', customDataExpr(obj, value) { if (value === undefined) { From ccf58648551a389757ed749735be5fdd7f74d06f Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Mon, 1 Dec 2025 14:57:21 +0800 Subject: [PATCH 2/7] ts --- .../CustomShapesWithTemplatesWithEditing/React/App.tsx | 2 +- .../Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx index b9927d084061..f7bc981485eb 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx @@ -59,7 +59,7 @@ function deleteEmployee(employee: Employee) { dataSource.push([{ type: 'remove', key: employee.ID }]); } -function itemTypeExpr(obj, value) { +function itemTypeExpr(obj: { type: string; }, value: string) { if (value) { obj.type = value; } else { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue index 4f639a8ebd1d..da599090a5a8 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue @@ -186,7 +186,7 @@ const dataSource = new ArrayStore({ const currentEmployee = ref({} as Record); const popupVisible = ref(false); -const itemTypeExpr = (obj, value) => { +const itemTypeExpr = (obj: { type: string; }, value: string) => { if (value) { obj.type = value; } else { @@ -194,7 +194,7 @@ const itemTypeExpr = (obj, value) => { } return null; }; -function itemCustomDataExpr(obj: any, value: any) { +function itemCustomDataExpr(obj: Employee, value: Employee) { if (value === undefined) { return { ...obj }; } From 368a1dc5103696706018a96c2214d396abfe5fcc Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Mon, 1 Dec 2025 15:01:21 +0800 Subject: [PATCH 3/7] refactor --- .../Angular/app/app.component.ts | 5 ++--- .../CustomShapesWithTemplatesWithEditing/React/App.tsx | 5 ++--- .../CustomShapesWithTemplatesWithEditing/ReactJs/App.js | 5 ++--- .../Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue | 5 ++--- .../CustomShapesWithTemplatesWithEditing/jQuery/index.js | 5 ++--- 5 files changed, 10 insertions(+), 15 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts index efa70f6438fe..0592c4d52b62 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Angular/app/app.component.ts @@ -57,11 +57,10 @@ export class AppComponent { } itemTypeExpr(obj, value) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return 'employee'; } + obj.type = value; return null; } diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx index f7bc981485eb..8318fe640d5e 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx @@ -60,11 +60,10 @@ function deleteEmployee(employee: Employee) { } function itemTypeExpr(obj: { type: string; }, value: string) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return 'employee'; } + obj.type = value; return null; } diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js index bd56bbd0f685..c5aa4f28e89b 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js @@ -52,11 +52,10 @@ function deleteEmployee(employee) { dataSource.push([{ type: 'remove', key: employee.ID }]); } function itemTypeExpr(obj, value) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return 'employee'; } + obj.type = value; return null; } function itemCustomDataExpr(obj, value) { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue index da599090a5a8..ab334567d2ac 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/Vue/App.vue @@ -187,11 +187,10 @@ const currentEmployee = ref({} as Record); const popupVisible = ref(false); const itemTypeExpr = (obj: { type: string; }, value: string) => { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return 'employee'; } + obj.type = value; return null; }; function itemCustomDataExpr(obj: Employee, value: Employee) { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js index 07f7a6f602c8..f13447b5f06f 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/jQuery/index.js @@ -63,11 +63,10 @@ $(function () { dataSource: store, keyExpr: 'ID', typeExpr(obj, value) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return 'employee'; } + obj.type = value; return null; }, parentKeyExpr: 'Head_ID', From 6f4df1083fd1ef9c6c8d7eab83ec561cbea931a5 Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Mon, 1 Dec 2025 15:11:16 +0800 Subject: [PATCH 4/7] fix typeExpr implementation in CustomShapesWithTemplates --- .../Angular/app/app.component.ts | 9 +++++++-- .../Diagram/CustomShapesWithTemplates/React/App.tsx | 9 +++++++-- .../Diagram/CustomShapesWithTemplates/ReactJs/App.js | 9 +++++++-- .../Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue | 9 ++++++++- .../Diagram/CustomShapesWithTemplates/jQuery/index.js | 9 ++++++++- 5 files changed, 37 insertions(+), 8 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts index 25735bfbd448..7b7753c70966 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts @@ -44,8 +44,13 @@ export class AppComponent { }); } - itemTypeExpr(obj) { - return `employee${obj.ID}`; + itemTypeExpr(obj, value) { + if (value) { + obj.type = value; + } else { + return `employee${obj.ID}`; + } + return null; } showInfo(employee) { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx index ed40f6a41abb..2976f39d8403 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx @@ -12,8 +12,13 @@ const dataSource = new ArrayStore({ data: employees, }); -function itemTypeExpr(obj: { ID: number; }) { - return `employee${obj.ID}`; +function itemTypeExpr(obj: { ID: number; type: string; }, value: string) { + if (value) { + obj.type = value; + } else { + return `employee${obj.ID}`; + } + return null; } export default function App() { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js index 4e07ef772897..20a205387262 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js @@ -10,8 +10,13 @@ const dataSource = new ArrayStore({ key: 'ID', data: employees, }); -function itemTypeExpr(obj) { - return `employee${obj.ID}`; +function itemTypeExpr(obj, value) { + if (value) { + obj.type = value; + } else { + return `employee${obj.ID}`; + } + return null; } export default function App() { const [currentEmployee, setCurrentEmployee] = useState({}); diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue index e904d60f443f..5b00b01ad0da 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue @@ -67,7 +67,14 @@ const dataSource = new ArrayStore({ }); const currentEmployee = ref({} as Record); const popupVisible = ref(false); -const itemTypeExpr = ({ ID }: any) => `employee${ID}`; +const itemTypeExpr = (obj: { ID: number; type: string; }, value: string) => { + if (value) { + obj.type = value; + } else { + return `employee${obj.ID}`; + } + return null; +}; function showInfo(employee: any) { currentEmployee.value = employee; diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js index ad528f18ba0f..0b63cfd0140a 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js @@ -29,7 +29,14 @@ $(() => { data: employees, }), keyExpr: 'ID', - typeExpr(obj) { return `employee${obj.ID}`; }, + typeExpr(obj, value) { + if (value) { + obj.type = value; + } else { + return `employee${obj.ID}`; + } + return null; + }, parentKeyExpr: 'Head_ID', autoLayout: { type: 'tree', From 614975a1b4a0ca65cd31482f953ded1d82f2878a Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Mon, 1 Dec 2025 16:08:49 +0800 Subject: [PATCH 5/7] lint --- .../Diagram/CustomShapesWithTemplates/Vue/App.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue index 5b00b01ad0da..7f9395902058 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue @@ -69,11 +69,11 @@ const currentEmployee = ref({} as Record); const popupVisible = ref(false); const itemTypeExpr = (obj: { ID: number; type: string; }, value: string) => { if (value) { - obj.type = value; - } else { - return `employee${obj.ID}`; - } - return null; + obj.type = value; + } else { + return `employee${obj.ID}`; + } + return null; }; function showInfo(employee: any) { From 43694672dc84856f24b37d6d3cb8a37db1899cff Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Mon, 5 Jan 2026 17:30:36 +0800 Subject: [PATCH 6/7] refactor --- .../CustomShapesWithTemplates/Angular/app/app.component.ts | 5 ++--- .../Demos/Diagram/CustomShapesWithTemplates/React/App.tsx | 5 ++--- .../Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js | 5 ++--- .../Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue | 5 ++--- .../Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js | 5 ++--- 5 files changed, 10 insertions(+), 15 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts index 7b7753c70966..aa3e1d142d54 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Angular/app/app.component.ts @@ -45,11 +45,10 @@ export class AppComponent { } itemTypeExpr(obj, value) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return `employee${obj.ID}`; } + obj.type = value; return null; } diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx index 2976f39d8403..d65b6c4bfcc1 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx @@ -13,11 +13,10 @@ const dataSource = new ArrayStore({ }); function itemTypeExpr(obj: { ID: number; type: string; }, value: string) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return `employee${obj.ID}`; } + obj.type = value; return null; } diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js index 20a205387262..6d84a9c4015c 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js @@ -11,11 +11,10 @@ const dataSource = new ArrayStore({ data: employees, }); function itemTypeExpr(obj, value) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return `employee${obj.ID}`; } + obj.type = value; return null; } export default function App() { diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue index 7f9395902058..0dca2211a282 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/Vue/App.vue @@ -68,11 +68,10 @@ const dataSource = new ArrayStore({ const currentEmployee = ref({} as Record); const popupVisible = ref(false); const itemTypeExpr = (obj: { ID: number; type: string; }, value: string) => { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return `employee${obj.ID}`; } + obj.type = value; return null; }; diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js index 0b63cfd0140a..01756f7f1e51 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/jQuery/index.js @@ -30,11 +30,10 @@ $(() => { }), keyExpr: 'ID', typeExpr(obj, value) { - if (value) { - obj.type = value; - } else { + if (value === undefined) { return `employee${obj.ID}`; } + obj.type = value; return null; }, parentKeyExpr: 'Head_ID', From 9cc5ecd5c9c254a50acc5bcdc2fb0fff4bc5d5f5 Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Mon, 5 Jan 2026 19:06:19 +0800 Subject: [PATCH 7/7] fix --- .../CustomShapesWithTemplatesWithEditing/ReactJs/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js index c5aa4f28e89b..6b302d595daa 100644 --- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js +++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js @@ -275,7 +275,7 @@ export default function App() { } function PopupContentFunc(props) { return ( - + <>
Name
@@ -366,6 +366,6 @@ function PopupContentFunc(props) { onClick={props.cancelEditEmployeeClick} >
- + ); }