@dxos/react-ui-canvas 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d
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.
- package/dist/lib/browser/index.mjs +10 -10
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +10 -10
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Canvas/Canvas.d.ts.map +1 -1
- package/dist/types/src/components/Canvas/Canvas.stories.d.ts.map +1 -1
- package/dist/types/src/components/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/components/Grid/Grid.stories.d.ts.map +1 -1
- package/dist/types/src/hooks/projection.d.ts +1 -1
- package/dist/types/src/hooks/projection.d.ts.map +1 -1
- package/dist/types/src/hooks/useWheel.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +13 -12
- package/src/components/Canvas/Canvas.stories.tsx +2 -1
- package/src/components/Canvas/Canvas.tsx +8 -12
- package/src/components/Grid/Grid.stories.tsx +2 -1
- package/src/components/Grid/Grid.tsx +2 -2
- package/src/hooks/projection.tsx +2 -2
- package/src/hooks/useWheel.tsx +2 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-canvas",
|
|
3
|
-
"version": "0.8.4-main.
|
|
3
|
+
"version": "0.8.4-main.fd6878d",
|
|
4
4
|
"description": "A canvas component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": {
|
|
12
|
+
"source": "./src/index.ts",
|
|
12
13
|
"types": "./dist/types/src/index.d.ts",
|
|
13
14
|
"browser": "./dist/lib/browser/index.mjs",
|
|
14
15
|
"node": "./dist/lib/node-esm/index.mjs"
|
|
@@ -30,30 +31,30 @@
|
|
|
30
31
|
"d3": "^7.9.0",
|
|
31
32
|
"react-resize-detector": "^11.0.1",
|
|
32
33
|
"transformation-matrix": "^2.16.1",
|
|
33
|
-
"@dxos/debug": "0.8.4-main.
|
|
34
|
-
"@dxos/
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/util": "0.8.4-main.
|
|
34
|
+
"@dxos/debug": "0.8.4-main.fd6878d",
|
|
35
|
+
"@dxos/invariant": "0.8.4-main.fd6878d",
|
|
36
|
+
"@dxos/log": "0.8.4-main.fd6878d",
|
|
37
|
+
"@dxos/util": "0.8.4-main.fd6878d"
|
|
37
38
|
},
|
|
38
39
|
"devDependencies": {
|
|
39
40
|
"@types/d3": "^7.4.3",
|
|
40
41
|
"@types/react": "~18.2.0",
|
|
41
42
|
"@types/react-dom": "~18.2.0",
|
|
42
|
-
"effect": "3.
|
|
43
|
+
"effect": "3.17.7",
|
|
43
44
|
"react": "~18.2.0",
|
|
44
45
|
"react-dom": "~18.2.0",
|
|
45
46
|
"vite": "5.4.7",
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/react-ui-theme": "0.8.4-main.
|
|
48
|
-
"@dxos/storybook-utils": "0.8.4-main.
|
|
49
|
-
"@dxos/
|
|
47
|
+
"@dxos/react-ui": "0.8.4-main.fd6878d",
|
|
48
|
+
"@dxos/react-ui-theme": "0.8.4-main.fd6878d",
|
|
49
|
+
"@dxos/storybook-utils": "0.8.4-main.fd6878d",
|
|
50
|
+
"@dxos/random": "0.8.4-main.fd6878d"
|
|
50
51
|
},
|
|
51
52
|
"peerDependencies": {
|
|
52
53
|
"effect": "3.13.3",
|
|
53
54
|
"react": "~18.2.0",
|
|
54
55
|
"react-dom": "~18.2.0",
|
|
55
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
56
|
-
"@dxos/react-ui-theme": "0.8.4-main.
|
|
56
|
+
"@dxos/react-ui": "0.8.4-main.fd6878d",
|
|
57
|
+
"@dxos/react-ui-theme": "0.8.4-main.fd6878d"
|
|
57
58
|
},
|
|
58
59
|
"publishConfig": {
|
|
59
60
|
"access": "public"
|
|
@@ -9,12 +9,13 @@ import React from 'react';
|
|
|
9
9
|
|
|
10
10
|
import { withLayout, withTheme } from '@dxos/storybook-utils';
|
|
11
11
|
|
|
12
|
-
import { Canvas } from './Canvas';
|
|
13
12
|
import { useCanvasContext, useWheel } from '../../hooks';
|
|
14
13
|
import { type Point } from '../../types';
|
|
15
14
|
import { testId } from '../../util';
|
|
16
15
|
import { Grid, type GridProps } from '../Grid';
|
|
17
16
|
|
|
17
|
+
import { Canvas } from './Canvas';
|
|
18
|
+
|
|
18
19
|
const size = 128;
|
|
19
20
|
|
|
20
21
|
const points: Point[] = [0, (2 * Math.PI) / 3, (2 * Math.PI * 2) / 3].map((a, i) => ({
|
|
@@ -17,7 +17,7 @@ import { useResizeDetector } from 'react-resize-detector';
|
|
|
17
17
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
18
18
|
import { mx } from '@dxos/react-ui-theme';
|
|
19
19
|
|
|
20
|
-
import {
|
|
20
|
+
import { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks';
|
|
21
21
|
|
|
22
22
|
export interface CanvasController {
|
|
23
23
|
setProjection(projection: ProjectionState): Promise<void>;
|
|
@@ -64,17 +64,13 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
|
|
|
64
64
|
}, [scale, offset]);
|
|
65
65
|
|
|
66
66
|
// Controller.
|
|
67
|
-
useImperativeHandle(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
};
|
|
75
|
-
},
|
|
76
|
-
[ref],
|
|
77
|
-
);
|
|
67
|
+
useImperativeHandle(forwardedRef, () => {
|
|
68
|
+
return {
|
|
69
|
+
setProjection: async (projection: ProjectionState) => {
|
|
70
|
+
setProjection(projection);
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
}, [ref]);
|
|
78
74
|
|
|
79
75
|
return (
|
|
80
76
|
<CanvasContext.Provider
|
|
@@ -9,9 +9,10 @@ import React, { useRef, useState } from 'react';
|
|
|
9
9
|
|
|
10
10
|
import { withLayout, withTheme } from '@dxos/storybook-utils';
|
|
11
11
|
|
|
12
|
-
import { GridComponent, type GridProps } from './Grid';
|
|
13
12
|
import { type ProjectionState } from '../../hooks';
|
|
14
13
|
|
|
14
|
+
import { GridComponent, type GridProps } from './Grid';
|
|
15
|
+
|
|
15
16
|
const DefaultStory = (props: GridProps) => {
|
|
16
17
|
const ref = useRef<HTMLDivElement>(null);
|
|
17
18
|
const [{ scale, offset }] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, { forwardRef,
|
|
5
|
+
import React, { forwardRef, useId, useMemo } from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
|
|
8
8
|
import { mx } from '@dxos/react-ui-theme';
|
|
9
9
|
|
|
10
10
|
import { useCanvasContext } from '../../hooks';
|
package/src/hooks/projection.tsx
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { interpolate, interpolateObject, transition
|
|
5
|
+
import { easeSinOut, interpolate, interpolateObject, transition } from 'd3';
|
|
6
6
|
import {
|
|
7
7
|
type Matrix,
|
|
8
8
|
applyToPoints,
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
translate as translateMatrix,
|
|
14
14
|
} from 'transformation-matrix';
|
|
15
15
|
|
|
16
|
-
import { type
|
|
16
|
+
import { type Dimension, type Point } from '../types';
|
|
17
17
|
|
|
18
18
|
export const defaultOrigin: Point = { x: 0, y: 0 };
|
|
19
19
|
|
package/src/hooks/useWheel.tsx
CHANGED
|
@@ -5,9 +5,10 @@
|
|
|
5
5
|
import { bindAll } from 'bind-event-listener';
|
|
6
6
|
import { useEffect } from 'react';
|
|
7
7
|
|
|
8
|
+
import { getRelativePoint } from '../util';
|
|
9
|
+
|
|
8
10
|
import { getZoomTransform } from './projection';
|
|
9
11
|
import { useCanvasContext } from './useCanvasContext';
|
|
10
|
-
import { getRelativePoint } from '../util';
|
|
11
12
|
|
|
12
13
|
export type WheelOptions = {
|
|
13
14
|
zoom?: boolean;
|