@threlte/flex 0.0.6 → 0.0.8

package/dist/Box/Box.svelte

@@ -1,16 +1,28 @@
-<script>import { HierarchicalObject, T } from '@threlte/core';
+<script>import { HierarchicalObject, T, createRawEventDispatcher } from '@threlte/core';
 import { onDestroy } from 'svelte';
 import { Group } from 'three';
 import { useFlex } from '../Flex/context';
+import { createUseDimensionsContext } from '../hooks/useDimensions';
 import { createNodeContext } from '../nodes/context';
 export let order = undefined;
 let _class = '';
 export { _class as class };
-const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser } = useFlex();
-export const group = new Group();
-export const contentGroup = new Group();
+const dispatch = createRawEventDispatcher();
+/**
+ * Create the context for `useDimensions`
+ */
+const dimensionsContext = createUseDimensionsContext();
+const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser, reflow } = useFlex();
+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 });
@@ -38,6 +50,12 @@ onEvent('reflow:after', () => {
     getContentGroup().position[$mainAxis] = computedWidth / 2;
     getContentGroup().position[$crossAxis] = -computedHeight / 2;
     getContentGroup().position[$depthAxis] = 0;
+    dimensionsContext.width.set(computedWidth);
+    dimensionsContext.height.set(computedHeight);
+    dispatch('reflow', {
+        width: computedWidth,
+        height: computedHeight
+    });
 });
 </script>
 
@@ -62,6 +80,7 @@ onEvent('reflow:after', () => {
   }}
 >
   <slot
+    {reflow}
     width={computedWidth}
     height={computedHeight}
   />

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

@@ -2,14 +2,20 @@ import { SvelteComponent } from 'svelte'
 import type { NodeProps } from '../lib/props'
 
 type BoxProps = NodeProps & {
-  order?: number
+  order?: number | undefined
   class?: string
 }
 
-type BoxEvents = {}
+type BoxEvents = {
+  reflow: {
+    width: number
+    height: number
+  }
+}
 
 type BoxSlots = {
   default: {
+    reflow: () => void
     width: number
     height: number
   }

package/dist/Flex/Flex.svelte

@@ -15,7 +15,13 @@ const component = forwardEventHandlers();
     {...$$restProps}
     bind:this={$component}
     let:reflow
+    let:width
+    let:height
   >
-    <slot {reflow} />
+    <slot
+      {reflow}
+      {width}
+      {height}
+    />
   </InnerFlex>
 {/if}

package/dist/Flex/Flex.svelte.d.ts

@@ -10,6 +10,8 @@ type FlexEvents = ComponentEvents<InnerFlex>
 type FlexSlots = {
   default: {
     reflow: () => void
+    width: number
+    height: number
   }
 }
 

package/dist/Flex/InnerFlex.svelte

@@ -2,10 +2,12 @@
 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';
 export let yoga;
@@ -20,8 +22,14 @@ 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();
+/**
+ * Create the context for `useDimensions`
+ */
+const { width: computedWidth, height: computedHeight } = createUseDimensionsContext();
 /**
  * Reflowing inside useFrame automatically batches reflows to 1 per frame.
  */
@@ -68,9 +76,11 @@ const { start: reflow, stop } = useFrame(() => {
         maxY = Math.max(maxY, top + height);
     }
     flexContext.emit('reflow:after');
+    computedWidth.set((maxX - minX) / scaleFactor);
+    computedHeight.set((maxY - minY) / scaleFactor);
     dispatch('reflow', {
-        width: (maxX - minX) / scaleFactor,
-        height: (maxY - minY) / scaleFactor
+        width: computedWidth.current,
+        height: computedHeight.current
     });
     stop();
 }, { autostart: false });
