js-draw 1.4.0 → 1.5.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/README.md +1 -1
- package/dist/Editor.css +11 -10
- package/dist/bundle.js +2 -2
- package/dist/bundledStyles.js +1 -1
- package/dist/cjs/components/BackgroundComponent.js +12 -6
- package/dist/cjs/components/SVGGlobalAttributesObject.d.ts +2 -2
- package/dist/cjs/components/SVGGlobalAttributesObject.js +10 -14
- package/dist/cjs/image/export/adjustExportedSVGSize.d.ts +6 -0
- package/dist/cjs/image/export/{setExportedSVGSize.js → adjustExportedSVGSize.js} +4 -7
- package/dist/cjs/image/export/editorImageToSVG.d.ts +1 -1
- package/dist/cjs/image/export/editorImageToSVG.js +22 -8
- package/dist/cjs/rendering/renderers/AbstractRenderer.d.ts +1 -0
- package/dist/cjs/rendering/renderers/AbstractRenderer.js +8 -0
- package/dist/cjs/rendering/renderers/SVGRenderer.d.ts +28 -1
- package/dist/cjs/rendering/renderers/SVGRenderer.js +58 -7
- package/dist/cjs/toolbar/AbstractToolbar.d.ts +9 -3
- package/dist/cjs/toolbar/AbstractToolbar.js +11 -4
- package/dist/cjs/toolbar/AbstractToolbar.test.d.ts +1 -0
- package/dist/cjs/toolbar/EdgeToolbar.js +2 -2
- package/dist/cjs/toolbar/widgets/SaveActionWidget.d.ts +2 -1
- package/dist/cjs/toolbar/widgets/SaveActionWidget.js +6 -2
- package/dist/cjs/tools/SelectionTool/Selection.js +4 -2
- package/dist/cjs/version.js +1 -1
- package/dist/mjs/components/BackgroundComponent.mjs +12 -6
- package/dist/mjs/components/SVGGlobalAttributesObject.d.ts +2 -2
- package/dist/mjs/components/SVGGlobalAttributesObject.mjs +10 -14
- package/dist/mjs/image/export/adjustExportedSVGSize.d.ts +6 -0
- package/dist/mjs/image/export/{setExportedSVGSize.mjs → adjustExportedSVGSize.mjs} +4 -7
- package/dist/mjs/image/export/editorImageToSVG.d.ts +1 -1
- package/dist/mjs/image/export/editorImageToSVG.mjs +23 -9
- package/dist/mjs/rendering/renderers/AbstractRenderer.d.ts +1 -0
- package/dist/mjs/rendering/renderers/AbstractRenderer.mjs +8 -0
- package/dist/mjs/rendering/renderers/SVGRenderer.d.ts +28 -1
- package/dist/mjs/rendering/renderers/SVGRenderer.mjs +58 -7
- package/dist/mjs/toolbar/AbstractToolbar.d.ts +9 -3
- package/dist/mjs/toolbar/AbstractToolbar.mjs +11 -4
- package/dist/mjs/toolbar/AbstractToolbar.test.d.ts +1 -0
- package/dist/mjs/toolbar/EdgeToolbar.mjs +2 -2
- package/dist/mjs/toolbar/widgets/SaveActionWidget.d.ts +2 -1
- package/dist/mjs/toolbar/widgets/SaveActionWidget.mjs +6 -2
- package/dist/mjs/tools/SelectionTool/Selection.mjs +4 -2
- package/dist/mjs/version.mjs +1 -1
- package/package.json +2 -2
- package/src/toolbar/EdgeToolbar.scss +7 -4
- package/src/tools/SelectionTool/SelectionTool.scss +2 -2
- package/dist/cjs/image/export/setExportedSVGSize.d.ts +0 -6
- package/dist/mjs/image/export/setExportedSVGSize.d.ts +0 -6
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ const editor = new Editor(document.body);
|
|
|
41
41
|
|
|
42
42
|
If you're not using a bundler, consider using the pre-bundled editor:
|
|
43
43
|
```html
|
|
44
|
-
<!-- Replace 0.
|
|
44
|
+
<!-- Replace 1.0.0 with the latest version of js-draw -->
|
|
45
45
|
<script src="https://cdn.jsdelivr.net/npm/js-draw@1.0.0/dist/bundle.js"></script>
|
|
46
46
|
<script>
|
|
47
47
|
const editor = new jsdraw.Editor(document.body);
|
package/dist/Editor.css
CHANGED
|
@@ -588,7 +588,7 @@
|
|
|
588
588
|
}
|
|
589
589
|
}
|
|
590
590
|
@media screen and (max-width: 700px) and (hover: hover) {
|
|
591
|
-
.toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:hover > label {
|
|
591
|
+
.toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:hover:not(:focus-visible) > label {
|
|
592
592
|
opacity: 0.8;
|
|
593
593
|
animation: 1s ease show-label;
|
|
594
594
|
}
|
|
@@ -596,7 +596,7 @@
|
|
|
596
596
|
@media screen and (max-width: 700px) {
|
|
597
597
|
.toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:active > label {
|
|
598
598
|
opacity: 0.8;
|
|
599
|
-
animation:
|
|
599
|
+
animation: 1s ease show-label;
|
|
600
600
|
}
|
|
601
601
|
.toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:focus-visible > label {
|
|
602
602
|
animation: 1.5s ease rehide-label;
|
|
@@ -694,7 +694,7 @@
|
|
|
694
694
|
order: 100;
|
|
695
695
|
}
|
|
696
696
|
.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left > .toolbar-button > .toolbar-icon {
|
|
697
|
-
margin-left:
|
|
697
|
+
margin-left: 7px;
|
|
698
698
|
margin-right: 0;
|
|
699
699
|
}
|
|
700
700
|
.toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right {
|
|
@@ -706,8 +706,9 @@
|
|
|
706
706
|
}
|
|
707
707
|
.toolbar-edge-toolbar .toolbar-toolContainer.label-inline > .toolbar-button > .toolbar-icon {
|
|
708
708
|
height: 100%;
|
|
709
|
-
margin-right:
|
|
709
|
+
margin-right: 7px;
|
|
710
710
|
margin-left: 0;
|
|
711
|
+
width: 22px;
|
|
711
712
|
}
|
|
712
713
|
.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button {
|
|
713
714
|
width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
|
|
@@ -744,14 +745,14 @@
|
|
|
744
745
|
}
|
|
745
746
|
}
|
|
746
747
|
@media (hover: hover) {
|
|
747
|
-
.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover > label {
|
|
748
|
+
.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover:not(:focus-visible) > label {
|
|
748
749
|
opacity: 0.8;
|
|
749
750
|
animation: 1s ease show-label;
|
|
750
751
|
}
|
|
751
752
|
}
|
|
752
753
|
.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active > label {
|
|
753
754
|
opacity: 0.8;
|
|
754
|
-
animation:
|
|
755
|
+
animation: 1s ease show-label;
|
|
755
756
|
}
|
|
756
757
|
.toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible > label {
|
|
757
758
|
animation: 1.5s ease rehide-label;
|
|
@@ -871,14 +872,14 @@
|
|
|
871
872
|
}
|
|
872
873
|
}
|
|
873
874
|
@media (hover: hover) {
|
|
874
|
-
.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover > label > .button-label-text {
|
|
875
|
+
.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover:not(:focus-visible) > label > .button-label-text {
|
|
875
876
|
opacity: 0.8;
|
|
876
877
|
animation: 1s ease show-label;
|
|
877
878
|
}
|
|
878
879
|
}
|
|
879
880
|
.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active > label > .button-label-text {
|
|
880
881
|
opacity: 0.8;
|
|
881
|
-
animation:
|
|
882
|
+
animation: 1s ease show-label;
|
|
882
883
|
}
|
|
883
884
|
.toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible > label > .button-label-text {
|
|
884
885
|
animation: 1.5s ease rehide-label;
|
|
@@ -1113,7 +1114,7 @@
|
|
|
1113
1114
|
cursor: ns-resize;
|
|
1114
1115
|
}
|
|
1115
1116
|
.selection-tool-handle.selection-tool-resize-xy {
|
|
1116
|
-
cursor:
|
|
1117
|
+
cursor: nwse-resize;
|
|
1117
1118
|
}
|
|
1118
1119
|
|
|
1119
1120
|
.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x {
|
|
@@ -1123,7 +1124,7 @@
|
|
|
1123
1124
|
cursor: ew-resize;
|
|
1124
1125
|
}
|
|
1125
1126
|
.selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy {
|
|
1126
|
-
cursor:
|
|
1127
|
+
cursor: nesw-resize;
|
|
1127
1128
|
}
|
|
1128
1129
|
|
|
1129
1130
|
.overlay.handleOverlay {
|