@dxos/plugin-board 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5
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/chunk-FL67SBF5.mjs +39 -0
- package/dist/lib/browser/chunk-FL67SBF5.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +70 -69
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/types/index.mjs +1 -1
- package/dist/lib/node-esm/chunk-5GGKJL4Z.mjs +40 -0
- package/dist/lib/node-esm/chunk-5GGKJL4Z.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +70 -69
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/types/index.mjs +1 -1
- package/dist/types/src/BoardPlugin.d.ts +2 -1
- package/dist/types/src/BoardPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +2 -2
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +3 -2
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +0 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/containers/BoardContainer/BoardContainer.d.ts +6 -0
- package/dist/types/src/containers/BoardContainer/BoardContainer.d.ts.map +1 -0
- package/dist/types/src/containers/BoardContainer/BoardContainer.stories.d.ts +47 -0
- package/dist/types/src/containers/BoardContainer/BoardContainer.stories.d.ts.map +1 -0
- package/dist/types/src/containers/BoardContainer/index.d.ts +2 -0
- package/dist/types/src/containers/BoardContainer/index.d.ts.map +1 -0
- package/dist/types/src/containers/index.d.ts +3 -0
- package/dist/types/src/containers/index.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +2 -2
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +12 -10
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types/Board.d.ts +26 -68
- package/dist/types/src/types/Board.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +62 -48
- package/src/BoardPlugin.tsx +38 -50
- package/src/capabilities/index.ts +2 -3
- package/src/capabilities/react-surface.tsx +23 -14
- package/src/components/index.ts +0 -2
- package/src/containers/BoardContainer/BoardContainer.stories.tsx +122 -0
- package/src/containers/BoardContainer/BoardContainer.tsx +154 -0
- package/src/containers/BoardContainer/index.ts +5 -0
- package/src/containers/index.ts +7 -0
- package/src/index.ts +0 -1
- package/src/meta.ts +9 -5
- package/src/translations.ts +12 -10
- package/src/types/Board.ts +12 -22
- package/dist/lib/browser/chunk-2AR36W5A.mjs +0 -119
- package/dist/lib/browser/chunk-2AR36W5A.mjs.map +0 -7
- package/dist/lib/browser/chunk-V67SBM4U.mjs +0 -59
- package/dist/lib/browser/chunk-V67SBM4U.mjs.map +0 -7
- package/dist/lib/browser/intent-resolver-6NM32ZSV.mjs +0 -33
- package/dist/lib/browser/intent-resolver-6NM32ZSV.mjs.map +0 -7
- package/dist/lib/browser/react-surface-S7H45RGL.mjs +0 -30
- package/dist/lib/browser/react-surface-S7H45RGL.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-AWGKINO6.mjs +0 -121
- package/dist/lib/node-esm/chunk-AWGKINO6.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-XCGDC6OV.mjs +0 -60
- package/dist/lib/node-esm/chunk-XCGDC6OV.mjs.map +0 -7
- package/dist/lib/node-esm/intent-resolver-5DQ5PPTT.mjs +0 -34
- package/dist/lib/node-esm/intent-resolver-5DQ5PPTT.mjs.map +0 -7
- package/dist/lib/node-esm/react-surface-UGBLNFXL.mjs +0 -31
- package/dist/lib/node-esm/react-surface-UGBLNFXL.mjs.map +0 -7
- package/dist/types/src/capabilities/intent-resolver.d.ts +0 -4
- package/dist/types/src/capabilities/intent-resolver.d.ts.map +0 -1
- package/dist/types/src/components/BoardContainer.d.ts +0 -8
- package/dist/types/src/components/BoardContainer.d.ts.map +0 -1
- package/dist/types/src/components/BoardContainer.stories.d.ts +0 -8
- package/dist/types/src/components/BoardContainer.stories.d.ts.map +0 -1
- package/src/capabilities/intent-resolver.ts +0 -34
- package/src/components/BoardContainer.stories.tsx +0 -143
- package/src/components/BoardContainer.tsx +0 -104
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/intent-resolver.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capabilities, contributes, createResolver } from '@dxos/app-framework';\nimport { Obj } from '@dxos/echo';\n\nimport { Board } from '../types';\n\nexport default () => [\n contributes(\n Capabilities.IntentResolver,\n createResolver({\n intent: Board.Create,\n resolve: ({ name }) => {\n return {\n data: {\n object: Obj.make(Board.Board, {\n name,\n items: [],\n layout: {\n size: {\n width: 5,\n height: 5,\n },\n cells: {},\n },\n }),\n },\n };\n },\n }),\n ),\n];\n"],
|
|
5
|
-
"mappings": ";;;;;;AAIA,SAASA,cAAcC,aAAaC,sBAAsB;AAC1D,SAASC,WAAW;AAIpB,IAAA,0BAAe,MAAM;EACnBC,YACEC,aAAaC,gBACbC,eAAe;IACbC,QAAQC,cAAMC;IACdC,SAAS,CAAC,EAAEC,KAAI,MAAE;AAChB,aAAO;QACLC,MAAM;UACJC,QAAQC,IAAIC,KAAKP,cAAMA,OAAO;YAC5BG;YACAK,OAAO,CAAA;YACPC,QAAQ;cACNC,MAAM;gBACJC,OAAO;gBACPC,QAAQ;cACV;cACAC,OAAO,CAAC;YACV;UACF,CAAA;QACF;MACF;IACF;EACF,CAAA,CAAA;;",
|
|
6
|
-
"names": ["Capabilities", "contributes", "createResolver", "Obj", "contributes", "Capabilities", "IntentResolver", "createResolver", "intent", "Board", "Create", "resolve", "name", "data", "object", "Obj", "make", "items", "layout", "size", "width", "height", "cells"]
|
|
7
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
|
-
import {
|
|
3
|
-
BoardContainer
|
|
4
|
-
} from "./chunk-AWGKINO6.mjs";
|
|
5
|
-
import {
|
|
6
|
-
Board_exports,
|
|
7
|
-
meta
|
|
8
|
-
} from "./chunk-XCGDC6OV.mjs";
|
|
9
|
-
|
|
10
|
-
// src/capabilities/react-surface.tsx
|
|
11
|
-
import React from "react";
|
|
12
|
-
import { Capabilities, contributes, createSurface } from "@dxos/app-framework";
|
|
13
|
-
import { Obj } from "@dxos/echo";
|
|
14
|
-
var react_surface_default = (context) => contributes(Capabilities.ReactSurface, [
|
|
15
|
-
createSurface({
|
|
16
|
-
id: meta.id,
|
|
17
|
-
role: [
|
|
18
|
-
"article",
|
|
19
|
-
"section"
|
|
20
|
-
],
|
|
21
|
-
filter: (data) => Obj.instanceOf(Board_exports.Board, data.subject),
|
|
22
|
-
component: ({ data, role }) => /* @__PURE__ */ React.createElement(BoardContainer, {
|
|
23
|
-
board: data.subject,
|
|
24
|
-
role
|
|
25
|
-
})
|
|
26
|
-
})
|
|
27
|
-
]);
|
|
28
|
-
export {
|
|
29
|
-
react_surface_default as default
|
|
30
|
-
};
|
|
31
|
-
//# sourceMappingURL=react-surface-UGBLNFXL.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/react-surface.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Capabilities, type PluginContext, contributes, createSurface } from '@dxos/app-framework';\nimport { Obj } from '@dxos/echo';\n\nimport { BoardContainer } from '../components';\nimport { meta } from '../meta';\nimport { Board } from '../types';\n\nexport default (context: PluginContext) =>\n contributes(Capabilities.ReactSurface, [\n createSurface({\n id: meta.id,\n role: ['article', 'section'],\n filter: (data): data is { subject: Board.Board } => Obj.instanceOf(Board.Board, data.subject),\n component: ({ data, role }) => <BoardContainer board={data.subject} role={role} />,\n }),\n ]);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;AAIA,OAAOA,WAAW;AAElB,SAASC,cAAkCC,aAAaC,qBAAqB;AAC7E,SAASC,WAAW;AAMpB,IAAA,wBAAe,CAACC,YACdC,YAAYC,aAAaC,cAAc;EACrCC,cAAc;IACZC,IAAIC,KAAKD;IACTE,MAAM;MAAC;MAAW;;IAClBC,QAAQ,CAACC,SAA2CC,IAAIC,WAAWC,cAAMA,OAAOH,KAAKI,OAAO;IAC5FC,WAAW,CAAC,EAAEL,MAAMF,KAAI,MAAO,sBAAA,cAACQ,gBAAAA;MAAeC,OAAOP,KAAKI;MAASN;;EACtE,CAAA;CACD;",
|
|
6
|
-
"names": ["React", "Capabilities", "contributes", "createSurface", "Obj", "context", "contributes", "Capabilities", "ReactSurface", "createSurface", "id", "meta", "role", "filter", "data", "Obj", "instanceOf", "Board", "subject", "component", "BoardContainer", "board"]
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"intent-resolver.d.ts","sourceRoot":"","sources":["../../../../src/capabilities/intent-resolver.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAA+B,MAAM,qBAAqB,CAAC;;AAKhF,wBAwBE"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type Board as BoardType } from '../types';
|
|
3
|
-
export type BoardContainerProps = {
|
|
4
|
-
role?: string;
|
|
5
|
-
board: BoardType.Board;
|
|
6
|
-
};
|
|
7
|
-
export declare const BoardContainer: ({ role, board }: BoardContainerProps) => React.JSX.Element;
|
|
8
|
-
//# sourceMappingURL=BoardContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BoardContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/BoardContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAYxE,OAAO,EAAE,KAAK,KAAK,IAAI,SAAS,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,iBAAiB,mBAAmB,sBA+ElE,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import '@dxos-theme';
|
|
2
|
-
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
3
|
-
type StoryProps = {};
|
|
4
|
-
declare const meta: Meta<StoryProps>;
|
|
5
|
-
export default meta;
|
|
6
|
-
type Story = StoryObj<StoryProps>;
|
|
7
|
-
export declare const Default: Story;
|
|
8
|
-
//# sourceMappingURL=BoardContainer.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BoardContainer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/BoardContainer.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA+EjE,KAAK,UAAU,GAAG,EAAE,CAAC;AAMrB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CA6C1B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
|
|
6
|
-
import { Obj } from '@dxos/echo';
|
|
7
|
-
|
|
8
|
-
import { Board } from '../types';
|
|
9
|
-
|
|
10
|
-
export default () => [
|
|
11
|
-
contributes(
|
|
12
|
-
Capabilities.IntentResolver,
|
|
13
|
-
createResolver({
|
|
14
|
-
intent: Board.Create,
|
|
15
|
-
resolve: ({ name }) => {
|
|
16
|
-
return {
|
|
17
|
-
data: {
|
|
18
|
-
object: Obj.make(Board.Board, {
|
|
19
|
-
name,
|
|
20
|
-
items: [],
|
|
21
|
-
layout: {
|
|
22
|
-
size: {
|
|
23
|
-
width: 5,
|
|
24
|
-
height: 5,
|
|
25
|
-
},
|
|
26
|
-
cells: {},
|
|
27
|
-
},
|
|
28
|
-
}),
|
|
29
|
-
},
|
|
30
|
-
};
|
|
31
|
-
},
|
|
32
|
-
}),
|
|
33
|
-
),
|
|
34
|
-
];
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
8
|
-
import React, { useEffect, useState } from 'react';
|
|
9
|
-
|
|
10
|
-
import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
|
|
11
|
-
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
12
|
-
import { Obj } from '@dxos/echo';
|
|
13
|
-
import { ClientPlugin } from '@dxos/plugin-client';
|
|
14
|
-
import { PreviewPlugin } from '@dxos/plugin-preview';
|
|
15
|
-
import { SpacePlugin } from '@dxos/plugin-space';
|
|
16
|
-
import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
|
|
17
|
-
import { ThemePlugin } from '@dxos/plugin-theme';
|
|
18
|
-
import { faker } from '@dxos/random';
|
|
19
|
-
import { type Client, useClient } from '@dxos/react-client';
|
|
20
|
-
import { Filter, Ref, type Space, useQuery, useSpaces } from '@dxos/react-client/echo';
|
|
21
|
-
import { translations as stackTranslations } from '@dxos/react-ui-stack';
|
|
22
|
-
import { defaultTx } from '@dxos/react-ui-theme';
|
|
23
|
-
import { DataType } from '@dxos/schema';
|
|
24
|
-
import { withLayout } from '@dxos/storybook-utils';
|
|
25
|
-
|
|
26
|
-
import { translations } from '../translations';
|
|
27
|
-
import { Board } from '../types';
|
|
28
|
-
|
|
29
|
-
import { BoardContainer } from './BoardContainer';
|
|
30
|
-
|
|
31
|
-
faker.seed(0);
|
|
32
|
-
|
|
33
|
-
//
|
|
34
|
-
// Initialization utilities
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
const initializeBoard = async ({ space, client }: { space: Space; client: Client }) => {
|
|
38
|
-
// Create a new board
|
|
39
|
-
const board = Obj.make(Board.Board, {
|
|
40
|
-
name: 'Test Board',
|
|
41
|
-
items: [],
|
|
42
|
-
layout: {
|
|
43
|
-
size: { width: 7, height: 5 },
|
|
44
|
-
cells: {},
|
|
45
|
-
},
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
return { board };
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
//
|
|
52
|
-
// Story components
|
|
53
|
-
//
|
|
54
|
-
|
|
55
|
-
const rollOrg = () =>
|
|
56
|
-
({
|
|
57
|
-
name: faker.commerce.productName(),
|
|
58
|
-
description: faker.lorem.paragraph(),
|
|
59
|
-
image: faker.image.url(),
|
|
60
|
-
website: faker.internet.url(),
|
|
61
|
-
status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id,
|
|
62
|
-
// TODO(thure): Why is this so difficult to type?
|
|
63
|
-
}) as unknown as DataType.Organization;
|
|
64
|
-
|
|
65
|
-
const StorybookBoard = () => {
|
|
66
|
-
const _client = useClient();
|
|
67
|
-
const spaces = useSpaces();
|
|
68
|
-
const space = spaces[spaces.length - 1];
|
|
69
|
-
const boards = useQuery(space, Filter.type(Board.Board));
|
|
70
|
-
const [board, setBoard] = useState<Board.Board>();
|
|
71
|
-
|
|
72
|
-
useEffect(() => {
|
|
73
|
-
if (boards.length && !board) {
|
|
74
|
-
const board = boards[0];
|
|
75
|
-
setBoard(board);
|
|
76
|
-
}
|
|
77
|
-
}, [boards]);
|
|
78
|
-
|
|
79
|
-
if (!board) {
|
|
80
|
-
return null;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
return <BoardContainer role='board' board={board} />;
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
type StoryProps = {};
|
|
87
|
-
|
|
88
|
-
//
|
|
89
|
-
// Story definitions
|
|
90
|
-
//
|
|
91
|
-
|
|
92
|
-
const meta: Meta<StoryProps> = {
|
|
93
|
-
title: 'plugins/plugin-board/Board',
|
|
94
|
-
component: StorybookBoard,
|
|
95
|
-
render: () => <StorybookBoard />,
|
|
96
|
-
parameters: { translations: [...translations, ...stackTranslations] },
|
|
97
|
-
decorators: [
|
|
98
|
-
withLayout({ fullscreen: true }),
|
|
99
|
-
withPluginManager({
|
|
100
|
-
plugins: [
|
|
101
|
-
ThemePlugin({ tx: defaultTx }),
|
|
102
|
-
ClientPlugin({
|
|
103
|
-
types: [DataType.Organization, DataType.Person, Board.Board],
|
|
104
|
-
onClientInitialized: async ({ client }) => {
|
|
105
|
-
await client.halo.createIdentity();
|
|
106
|
-
const space = await client.spaces.create();
|
|
107
|
-
await space.waitUntilReady();
|
|
108
|
-
const { board } = await initializeBoard({
|
|
109
|
-
space,
|
|
110
|
-
client,
|
|
111
|
-
});
|
|
112
|
-
space.db.add(board);
|
|
113
|
-
|
|
114
|
-
// Add some sample items
|
|
115
|
-
Array.from({ length: 10 }).map(() => {
|
|
116
|
-
const org = Obj.make(DataType.Organization, rollOrg());
|
|
117
|
-
space.db.add(org);
|
|
118
|
-
board.items.push(Ref.make(org));
|
|
119
|
-
board.layout.cells[org.id] = {
|
|
120
|
-
x: Math.floor(Math.random() * 5) - 2,
|
|
121
|
-
y: Math.floor(Math.random() * 5) - 2,
|
|
122
|
-
width: 1,
|
|
123
|
-
height: 1,
|
|
124
|
-
};
|
|
125
|
-
return org;
|
|
126
|
-
});
|
|
127
|
-
},
|
|
128
|
-
}),
|
|
129
|
-
StorybookLayoutPlugin(),
|
|
130
|
-
PreviewPlugin(),
|
|
131
|
-
SpacePlugin(),
|
|
132
|
-
IntentPlugin(),
|
|
133
|
-
SettingsPlugin(),
|
|
134
|
-
],
|
|
135
|
-
}),
|
|
136
|
-
],
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
export default meta;
|
|
140
|
-
|
|
141
|
-
type Story = StoryObj<StoryProps>;
|
|
142
|
-
|
|
143
|
-
export const Default: Story = {};
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { effect } from '@preact/signals-react';
|
|
6
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
7
|
-
|
|
8
|
-
import { Surface, createIntent, useIntentDispatcher } from '@dxos/app-framework';
|
|
9
|
-
import { getSpace } from '@dxos/client/echo';
|
|
10
|
-
import { type Obj, Ref, type Type } from '@dxos/echo';
|
|
11
|
-
import { invariant } from '@dxos/invariant';
|
|
12
|
-
import { SpaceAction } from '@dxos/plugin-space/types';
|
|
13
|
-
import { Board, type BoardController, type BoardRootProps } from '@dxos/react-ui-board';
|
|
14
|
-
import { StackItem } from '@dxos/react-ui-stack';
|
|
15
|
-
import { isNonNullable } from '@dxos/util';
|
|
16
|
-
|
|
17
|
-
// TODO(thure): There is debate about having to rename either the type or the React component. A best practice should be chosen and either Board or Kanban (or both) should be refactored to apply it.
|
|
18
|
-
import { type Board as BoardType } from '../types';
|
|
19
|
-
|
|
20
|
-
export type BoardContainerProps = {
|
|
21
|
-
role?: string;
|
|
22
|
-
board: BoardType.Board;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export const BoardContainer = ({ role, board }: BoardContainerProps) => {
|
|
26
|
-
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
27
|
-
const controller = useRef<BoardController>(null);
|
|
28
|
-
|
|
29
|
-
// TODO(burdon): Create effect utility for reactive arrays.
|
|
30
|
-
const [items, setItems] = useState<Type.Expando[]>([]);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
let t: NodeJS.Timeout;
|
|
33
|
-
effect(() => {
|
|
34
|
-
const refs = [...board.items];
|
|
35
|
-
t = setTimeout(async () => {
|
|
36
|
-
const items = await Ref.Array.loadAll(refs);
|
|
37
|
-
setItems(items.filter(isNonNullable));
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
return () => clearTimeout(t);
|
|
42
|
-
}, [board.items]);
|
|
43
|
-
|
|
44
|
-
const handleAdd = useCallback<NonNullable<BoardRootProps['onAdd']>>(
|
|
45
|
-
async (position = { x: 0, y: 0 }) => {
|
|
46
|
-
const space = getSpace(board);
|
|
47
|
-
invariant(space);
|
|
48
|
-
await dispatch(
|
|
49
|
-
createIntent(SpaceAction.OpenCreateObject, {
|
|
50
|
-
target: space,
|
|
51
|
-
navigable: false,
|
|
52
|
-
onCreateObject: (object: Obj.Any) => {
|
|
53
|
-
board.items.push(Ref.make(object));
|
|
54
|
-
board.layout.cells[object.id] = { ...position, width: 1, height: 1 };
|
|
55
|
-
controller.current?.center(position);
|
|
56
|
-
},
|
|
57
|
-
}),
|
|
58
|
-
);
|
|
59
|
-
},
|
|
60
|
-
[board, controller, dispatch],
|
|
61
|
-
);
|
|
62
|
-
|
|
63
|
-
// TODO(burdon): Use intents so can be undone.
|
|
64
|
-
const handleDelete = useCallback<NonNullable<BoardRootProps['onDelete']>>(
|
|
65
|
-
(id) => {
|
|
66
|
-
// TODO(burdon): Impl. DXN.equals and pass in DXN from `id`.
|
|
67
|
-
const idx = board.items.findIndex((ref) => ref.dxn.asEchoDXN()?.echoId === id);
|
|
68
|
-
if (idx !== -1) {
|
|
69
|
-
board.items.splice(idx, 1);
|
|
70
|
-
}
|
|
71
|
-
delete board.layout.cells[id];
|
|
72
|
-
setItems((items) => items.filter((item) => item.id !== id));
|
|
73
|
-
},
|
|
74
|
-
[board],
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
const handleMove = useCallback<NonNullable<BoardRootProps['onMove']>>(
|
|
78
|
-
(id, position) => {
|
|
79
|
-
const layout = board.layout.cells[id];
|
|
80
|
-
board.layout.cells[id] = { ...layout, ...position };
|
|
81
|
-
},
|
|
82
|
-
[board],
|
|
83
|
-
);
|
|
84
|
-
|
|
85
|
-
return (
|
|
86
|
-
<Board.Root ref={controller} layout={board.layout} onAdd={handleAdd} onDelete={handleDelete} onMove={handleMove}>
|
|
87
|
-
<StackItem.Content toolbar classNames='overflow-hidden'>
|
|
88
|
-
<Board.Toolbar />
|
|
89
|
-
<Board.Container>
|
|
90
|
-
<Board.Viewport classNames='border-none'>
|
|
91
|
-
<Board.Backdrop />
|
|
92
|
-
<Board.Content>
|
|
93
|
-
{items?.map((item, index) => (
|
|
94
|
-
<Board.Cell item={item} key={index} layout={board.layout?.cells[item.id] ?? { x: 0, y: 0 }}>
|
|
95
|
-
<Surface role='card--extrinsic' data={{ subject: item }} limit={1} />
|
|
96
|
-
</Board.Cell>
|
|
97
|
-
))}
|
|
98
|
-
</Board.Content>
|
|
99
|
-
</Board.Viewport>
|
|
100
|
-
</Board.Container>
|
|
101
|
-
</StackItem.Content>
|
|
102
|
-
</Board.Root>
|
|
103
|
-
);
|
|
104
|
-
};
|