bpmn-js 18.23.0 → 18.25.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.
Files changed (14) hide show
  1. package/dist/assets/diagram-js.css +121 -5
  2. package/dist/bpmn-modeler.development.js +511 -86
  3. package/dist/bpmn-modeler.production.min.js +91 -51
  4. package/dist/bpmn-navigated-viewer.development.js +2 -2
  5. package/dist/bpmn-navigated-viewer.production.min.js +1 -1
  6. package/dist/bpmn-viewer.development.js +2 -2
  7. package/dist/bpmn-viewer.production.min.js +1 -1
  8. package/lib/features/modeling/ElementFactory.d.ts +1 -1
  9. package/lib/features/modeling/ElementFactory.d.ts.map +1 -1
  10. package/lib/features/modeling/ElementFactory.js +6 -63
  11. package/lib/util/ElementSizeUtil.d.ts +49 -0
  12. package/lib/util/ElementSizeUtil.d.ts.map +1 -0
  13. package/lib/util/ElementSizeUtil.js +185 -0
  14. package/package.json +2 -2
package/dist/assets/diagram-js.css CHANGED
@@ -72,6 +72,12 @@
72
72
  --popup-search-border-color: var(--color-grey-225-10-75);
73
73
  --popup-search-focus-border-color: var(--color-blue-205-100-50);
74
74
  --popup-search-focus-background-color: var(--color-blue-205-100-95);
75
+ --popup-tab-color: var(--color-grey-225-10-55);
76
+ --popup-tab-hover-color: var(--color-grey-225-10-15);
77
+ --popup-tab-active-color: var(--color-grey-225-10-15);
78
+ --popup-tab-active-border-color: var(--color-blue-205-100-50);
79
+ --popup-tab-strip-border-color: var(--color-grey-225-10-90);
80
+ --popup-tab-focus-border-color: var(--color-blue-205-100-50);
75
81
 
76
82
  --resizer-fill-color: var(--color-blue-205-100-45);
77
83
  --resizer-stroke-color: var(--canvas-fill-color);
@@ -615,6 +621,97 @@
615
621
  margin: 10px 12px;
616
622
  }
617
623
 
624
+ .djs-popup-tabs-container {
625
+ position: relative;
626
+ border-bottom: solid 1px var(--popup-tab-strip-border-color);
627
+ }
628
+
629
+ /**
630
+ * The scroll control doubles as the edge fade: tabs scrolled past it fade out
631
+ * rather than being cut off behind an opaque block.
632
+ */
633
+ .djs-popup-tabs-scroll {
634
+ appearance: none;
635
+ position: absolute;
636
+ top: 0;
637
+ bottom: 1px;
638
+ width: 28px;
639
+ display: flex;
640
+ align-items: center;
641
+ padding: 0;
642
+ border: none;
643
+ border-radius: 0;
644
+ color: var(--popup-tab-color);
645
+ cursor: pointer;
646
+ }
647
+
648
+ .djs-popup-tabs-scroll:hover {
649
+ color: var(--popup-tab-hover-color);
650
+ }
651
+
652
+ .djs-popup-tabs-scroll-start {
653
+ left: 0;
654
+ justify-content: flex-start;
655
+ background: linear-gradient(to left, transparent, var(--popup-background-color) 60%);
656
+ }
657
+
658
+ .djs-popup-tabs-scroll-end {
659
+ right: 0;
660
+ justify-content: flex-end;
661
+ background: linear-gradient(to right, transparent, var(--popup-background-color) 60%);
662
+ }
663
+
664
+ .djs-popup-tabs-scroll-start svg {
665
+ transform: rotate(180deg);
666
+ }
667
+
668
+ .djs-popup-tabs {
669
+ display: flex;
670
+ flex-wrap: nowrap;
671
+ gap: 2px;
672
+ overflow-x: auto;
673
+ overflow-y: hidden;
674
+ padding: 0 12px;
675
+
676
+ /* keep scrolled-to tabs clear of the scroll controls */
677
+ scroll-padding: 0 28px;
678
+ scrollbar-width: none;
679
+ }
680
+
681
+ .djs-popup-tabs::-webkit-scrollbar {
682
+ display: none;
683
+ }
684
+
685
+ .djs-popup-tab {
686
+ appearance: none;
687
+ background: transparent;
688
+ border: none;
689
+ border-bottom: solid 2px transparent;
690
+ border-radius: 0;
691
+ flex: 0 0 auto;
692
+ padding: 6px 10px;
693
+ font: inherit;
694
+ font-size: var(--popup-font-size);
695
+ color: var(--popup-tab-color);
696
+ cursor: pointer;
697
+ white-space: nowrap;
698
+ }
699
+
700
+ .djs-popup-tab:hover {
701
+ color: var(--popup-tab-hover-color);
702
+ }
703
+
704
+ .djs-popup-tab:focus-visible {
705
+ outline: solid 1px var(--popup-tab-focus-border-color);
706
+ outline-offset: -2px;
707
+ }
708
+
709
+ .djs-popup-tab[aria-selected="true"] {
710
+ color: var(--popup-tab-active-color);
711
+ border-bottom-color: var(--popup-tab-active-border-color);
712
+ font-weight: var(--popup-header-font-weight);
713
+ }
714
+
618
715
  .djs-popup-title {
619
716
  font-size: var(--popup-font-size);
620
717
  font-weight: var(--popup-header-font-weight);
@@ -686,10 +783,17 @@
686
783
  text-decoration: none;
687
784
  }
688
785
 
689
- .djs-popup-entry-chevron {
786
+ .djs-popup-entry-actions {
690
787
  display: flex;
691
788
  align-items: center;
789
+ flex-shrink: 0;
790
+ gap: 6px;
692
791
  margin-left: 6px;
792
+ }
793
+
794
+ .djs-popup-entry-chevron {
795
+ display: flex;
796
+ align-items: center;
693
797
  color: var(--popup-description-color);
694
798
  }
695
799
 
@@ -847,18 +951,30 @@
847
951
  }
848
952
 
849
953
  .djs-popup-entry-docs {
850
- display: none;
851
- margin-left: 3px;
954
+ display: flex;
955
+ align-items: center;
956
+ justify-content: center;
957
+ flex-shrink: 0;
958
+ visibility: hidden;
959
+ padding: 2px 3px;
852
960
  color: var(--popup-description-color);
961
+ background: #fff;
962
+ border: 1px solid var(--popup-search-border-color);
963
+ border-radius: 4px;
964
+ cursor: pointer;
965
+ transition: background-color .12s ease, border-color .12s ease, color .12s ease;
853
966
  }
854
967
 
855
968
  .djs-popup-body .entry:hover .djs-popup-entry-docs {
856
- display: inline;
969
+ visibility: visible;
970
+ }
971
+
972
+ .djs-popup-body .entry .djs-popup-entry-docs:hover {
973
+ background: #f2f3f5;
857
974
  }
858
975
 
859
976
  .djs-popup-entry-docs svg {
860
977
  vertical-align: middle;
861
- margin: 2px;
862
978
  }
863
979
 
864
980
  .djs-popup-footer-docs {