@threlte/flex 0.1.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<script>import { T, createRawEventDispatcher, currentWritable,
|
|
1
|
+
<script>import { T, createRawEventDispatcher, currentWritable, useTask } from '@threlte/core';
|
|
2
2
|
import { onDestroy } from 'svelte';
|
|
3
3
|
import { Box3, Group, Vector3 } from 'three';
|
|
4
4
|
import { Direction } from 'yoga-layout';
|
|
@@ -19,6 +19,7 @@ export let scaleFactor = 1000;
|
|
|
19
19
|
export let classParser = undefined;
|
|
20
20
|
let _class = '';
|
|
21
21
|
export { _class as class };
|
|
22
|
+
export let reflowStage = undefined;
|
|
22
23
|
const dispatch = createRawEventDispatcher();
|
|
23
24
|
const rootGroup = new Group();
|
|
24
25
|
rootGroup.userData.isNode = true;
|
|
@@ -31,7 +32,7 @@ const { width: computedWidth, height: computedHeight } = createUseDimensionsCont
|
|
|
31
32
|
/**
|
|
32
33
|
* Reflowing inside useFrame automatically batches reflows to 1 per frame.
|
|
33
34
|
*/
|
|
34
|
-
const { start: reflow, stop } =
|
|
35
|
+
const { start: reflow, stop } = useTask(Symbol('threlte-flex-reflow'), () => {
|
|
35
36
|
flexContext.emit('reflow:before');
|
|
36
37
|
for (const { node, group, props } of flexContext.nodes.values()) {
|
|
37
38
|
const scaledWidth = typeof props.width === 'number' ? props.width * scaleFactor : props.width;
|
|
@@ -81,7 +82,10 @@ const { start: reflow, stop } = useFrame(() => {
|
|
|
81
82
|
height: computedHeight.current
|
|
82
83
|
});
|
|
83
84
|
stop();
|
|
84
|
-
}, {
|
|
85
|
+
}, {
|
|
86
|
+
stage: reflowStage,
|
|
87
|
+
autoStart: false
|
|
88
|
+
});
|
|
85
89
|
const flexContext = createFlexContext({
|
|
86
90
|
yoga,
|
|
87
91
|
nodes: new Map(),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import type { Stage } from '@threlte/core'
|
|
1
2
|
import { SvelteComponent } from 'svelte'
|
|
2
3
|
import type { Direction, Yoga } from 'yoga-layout'
|
|
3
|
-
import type { NodeProps } from '../lib/props'
|
|
4
|
-
import type { ClassParser, FlexPlane } from '../lib/props'
|
|
4
|
+
import type { ClassParser, FlexPlane, NodeProps } from '../lib/props'
|
|
5
5
|
|
|
6
6
|
type InnerFlexProps = NodeProps & {
|
|
7
7
|
yoga: Yoga
|
|
@@ -12,6 +12,7 @@ type InnerFlexProps = NodeProps & {
|
|
|
12
12
|
scaleFactor?: number
|
|
13
13
|
class?: string
|
|
14
14
|
classParser?: ClassParser
|
|
15
|
+
reflowStage?: Stage
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
type InnerFlexEvents = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@threlte/flex",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"devDependencies": {
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"tslib": "^2.4.1",
|
|
28
28
|
"typescript": "^5.0.0",
|
|
29
29
|
"vite": "^4.3.6",
|
|
30
|
-
"@threlte/core": "7.0.
|
|
31
|
-
"@threlte/extras": "8.0.
|
|
30
|
+
"@threlte/core": "7.0.6",
|
|
31
|
+
"@threlte/extras": "8.0.3"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"mitt": "^3.0.1",
|