@threlte/flex 0.0.7 → 0.0.8

package/dist/Box/Box.svelte

@@ -2,8 +2,8 @@
 import { onDestroy } from 'svelte';
 import { Group } from 'three';
 import { useFlex } from '../Flex/context';
-import { createNodeContext } from '../nodes/context';
 import { createUseDimensionsContext } from '../hooks/useDimensions';
+import { createNodeContext } from '../nodes/context';
 export let order = undefined;
 let _class = '';
 export { _class as class };
@@ -13,10 +13,16 @@ const dispatch = createRawEventDispatcher();
  */
 const dimensionsContext = createUseDimensionsContext();
 const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser, reflow } = useFlex();
-export const group = new Group();
-export const contentGroup = new Group();
+const group = new Group();
 group.userData.isNode = true;
-export const { node } = createNodeContext(order);
+const contentGroup = new Group();
+const { yoga } = useFlex();
+const node = yoga.Node.create();
+const parentNodeContext = createNodeContext(node);
+parentNodeContext?.insertNode(node, order);
+onDestroy(() => {
+    parentNodeContext?.removeNode(node);
+});
 addNode(node, group, $$restProps);
 updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps }, true);
 $: updateNodeProps(node, { ...classParser?.(_class, {}), ...$$restProps });

package/dist/Box/Box.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from 'svelte'
 import type { NodeProps } from '../lib/props'
 
 type BoxProps = NodeProps & {
-  order?: number
+  order?: number | undefined
   class?: string
 }
 

package/dist/Flex/InnerFlex.svelte

@@ -2,13 +2,14 @@
 import { onDestroy } from 'svelte';
 import { Box3, Group, Vector3 } from 'three';
 import { Direction } from 'yoga-layout';
+import { createUseDimensionsContext } from '../hooks/useDimensions';
 import { getDepthAxis } from '../lib/getDepthAxis';
 import { getOrientedBoundingBoxSize } from '../lib/getOrientedBoundingBoxSize';
 import { getRootShift } from '../lib/getRootShift';
 import { applyNodeProps } from '../lib/props';
+import { propsChanged } from '../lib/propsChanged';
 import { createNodeContext } from '../nodes/context';
 import { createFlexContext } from './context';
-import { createUseDimensionsContext } from '../hooks/useDimensions';
 export let yoga;
 export let width = 1;
 export let height = 1;
@@ -21,6 +22,8 @@ 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();
 /**
@@ -90,25 +93,13 @@ const flexContext = createFlexContext({
     },
     updateNodeProps(node, props, force = false) {
         const nodeData = flexContext.nodes.get(node);
-        if (!nodeData)
-            return;
         // Updating the props can be forced and is done so on the initial call.
-        if (!force) {
-            // Because all NodeProps are primitive types, we can make a simple
-            // comparison and only request a reflow when necessary. We do that by
-            // checking the length of the props object and then checking if all keys
-            // are the same and all values are the same.
-            const previousKeys = Object.keys(nodeData.props);
-            const currentKeys = Object.keys(props);
-            if (previousKeys.length === currentKeys.length &&
-                currentKeys.every((key) => previousKeys.includes(key)) &&
-                previousKeys.every((key) => nodeData.props[key] === props[key])) {
-                return;
-            }
+        if (force || propsChanged(node, props)) {
+            applyNodeProps(node, props, scaleFactor);
+            reflow();
+            if (nodeData)
+                nodeData.props = props;
         }
-        applyNodeProps(node, props, scaleFactor);
-        nodeData.props = props;
-        reflow();
     },
     removeNode(node) {
         flexContext.nodes.delete(node);
@@ -125,12 +116,11 @@ const flexContext = createFlexContext({
     classParser
 });
 const { mainAxis, crossAxis, depthAxis } = flexContext;
-const { node: rootNode } = createNodeContext();
 $: rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
-$: {
-    applyNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps }, scaleFactor);
-    reflow();
-}
+// prettier-ignore
+flexContext.updateNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps }, true);
+// prettier-ignore
+$: flexContext.updateNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps });
 $: flexContext.rootWidth.set(width), flexContext.reflow();
 $: flexContext.rootHeight.set(height), flexContext.reflow();
 $: flexContext.mainAxis.set(plane[0]), flexContext.reflow();

package/dist/lib/propsChanged.d.ts

@@ -0,0 +1,8 @@
+import type { NodeProps } from './props';
+/**
+ * Because all NodeProps are primitive types, we can make a simple comparison
+ * and only request a reflow when necessary. We do that by checking the length
+ * of the props object and then checking if all keys are the same and all values
+ * are the same.
+ */
+export declare const propsChanged: (node: Node, props: NodeProps) => boolean;

package/dist/lib/propsChanged.js

@@ -0,0 +1,26 @@
+const nodePropsMap = new WeakMap();
+/**
+ * Because all NodeProps are primitive types, we can make a simple comparison
+ * and only request a reflow when necessary. We do that by checking the length
+ * of the props object and then checking if all keys are the same and all values
+ * are the same.
+ */
+export const propsChanged = (node, props) => {
+    // get a reference to the props data for this node
+    const propsData = nodePropsMap.get(node);
+    // assume that the props have changed
+    let changed = true;
+    if (propsData) {
+        // compare the keys and values of the previous and current props
+        const previousKeys = Object.keys(propsData);
+        const currentKeys = Object.keys(props);
+        if (previousKeys.length === currentKeys.length &&
+            currentKeys.every((key) => previousKeys.includes(key)) &&
+            previousKeys.every((key) => propsData[key] === props[key])) {
+            changed = false;
+        }
+    }
+    // update the props data for this node
+    nodePropsMap.set(node, props);
+    return changed;
+};

package/dist/nodes/context.d.ts

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

package/dist/nodes/context.js

@@ -1,31 +1,47 @@
-import { getContext, onDestroy, setContext } from 'svelte';
-import { useFlex } from '../Flex/context';
+import { getContext, setContext } from 'svelte';
 export const nodeContextName = '__threlte-node';
-export const useNode = () => {
-    return getContext(nodeContextName);
-};
-export const createNodeContext = (order) => {
-    const { yoga } = useFlex();
-    const node = yoga.Node.create();
-    const parentNodeContext = useNode();
-    parentNodeContext?.insertChild(node, order);
-    onDestroy(() => {
-        parentNodeContext?.removeChild(node);
-    });
-    const data = {
-        node,
-        insertChild(child, order) {
+export const createNodeContext = (node) => {
+    const childNodes = new Set();
+    const childNodesOrderMap = new Map();
+    const parentNodeContext = getContext(nodeContextName);
+    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
             if (order !== undefined) {
-                data.node.insertChild(child, order);
+                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.
+                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.
+                sorted.forEach((childNode) => {
+                    node.removeChild(childNode);
+                });
+                sorted.forEach((childNode, index) => {
+                    node.insertChild(childNode, index);
+                });
             }
             else {
-                data.node.insertChild(child, data.node.getChildCount());
+                node.insertChild(childNode, node.getChildCount());
             }
         },
-        removeChild(child) {
-            data.node.removeChild(child);
+        removeNode(childNode) {
+            node.removeChild(childNode);
+            childNodes.delete(childNode);
+            childNodesOrderMap.delete(childNode);
         }
-    };
-    setContext(nodeContextName, data);
-    return data;
+    });
+    return parentNodeContext;
 };

package/package.json

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