From eec574569b159b6093c22129c8138f57302edeb5 Mon Sep 17 00:00:00 2001 From: Carlos Herrero Date: Wed, 1 Feb 2023 23:21:17 +0100 Subject: [PATCH 1/5] Create tree --- src/panelview/objecttree.tsx | 76 ++++++++++++++++++++++++++++-------- 1 file changed, 60 insertions(+), 16 deletions(-) diff --git a/src/panelview/objecttree.tsx b/src/panelview/objecttree.tsx index 1798e9e5d..acaff93ff 100644 --- a/src/panelview/objecttree.tsx +++ b/src/panelview/objecttree.tsx @@ -9,7 +9,7 @@ import { closeIcon } from '@jupyterlab/ui-components'; import { Panel } from '@lumino/widgets'; -import { ReactTree, ThemeSettings, TreeNodeList } from '@naisutech/react-tree'; +import { ReactTree, ThemeSettings, TreeNode, TreeNodeList } from '@naisutech/react-tree'; import visibilitySvg from '../../style/icon/visibility.svg'; import visibilityOffSvg from '../../style/icon/visibilityOff.svg'; @@ -145,34 +145,74 @@ class ObjectTreeReact extends React.Component { } stateToTree = () => { - if (this.state.jcadObject) { - return this.state.jcadObject.map(obj => { - const name = obj.name; + if (!this.state.jcadObject) { + return []; + } + + const objects = this.state.jcadObject; + const nodes = new Map(); + console.debug("\n[ObjectTreeReact.stateToTree] objects:", objects); + + objects.forEach(obj => { + if (obj.parameters && 'Group' in obj.parameters) { + const parentId = nodes.has(obj.name) ? nodes.get(obj.name) as string : null; + nodes.set(obj.name, { + id: obj.name, + label: `Group (#${obj.name})`, + parentId, + items: undefined + }); + + obj.parameters!['Group'].forEach(name => { + if (!nodes.has(name)) { + nodes.set(name, obj.name); + } else { + const node = nodes.get(name) as TreeNode; + node.parentId = obj.name; + nodes.set(name, node); + } + }); + + } else { const items: TreeNodeList = []; if (obj.shape) { items.push({ - id: `${name}#shape#${obj.shape}#${this.state.filePath}`, + id: `${obj.name}#shape#${obj.shape}#${this.state.filePath}`, label: 'Shape', - parentId: name + parentId: obj.name, }); } if (obj.operators) { items.push({ - id: `${name}#operator#${this.state.filePath}`, + id: `${obj.name}#operator#${this.state.filePath}`, label: 'Operators', - parentId: name + parentId: obj.name }); } - return { - id: name, - label: obj.name ?? `Object (#${name})`, + nodes.set(obj.name, { + id: obj.name, + label: obj.name ?? `Object (#${obj.name})`, parentId: null, items - }; - }); - } + }); + } + }); + + const rootNodes: TreeNodeList = []; + objects.forEach(obj => { + const node = nodes.get(obj.name) as TreeNode; + + if (obj.parameters && 'Group' in obj.parameters) { + node.items = obj.parameters!['Group'].map(name => nodes.get(name)); + nodes.set(obj.name, node); + + if (node.parentId === null) { + rootNodes.push(node); + } + } + }); - return []; + return rootNodes; }; getObjectFromName(name: string | null): IJCadObject | undefined { @@ -245,15 +285,18 @@ class ObjectTreeReact extends React.Component { render(): React.ReactNode { const { selectedNode, openNodes, options } = this.state; const data = this.stateToTree(); + console.debug("\n[ObjectTreeReact.render] objects:", data); let selectedNodes: (number | string)[] = []; if (selectedNode) { const parentNode = data.filter(node => node.id === selectedNode); - if (parentNode.length > 0 && parentNode[0].items.length > 0) { + if (parentNode.length > 0 && parentNode[0].items && parentNode[0].items.length > 0) { selectedNodes = [parentNode[0].items[0].id]; } } + console.debug("\n[ObjectTreeReact.render] selectedNodes:", selectedNodes); + return (
{ theme={'labTheme'} themes={TREE_THEMES} onToggleSelectedNodes={id => { + console.debug("\n[ObjectTreeReact.onToggleSelectedNodes] id:", id); if (id && id.length > 0) { let name = id[0] as string; From ba8e01f50d0673334eaf2e719420bdf9a2cf1292 Mon Sep 17 00:00:00 2001 From: Carlos Herrero Date: Fri, 3 Feb 2023 17:34:03 +0100 Subject: [PATCH 2/5] Fixes tree --- src/panelview/objecttree.tsx | 46 ++++++++++++------------------------ 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/src/panelview/objecttree.tsx b/src/panelview/objecttree.tsx index acaff93ff..d7ae8deb5 100644 --- a/src/panelview/objecttree.tsx +++ b/src/panelview/objecttree.tsx @@ -150,18 +150,21 @@ class ObjectTreeReact extends React.Component { } const objects = this.state.jcadObject; + const rootNodes: TreeNodeList = []; const nodes = new Map(); - console.debug("\n[ObjectTreeReact.stateToTree] objects:", objects); objects.forEach(obj => { + let node: TreeNode = { + id: obj.name, + label: obj.name, + parentId: null, + items: undefined + }; + if (obj.parameters && 'Group' in obj.parameters) { - const parentId = nodes.has(obj.name) ? nodes.get(obj.name) as string : null; - nodes.set(obj.name, { - id: obj.name, - label: `Group (#${obj.name})`, - parentId, - items: undefined - }); + node.label = `Group (#${obj.name})`; + node.parentId = nodes.has(obj.name) ? nodes.get(obj.name) as string : null; + nodes.set(obj.name, node); obj.parameters!['Group'].forEach(name => { if (!nodes.has(name)) { @@ -189,27 +192,12 @@ class ObjectTreeReact extends React.Component { parentId: obj.name }); } - nodes.set(obj.name, { - id: obj.name, - label: obj.name ?? `Object (#${obj.name})`, - parentId: null, - items - }); - } - }); - - const rootNodes: TreeNodeList = []; - objects.forEach(obj => { - const node = nodes.get(obj.name) as TreeNode; - - if (obj.parameters && 'Group' in obj.parameters) { - node.items = obj.parameters!['Group'].map(name => nodes.get(name)); + node.label = `Object (#${obj.name})`; + node.items = items; nodes.set(obj.name, node); - - if (node.parentId === null) { - rootNodes.push(node); - } } + + rootNodes.push(node); }); return rootNodes; @@ -285,7 +273,6 @@ class ObjectTreeReact extends React.Component { render(): React.ReactNode { const { selectedNode, openNodes, options } = this.state; const data = this.stateToTree(); - console.debug("\n[ObjectTreeReact.render] objects:", data); let selectedNodes: (number | string)[] = []; if (selectedNode) { @@ -295,8 +282,6 @@ class ObjectTreeReact extends React.Component { } } - console.debug("\n[ObjectTreeReact.render] selectedNodes:", selectedNodes); - return (
{ theme={'labTheme'} themes={TREE_THEMES} onToggleSelectedNodes={id => { - console.debug("\n[ObjectTreeReact.onToggleSelectedNodes] id:", id); if (id && id.length > 0) { let name = id[0] as string; From 0bcb963c674b6695dfa5bdb1d7a02f2775b9bb3c Mon Sep 17 00:00:00 2001 From: Carlos Herrero Date: Sun, 5 Feb 2023 19:26:42 +0100 Subject: [PATCH 3/5] Lint --- .eslintignore | 1 + .prettierignore | 1 + src/panelview/objecttree.tsx | 24 +++++++++++++++++------- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/.eslintignore b/.eslintignore index 5c99ba78a..bd5cd6a9d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,3 +3,4 @@ dist coverage **/*.d.ts tests +**/_interface \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index fdbe66bc2..d517782a4 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,3 +3,4 @@ node_modules **/lib **/package.json jupytercad +**/_interface \ No newline at end of file diff --git a/src/panelview/objecttree.tsx b/src/panelview/objecttree.tsx index d7ae8deb5..c30c1bab6 100644 --- a/src/panelview/objecttree.tsx +++ b/src/panelview/objecttree.tsx @@ -9,7 +9,12 @@ import { closeIcon } from '@jupyterlab/ui-components'; import { Panel } from '@lumino/widgets'; -import { ReactTree, ThemeSettings, TreeNode, TreeNodeList } from '@naisutech/react-tree'; +import { + ReactTree, + ThemeSettings, + TreeNode, + TreeNodeList +} from '@naisutech/react-tree'; import visibilitySvg from '../../style/icon/visibility.svg'; import visibilityOffSvg from '../../style/icon/visibilityOff.svg'; @@ -148,13 +153,13 @@ class ObjectTreeReact extends React.Component { if (!this.state.jcadObject) { return []; } - + const objects = this.state.jcadObject; const rootNodes: TreeNodeList = []; const nodes = new Map(); objects.forEach(obj => { - let node: TreeNode = { + const node: TreeNode = { id: obj.name, label: obj.name, parentId: null, @@ -163,7 +168,9 @@ class ObjectTreeReact extends React.Component { if (obj.parameters && 'Group' in obj.parameters) { node.label = `Group (#${obj.name})`; - node.parentId = nodes.has(obj.name) ? nodes.get(obj.name) as string : null; + node.parentId = nodes.has(obj.name) + ? (nodes.get(obj.name) as string) + : null; nodes.set(obj.name, node); obj.parameters!['Group'].forEach(name => { @@ -175,14 +182,13 @@ class ObjectTreeReact extends React.Component { nodes.set(name, node); } }); - } else { const items: TreeNodeList = []; if (obj.shape) { items.push({ id: `${obj.name}#shape#${obj.shape}#${this.state.filePath}`, label: 'Shape', - parentId: obj.name, + parentId: obj.name }); } if (obj.operators) { @@ -277,7 +283,11 @@ class ObjectTreeReact extends React.Component { let selectedNodes: (number | string)[] = []; if (selectedNode) { const parentNode = data.filter(node => node.id === selectedNode); - if (parentNode.length > 0 && parentNode[0].items && parentNode[0].items.length > 0) { + if ( + parentNode.length > 0 && + parentNode[0].items && + parentNode[0].items.length > 0 + ) { selectedNodes = [parentNode[0].items[0].id]; } } From 92ce58dc53baffe85ac587b9071bff69d98337f5 Mon Sep 17 00:00:00 2001 From: Carlos Herrero Date: Mon, 6 Feb 2023 13:04:54 +0100 Subject: [PATCH 4/5] Various tests for tree view --- src/panelview/objecttree.tsx | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/src/panelview/objecttree.tsx b/src/panelview/objecttree.tsx index c30c1bab6..ac68e63ae 100644 --- a/src/panelview/objecttree.tsx +++ b/src/panelview/objecttree.tsx @@ -159,10 +159,11 @@ class ObjectTreeReact extends React.Component { const nodes = new Map(); objects.forEach(obj => { + console.debug("Object:", obj); const node: TreeNode = { id: obj.name, label: obj.name, - parentId: null, + parentId: nodes.has(obj.name) ? (nodes.get(obj.name) as string) : null, items: undefined }; @@ -173,7 +174,8 @@ class ObjectTreeReact extends React.Component { : null; nodes.set(obj.name, node); - obj.parameters!['Group'].forEach(name => { + console.debug("\tGroup:", obj.parameters['Group']); + obj.parameters['Group'].forEach(name => { if (!nodes.has(name)) { nodes.set(name, obj.name); } else { @@ -182,6 +184,29 @@ class ObjectTreeReact extends React.Component { nodes.set(name, node); } }); + + console.debug("\tOriginFeatures:", obj.parameters['OriginFeatures']); + obj.parameters['OriginFeatures']?.forEach(name => { + if (!nodes.has(name)) { + nodes.set(name, obj.name); + } else { + const node = nodes.get(name) as TreeNode; + node.parentId = obj.name; + nodes.set(name, node); + } + }); + + if ('Origin' in obj.parameters) { + const name = obj.parameters['Origin']; + if (!nodes.has(name)) { + nodes.set(name, obj.name); + } else { + const node = nodes.get(name) as TreeNode; + node.parentId = obj.name; + nodes.set(name, node); + } + } + } else { const items: TreeNodeList = []; if (obj.shape) { @@ -198,7 +223,7 @@ class ObjectTreeReact extends React.Component { parentId: obj.name }); } - node.label = `Object (#${obj.name})`; + //node.label = `Object (#${obj.name})`; node.items = items; nodes.set(obj.name, node); } @@ -206,6 +231,8 @@ class ObjectTreeReact extends React.Component { rootNodes.push(node); }); + console.debug("rootNodes:", rootNodes); + console.debug("\n\n"); return rootNodes; }; From 251f48e9c79ec1c8f6dfa1ac3342c300dfec157d Mon Sep 17 00:00:00 2001 From: Carlos Herrero Date: Mon, 6 Feb 2023 13:07:26 +0100 Subject: [PATCH 5/5] Lint --- src/panelview/objecttree.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/panelview/objecttree.tsx b/src/panelview/objecttree.tsx index ac68e63ae..fa5d641eb 100644 --- a/src/panelview/objecttree.tsx +++ b/src/panelview/objecttree.tsx @@ -159,7 +159,7 @@ class ObjectTreeReact extends React.Component { const nodes = new Map(); objects.forEach(obj => { - console.debug("Object:", obj); + console.debug('Object:', obj); const node: TreeNode = { id: obj.name, label: obj.name, @@ -174,7 +174,7 @@ class ObjectTreeReact extends React.Component { : null; nodes.set(obj.name, node); - console.debug("\tGroup:", obj.parameters['Group']); + console.debug('\tGroup:', obj.parameters['Group']); obj.parameters['Group'].forEach(name => { if (!nodes.has(name)) { nodes.set(name, obj.name); @@ -185,7 +185,7 @@ class ObjectTreeReact extends React.Component { } }); - console.debug("\tOriginFeatures:", obj.parameters['OriginFeatures']); + console.debug('\tOriginFeatures:', obj.parameters['OriginFeatures']); obj.parameters['OriginFeatures']?.forEach(name => { if (!nodes.has(name)) { nodes.set(name, obj.name); @@ -206,7 +206,6 @@ class ObjectTreeReact extends React.Component { nodes.set(name, node); } } - } else { const items: TreeNodeList = []; if (obj.shape) { @@ -231,8 +230,8 @@ class ObjectTreeReact extends React.Component { rootNodes.push(node); }); - console.debug("rootNodes:", rootNodes); - console.debug("\n\n"); + console.debug('rootNodes:', rootNodes); + console.debug('\n\n'); return rootNodes; };