@@ -83,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);
@@ -118,21 +116,26 @@ 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();
-$: flexContext.rootWidth.set(width), flexContext.reflow('Updated root width');
-$: flexContext.rootHeight.set(height), flexContext.reflow('Updated root height');
-$: flexContext.mainAxis.set(plane[0]), flexContext.reflow('Updated main axis');
-$: flexContext.crossAxis.set(plane[1]), flexContext.reflow('Updated cross axis');
-$: flexContext.depthAxis.set(getDepthAxis(plane)), flexContext.reflow('Updated depth axis');
-$: flexContext.scaleFactor.set(scaleFactor), flexContext.reflow('Updated scale factor');
+// 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();
+$: flexContext.crossAxis.set(plane[1]), flexContext.reflow();
+$: flexContext.depthAxis.set(getDepthAxis(plane)), flexContext.reflow();
+$: flexContext.scaleFactor.set(scaleFactor), flexContext.reflow();
 onDestroy(() => {
     rootNode.free();
 });
 </script>
 
 <T is={rootGroup}>
-  <slot {reflow} />
+  <slot
+    {reflow}
+    width={$computedWidth}
+    height={$computedHeight}
+  />
 </T>

package/dist/Flex/InnerFlex.svelte.d.ts

@@ -24,6 +24,8 @@ type InnerFlexEvents = {
 type InnerFlexSlots = {
   default: {
     reflow: () => void
+    width: number
+    height: number
   }
 }
 

package/dist/Flex/context.d.ts

@@ -25,7 +25,7 @@ export type FlexContextData = {
     rootGroup: Group;
     rootWidth: CurrentWritable<number>;
     rootHeight: CurrentWritable<number>;
-    reflow: (msg?: string) => void;
+    reflow: () => void;
     classParser?: ClassParser;
 };
 export type FlexContext = FlexContextData & Emitter<FlexContextEvents> & {

package/dist/hooks/useDimensions.d.ts

@@ -0,0 +1,50 @@
+import { type CurrentWritable } from '@threlte/core';
+type UseDimensionsContext = {
+    width: CurrentWritable<number>;
+    height: CurrentWritable<number>;
+};
+export declare const flexContextName = "__threlte-flex-dimensions";
+/**
+ * Creates a context for useDimensions.
+ */
+export declare const createUseDimensionsContext: () => UseDimensionsContext;
+/**
+ * The hook `useDimensions` can be used to retrieve the computed width and
+ * height of a `<Flex>` or `<Box>` component as
+ * [CurrentWritable](https://threlte.xyz/docs/reference/core/utilities#currentwritable)
+ * stores.
+ *
+ * ## Usage
+ *
+ * ### In a `<Flex>` component
+ *
+ * Because there's no viewport to measure, the width and height of a `<Flex>`
+ * component need to be set manually. Nevertheless, the dimensions of the
+ * contents of the `<Flex>` component will be measured after a layout reflow and
+ * can be retrieved using `useDimensions` in a direct child component to
+ * `<Flex>`.
+ *
+ * ### In a `<Box>` component
+ *
+ * By default `@threlte/flex` controls elements position only. In some cases you
+ * may want to control element sizing too. Since `@threlte/flex` has no
+ * information about how the inner content size works, you need to set your
+ * content size manually. You can do this by using `useDimensions` hook in a
+ * direct child component to `<Box>`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *  import { useDimensions } from '@threlte/flex'
+ *
+ *  const { width, height } = useDimensions()
+ * </script>
+ *
+ * <T.Mesh scale.x={$width} scale.y={$height}>
+ *   <T.BoxGeometry />
+ *   <T.MeshBasicMaterial color="red" />
+ * </T.Mesh>
+ * ```
+ */
+export declare const useDimensions: () => UseDimensionsContext;
+export {};

package/dist/hooks/useDimensions.js

@@ -0,0 +1,59 @@
+import { getContext, setContext } from 'svelte';
+import { currentWritable } from '@threlte/core';
+export const flexContextName = '__threlte-flex-dimensions';
+/**
+ * Creates a context for useDimensions.
+ */
+export const createUseDimensionsContext = () => {
+    const context = {
+        width: currentWritable(0),
+        height: currentWritable(0)
+    };
+    setContext(flexContextName, context);
+    return context;
+};
+/**
+ * The hook `useDimensions` can be used to retrieve the computed width and
+ * height of a `<Flex>` or `<Box>` component as
+ * [CurrentWritable](https://threlte.xyz/docs/reference/core/utilities#currentwritable)
+ * stores.
+ *
+ * ## Usage
+ *
+ * ### In a `<Flex>` component
+ *
+ * Because there's no viewport to measure, the width and height of a `<Flex>`
+ * component need to be set manually. Nevertheless, the dimensions of the
+ * contents of the `<Flex>` component will be measured after a layout reflow and
+ * can be retrieved using `useDimensions` in a direct child component to
+ * `<Flex>`.
+ *
+ * ### In a `<Box>` component
+ *
+ * By default `@threlte/flex` controls elements position only. In some cases you
+ * may want to control element sizing too. Since `@threlte/flex` has no
+ * information about how the inner content size works, you need to set your
+ * content size manually. You can do this by using `useDimensions` hook in a
+ * direct child component to `<Box>`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *  import { useDimensions } from '@threlte/flex'
+ *
+ *  const { width, height } = useDimensions()
+ * </script>
+ *
+ * <T.Mesh scale.x={$width} scale.y={$height}>
+ *   <T.BoxGeometry />
+ *   <T.MeshBasicMaterial color="red" />
+ * </T.Mesh>
+ * ```
+ */
+export const useDimensions = () => {
+    const context = getContext(flexContextName);
+    if (!context) {
+        throw new Error('useDimensions must be used within a <Flex> component');
+    }
+    return context;
+};

package/dist/hooks/useReflow.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The hook useReflow allows you to manually request a [layout
+ * reflow](https://threlte.xyz/docs/reference/flex/flex#layout-reflow), for
+ * instance when a [`<Text>`](https://threlte.xyz/docs/reference/extras/text)
+ * component finished synchronizing or when a model has loaded into view and
+ * there’s no easy access to the reflow slot prop of the components `<Flex>` or
+ * `<Box>` because of component composition. Calls to`reflow` will be limited to
+ * once per frame, so it’s safe to call it from multiple components at a time.
+ */
+export declare const useReflow: () => () => void;

package/dist/hooks/useReflow.js

@@ -0,0 +1,18 @@
+import { getContext } from 'svelte';
+import { flexContextName } from '../Flex/context';
+/**
+ * The hook useReflow allows you to manually request a [layout
+ * reflow](https://threlte.xyz/docs/reference/flex/flex#layout-reflow), for
+ * instance when a [`<Text>`](https://threlte.xyz/docs/reference/extras/text)
+ * component finished synchronizing or when a model has loaded into view and
+ * there’s no easy access to the reflow slot prop of the components `<Flex>` or
+ * `<Box>` because of component composition. Calls to`reflow` will be limited to
+ * once per frame, so it’s safe to call it from multiple components at a time.
+ */
+export const useReflow = () => {
+    const flexContext = getContext(flexContextName);
+    if (!flexContext) {
+        throw new Error('useReflow must be used within a <Flex> component');
+    }
+    return flexContext.reflow;
+};

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export { default as Flex } from './Flex/Flex.svelte';
 export type { NodeProps } from './lib/props';
 export { createClassParser } from './parsers/createClassParser';
 export { tailwindParser } from './parsers/tailwindParser';
+export { useReflow } from './hooks/useReflow';
+export { useDimensions } from './hooks/useDimensions';

package/dist/index.js

@@ -3,3 +3,6 @@ export { default as Flex } from './Flex/Flex.svelte';
 // parsers
 export { createClassParser } from './parsers/createClassParser';
 export { tailwindParser } from './parsers/tailwindParser';
+// hooks
+export { useReflow } from './hooks/useReflow';
+export { useDimensions } from './hooks/useDimensions';

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.6",
+  "version": "0.0.8",
   "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.8",
-    "@threlte/extras": "5.7.0"
+    "@threlte/core": "6.0.9",
+    "@threlte/extras": "6.0.0"
   },
   "dependencies": {
     "mitt": "^3.0.1",