camunda-bpmn-js 0.14.0 → 0.15.0

package/README.md

@@ -1,85 +1,85 @@
-# camunda-bpmn-js
-
-[![CI](https://github.com/camunda/camunda-bpmn-js/workflows/CI/badge.svg)](https://github.com/camunda/camunda-bpmn-js/actions?query=workflow%3ACI)
-
-
-Embeddable Camunda modeling distributions based on [bpmn-js](https://github.com/bpmn-io/bpmn-js). 
-
-## Usage
-
-This project is designed to deliver different BPMN modeling distributions. Instead of creating custom Modeler implementations based on [bpmn-js](https://github.com/bpmn-io/bpmn-js), choose one of the existing packages to mirror the modeling experience of [Camunda's modeling](https://github.com/camunda/camunda-modeler/) products.
-
-Use a pre-packaged distribution
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/assets/camunda-platform-modeler.css" />
-
-<script src="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/camunda-platform-modeler.development.js"></script>
-```
-
-or install it via npm
-
-```js
-import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
-
-import 'camunda-bpmn-js/dist/assets/camunda-platform-modeler.css';
-```
-
-into your web-application.
-
-```js
-var bpmnModeler = new BpmnModeler({
-  container: '#canvas',
-  propertiesPanel: {
-    parent: '#properties'
-  }
-});
-
-try {
-
-  await bpmnModeler.importXML(someDiagram);
-
-  console.log('success!');
-  viewer.get('canvas').zoom('fit-viewport');
-} catch (err) {
-
-  console.error('something went wrong:', err);
-}
-```
-
-
-Checkout [the docs](./docs/DISTRIBUTIONS.md) to learn more about the available distributions.
-## Build and Run
-
-
-Prepare the project by installing all dependencies:
-
-```sh
-npm install
-```
-
-Then, depending on your use-case, you may run any of the following commands:
-
-```sh
-# build the library and run all tests
-npm run all
-
-# spin up a single local camunda platform modeler instance
-npm run start:platform
-
-# run the full development setup
-npm run dev
-```
-
-## Related
-
-camunda-bpmn-js builds on top of a few powerful tools:
-
-* [bpmn-js](https://github.com/bpmn-io/bpmn-js): View and edit BPMN 2.0 diagrams in the browser
-* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
-
-## License
-
-MIT
-
+# camunda-bpmn-js
+
+[![CI](https://github.com/camunda/camunda-bpmn-js/workflows/CI/badge.svg)](https://github.com/camunda/camunda-bpmn-js/actions?query=workflow%3ACI)
+
+
+Embeddable Camunda modeling distributions based on [bpmn-js](https://github.com/bpmn-io/bpmn-js). 
+
+## Usage
+
+This project is designed to deliver different BPMN modeling distributions. Instead of creating custom Modeler implementations based on [bpmn-js](https://github.com/bpmn-io/bpmn-js), choose one of the existing packages to mirror the modeling experience of [Camunda's modeling](https://github.com/camunda/camunda-modeler/) products.
+
+Use a pre-packaged distribution
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/assets/camunda-platform-modeler.css" />
+
+<script src="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/camunda-platform-modeler.development.js"></script>
+```
+
+or install it via npm
+
+```js
+import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
+
+import 'camunda-bpmn-js/dist/assets/camunda-platform-modeler.css';
+```
+
+into your web-application.
+
+```js
+var bpmnModeler = new BpmnModeler({
+  container: '#canvas',
+  propertiesPanel: {
+    parent: '#properties'
+  }
+});
+
+try {
+
+  await bpmnModeler.importXML(someDiagram);
+
+  console.log('success!');
+  viewer.get('canvas').zoom('fit-viewport');
+} catch (err) {
+
+  console.error('something went wrong:', err);
+}
+```
+
+
+Checkout [the docs](./docs/DISTRIBUTIONS.md) to learn more about the available distributions.
+## Build and Run
+
+
+Prepare the project by installing all dependencies:
+
+```sh
+npm install
+```
+
+Then, depending on your use-case, you may run any of the following commands:
+
+```sh
+# build the library and run all tests
+npm run all
+
+# spin up a single local camunda platform modeler instance
+npm run start:platform
+
+# run the full development setup
+npm run dev
+```
+
+## Related
+
+camunda-bpmn-js builds on top of a few powerful tools:
+
+* [bpmn-js](https://github.com/bpmn-io/bpmn-js): View and edit BPMN 2.0 diagrams in the browser
+* [diagram-js](https://github.com/bpmn-io/diagram-js): Diagram rendering and editing toolkit
+
+## License
+
+MIT
+
 Uses [bpmn-js](https://github.com/bpmn-io/bpmn-js) licensed under the bpmn.io license.

package/dist/assets/base-modeler.css

@@ -1,5 +1,5 @@
-@import './diagram-js.css';
-@import './bpmn-js.css';
-@import './bpmn-font/css/bpmn-embedded.css';
-@import './diagram-js-minimap.css';
+@import './diagram-js.css';
+@import './bpmn-js.css';
+@import './bpmn-font/css/bpmn-embedded.css';
+@import './diagram-js-minimap.css';
 @import './properties-panel.css';

package/dist/assets/base-navigated-viewer.css

@@ -1,2 +1,2 @@
-@import './diagram-js.css';
+@import './diagram-js.css';
 @import './bpmn-js.css';

package/dist/assets/base-viewer.css

@@ -1,2 +1,2 @@
-@import './diagram-js.css';
+@import './diagram-js.css';
 @import './bpmn-js.css';

package/dist/assets/bpmn-js.css

@@ -8,7 +8,7 @@
   --color-grey-225-10-80: hsl(225, 10%, 80%);
   --color-grey-225-10-85: hsl(225, 10%, 85%);
   --color-grey-225-10-90: hsl(225, 10%, 90%);
-  --color-grey-225-10-95: hsl(225, 10%, 95%); 
+  --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
 
   --color-blue-205-100-45: hsl(205, 100%, 45%);
@@ -24,8 +24,8 @@
   --color-red-360-100-97: hsl(360, 100%, 97%);
 
   --color-white: hsl(0, 0%, 100%);
-  --color-black: hsl(0, 0%, 0%); 
-  --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 
+  --color-black: hsl(0, 0%, 0%);
+  --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
   --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
 
   --breadcrumbs-font-family: var(--bjs-font-family);
@@ -113,4 +113,33 @@
 
 .selected .bjs-drilldown-empty {
   display: inherit;
-}
+}
+
+[data-popup="align-elements"] .djs-popup-body {
+  display: flex;
+}
+
+[data-popup="align-elements"] .djs-popup-body [data-group] + [data-group] {
+  border-left: 1px solid var(--popup-border-color);
+}
+
+[data-popup="align-elements"] [data-group="align"] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+[data-popup="align-elements"] .djs-popup-body .entry {
+  height: 20px;
+  width: 20px;
+
+  padding: 6px 8px;
+}
+
+[data-popup="align-elements"] .djs-popup-body .entry img {
+  height: 100%;
+  width: 100%;
+}
+
+[data-popup="align-elements"] .bjs-align-elements-menu-entry {
+  display: inline-block;
+}

package/dist/assets/camunda-cloud-modeler.css

@@ -1,2 +1,2 @@
-@import './base-modeler.css';
+@import './base-modeler.css';
 @import './element-templates.css';

package/dist/assets/camunda-platform-modeler.css

@@ -1,2 +1,2 @@
-@import './base-modeler.css';
+@import './base-modeler.css';
 @import './element-templates.css';

package/dist/assets/diagram-js.css

@@ -9,12 +9,14 @@
   --color-grey-225-10-80: hsl(225, 10%, 80%);
   --color-grey-225-10-85: hsl(225, 10%, 85%);
   --color-grey-225-10-90: hsl(225, 10%, 90%);
-  --color-grey-225-10-95: hsl(225, 10%, 95%); 
+  --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
 
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-50-opacity-15: hsla(205, 100%, 50%, 15%);
+  --color-blue-205-100-70: hsl(205, 100%, 75%);
   --color-blue-205-100-95: hsl(205, 100%, 95%);
 
   --color-green-150-86-44: hsl(150, 86%, 44%);
@@ -25,12 +27,13 @@
   --color-red-360-100-97: hsl(360, 100%, 97%);
 
   --color-white: hsl(0, 0%, 100%);
-  --color-black: hsl(0, 0%, 0%); 
-  --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 
+  --color-black: hsl(0, 0%, 0%);
   --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
 
-  --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30);
-  --bendpoint-stroke-color: var(--color-blue-205-100-50);
+  --canvas-fill-color: var(--color-white);
+
+  --bendpoint-fill-color: var(--color-blue-205-100-45);
+  --bendpoint-stroke-color: var(--canvas-fill-color);
 
   --context-pad-entry-background-color: var(--color-white);
   --context-pad-entry-hover-background-color: var(--color-grey-225-10-95);
@@ -38,9 +41,10 @@
   --element-dragger-color: var(--color-blue-205-100-50);
   --element-hover-outline-fill-color: var(--color-blue-205-100-45);
   --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
+  --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70);
 
-  --lasso-fill-color: var(--color-black-opacity-05);
-  --lasso-stroke-color: var(--color-black);
+  --lasso-fill-color: var(--color-blue-205-100-50-opacity-15);
+  --lasso-stroke-color: var(--element-selected-outline-stroke-color);
 
   --palette-entry-color: var(--color-grey-225-10-15);
   --palette-entry-hover-color: var(--color-blue-205-100-45);
@@ -57,8 +61,8 @@
   --popup-background-color: var(--color-grey-225-10-97);
   --popup-border-color: var(--color-grey-225-10-75);
 
-  --resizer-fill-color: var(--color-blue-205-100-45-opacity-30);
-  --resizer-stroke-color: var(--color-blue-205-100-50);
+  --resizer-fill-color: var(--color-blue-205-100-45);
+  --resizer-stroke-color: var(--canvas-fill-color);
 
   --search-container-background-color: var(--color-grey-225-10-97);
   --search-container-border-color: var(--color-blue-205-100-50);
@@ -88,26 +92,29 @@
  * outline styles
  */
 
-.djs-outline {
+.djs-outline,
+.djs-selection-outline {
   fill: none;
+  shape-rendering: geometricPrecision;
+  stroke-width: 2px;
+}
+
+.djs-outline {
   visibility: hidden;
 }
 
-.djs-element.hover .djs-outline,
-.djs-element.selected .djs-outline {
-  visibility: visible;
-  shape-rendering: geometricPrecision;
-  stroke-dasharray: 3,3;
+.djs-selection-outline {
+  stroke: var(--element-selected-outline-stroke-color);
 }
 
 .djs-element.selected .djs-outline {
+  visibility: visible;
+
   stroke: var(--element-selected-outline-stroke-color);
-  stroke-width: 1px;
 }
 
-.djs-element.hover .djs-outline {
-  stroke: var(--element-hover-outline-fill-color);
-  stroke-width: 1px;
+.djs-multi-select .djs-element.selected .djs-outline {
+  stroke: var(--element-selected-outline-secondary-stroke-color);
 }
 
 .djs-shape.connect-ok .djs-visual > :nth-child(1) {
@@ -131,19 +138,20 @@ svg.new-parent {
   background: var(--shape-drop-allowed-fill-color) !important;
 }
 
-.djs-connection.connect-ok .djs-visual > :nth-child(1),
-.djs-connection.drop-ok .djs-visual > :nth-child(1) {
-  stroke: var(--shape-drop-allowed-fill-color) !important;
-}
 
-.djs-connection.connect-not-ok .djs-visual > :nth-child(1),
-.djs-connection.drop-not-ok .djs-visual > :nth-child(1) {
-  stroke: var(--shape-drop-not-allowed-fill-color) !important;
+/* Override move cursor during drop and connect */
+.drop-not-ok,
+.connect-not-ok,
+.drop-not-ok *,
+.connect-not-ok * {
+  cursor: not-allowed !important;
 }
 
-.drop-not-ok,
-.connect-not-ok {
-  cursor: not-allowed;
+.drop-ok,
+.connect-ok,
+.drop-ok *,
+.connect-ok * {
+  cursor: default !important;
 }
 
 .djs-element.attach-ok .djs-visual > :nth-child(1) {
@@ -164,10 +172,8 @@ svg.new-parent {
 */
 .djs-lasso-overlay {
   fill: var(--lasso-fill-color);
-
-  stroke-dasharray: 5 1 3 1;
   stroke: var(--lasso-stroke-color);
-
+  stroke-width: 2px;
   shape-rendering: geometricPrecision;
   pointer-events: none;
 }
@@ -192,9 +198,8 @@ svg.new-parent {
 .djs-resizer-visual {
   fill: var(--resizer-fill-color);
   stroke-width: 1px;
-  stroke-opacity: 0.5;
   stroke: var(--resizer-stroke-color);
-  shape-rendering: geometricprecision;
+  shape-rendering: geometricPrecision;
 }
 
 .djs-resizer:hover .djs-resizer-visual {
@@ -296,7 +301,8 @@ marker.djs-dragger tspan {
 /**
  * all pointer events for hit shape
  */
-.djs-element > .djs-hit-all {
+.djs-element > .djs-hit-all,
+.djs-element > .djs-hit-no-move {
   pointer-events: all;
 }
 
@@ -305,13 +311,6 @@ marker.djs-dragger tspan {
   pointer-events: stroke;
 }
 
-/**
- * all pointer events for hit shape
- */
-.djs-drag-active .djs-element > .djs-hit-click-stroke {
-  pointer-events: all;
-}
-
 /**
  * shape / connection basic styles
  */
@@ -367,7 +366,7 @@ marker.djs-dragger tspan {
   stroke-linecap: round;
   stroke-width: 1px;
   pointer-events: none;
-  shape-rendering: crispEdges;
+  shape-rendering: geometricPrecision;
   stroke-dasharray: 5, 5;
 }
 
@@ -385,7 +384,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-palette .separator {
-  margin: 0 5px;
+  margin: 5px;
   padding-top: 5px;
 
   border: none;
@@ -395,7 +394,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-palette .entry:before {
-  vertical-align: text-bottom;
+  vertical-align: initial;
 }
 
 .djs-palette .djs-palette-toggle {
@@ -477,6 +476,7 @@ marker.djs-dragger tspan {
   position: absolute;
   display: none;
   pointer-events: none;
+  line-height: 1;
 }
 
 .djs-context-pad .entry {
@@ -494,10 +494,7 @@ marker.djs-dragger tspan {
   background-color: var(--context-pad-entry-background-color);
   box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color);
   pointer-events: all;
-}
-
-.djs-context-pad .entry:before {
-  vertical-align: top;
+  vertical-align: middle;
 }
 
 .djs-context-pad .entry:hover {
@@ -552,7 +549,7 @@ marker.djs-dragger tspan {
 }
 
 .djs-popup-body .entry {
-  padding: 4px 10px 4px 5px;
+  padding: 4px 5px;
 }
 
 .djs-popup-body .entry > span {
@@ -625,7 +622,6 @@ marker.djs-dragger tspan {
   fill: var(--bendpoint-fill-color);
   stroke: var(--bendpoint-stroke-color);
   stroke-width: 1px;
-  stroke-opacity: 0.5;
 }
 
 .djs-segment-dragger:hover,
@@ -684,6 +680,8 @@ marker.djs-dragger tspan {
 .djs-updating .djs-context-pad,
 .djs-updating .djs-outline,
 .djs-updating .djs-bendpoint,
+.djs-multi-select .djs-bendpoint,
+.djs-multi-select .djs-segment-dragger,
 .connect-ok .djs-bendpoint,
 .connect-not-ok .djs-bendpoint,
 .drop-ok .djs-bendpoint,
@@ -817,3 +815,9 @@ marker.djs-dragger tspan {
 .djs-label-hidden .djs-label {
   display: none !important;
 }
+
+.djs-element .djs-hit-stroke,
+.djs-element .djs-hit-click-stroke,
+.djs-element .djs-hit-all {
+  cursor: move;
+}

package/dist/assets/element-templates.css

@@ -14,6 +14,10 @@
   object-fit: contain;
 }
 
+.bio-properties-panel-templates-group .bio-properties-panel-group-header {
+  position: initial;
+}
+
 .bio-properties-panel-templates-group .bio-properties-panel-group-header-button:not(.bio-properties-panel-arrow) {
   padding-right: 6px;
   padding-left: 9px;