@sequent-org/moodboard 1.0.23 → 1.1.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.
- package/package.json +1 -1
- package/src/assets/icons/rotate-icon.svg +3 -0
- package/src/core/PixiEngine.js +32 -0
- package/src/core/commands/CopyObjectCommand.js +20 -9
- package/src/core/commands/PasteObjectCommand.js +26 -15
- package/src/core/index.js +522 -26
- package/src/objects/DrawingObject.js +16 -7
- package/src/objects/FileObject.js +25 -11
- package/src/objects/FrameObject.js +37 -9
- package/src/objects/NoteObject.js +32 -17
- package/src/objects/ShapeObject.js +9 -8
- package/src/objects/TextObject.js +2 -20
- package/src/services/FrameService.js +95 -17
- package/src/tools/object-tools/PlacementTool.js +192 -51
- package/src/tools/object-tools/SelectTool.js +215 -44
- package/src/tools/object-tools/selection/BoxSelectController.js +5 -0
- package/src/ui/FilePropertiesPanel.js +9 -2
- package/src/ui/FramePropertiesPanel.js +177 -34
- package/src/ui/HtmlHandlesLayer.js +145 -89
- package/src/ui/HtmlTextLayer.js +9 -1
- package/src/ui/NotePropertiesPanel.js +13 -6
- package/src/ui/Toolbar.js +118 -15
- package/src/ui/styles/workspace.css +74 -4
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
align-items: center;
|
|
192
192
|
gap: 8px;
|
|
193
193
|
pointer-events: auto; /* кликабельна */
|
|
194
|
-
width:
|
|
194
|
+
width: 30px;
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
|
|
@@ -320,6 +320,75 @@
|
|
|
320
320
|
padding: 8px 10px;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
+
/* Frame popup (grid 2x2 + header row) */
|
|
324
|
+
.moodboard-root, :root {
|
|
325
|
+
/* CSS variables for frame style */
|
|
326
|
+
--frame-border-color: #EEEEEE;
|
|
327
|
+
--frame-border-width: 2; /* px */
|
|
328
|
+
--frame-corner-radius: 3; /* px */
|
|
329
|
+
}
|
|
330
|
+
.frame-popup {
|
|
331
|
+
display: grid;
|
|
332
|
+
box-sizing: border-box;
|
|
333
|
+
width: 160px;
|
|
334
|
+
gap: 3px;
|
|
335
|
+
grid-template-columns: repeat(2, 1fr);
|
|
336
|
+
grid-template-rows: auto repeat(2, 1fr);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.frame-popup__btn {
|
|
340
|
+
padding: 4px;
|
|
341
|
+
border-radius: 6px;
|
|
342
|
+
border: none;
|
|
343
|
+
background: transparent;
|
|
344
|
+
color: #111827;
|
|
345
|
+
cursor: pointer;
|
|
346
|
+
font-size: 12px;
|
|
347
|
+
width: 100%;
|
|
348
|
+
height: 100%;
|
|
349
|
+
display: flex;
|
|
350
|
+
align-items: center;
|
|
351
|
+
justify-content: center;
|
|
352
|
+
box-sizing: border-box;
|
|
353
|
+
overflow: hidden;
|
|
354
|
+
}
|
|
355
|
+
.frame-popup__btn.is-disabled { color: #9ca3af; cursor: not-allowed; }
|
|
356
|
+
.frame-popup__btn:not(.is-disabled):hover { background: #f3f4f6; }
|
|
357
|
+
.frame-popup__btn--header { grid-column: 1 / span 2; height: auto; }
|
|
358
|
+
|
|
359
|
+
.frame-popup__holder {
|
|
360
|
+
width: 100%;
|
|
361
|
+
height: 100%;
|
|
362
|
+
display: flex;
|
|
363
|
+
flex-direction: row;
|
|
364
|
+
align-items: center;
|
|
365
|
+
justify-content: center;
|
|
366
|
+
gap: 4px;
|
|
367
|
+
box-sizing: border-box;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.frame-popup__preview {
|
|
371
|
+
background: #e5e7eb;
|
|
372
|
+
border: none;
|
|
373
|
+
border-radius: 0px;
|
|
374
|
+
height: 100%;
|
|
375
|
+
max-width: 40%;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.frame-popup__preview--custom {
|
|
379
|
+
width: 20px;
|
|
380
|
+
height: 10px;
|
|
381
|
+
border: 1px dashed #9ca3af;
|
|
382
|
+
border-radius: 2px;
|
|
383
|
+
background: transparent;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.frame-popup__caption {
|
|
387
|
+
font-size: 12px;
|
|
388
|
+
line-height: 14px;
|
|
389
|
+
color: inherit;
|
|
390
|
+
}
|
|
391
|
+
|
|
323
392
|
.moodboard-shapes__grid {
|
|
324
393
|
display: grid;
|
|
325
394
|
grid-template-columns: repeat(3, 1fr);
|
|
@@ -530,7 +599,7 @@
|
|
|
530
599
|
position: absolute;
|
|
531
600
|
top: 12px;
|
|
532
601
|
left: 16px;
|
|
533
|
-
height:
|
|
602
|
+
height: 30px;
|
|
534
603
|
display: inline-flex;
|
|
535
604
|
align-items: center;
|
|
536
605
|
gap: 8px;
|
|
@@ -547,12 +616,13 @@
|
|
|
547
616
|
display: inline-flex;
|
|
548
617
|
align-items: center;
|
|
549
618
|
justify-content: center;
|
|
550
|
-
width:
|
|
551
|
-
height:
|
|
619
|
+
width: 30px;
|
|
620
|
+
height: 30px;
|
|
552
621
|
border: none;
|
|
553
622
|
border-radius: 8px;
|
|
554
623
|
/* background: #f0f0f0; */
|
|
555
624
|
/* color: #333; */
|
|
625
|
+
background: none;
|
|
556
626
|
font-size: 16px;
|
|
557
627
|
cursor: pointer;
|
|
558
628
|
transition: all 0.2s ease;
|