Skip to content

Commit c3a7a08

Browse files
authored
Update Weave dependencies to 0.31.0 (#109)
* chore: initial commit * chore: update weave dependencies * chore: fix lint issues * chore: fix lint issues * chore: update dependency changes * chore: update dependency changes * chore: missing reuse
1 parent 4946cd9 commit c3a7a08

File tree

13 files changed

+366
-306
lines changed

13 files changed

+366
-306
lines changed

code/app/rooms/[roomId]/page.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
// SPDX-License-Identifier: Apache-2.0
44

55
import { Room } from "@/components/room/room";
6+
import { NoSsr } from "@/components/room-components/no-ssr";
67

78
export default function RoomPage() {
8-
return <Room />;
9+
return (
10+
<NoSsr>
11+
<Room />
12+
</NoSsr>
13+
);
914
}

code/components/actions/align-elements-tool/align-elements-tool.ts

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class AlignElementsToolAction extends WeaveAction {
2222
}
2323

2424
const instances: Konva.Node[] = [];
25-
let actualType: string | undefined = nodes[0].node.type;
25+
let actualType: string | undefined = nodes[0].node?.type;
2626
for (const node of nodes) {
2727
if (node.instance.getAttrs().nodeType === actualType) {
2828
instances.push(node.instance);
@@ -51,23 +51,26 @@ export class AlignElementsToolAction extends WeaveAction {
5151
const handler = this.instance.getNodeHandler<WeaveNode>(
5252
instance.getAttrs().nodeType,
5353
);
54-
const node = handler.serialize(instance as WeaveElementInstance);
5554

56-
const newNode = {
57-
...node,
58-
props: {
59-
...node.props,
55+
if (handler) {
56+
const node = handler.serialize(instance as WeaveElementInstance);
57+
58+
const newNode = {
59+
...node,
60+
props: {
61+
...node.props,
62+
x: (prevInstance.x() ?? 0) + (prevInstance.width() ?? 0) + gap,
63+
y,
64+
},
65+
};
66+
67+
instance.setAttrs({
6068
x: (prevInstance.x() ?? 0) + (prevInstance.width() ?? 0) + gap,
6169
y,
62-
},
63-
};
64-
65-
instance.setAttrs({
66-
x: (prevInstance.x() ?? 0) + (prevInstance.width() ?? 0) + gap,
67-
y,
68-
});
70+
});
6971

70-
this.instance.updateNode(newNode);
72+
this.instance.updateNode(newNode);
73+
}
7174

7275
prevInstance = instance;
7376
}

code/components/actions/color-token-tool/color-token-tool.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,15 @@ export class ColorTokenToolAction extends WeaveAction {
118118
const nodeHandler =
119119
this.instance.getNodeHandler<ColorTokenNode>("color-token");
120120

121-
const node = nodeHandler.create(this.colorTokenId, {
122-
...this.props,
123-
x: this.clickPoint.x,
124-
y: this.clickPoint.y,
125-
});
126-
127-
this.instance.addNode(node, this.container?.getAttrs().id);
121+
if (nodeHandler) {
122+
const node = nodeHandler.create(this.colorTokenId, {
123+
...this.props,
124+
x: this.clickPoint.x,
125+
y: this.clickPoint.y,
126+
});
127+
128+
this.instance.addNode(node, this.container?.getAttrs().id);
129+
}
128130

129131
this.cancelAction?.();
130132
}

code/components/room-components/elements-tree/elements-tree.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const ElementsTree = () => {
8888
[],
8989
);
9090
const [selectedNodes, setSelectedNodes] = React.useState<string[]>(
91-
initialSelectedNodes.map((node) => node.node.key),
91+
initialSelectedNodes.map((node) => node.node?.key).filter((key) => typeof key !== 'undefined'),
9292
);
9393

9494
React.useEffect(() => {
@@ -114,7 +114,7 @@ export const ElementsTree = () => {
114114

115115
React.useEffect(() => {
116116
function handleOnNodesSelectedChange(nodes: WeaveSelection[]) {
117-
setSelectedNodes(nodes.map((node) => node.node.key));
117+
setSelectedNodes(nodes.map((node) => node.node?.key).filter((key) => typeof key !== 'undefined'));
118118
}
119119

120120
if (instance) {

code/components/room-components/frames-library/frames-library.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export const FramesLibrary = () => {
8686
const selectedNodesAllFrame = React.useMemo(() => {
8787
let allFrame = true;
8888
for (const node of selectedNodes) {
89-
if (node.node.type !== "frame") {
89+
if (node.node?.type !== "frame") {
9090
allFrame = false;
9191
break;
9292
}
@@ -99,7 +99,7 @@ export const FramesLibrary = () => {
9999
return;
100100
}
101101

102-
instance.triggerAction<{ gap: number; nodes: WeaveSelection[] }>(
102+
instance.triggerAction<{ gap: number; nodes: WeaveSelection[] }, void>(
103103
"alignElementsTool",
104104
{
105105
gap: 20,

code/components/room-components/hooks/use-context-menu.tsx

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ function useContextMenu() {
104104
icon: <ImageDown size={16} />,
105105
disabled: nodes.length <= 0,
106106
onClick: () => {
107-
instance.triggerAction<WeaveExportNodesActionParams>(
107+
instance.triggerAction<WeaveExportNodesActionParams, void>(
108108
"exportNodesTool",
109109
{
110110
nodes: nodes.map((n) => n.instance),
@@ -298,7 +298,11 @@ function useContextMenu() {
298298
icon: <Group size={16} />,
299299
disabled: !canGroup,
300300
onClick: () => {
301-
instance.group(nodes.map((n) => n.node));
301+
instance.group(
302+
nodes
303+
.map((n) => n?.node)
304+
.filter((node) => typeof node !== "undefined")
305+
);
302306
setContextMenuShow(false);
303307
},
304308
});
@@ -320,8 +324,10 @@ function useContextMenu() {
320324
icon: <Ungroup size={16} />,
321325
disabled: !canUnGroup,
322326
onClick: () => {
323-
instance.unGroup(nodes[0].node);
324-
setContextMenuShow(false);
327+
if (nodes[0].node) {
328+
instance.unGroup(nodes[0].node);
329+
setContextMenuShow(false);
330+
}
325331
},
326332
});
327333
}
@@ -351,7 +357,9 @@ function useContextMenu() {
351357
icon: <Trash size={16} />,
352358
onClick: () => {
353359
for (const node of nodes) {
354-
instance.removeNode(node.node);
360+
if (node.node) {
361+
instance.removeNode(node.node);
362+
}
355363
}
356364

357365
setContextMenuShow(false);
@@ -361,7 +369,7 @@ function useContextMenu() {
361369

362370
if (
363371
nodes.length === 1 &&
364-
["image", "group"].includes(nodes[0].node.type)
372+
["image", "group"].includes(nodes[0].node?.type ?? "")
365373
) {
366374
options.unshift({
367375
id: "div-image",
@@ -374,26 +382,28 @@ function useContextMenu() {
374382
label: "Edit image with a prompt",
375383
icon: <Bot size={16} />,
376384
onClick: async () => {
377-
const base64URL: unknown =
378-
await instance.triggerAction<WeaveExportNodesActionParams>(
379-
"exportNodesTool",
380-
{
381-
nodes: nodes.map((n) => n.instance),
382-
options: {
383-
padding: 0,
384-
pixelRatio: 1,
385-
},
386-
download: false,
387-
}
388-
);
385+
const base64URL: unknown = await instance.triggerAction<
386+
WeaveExportNodesActionParams,
387+
void
388+
>("exportNodesTool", {
389+
nodes: nodes.map((n) => n.instance),
390+
options: {
391+
padding: 0,
392+
pixelRatio: 1,
393+
},
394+
download: false,
395+
});
389396

390397
setImagesLLMPopupType("edit");
391398
setImagesLLMPopupImage(base64URL as string);
392399
setImagesLLMPopupVisible(true);
393400
setContextMenuShow(false);
394401
},
395402
});
396-
if (nodes.length === 1 && ["image"].includes(nodes[0].node.type)) {
403+
if (
404+
nodes.length === 1 &&
405+
["image"].includes(nodes[0].node?.type ?? "")
406+
) {
397407
options.unshift({
398408
id: "removeBackground",
399409
type: "button",
@@ -468,7 +478,7 @@ function useContextMenu() {
468478

469479
const canGroup = selection.length > 1;
470480
const canUnGroup =
471-
selection.length === 1 && selection[0].node.type === "group";
481+
selection.length === 1 && (selection[0]?.node?.type ?? "") === "group";
472482

473483
const actActionActive = instance.getActiveAction();
474484

code/components/room-components/hooks/use-keyboard-handler.tsx

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,8 @@ export function useKeyboardHandler() {
184184
instance.getPlugin<WeaveUsersPointersPlugin>("usersPointers");
185185
if (usersPointersPlugin && usersPointersPlugin.isEnabled()) {
186186
usersPointersPlugin.disable();
187-
} else {
187+
}
188+
if (usersPointersPlugin && !usersPointersPlugin.isEnabled()) {
188189
usersPointersPlugin.enable();
189190
}
190191
}
@@ -232,13 +233,16 @@ export function useKeyboardHandler() {
232233
useKeyDown(
233234
() => {
234235
if (instance && selectedNodes.length === 1) {
235-
instance.triggerAction<WeaveExportNodesActionParams>("exportNodeTool", {
236-
nodes: selectedNodes.map((node) => node.instance),
237-
options: {
238-
padding: 20,
239-
pixelRatio: 2,
240-
},
241-
});
236+
instance.triggerAction<WeaveExportNodesActionParams, void>(
237+
"exportNodeTool",
238+
{
239+
nodes: selectedNodes.map((node) => node.instance),
240+
options: {
241+
padding: 20,
242+
pixelRatio: 2,
243+
},
244+
}
245+
);
242246
}
243247
},
244248
["KeyE"],
@@ -250,7 +254,7 @@ export function useKeyboardHandler() {
250254
useKeyDown(
251255
() => {
252256
if (instance) {
253-
instance.triggerAction<WeaveExportStageActionParams>(
257+
instance.triggerAction<WeaveExportStageActionParams, void>(
254258
"exportStageTool",
255259
{
256260
options: {
@@ -312,7 +316,11 @@ export function useKeyboardHandler() {
312316
useKeyDown(
313317
() => {
314318
if (instance && selectedNodes.length > 1) {
315-
instance.group(selectedNodes.map((n) => n.node));
319+
instance.group(
320+
selectedNodes
321+
.map((n) => n?.node)
322+
.filter((node) => typeof node !== "undefined")
323+
);
316324
}
317325
},
318326
["KeyG"],
@@ -326,7 +334,7 @@ export function useKeyboardHandler() {
326334
if (
327335
instance &&
328336
selectedNodes.length === 1 &&
329-
selectedNodes[0].node.type === "group"
337+
selectedNodes[0].node?.type === "group"
330338
) {
331339
instance.unGroup(selectedNodes[0].node);
332340
}
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
2+
//
3+
// SPDX-License-Identifier: Apache-2.0
4+
5+
import { useEffect, useState } from "react";
6+
7+
export function useMounted() {
8+
const [mounted, setMounted] = useState(false);
9+
10+
useEffect(() => {
11+
setMounted(true);
12+
}, []);
13+
14+
return mounted;
15+
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
2+
//
3+
// SPDX-License-Identifier: Apache-2.0
4+
5+
"use client";
6+
7+
import React from "react";
8+
import { useMounted } from "@/components/room-components/hooks/use-mounted";
9+
10+
export function NoSsr({ children }: { children: React.ReactNode }) {
11+
const mounted = useMounted();
12+
if (!mounted) return null;
13+
return <>{children}</>;
14+
}

code/components/room-components/overlay/room-header.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,12 +153,15 @@ export function RoomHeader() {
153153

154154
const handleExportToImage = React.useCallback(() => {
155155
if (instance) {
156-
instance.triggerAction<WeaveExportStageActionParams>("exportStageTool", {
157-
options: {
158-
padding: 20,
159-
pixelRatio: 2,
160-
},
161-
});
156+
instance.triggerAction<WeaveExportStageActionParams, void>(
157+
"exportStageTool",
158+
{
159+
options: {
160+
padding: 20,
161+
pixelRatio: 2,
162+
},
163+
}
164+
);
162165
}
163166
}, [instance]);
164167

0 commit comments

Comments
 (0)