camunda-bpmn-js 4.0.0-0 → 4.1.0

package/dist/assets/diagram-js.css

@@ -121,8 +121,13 @@
   stroke: var(--element-selected-outline-stroke-color);
 }
 
+.djs-connection.selected .djs-outline {
+  display: none;
+}
+
 .djs-multi-select .djs-element.selected .djs-outline {
   stroke: var(--element-selected-outline-secondary-stroke-color);
+  display: block;
 }
 
 .djs-shape.connect-ok .djs-visual > :nth-child(1) {
@@ -280,20 +285,12 @@ marker.djs-dragger tspan {
   stroke: var(--element-dragger-color) !important;
 }
 
-.djs-dragging {
-  opacity: 0.3;
-}
-
 .djs-dragging,
 .djs-dragging > * {
+  opacity: 0.3 !important;
   pointer-events: none !important;
 }
 
-.djs-dragging .djs-context-pad,
-.djs-dragging .djs-outline {
-  display: none !important;
-}
-
 /**
  * no pointer events for visual
  */
@@ -752,22 +749,13 @@ marker.djs-dragger tspan {
 }
 
 /**
- * touch
+ * bendpoints
  */
-
-.djs-shape,
-.djs-connection {
-  touch-action: none;
-}
-
 .djs-segment-dragger,
 .djs-bendpoint {
   display: none;
 }
 
-/**
- * bendpoints
- */
 .djs-segment-dragger .djs-visual {
   display: none;
 

package/dist/assets/properties-panel.css

@@ -1,7 +1,8 @@
 /**
  * Theming
  */
-.bio-properties-panel {
+ .bio-properties-panel,
+ .djs-parent {
   --color-grey-225-10-15: hsl(225, 10%, 15%);
   --color-grey-225-10-35: hsl(225, 10%, 35%);
   --color-grey-225-10-55: hsl(225, 10%, 55%);
@@ -26,11 +27,13 @@
   --color-red-360-100-45: hsl(360, 100%, 45%);
   --color-red-360-100-92: hsl(360, 100%, 92%);
   --color-red-360-100-97: hsl(360, 100%, 97%);
-
   --color-white: white;
   --color-black: black;
   --color-transparent: transparent;
 
+}
+
+.bio-properties-panel {
   --text-base-color: var(--color-grey-225-10-15);
   --text-error-color: var(--color-red-360-100-45);
   --link-color: var(--color-blue-205-100-50);
@@ -118,12 +121,6 @@
 
   --feelers-select-color:  var(--color-blue-205-100-85);
 
-  --tooltip-underline-color: var(--color-blue-219-99-53);
-  --tooltip-background-color: var(--color-grey-0-0-22);
-  --tooltip-link: var(--color-blue-218-100-74);
-  --tooltip-code-background-color: var(--color-grey-225-10-97);
-  --tooltip-code-border-color: var(--color-grey-225-10-85);
-  
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -1116,7 +1113,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
-  resize: vertical;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -1149,19 +1146,35 @@ textarea.bio-properties-panel-input {
   text-decoration-style: dotted;
   text-underline-offset: 2px;
   font: inherit;
+  display: flex;
+  justify-content: center;
+  width: fit-content;
 }
 
 .bio-properties-panel-tooltip {
+  --tooltip-underline-color: var(--color-blue-219-99-53);
+  --tooltip-background-color: var(--color-grey-0-0-22);
+  --tooltip-link: var(--color-blue-218-100-74);
+  --tooltip-code-background-color: var(--color-grey-225-10-97);
+  --tooltip-code-border-color: var(--color-grey-225-10-85);
+
   display: flex;
   color: var(--color-white, white);
   position: fixed;
   z-index: 1000;
-  padding-right: 6px;
   max-width: 300px;
   font-size: var(--text-size-small);
   font-family: var(--font-family);
 }
 
+.bio-properties-panel-tooltip.right {
+  padding-right: 6px;
+}
+
+.bio-properties-panel-tooltip.top {
+  flex-direction: column;
+}
+
 .bio-properties-panel-tooltip-content {
   background-color: var(--tooltip-background-color);
   padding: 16px;
@@ -1207,6 +1220,12 @@ textarea.bio-properties-panel-input {
   margin-top: 16px;
 }
 
+.bio-properties-panel-tooltip.top .bio-properties-panel-tooltip-arrow {
+  margin-top: -3px;
+  margin-left: calc(50% - 2.5px);
+  transform: rotate(90deg);
+}
+
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
 .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
   display: none;
@@ -1271,18 +1290,23 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-popup .bio-properties-panel-popup__footer {
   padding: 12px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
   padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
+  --popup-header-line-height: 16px;
   background-color: var(--popup-header-background-color);
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 16px;
+  line-height: var(--popup-header-line-height);
   text-align: left;
   color: var(--popup-title-color);
 }
@@ -1310,7 +1334,7 @@ textarea.bio-properties-panel-input {
   text-transform: capitalize;
 }
 
-.bio-properties-panel-popup .bio-properties-panel-popup__header svg {
+.bio-properties-panel-popup .bio-properties-panel-popup__header .bio-properties-panel-popup__drag-handle svg {
   margin-left: -4px;
 }
 
@@ -1341,11 +1365,27 @@ textarea.bio-properties-panel-input {
   width: 100%;
 }
 
+.bio-properties-panel-feel-popup__title-link {
+  margin-left: auto; 
+  display: flex;
+}
+
+.bio-properties-panel-feel-popup__title-link svg {
+  width: var(--popup-header-line-height);
+  height: var(--popup-header-line-height);
+  fill: currentColor;
+  margin: 0 0.5em;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container {
   display: flex;
   min-width: 100%;
 }
 
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-scroller {
+  overflow: auto !important;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
   width: 100%;
   display: flex;
@@ -1363,7 +1403,6 @@ textarea.bio-properties-panel-input {
   width: 100%;
   resize: none;
   padding: 0;
-  margin-left: -12px;
   overflow: hidden;
   overflow-y: auto
 }
@@ -1375,19 +1414,18 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
   position: absolute;
-  display: none;
+  top: 0;
   right: 0;
-  bottom: -1px;
+  line-height: 1;
+  padding: 2px 4px;
+  margin: 3px;
+  display: none;
   background: none;
   border: none;
   color: var(--feel-open-popup-color);
   cursor: pointer;
 }
 
-.bio-properties-panel-open-feel-popup svg {
-  background: var(--feel-open-popup-background-color);
-}
-
 .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,
@@ -1395,10 +1433,6 @@ textarea.bio-properties-panel-input {
   display: block;
 }
 
-.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup {
-  bottom: 0;
-}
-
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
   color: var(--feel-open-popup-hover-color);