js-draw 1.11.2 → 1.13.1

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 (49) hide show
  1. package/dist/Editor.css +66 -118
  2. package/dist/bundle.js +2 -2
  3. package/dist/bundledStyles.js +1 -1
  4. package/dist/cjs/Editor.d.ts +4 -2
  5. package/dist/cjs/Editor.js +61 -39
  6. package/dist/cjs/components/AbstractComponent.d.ts +7 -0
  7. package/dist/cjs/components/AbstractComponent.js +7 -5
  8. package/dist/cjs/components/util/StrokeSmoother.js +11 -4
  9. package/dist/cjs/localizations/es.js +11 -22
  10. package/dist/cjs/rendering/Display.d.ts +2 -0
  11. package/dist/cjs/rendering/Display.js +4 -0
  12. package/dist/cjs/toolbar/DropdownToolbar.d.ts +3 -1
  13. package/dist/cjs/toolbar/DropdownToolbar.js +2 -0
  14. package/dist/cjs/toolbar/EdgeToolbar.js +6 -5
  15. package/dist/cjs/toolbar/widgets/BaseWidget.js +2 -0
  16. package/dist/cjs/toolbar/widgets/components/makeGridSelector.js +10 -0
  17. package/dist/cjs/util/addLongPressOrHoverCssClasses.d.ts +10 -0
  18. package/dist/cjs/util/addLongPressOrHoverCssClasses.js +34 -0
  19. package/dist/cjs/util/listenForLongPressOrHover.d.ts +13 -0
  20. package/dist/cjs/util/listenForLongPressOrHover.js +80 -0
  21. package/dist/cjs/util/listenForLongPressOrHover.test.d.ts +1 -0
  22. package/dist/cjs/util/mitLicenseAttribution.d.ts +2 -0
  23. package/dist/cjs/util/mitLicenseAttribution.js +28 -0
  24. package/dist/cjs/version.js +1 -1
  25. package/dist/mjs/Editor.d.ts +4 -2
  26. package/dist/mjs/Editor.mjs +61 -39
  27. package/dist/mjs/components/AbstractComponent.d.ts +7 -0
  28. package/dist/mjs/components/AbstractComponent.mjs +7 -5
  29. package/dist/mjs/components/util/StrokeSmoother.mjs +11 -4
  30. package/dist/mjs/localizations/es.mjs +11 -22
  31. package/dist/mjs/rendering/Display.d.ts +2 -0
  32. package/dist/mjs/rendering/Display.mjs +4 -0
  33. package/dist/mjs/toolbar/DropdownToolbar.d.ts +3 -1
  34. package/dist/mjs/toolbar/DropdownToolbar.mjs +2 -0
  35. package/dist/mjs/toolbar/EdgeToolbar.mjs +6 -5
  36. package/dist/mjs/toolbar/widgets/BaseWidget.mjs +2 -0
  37. package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs +10 -0
  38. package/dist/mjs/util/addLongPressOrHoverCssClasses.d.ts +10 -0
  39. package/dist/mjs/util/addLongPressOrHoverCssClasses.mjs +29 -0
  40. package/dist/mjs/util/listenForLongPressOrHover.d.ts +13 -0
  41. package/dist/mjs/util/listenForLongPressOrHover.mjs +78 -0
  42. package/dist/mjs/util/listenForLongPressOrHover.test.d.ts +1 -0
  43. package/dist/mjs/util/mitLicenseAttribution.d.ts +2 -0
  44. package/dist/mjs/util/mitLicenseAttribution.mjs +26 -0
  45. package/dist/mjs/version.mjs +1 -1
  46. package/package.json +2 -2
  47. package/src/toolbar/EdgeToolbar.scss +19 -97
  48. package/src/toolbar/utils/labelVisibleOnHover.scss +114 -0
  49. package/src/toolbar/widgets/components/makeGridSelector.scss +1 -0
package/dist/Editor.css CHANGED
@@ -266,6 +266,7 @@
266
266
  display: flex;
267
267
  flex-direction: column-reverse;
268
268
  box-sizing: border-box;
269
+ cursor: pointer;
269
270
  flex-shrink: 1;
270
271
  margin: 2px;
271
272
  }
@@ -537,6 +538,47 @@
537
538
  display: none;
538
539
  }
539
540
  }
