@threlte/flex 0.0.8 → 0.0.9

package/dist/Box/Box.svelte

@@ -23,6 +23,8 @@ parentNodeContext?.insertNode(node, order);
 onDestroy(() => {
     parentNodeContext?.removeNode(node);
 });
+// update the order of the node
+$: parentNodeContext?.updateNodeOrder(node, order);
 addNode(node, group, $$restProps);
 updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps }, true);
 $: updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps });

package/dist/Flex/InnerFlex.svelte

@@ -22,8 +22,6 @@ export { _class as class };
 const dispatch = createRawEventDispatcher();
 const rootGroup = new Group();
 rootGroup.userData.isNode = true;
-const rootNode = yoga.Node.create();
-createNodeContext(rootNode);
 const boundingBox = new Box3();
 const vec3 = new Vector3();
 /**
@@ -115,6 +113,8 @@ const flexContext = createFlexContext({
     reflow,
     classParser
 });
+const rootNode = yoga.Node.create();
+createNodeContext(rootNode);
 const { mainAxis, crossAxis, depthAxis } = flexContext;
 $: rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
 // prettier-ignore

package/dist/nodes/context.d.ts

@@ -2,6 +2,7 @@ import type { Node } from 'yoga-layout';
 export type NodeContext = {
     insertNode: (childNode: Node, order?: number) => void;
     removeNode: (childNode: Node) => void;
+    updateNodeOrder: (childNode: Node, order?: number) => void;
 };
 export declare const nodeContextName = "__threlte-node";
 export declare const createNodeContext: (node: Node) => NodeContext | undefined;

package/dist/nodes/context.js

@@ -1,21 +1,32 @@
 import { getContext, setContext } from 'svelte';
+import { useReflow } from '..';
 export const nodeContextName = '__threlte-node';
 export const createNodeContext = (node) => {
+    const reflow = useReflow();
+    /** Set to keep track of all child nodes */
     const childNodes = new Set();
+    /** Map to keep track of the requested order of nodes */
     const childNodesOrderMap = new Map();
     const parentNodeContext = getContext(nodeContextName);
+    const removeAllChildNodes = () => {
+        childNodes.forEach((childNode) => {
+            node.removeChild(childNode);
+        });
+    };
     setContext(nodeContextName, {
         insertNode(childNode, order) {
             // we want to keep track of all child nodes
             childNodes.add(childNode);
-            // Additionally, we need to keep track of child nodes that need to be inserted at a specific order
+            // Additionally, we need to keep track of child nodes that need to be
+            // inserted at a specific order
             if (order !== undefined) {
                 childNodesOrderMap.set(childNode, {
                     requestedOrder: order
                 });
             }
             if (childNodesOrderMap.size) {
-                // we need to sort the child nodes by their requested order. We leave the nodes that don't have a requested order untouched.
+                // we need to sort the child nodes by their requested order. We leave
+                // the nodes that don't have a requested order untouched.
                 const sorted = Array.from(childNodes)
                     .map((node, index) => {
                     return {
@@ -25,10 +36,9 @@ export const createNodeContext = (node) => {
                 })
                     .sort((a, b) => a.order - b.order)
                     .map(({ node }) => node);
-                // Then we need to remove all child nodes from the node and insert them in the correct order.
-                sorted.forEach((childNode) => {
-                    node.removeChild(childNode);
-                });
+                // Then we need to remove all child nodes from the node and insert them
+                // in the correct order.
+                removeAllChildNodes();
                 sorted.forEach((childNode, index) => {
                     node.insertChild(childNode, index);
                 });
@@ -36,11 +46,57 @@ export const createNodeContext = (node) => {
             else {
                 node.insertChild(childNode, node.getChildCount());
             }
+            reflow();
         },
         removeNode(childNode) {
             node.removeChild(childNode);
             childNodes.delete(childNode);
             childNodesOrderMap.delete(childNode);
+            reflow();
+        },
+        updateNodeOrder(childNode, order) {
+            let update = false;
+            const oldOrder = childNodesOrderMap.get(childNode)?.requestedOrder;
+            if (order === undefined) {
+                // if the order is undefined, we remove the node from the map
+                if (oldOrder !== undefined) {
+                    childNodesOrderMap.delete(childNode);
+                    update = true;
+                }
+            }
+            else {
+                // if the order is defined, we update the node in the map
+                const oldOrder = childNodesOrderMap.get(childNode)?.requestedOrder;
+                if (oldOrder !== order) {
+                    childNodesOrderMap.set(childNode, {
+                        requestedOrder: order
+                    });
+                    update = true;
+                }
+            }
+            // if there's no update, return early
+            if (!update)
+                return;
+            // remove all child nodes from the node
+            removeAllChildNodes();
+            // we need to sort the child nodes by their requested order. We leave the
+            // nodes that don't have a requested order untouched.
+            const sorted = Array.from(childNodes)
+                .map((node, index) => {
+                return {
+                    order: childNodesOrderMap.get(node)?.requestedOrder ?? index,
+                    node
+                };
+            })
+                .sort((a, b) => a.order - b.order)
+                .map(({ node }) => node);
+            // Then we need to remove all child nodes from the node and insert them in
+            // the correct order.
+            removeAllChildNodes();
+            sorted.forEach((childNode, index) => {
+                node.insertChild(childNode, index);
+            });
+            reflow();
         }
     });
     return parentNodeContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {