@threlte/flex 0.0.8 → 0.1.0

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/dist/parsers/tailwindParser.js

@@ -1,124 +1,143 @@
 import { createClassParser } from './createClassParser';
+const parseNumericOrAutoOrPercentageValue = (value) => {
+    if (value === 'auto') {
+        return value;
+    }
+    else if (value.endsWith('%')) {
+        return value;
+    }
+    else if (value === 'full') {
+        return '100%';
+    }
+    else if (value.match(/^\d+\/\d+$/)) {
+        const [width, height] = value.split('/');
+        const percentage = Math.round((Number(width) / Number(height)) * 100);
+        return `${percentage}%`;
+    }
+    return Number(value);
+};
+const parseNumericOrPercentageValue = (value) => {
+    if (value.endsWith('%')) {
+        return value;
+    }
+    else if (value === 'full') {
+        return '100%';
+    }
+    else if (value.match(/^\d+\/\d+$/)) {
+        const [width, height] = value.split('/');
+        const percentage = Math.round((Number(width) / Number(height)) * 100);
+        return `${percentage}%`;
+    }
+    return Number(value);
+};
 export const tailwindParser = createClassParser((string, props) => {
     const classes = string.split(' ').map((className) => className.trim());
-    const parseNumericOrAutoOrPercentageValue = (value) => {
-        if (value === 'auto') {
-            return value;
-        }
-        else if (value.endsWith('%')) {
-            return value;
-        }
-        else if (value === 'full') {
-            return '100%';
-        }
-        else if (value.match(/^\d+\/\d+$/)) {
-            const [width, height] = value.split('/');
-            const percentage = Math.round((Number(width) / Number(height)) * 100);
-            return `${percentage}%`;
-        }
-        return Number(value);
-    };
-    const parseNumericOrPercentageValue = (value) => {
-        if (value.endsWith('%')) {
-            return value;
-        }
-        else if (value === 'full') {
-            return '100%';
-        }
-        else if (value.match(/^\d+\/\d+$/)) {
-            const [width, height] = value.split('/');
-            const percentage = Math.round((Number(width) / Number(height)) * 100);
-            return `${percentage}%`;
-        }
-        return Number(value);
-    };
     classes.forEach((className) => {
         // padding
         if (className.startsWith('p-')) {
             const [, value] = className.split('-');
             props.padding = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('px-')) {
             const [, value] = className.split('-');
             props.paddingLeft = parseNumericOrPercentageValue(value);
             props.paddingRight = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('py-')) {
             const [, value] = className.split('-');
             props.paddingTop = parseNumericOrPercentageValue(value);
             props.paddingBottom = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('pt-')) {
             const [, value] = className.split('-');
             props.paddingTop = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('pr-')) {
             const [, value] = className.split('-');
             props.paddingRight = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('pb-')) {
             const [, value] = className.split('-');
             props.paddingBottom = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('pl-')) {
             const [, value] = className.split('-');
             props.paddingLeft = parseNumericOrPercentageValue(value);
+            return;
         }
         // margin
         if (className.startsWith('m-')) {
             const [, value] = className.split('-');
             props.margin = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('mx-')) {
             const [, value] = className.split('-');
             props.marginLeft = parseNumericOrAutoOrPercentageValue(value);
             props.marginRight = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('my-')) {
             const [, value] = className.split('-');
             props.marginTop = parseNumericOrAutoOrPercentageValue(value);
             props.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('mt-')) {
             const [, value] = className.split('-');
             props.marginTop = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('mr-')) {
             const [, value] = className.split('-');
             props.marginRight = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('mb-')) {
             const [, value] = className.split('-');
             props.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('ml-')) {
             const [, value] = className.split('-');
             props.marginLeft = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         // width
         if (className.startsWith('w-')) {
             const [, value] = className.split('-');
             props.width = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         // height
         if (className.startsWith('h-')) {
             const [, value] = className.split('-');
             props.height = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         // flex-basis
         if (className.startsWith('basis-')) {
             const [, value] = className.split('-');
             props.flexBasis = parseNumericOrAutoOrPercentageValue(value);
+            return;
         }
         // flex-grow
         if (className.startsWith('grow-')) {
             const [, value] = className.split('-');
             props.flexGrow = Number(value);
+            return;
         }
         // flex-shrink
         if (className.startsWith('shrink-')) {
             const [, value] = className.split('-');
             props.flexShrink = Number(value);
+            return;
         }
         // flex-direction
         if (className.startsWith('flex-')) {
@@ -150,6 +169,7 @@ export const tailwindParser = createClassParser((string, props) => {
                     const [, value] = className.split('-');
                     props.flex = Number(value);
             }
+            return;
         }
         // justify-content
         if (className.startsWith('justify-')) {
@@ -173,6 +193,7 @@ export const tailwindParser = createClassParser((string, props) => {
                     props.justifyContent = 'SpaceEvenly';
                     break;
             }
+            return;
         }
         // align-items
         if (className.startsWith('items-')) {
@@ -193,6 +214,7 @@ export const tailwindParser = createClassParser((string, props) => {
                     props.alignItems = 'Stretch';
                     break;
             }
+            return;
         }
         // align-content
         if (className.startsWith('content-')) {
@@ -222,6 +244,7 @@ export const tailwindParser = createClassParser((string, props) => {
                     props.alignContent = 'Baseline';
                     break;
             }
+            return;
         }
         // align-self
         if (className.startsWith('self-')) {
@@ -245,36 +268,44 @@ export const tailwindParser = createClassParser((string, props) => {
                     props.alignSelf = 'Baseline';
                     break;
             }
+            return;
         }
         // Gaps
         if (className.startsWith('gap-x-')) {
             const [, value] = className.split('-');
             props.gapColumn = Number(value);
+            return;
         }
         else if (className.startsWith('gap-y-')) {
             const [, value] = className.split('-');
             props.gapRow = Number(value);
+            return;
         }
         else if (className.startsWith('gap-')) {
             const [, value] = className.split('-');
             props.gap = Number(value);
+            return;
         }
         // Position
         if (className.startsWith('top-')) {
             const [, value] = className.split('-');
             props.top = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('right-')) {
             const [, value] = className.split('-');
             props.right = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('bottom-')) {
             const [, value] = className.split('-');
             props.bottom = parseNumericOrPercentageValue(value);
+            return;
         }
         if (className.startsWith('left-')) {
             const [, value] = className.split('-');
             props.left = parseNumericOrPercentageValue(value);
+            return;
         }
         // aspect ratio
         if (className.startsWith('aspect-')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
@@ -27,8 +27,8 @@
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.3.6",
-    "@threlte/core": "6.0.9",
-    "@threlte/extras": "6.0.0"
+    "@threlte/core": "6.1.0",
+    "@threlte/extras": "7.3.0"
   },
   "dependencies": {
     "mitt": "^3.0.1",