541
+ @keyframes rehide-label {
542
+ 0% {
543
+ opacity: 0.8;
544
+ }
545
+ 80% {
546
+ opacity: 0.8;
547
+ }
548
+ 100% {
549
+ opacity: 0.1;
550
+ }
551
+ }
552
+ @keyframes show-label-delayed {
553
+ 0% {
554
+ opacity: 0;
555
+ }
556
+ 80% {
557
+ opacity: 0;
558
+ }
559
+ 100% {
560
+ opacity: 0.8;
561
+ }
562
+ }
563
+ @keyframes show-label-now {
564
+ 0% {
565
+ opacity: 0;
566
+ }
567
+ 5% {
568
+ opacity: 0;
569
+ }
570
+ 100% {
571
+ opacity: 0.8;
572
+ }
573
+ }
574
+ @keyframes keep-label-hidden {
575
+ 0% {
576
+ opacity: 0;
577
+ }
578
+ 100% {
579
+ opacity: 0;
580
+ }
581
+ }
540
582
  @keyframes toolbar--edgemenu-transition-in {
541
583
  from {
542
584
  transform: translate(0, 100%);
@@ -605,49 +647,14 @@
605
647
  opacity: 0;
606
648
  }
607
649
  }
608
- @keyframes rehide-label {
609
- 0% {
610
- opacity: 0.8;
611
- }
612
- 80% {
613
- opacity: 0.8;
614
- }
615
- 100% {
616
- opacity: 0.1;
617
- }
618
- }
619
- @keyframes show-label {
620
- 0% {
621
- opacity: 0;
622
- }
623
- 80% {
624
- opacity: 0;
625
- }
626
- 100% {
627
- opacity: 0.8;
628
- }
629
- }
630
- @keyframes keep-label-hidden {
631
- 0% {
632
- opacity: 0;
633
- }
634
- 100% {
635
- opacity: 0;
636
- }
637
- }
638
- }
639
- @media screen and (max-width: 700px) and (hover: hover) {
640
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:hover:not(:focus-visible) > label {
650
+ .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible) > label, .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active > label {
641
651
  opacity: 0.8;
642
- animation: 1s ease show-label;
652
+ animation: 1s ease show-label-delayed;
643
653
  }
644
- }
645
- @media screen and (max-width: 700px) {
646
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:active > label {
654
+ .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button.has-long-press-or-hover > label {
647
655
  opacity: 0.8;
648
- animation: 1s ease show-label;
649
656
  }
650
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:focus-visible > label {
657
+ .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:focus-visible > label, .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button.focus-visible > label {
651
658
  animation: 1.5s ease rehide-label;
652
659
  opacity: 0;
653
660
  }
@@ -660,12 +667,13 @@
660
667
  position: absolute;
661
668
  margin-top: var(--button-label-hover-offset-y);
662
669
  margin-left: var(--button-label-hover-offset-x);
670
+ z-index: 1;
663
671
  pointer-events: none;
664
672
  background-color: var(--background-color-1);
665
673
  color: var(--foreground-color-1);
666
674
  border-radius: 25px;
667
675
  padding: 10px;
668
- transition: 0.2s ease opacity, 0.2s ease margin-top;
676
+ transition: 0.3s ease opacity, 0.2s ease margin-top;
669
677
  }
670
678
  }
671
679
  @media screen and (max-width: 700px) and (prefers-reduced-motion: reduce) {
@@ -763,47 +771,14 @@
763
771
  width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
764
772
  height: var(--toolbar-button-size);
765
773
  }
766
- @keyframes rehide-label {
767
- 0% {
768
- opacity: 0.8;
769
- }
770
- 80% {
771
- opacity: 0.8;
772
- }
773
- 100% {
774
- opacity: 0.1;
775
- }
776
- }
777
- @keyframes show-label {
778
- 0% {
779
- opacity: 0;
780
- }
781
- 80% {
782
- opacity: 0;
783
- }
784
- 100% {
785
- opacity: 0.8;
786
- }
787
- }
788
- @keyframes keep-label-hidden {
789
- 0% {
790
- opacity: 0;
791
- }
792
- 100% {
793
- opacity: 0;
794
- }
795
- }
796
- @media (hover: hover) {
797
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover:not(:focus-visible) > label {
798
- opacity: 0.8;
799
- animation: 1s ease show-label;
800
- }
774
+ .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible) > label, .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active > label {
775
+ opacity: 0.8;
776
+ animation: 1s ease show-label-delayed;
801
777
  }
802
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active > label {
778
+ .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.has-long-press-or-hover > label {
803
779
  opacity: 0.8;
804
- animation: 1s ease show-label;
805
780
  }
806
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible > label {
781
+ .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible > label, .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button.focus-visible > label {
807
782
  animation: 1.5s ease rehide-label;
808
783
  opacity: 0;
809
784
  }
@@ -816,18 +791,23 @@
816
791
  position: absolute;
817
792
  margin-top: var(--button-label-hover-offset-y);
818
793
  margin-left: var(--button-label-hover-offset-x);
794
+ z-index: 1;
819
795
  pointer-events: none;
820
796
  background-color: var(--background-color-1);
821
797
  color: var(--foreground-color-1);
822
798
  border-radius: 25px;
823
799
  padding: 10px;
824
- transition: 0.2s ease opacity, 0.2s ease margin-top;
800
+ transition: 0.3s ease opacity, 0.2s ease margin-top;
825
801
  }
826
802
  @media (prefers-reduced-motion: reduce) {
827
803
  .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button > label {
828
804
  transition: none;
829
805
  }
830
806
  }
807
+ .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline).dropdownVisible > .toolbar-button > label {
808
+ opacity: 0.8;
809
+ animation: 1.5s ease rehide-label 0.3s, 1s ease keep-label-hidden 1.8s infinite;
810
+ }
831
811
  .toolbar-edge-toolbar > div > .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
832
812
  display: block;
833
813
  visibility: hidden;
@@ -890,47 +870,14 @@
890
870
  .toolbar-edgemenu-container .toolbar-grid-selector .choice-button {
891
871
  --button-label-hover-offset-y: var(--button-size);
892
872
  }
893
- @keyframes rehide-label {
894
- 0% {
895
- opacity: 0.8;
896
- }
897
- 80% {
898
- opacity: 0.8;
899
- }
900
- 100% {
901
- opacity: 0.1;
902
- }
903
- }
904
- @keyframes show-label {
905
- 0% {
906
- opacity: 0;
907
- }
908
- 80% {
909
- opacity: 0;
910
- }
911
- 100% {
912
- opacity: 0.8;
913
- }
914
- }
915
- @keyframes keep-label-hidden {
916
- 0% {
917
- opacity: 0;
918
- }
919
- 100% {
920
- opacity: 0;
921
- }
922
- }
923
- @media (hover: hover) {
924
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover:not(:focus-visible) > label > .button-label-text {
925
- opacity: 0.8;
926
- animation: 1s ease show-label;
927
- }
873
+ .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):hover:not(:focus-visible) > label > .button-label-text, .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:not(.no-long-press-or-hover):not(.has-long-press-or-hover):active > label > .button-label-text {
874
+ opacity: 0.8;
875
+ animation: 1s ease show-label-delayed;
928
876
  }
929
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active > label > .button-label-text {
877
+ .toolbar-edgemenu-container .toolbar-grid-selector .choice-button.has-long-press-or-hover > label > .button-label-text {
930
878
  opacity: 0.8;
931
- animation: 1s ease show-label;
932
879
  }
933
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible > label > .button-label-text {
880
+ .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible > label > .button-label-text, .toolbar-edgemenu-container .toolbar-grid-selector .choice-button.focus-visible > label > .button-label-text {
934
881
  animation: 1.5s ease rehide-label;
935
882
  opacity: 0;
936
883
  }
@@ -943,12 +890,13 @@
943
890
  position: absolute;
944
891
  margin-top: var(--button-label-hover-offset-y);
945
892
  margin-left: var(--button-label-hover-offset-x);
893
+ z-index: 1;
946
894
  pointer-events: none;
947
895
  background-color: var(--background-color-1);
948
896
  color: var(--foreground-color-1);
949
897
  border-radius: 25px;
950
898
  padding: 10px;
951
- transition: 0.2s ease opacity, 0.2s ease margin-top;
899
+ transition: 0.3s ease opacity, 0.2s ease margin-top;
952
900
  }
953
901
  @media (prefers-reduced-motion: reduce) {
954
902
  .toolbar-edgemenu-container .toolbar-grid-selector .choice-button > label > .button-label-text {