camunda-bpmn-js 0.15.1 → 0.16.0

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+The MIT License (MIT)
+
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.

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/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/properties-panel.css

@@ -12,6 +12,7 @@
   --color-grey-225-10-95: hsl(225, 10%, 95%);
   --color-grey-225-10-97: hsl(225, 10%, 97%);
 
+  --color-blue-205-100-35: hsl(205, 100%, 35%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
   --color-blue-205-100-95: hsl(205, 100%, 95%);
@@ -98,6 +99,11 @@
   --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
   --dropdown-separator-background-color: var(--color-grey-225-10-75);
 
+  --feel-active-color: var(--color-blue-205-100-35);
+  --feel-inactive-color: var(--color-grey-225-10-35);
+
+  --feel-indicator-background-color: var(--color-grey-225-10-90);
+
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -114,8 +120,11 @@
   overflow: hidden;
 }
 
-.bio-properties-panel * {
+.bio-properties-panel {
   color: var(--text-base-color);
+}
+
+.bio-properties-panel * {
   font-size: var(--text-size-base);
   line-height: var(--text-line-height);
   font-weight: 400;
@@ -237,8 +246,14 @@
   justify-content: space-between;
   margin-bottom: -1px; /* avoid double borders */
   position: relative;  /* browsers not supporting sticky */
-  position: -webkit-sticky;  /* for safari */
-  position: sticky;
+
+  /**
+   * @pinussilvestrus Note: we exclude the sticky header feature until we
+   * find a proper fix for https://github.com/bpmn-io/bpmn-js-properties-panel/issues/726
+   */
+   
+  /* position: -webkit-sticky;  /* for safari */
+  /* position: sticky; */
   top: 0;
   z-index: 1;
 }
@@ -446,12 +461,19 @@ textarea.bio-properties-panel-input,
   width: 100%;
 }
 
-.bio-properties-panel-input:focus {
+.bio-properties-panel-input:focus,
+.bio-properties-panel-input:focus-within {
   outline: none;
   background-color: var(--input-focus-background-color);
   border: 1px solid var(--input-focus-border-color);
 }
 
+.bio-properties-panel-textfield:focus-within,
+.bio-properties-panel-feel-entry:focus-within {
+  --input-background-color: var(--input-focus-background-color);
+  --input-border-color: var(--input-focus-border-color);
+}
+
 .bio-properties-panel-input:disabled {
   border-color: var(--input-disabled-border-color);
   background-color: var(--input-disabled-background-color);
@@ -920,11 +942,76 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feel-icon {
   display: inline-block;
   height: 16px;
+  border-radius: 8px;
   vertical-align: text-bottom;
-  padding: 0 3px;
+  padding: 0;
+  margin: 0 3px;
+  align-items: center;
+  align-self: center;
+  border: none;
+  background: none;
+}
+
+.bio-properties-panel-feel-icon.optional {
+  cursor: pointer;
+}
+
+.bio-properties-panel-feel-icon svg * {
+  color: var(--feel-inactive-color);
+}
+
+.bio-properties-panel-feel-icon.active svg * {
+  color: var(--feel-active-color);
 }
 
 .bio-properties-panel-feel-icon svg {
   width: 16px;
   height: 16px;
-}
+}
+
+.bio-properties-panel-feel-editor-container {
+  position: relative;
+}
+
+.bio-properties-panel-feel-editor-container.active {
+  font-family: var(--font-family-monospace);
+}
+
+.bio-properties-panel-feel-container {
+  position: relative;
+}
+
+.bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
+  position: static;
+  padding-left: 2.4em !important;
+  min-height: 28px;
+}
+
+.cm-scroller {
+  overflow: hidden !important;
+}
+
+.bio-properties-panel-feel-indicator {
+  position: absolute;
+  border: 1px solid var(--input-border-color);
+  background-color: var(--feel-indicator-background-color);
+  border-right: 0px;
+  border-radius: 2px 0 0 2px;
+  z-index: 1;
+  height: 100%;
+  width: 2em;
+  text-align: center;
+  padding: 2px 6px;
+}
+
+.bio-properties-panel-feel-editor-container .bio-properties-panel-input {
+  resize: vertical;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.bio-properties-panel-feel-editor-container,
+.bio-properties-panel-feel-editor-container .bio-properties-panel-input,
+.cm-editor {
+  min-height: 100%;
+}