@threlte/flex 0.0.6 → 0.0.7

package/dist/Box/Box.svelte

@@ -1,12 +1,18 @@
-<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 { createNodeContext } from '../nodes/context';
+import { createUseDimensionsContext } from '../hooks/useDimensions';
 export let order = undefined;
 let _class = '';
 export { _class as class };
-const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser } = useFlex();
+const dispatch = createRawEventDispatcher();
+/**
+ * Create the context for `useDimensions`
+ */
+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();
 group.userData.isNode = true;
@@ -38,6 +44,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 +74,7 @@ onEvent('reflow:after', () => {
   }}
 >
   <slot
+    {reflow}
     width={computedWidth}
     height={computedHeight}
   />

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

@@ -6,10 +6,16 @@ type BoxProps = NodeProps & {
   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

@@ -8,6 +8,7 @@ import { getRootShift } from '../lib/getRootShift';
 import { applyNodeProps } from '../lib/props';
 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;
@@ -22,6 +23,10 @@ const rootGroup = new Group();
 rootGroup.userData.isNode = true;
 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 +73,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 });
@@ -120,19 +127,25 @@ const flexContext = createFlexContext({
 const { mainAxis, crossAxis, depthAxis } = flexContext;
 const { node: rootNode } = createNodeContext();
 $: rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
-$: applyNodeProps(rootNode, { ...classParser?.(_class, {}), ...$$restProps }, 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');
+}
+$: 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/flex",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "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",