rita-workspace 0.4.3 → 0.4.5

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.
Files changed (5) hide show
  1. package/dist/index.d.mts +4 -0
  2. package/dist/index.d.ts +4 -0
  3. package/dist/index.js +99 -107
  4. package/dist/index.mjs +99 -107
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -236,6 +236,10 @@ interface DrawingsDialogProps {
236
236
  * Falls back to English if not supported
237
237
  */
238
238
  lang?: string;
239
+ /**
240
+ * Optional thumbnail renderer for each drawing
241
+ */
242
+ renderThumbnail?: (drawing: Drawing) => React.ReactNode;
239
243
  }
240
244
  /**
241
245
  * DrawingsDialog - modal for managing workspace drawings
package/dist/index.d.ts CHANGED
@@ -236,6 +236,10 @@ interface DrawingsDialogProps {
236
236
  * Falls back to English if not supported
237
237
  */
238
238
  lang?: string;
239
+ /**
240
+ * Optional thumbnail renderer for each drawing
241
+ */
242
+ renderThumbnail?: (drawing: Drawing) => React.ReactNode;
239
243
  }
240
244
  /**
241
245
  * DrawingsDialog - modal for managing workspace drawings
package/dist/index.js CHANGED
@@ -216,7 +216,7 @@ var sv = {
216
216
  newDrawing: "Ny ritning",
217
217
  manageDrawings: "Hantera arbetsyta...",
218
218
  // Dialog
219
- dialogTitle: "Min Arbetsyta",
219
+ dialogTitle: "Min Rita Arbetsyta",
220
220
  close: "St\xE4ng",
221
221
  open: "\xD6ppna",
222
222
  rename: "Byt namn",
@@ -897,7 +897,8 @@ var DrawingsDialog = ({
897
897
  open,
898
898
  onClose,
899
899
  onDrawingSelect,
900
- lang
900
+ lang,
901
+ renderThumbnail
901
902
  }) => {
902
903
  const {
903
904
  drawings,
@@ -1055,15 +1056,32 @@ var DrawingsDialog = ({
1055
1056
  "div",
1056
1057
  {
1057
1058
  className: "rita-workspace-dialog-item",
1059
+ onClick: () => {
1060
+ if (editingId || confirmDeleteId) return;
1061
+ if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
1062
+ },
1058
1063
  style: {
1059
1064
  padding: "12px 20px",
1060
1065
  display: "flex",
1061
1066
  alignItems: "center",
1062
1067
  gap: "12px",
1063
1068
  borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
1069
+ cursor: editingId || confirmDeleteId ? "default" : "pointer",
1064
1070
  backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
1065
1071
  },
1066
1072
  children: [
1073
+ renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
1074
+ width: "80px",
1075
+ height: "60px",
1076
+ flexShrink: 0,
1077
+ borderRadius: "4px",
1078
+ overflow: "hidden",
1079
+ border: "1px solid var(--default-border-color, #e0e0e0)",
1080
+ backgroundColor: "#fff",
1081
+ display: "flex",
1082
+ alignItems: "center",
1083
+ justifyContent: "center"
1084
+ }, children: renderThumbnail(drawing) }),
1067
1085
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1068
1086
  "input",
1069
1087
  {
@@ -1187,24 +1205,10 @@ var DrawingsDialog = ({
1187
1205
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1188
1206
  "button",
1189
1207
  {
1190
- onClick: () => handleSelect(drawing),
1191
- style: {
1192
- padding: "6px 12px",
1193
- fontSize: "12px",
1194
- backgroundColor: "var(--color-primary, #6c63ff)",
1195
- color: "#fff",
1196
- border: "none",
1197
- borderRadius: "4px",
1198
- cursor: "pointer"
1208
+ onClick: (e) => {
1209
+ e.stopPropagation();
1210
+ exportDrawingAsExcalidraw(drawing.id);
1199
1211
  },
1200
- disabled: activeDrawing?.id === drawing.id,
1201
- children: t.open
1202
- }
1203
- ),
1204
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1205
- "button",
1206
- {
1207
- onClick: () => exportDrawingAsExcalidraw(drawing.id),
1208
1212
  style: {
1209
1213
  padding: "6px 12px",
1210
1214
  fontSize: "12px",
@@ -1221,7 +1225,10 @@ var DrawingsDialog = ({
1221
1225
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1222
1226
  "button",
1223
1227
  {
1224
- onClick: () => handleStartEdit(drawing),
1228
+ onClick: (e) => {
1229
+ e.stopPropagation();
1230
+ handleStartEdit(drawing);
1231
+ },
1225
1232
  style: {
1226
1233
  padding: "6px 12px",
1227
1234
  fontSize: "12px",
@@ -1238,7 +1245,10 @@ var DrawingsDialog = ({
1238
1245
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1239
1246
  "button",
1240
1247
  {
1241
- onClick: () => setConfirmDeleteId(drawing.id),
1248
+ onClick: (e) => {
1249
+ e.stopPropagation();
1250
+ setConfirmDeleteId(drawing.id);
1251
+ },
1242
1252
  style: {
1243
1253
  padding: "6px 12px",
1244
1254
  fontSize: "12px",
@@ -1260,7 +1270,7 @@ var DrawingsDialog = ({
1260
1270
  ))
1261
1271
  }
1262
1272
  ),
1263
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1273
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1264
1274
  "div",
1265
1275
  {
1266
1276
  style: {
@@ -1270,91 +1280,69 @@ var DrawingsDialog = ({
1270
1280
  justifyContent: "space-between",
1271
1281
  alignItems: "center"
1272
1282
  },
1273
- children: [
1274
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
1275
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1276
- "button",
1277
- {
1278
- onClick: handleCreate,
1279
- style: {
1280
- padding: "10px 20px",
1281
- fontSize: "14px",
1282
- backgroundColor: "var(--color-primary, #6c63ff)",
1283
- color: "#fff",
1284
- border: "none",
1285
- borderRadius: "6px",
1286
- cursor: "pointer",
1287
- fontWeight: 500
1288
- },
1289
- children: [
1290
- "+ ",
1291
- t.newDrawing
1292
- ]
1293
- }
1294
- ),
1295
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1296
- "button",
1297
- {
1298
- onClick: importExcalidrawFile,
1299
- style: {
1300
- padding: "10px 20px",
1301
- fontSize: "14px",
1302
- backgroundColor: "transparent",
1303
- border: "1px solid var(--default-border-color, #ccc)",
1304
- borderRadius: "6px",
1305
- cursor: "pointer",
1306
- color: "inherit"
1307
- },
1308
- children: [
1309
- "\u{1F4C2} ",
1310
- t.importDrawing
1311
- ]
1312
- }
1313
- ),
1314
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1315
- "button",
1316
- {
1317
- onClick: importWorkspace,
1318
- style: {
1319
- padding: "10px 20px",
1320
- fontSize: "14px",
1321
- backgroundColor: "transparent",
1322
- border: "1px solid var(--default-border-color, #ccc)",
1323
- borderRadius: "6px",
1324
- cursor: "pointer",
1325
- color: "inherit"
1326
- },
1327
- children: [
1328
- "\u{1F4E5} ",
1329
- t.importWorkspace
1330
- ]
1331
- }
1332
- ),
1333
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1334
- "button",
1335
- {
1336
- onClick: exportWorkspace,
1337
- style: {
1338
- padding: "10px 20px",
1339
- fontSize: "14px",
1340
- backgroundColor: "transparent",
1341
- border: "1px solid var(--default-border-color, #ccc)",
1342
- borderRadius: "6px",
1343
- cursor: "pointer",
1344
- color: "inherit"
1345
- },
1346
- disabled: drawings.length === 0,
1347
- children: [
1348
- "\u{1F4E4} ",
1349
- t.exportWorkspace
1350
- ]
1351
- }
1352
- )
1353
- ] }),
1354
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1283
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
1284
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1355
1285
  "button",
1356
1286
  {
1357
- onClick: onClose,
1287
+ onClick: handleCreate,
1288
+ style: {
1289
+ padding: "10px 20px",
1290
+ fontSize: "14px",
1291
+ backgroundColor: "var(--color-primary, #6c63ff)",
1292
+ color: "#fff",
1293
+ border: "none",
1294
+ borderRadius: "6px",
1295
+ cursor: "pointer",
1296
+ fontWeight: 500
1297
+ },
1298
+ children: [
1299
+ "+ ",
1300
+ t.newDrawing
1301
+ ]
1302
+ }
1303
+ ),
1304
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1305
+ "button",
1306
+ {
1307
+ onClick: importExcalidrawFile,
1308
+ style: {
1309
+ padding: "10px 20px",
1310
+ fontSize: "14px",
1311
+ backgroundColor: "transparent",
1312
+ border: "1px solid var(--default-border-color, #ccc)",
1313
+ borderRadius: "6px",
1314
+ cursor: "pointer",
1315
+ color: "inherit"
1316
+ },
1317
+ children: [
1318
+ "\u{1F4C2} ",
1319
+ t.importDrawing
1320
+ ]
1321
+ }
1322
+ ),
1323
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1324
+ "button",
1325
+ {
1326
+ onClick: importWorkspace,
1327
+ style: {
1328
+ padding: "10px 20px",
1329
+ fontSize: "14px",
1330
+ backgroundColor: "transparent",
1331
+ border: "1px solid var(--default-border-color, #ccc)",
1332
+ borderRadius: "6px",
1333
+ cursor: "pointer",
1334
+ color: "inherit"
1335
+ },
1336
+ children: [
1337
+ "\u{1F4E5} ",
1338
+ t.importWorkspace
1339
+ ]
1340
+ }
1341
+ ),
1342
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1343
+ "button",
1344
+ {
1345
+ onClick: exportWorkspace,
1358
1346
  style: {
1359
1347
  padding: "10px 20px",
1360
1348
  fontSize: "14px",
@@ -1364,10 +1352,14 @@ var DrawingsDialog = ({
1364
1352
  cursor: "pointer",
1365
1353
  color: "inherit"
1366
1354
  },
1367
- children: t.close
1355
+ disabled: drawings.length === 0,
1356
+ children: [
1357
+ "\u{1F4E4} ",
1358
+ t.exportWorkspace
1359
+ ]
1368
1360
  }
1369
1361
  )
1370
- ]
1362
+ ] })
1371
1363
  }
1372
1364
  )
1373
1365
  ]
package/dist/index.mjs CHANGED
@@ -154,7 +154,7 @@ var sv = {
154
154
  newDrawing: "Ny ritning",
155
155
  manageDrawings: "Hantera arbetsyta...",
156
156
  // Dialog
157
- dialogTitle: "Min Arbetsyta",
157
+ dialogTitle: "Min Rita Arbetsyta",
158
158
  close: "St\xE4ng",
159
159
  open: "\xD6ppna",
160
160
  rename: "Byt namn",
@@ -835,7 +835,8 @@ var DrawingsDialog = ({
835
835
  open,
836
836
  onClose,
837
837
  onDrawingSelect,
838
- lang
838
+ lang,
839
+ renderThumbnail
839
840
  }) => {
840
841
  const {
841
842
  drawings,
@@ -993,15 +994,32 @@ var DrawingsDialog = ({
993
994
  "div",
994
995
  {
995
996
  className: "rita-workspace-dialog-item",
997
+ onClick: () => {
998
+ if (editingId || confirmDeleteId) return;
999
+ if (activeDrawing?.id !== drawing.id) handleSelect(drawing);
1000
+ },
996
1001
  style: {
997
1002
  padding: "12px 20px",
998
1003
  display: "flex",
999
1004
  alignItems: "center",
1000
1005
  gap: "12px",
1001
1006
  borderBottom: "1px solid var(--default-border-color, #f0f0f0)",
1007
+ cursor: editingId || confirmDeleteId ? "default" : "pointer",
1002
1008
  backgroundColor: activeDrawing?.id === drawing.id ? "var(--color-primary-light, rgba(108, 99, 255, 0.1))" : "transparent"
1003
1009
  },
1004
1010
  children: [
1011
+ renderThumbnail && /* @__PURE__ */ jsx6("div", { style: {
1012
+ width: "80px",
1013
+ height: "60px",
1014
+ flexShrink: 0,
1015
+ borderRadius: "4px",
1016
+ overflow: "hidden",
1017
+ border: "1px solid var(--default-border-color, #e0e0e0)",
1018
+ backgroundColor: "#fff",
1019
+ display: "flex",
1020
+ alignItems: "center",
1021
+ justifyContent: "center"
1022
+ }, children: renderThumbnail(drawing) }),
1005
1023
  /* @__PURE__ */ jsx6("div", { style: { flex: 1, minWidth: 0 }, children: editingId === drawing.id ? /* @__PURE__ */ jsx6(
1006
1024
  "input",
1007
1025
  {
@@ -1125,24 +1143,10 @@ var DrawingsDialog = ({
1125
1143
  /* @__PURE__ */ jsx6(
1126
1144
  "button",
1127
1145
  {
1128
- onClick: () => handleSelect(drawing),
1129
- style: {
1130
- padding: "6px 12px",
1131
- fontSize: "12px",
1132
- backgroundColor: "var(--color-primary, #6c63ff)",
1133
- color: "#fff",
1134
- border: "none",
1135
- borderRadius: "4px",
1136
- cursor: "pointer"
1146
+ onClick: (e) => {
1147
+ e.stopPropagation();
1148
+ exportDrawingAsExcalidraw(drawing.id);
1137
1149
  },
1138
- disabled: activeDrawing?.id === drawing.id,
1139
- children: t.open
1140
- }
1141
- ),
1142
- /* @__PURE__ */ jsx6(
1143
- "button",
1144
- {
1145
- onClick: () => exportDrawingAsExcalidraw(drawing.id),
1146
1150
  style: {
1147
1151
  padding: "6px 12px",
1148
1152
  fontSize: "12px",
@@ -1159,7 +1163,10 @@ var DrawingsDialog = ({
1159
1163
  /* @__PURE__ */ jsx6(
1160
1164
  "button",
1161
1165
  {
1162
- onClick: () => handleStartEdit(drawing),
1166
+ onClick: (e) => {
1167
+ e.stopPropagation();
1168
+ handleStartEdit(drawing);
1169
+ },
1163
1170
  style: {
1164
1171
  padding: "6px 12px",
1165
1172
  fontSize: "12px",
@@ -1176,7 +1183,10 @@ var DrawingsDialog = ({
1176
1183
  /* @__PURE__ */ jsx6(
1177
1184
  "button",
1178
1185
  {
1179
- onClick: () => setConfirmDeleteId(drawing.id),
1186
+ onClick: (e) => {
1187
+ e.stopPropagation();
1188
+ setConfirmDeleteId(drawing.id);
1189
+ },
1180
1190
  style: {
1181
1191
  padding: "6px 12px",
1182
1192
  fontSize: "12px",
@@ -1198,7 +1208,7 @@ var DrawingsDialog = ({
1198
1208
  ))
1199
1209
  }
1200
1210
  ),
1201
- /* @__PURE__ */ jsxs4(
1211
+ /* @__PURE__ */ jsx6(
1202
1212
  "div",
1203
1213
  {
1204
1214
  style: {
@@ -1208,91 +1218,69 @@ var DrawingsDialog = ({
1208
1218
  justifyContent: "space-between",
1209
1219
  alignItems: "center"
1210
1220
  },
1211
- children: [
1212
- /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px" }, children: [
1213
- /* @__PURE__ */ jsxs4(
1214
- "button",
1215
- {
1216
- onClick: handleCreate,
1217
- style: {
1218
- padding: "10px 20px",
1219
- fontSize: "14px",
1220
- backgroundColor: "var(--color-primary, #6c63ff)",
1221
- color: "#fff",
1222
- border: "none",
1223
- borderRadius: "6px",
1224
- cursor: "pointer",
1225
- fontWeight: 500
1226
- },
1227
- children: [
1228
- "+ ",
1229
- t.newDrawing
1230
- ]
1231
- }
1232
- ),
1233
- /* @__PURE__ */ jsxs4(
1234
- "button",
1235
- {
1236
- onClick: importExcalidrawFile,
1237
- style: {
1238
- padding: "10px 20px",
1239
- fontSize: "14px",
1240
- backgroundColor: "transparent",
1241
- border: "1px solid var(--default-border-color, #ccc)",
1242
- borderRadius: "6px",
1243
- cursor: "pointer",
1244
- color: "inherit"
1245
- },
1246
- children: [
1247
- "\u{1F4C2} ",
1248
- t.importDrawing
1249
- ]
1250
- }
1251
- ),
1252
- /* @__PURE__ */ jsxs4(
1253
- "button",
1254
- {
1255
- onClick: importWorkspace,
1256
- style: {
1257
- padding: "10px 20px",
1258
- fontSize: "14px",
1259
- backgroundColor: "transparent",
1260
- border: "1px solid var(--default-border-color, #ccc)",
1261
- borderRadius: "6px",
1262
- cursor: "pointer",
1263
- color: "inherit"
1264
- },
1265
- children: [
1266
- "\u{1F4E5} ",
1267
- t.importWorkspace
1268
- ]
1269
- }
1270
- ),
1271
- /* @__PURE__ */ jsxs4(
1272
- "button",
1273
- {
1274
- onClick: exportWorkspace,
1275
- style: {
1276
- padding: "10px 20px",
1277
- fontSize: "14px",
1278
- backgroundColor: "transparent",
1279
- border: "1px solid var(--default-border-color, #ccc)",
1280
- borderRadius: "6px",
1281
- cursor: "pointer",
1282
- color: "inherit"
1283
- },
1284
- disabled: drawings.length === 0,
1285
- children: [
1286
- "\u{1F4E4} ",
1287
- t.exportWorkspace
1288
- ]
1289
- }
1290
- )
1291
- ] }),
1292
- /* @__PURE__ */ jsx6(
1221
+ children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px" }, children: [
1222
+ /* @__PURE__ */ jsxs4(
1293
1223
  "button",
1294
1224
  {
1295
- onClick: onClose,
1225
+ onClick: handleCreate,
1226
+ style: {
1227
+ padding: "10px 20px",
1228
+ fontSize: "14px",
1229
+ backgroundColor: "var(--color-primary, #6c63ff)",
1230
+ color: "#fff",
1231
+ border: "none",
1232
+ borderRadius: "6px",
1233
+ cursor: "pointer",
1234
+ fontWeight: 500
1235
+ },
1236
+ children: [
1237
+ "+ ",
1238
+ t.newDrawing
1239
+ ]
1240
+ }
1241
+ ),
1242
+ /* @__PURE__ */ jsxs4(
1243
+ "button",
1244
+ {
1245
+ onClick: importExcalidrawFile,
1246
+ style: {
1247
+ padding: "10px 20px",
1248
+ fontSize: "14px",
1249
+ backgroundColor: "transparent",
1250
+ border: "1px solid var(--default-border-color, #ccc)",
1251
+ borderRadius: "6px",
1252
+ cursor: "pointer",
1253
+ color: "inherit"
1254
+ },
1255
+ children: [
1256
+ "\u{1F4C2} ",
1257
+ t.importDrawing
1258
+ ]
1259
+ }
1260
+ ),
1261
+ /* @__PURE__ */ jsxs4(
1262
+ "button",
1263
+ {
1264
+ onClick: importWorkspace,
1265
+ style: {
1266
+ padding: "10px 20px",
1267
+ fontSize: "14px",
1268
+ backgroundColor: "transparent",
1269
+ border: "1px solid var(--default-border-color, #ccc)",
1270
+ borderRadius: "6px",
1271
+ cursor: "pointer",
1272
+ color: "inherit"
1273
+ },
1274
+ children: [
1275
+ "\u{1F4E5} ",
1276
+ t.importWorkspace
1277
+ ]
1278
+ }
1279
+ ),
1280
+ /* @__PURE__ */ jsxs4(
1281
+ "button",
1282
+ {
1283
+ onClick: exportWorkspace,
1296
1284
  style: {
1297
1285
  padding: "10px 20px",
1298
1286
  fontSize: "14px",
@@ -1302,10 +1290,14 @@ var DrawingsDialog = ({
1302
1290
  cursor: "pointer",
1303
1291
  color: "inherit"
1304
1292
  },
1305
- children: t.close
1293
+ disabled: drawings.length === 0,
1294
+ children: [
1295
+ "\u{1F4E4} ",
1296
+ t.exportWorkspace
1297
+ ]
1306
1298
  }
1307
1299
  )
1308
- ]
1300
+ ] })
1309
1301
  }
1310
1302
  )
1311
1303
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rita-workspace",
3
- "version": "0.4.3",
3
+ "version": "0.4.5",
4
4
  "description": "Multi-drawing workspace feature for Rita (Excalidraw fork)",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",