#9 chore: Add z-index order

MetaCell · Aug 1, 2022 · 83d09a7 · 83d09a7
1 parent 56e745b
commit 83d09a7
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 79 deletions.
diff --git a/dist/meta-diagram.cjs.development.js b/dist/meta-diagram.cjs.development.js
diff --git a/dist/meta-diagram.cjs.development.js.map b/dist/meta-diagram.cjs.development.js.map
diff --git a/dist/meta-diagram.cjs.production.min.js b/dist/meta-diagram.cjs.production.min.js
diff --git a/dist/meta-diagram.cjs.production.min.js.map b/dist/meta-diagram.cjs.production.min.js.map
diff --git a/dist/meta-diagram.esm.js b/dist/meta-diagram.esm.js
diff --git a/dist/meta-diagram.esm.js.map b/dist/meta-diagram.esm.js.map
diff --git a/dist/models/MetaNode.d.ts b/dist/models/MetaNode.d.ts
@@ -8,5 +8,6 @@ export declare class MetaNode {
     getId(): string;
     getParentId(): string | undefined;
     getWorldPosition(): Position;
+    private getDepth;
     toModel(): MetaNodeModel;
 }
diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx
@@ -13,7 +13,7 @@ export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
     render() {
         // @ts-ignore
         const customNodeStyle = {
-            zIndex: 999999999,
+            zIndex: Math.pow(10, this.props.model.getOptions()['depth']),
             border: "solid 2px gray",
             borderRadius: "5px",
             width: "250px",
@@ -23,8 +23,6 @@ export class CustomNodeWidget extends React.Component<CustomNodeWidgetProps> {
             justifyContent: "space-between",
             position: "relative",
             background: this.props.model.getOptions()['color'] || "darkgray",
-            top: this.props.model.getOptions()['position'].y || 0,
-            left: this.props.model.getOptions()['position'].x || 0,
         }
 
         // console.log("Node Render Position: ")

diff --git a/example/components/widgets/DiamondNodeWidget.tsx b/example/components/widgets/DiamondNodeWidget.tsx
diff --git a/example/index.tsx b/example/index.tsx
@@ -6,6 +6,7 @@ import {makeStyles} from "@material-ui/core";
 import CustomLinkWidget from "./components/widgets/CustomLinkWidget";
 import BG from "./components/assets/svg/bg-dotted.svg";
 import {DiamondNodeWidget} from "./components/widgets/DiamondNodeWidget";
+import CustomNodeWidget from "./components/widgets/CustomNodeWidget";
 
 const useStyles = makeStyles(_ => ({
     main: {
@@ -37,7 +38,7 @@ const App = () => {
         new Map(Object.entries({color: 'rgb(255,192,0)'})))
 
     const componentsMap = new ComponentsMap(
-        new Map(Object.entries({'default': DiamondNodeWidget})),
+        new Map(Object.entries({'default': CustomNodeWidget})),
         new Map(Object.entries({'default': CustomLinkWidget}))
     )
 

diff --git a/src/helpers/engineHelper.ts b/src/helpers/engineHelper.ts
@@ -11,4 +11,5 @@ export function updateChildrenPosition(nodes: MetaNodeModel[], parent: MetaNodeM
 
 export function updateNodeLocalPosition(nodes: MetaNodeModel[], node: MetaNodeModel): void {
     node.updateLocalPosition(nodes)
+    // TODO: check if it is still inside the parent
 }
diff --git a/src/helpers/nodesHelper.ts b/src/helpers/nodesHelper.ts
@@ -11,6 +11,7 @@ export function getNode(
 }
 
 export function processNodes(metaNodes: MetaNode[], callback: { (event: any): void; (arg0: BaseEntityEvent<NodeModel<NodeModelGenerics>>): void; }) : MetaNodeModel[] {
+  // TODO set z order
   const metaNodeModels = []
   for(const mn of metaNodes){
     const metaNodeModel = mn.toModel()

diff --git a/src/index.tsx b/src/index.tsx
@@ -70,7 +70,6 @@ const MetaDiagram = ({
     const nodes = model.getNodes()
     // @ts-ignore
     updateChildrenPosition(nodes, node)
-    // TODO: FIx nodes drifting away due to the following line
     // @ts-ignore
     updateNodeLocalPosition(nodes, node)
     engine.repaintCanvas();

diff --git a/src/models/MetaNode.ts b/src/models/MetaNode.ts
@@ -34,10 +34,15 @@ export class MetaNode {
     return this.parent ? this.position.add(this.parent?.getWorldPosition()) : this.position
   }
 
+  private getDepth() : number {
+    return this.parent ? this.parent.getDepth()+1 : 0
+  }
+
   toModel() : MetaNodeModel {
     const optionsMap = this.options
     optionsMap.set('parentId', this.getParentId())
     optionsMap.set('position', this.position)
+    optionsMap.set('depth', this.getDepth())
     return new MetaNodeModel(Object.fromEntries(optionsMap))
   }