Prepare version 0.9.0

- Bump new versions - New icons - Optional add the Zeebe property panel
joleaf · Oct 21, 2023 · a0b5439 · a0b5439
1 parent 3906a38
commit a0b5439
Show file tree

Hide file tree

Showing 8 changed files with 685 additions and 197 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All changes to this plugin are listed here.
 
+## 0.9.0 (2023-10-21)
+
+### Updated
+
+- Bump new versions
+- New icons
+- Optional add the Zeebe property panel
+
 ## 0.8.0 (2023-09-26)
 
 ### Updated

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "bpmn-plugin",
 	"name": "BPMN Plugin",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"minAppVersion": "0.15.0",
 	"description": "This plugin enables viewing/editing BPMN diagrams using bpmn-js.",
 	"author": "JoLeaf",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpmn-plugin",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "This plugin enables viewing/editing BPMN diagrams using bpmn-js.",
   "main": "main.js",
   "scripts": {

diff --git a/src/bpmnModeler.ts b/src/bpmnModeler.ts
@@ -1,6 +1,10 @@
 import Modeler from "bpmn-js/lib/Modeler";
-import {BpmnPropertiesPanelModule, BpmnPropertiesProviderModule} from 'bpmn-js-properties-panel';
-import {TextFileView, WorkspaceLeaf} from "obsidian";
+import {
+    BpmnPropertiesPanelModule,
+    BpmnPropertiesProviderModule,
+    ZeebePropertiesProviderModule
+} from 'bpmn-js-properties-panel';
+import {setIcon, TextFileView, WorkspaceLeaf} from "obsidian";
 import {ObsidianBpmnPluginSettings} from "./settings";
 import {SaveSVGResult} from "bpmn-js/lib/BaseViewer";
 
@@ -33,14 +37,30 @@ export class BpmnModelerView extends TextFileView {
     }
 
     async onOpen() {
-        let bpmnSave = this.contentEl.createEl("button", {text: "Save"});
-        let bpmnUndo = this.contentEl.createEl("button", {text: "Undo"});
-        let bpmnRedo = this.contentEl.createEl("button", {text: "Redo"});
-        let bpmnProperties = this.contentEl.createEl("button", {text: "Properties"});
-        let bpmnSaveSvg = this.contentEl.createEl("button", {text: "Export SVG"});
-        let bpmnSavePng = this.contentEl.createEl("button", {text: "Export PNG"});
+        let bpmnSave = this.contentEl.createEl("button", {text: "Save", attr: {"aria-label": "Save"}});
+        let bpmnUndo = this.contentEl.createEl("button", {text: "Undo", attr: {"aria-label": "Undo"}});
+        let bpmnRedo = this.contentEl.createEl("button", {text: "Redo", attr: {"aria-label": "Redo"}});
+        let bpmnProperties = this.contentEl.createEl("button", {
+            text: "Properties",
+            attr: {"aria-label": "Show properties"}
+        });
+        let bpmnSaveSvg = this.contentEl.createEl("button", {
+            text: "Export SVG",
+            attr: {"aria-label": "Export as SVG"}
+        });
+        let bpmnSavePng = this.contentEl.createEl("button", {
+            text: "Export PNG",
+            attr: {"aria-label": "Export as PNG"}
+        });
         this.bpmnDiv = this.contentEl.createEl("div", {cls: "bpmn-view bpmn-fullscreen"});
         let propertyPanel = this.contentEl.createEl("div", {cls: "bpmn-properties-panel hide"});
+        let modules = [
+            BpmnPropertiesPanelModule,
+            BpmnPropertiesProviderModule
+        ];
+        if (this.settings.enable_zeebe_properties) {
+            modules.push(ZeebePropertiesProviderModule)
+        }
         this.bpmnModeler = new Modeler({
             container: this.bpmnDiv,
             keyboard: {
@@ -49,11 +69,7 @@ export class BpmnModelerView extends TextFileView {
             propertiesPanel: {
                 parent: propertyPanel
             },
-            additionalModules: [
-                BpmnPropertiesPanelModule,
-                BpmnPropertiesProviderModule
-                // TODO: Add camunda properties (if requested?) https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel
-            ]
+            additionalModules: modules
         });
         if (this.settings.force_white_background_by_default) {
             this.bpmnDiv.addClass("bpmn-view-white-background");
@@ -70,19 +86,24 @@ export class BpmnModelerView extends TextFileView {
         bpmnSave.addEventListener("click", function (e: Event) {
             thisRef.save();
         });
+        setIcon(bpmnSave, "save");
         bpmnUndo.addEventListener("click", function (e: Event) {
             bpmnModeler.get("commandStack").undo();
         });
+        setIcon(bpmnUndo, "undo");
         bpmnRedo.addEventListener("click", function (e: Event) {
             bpmnModeler.get("commandStack").redo();
         });
+        setIcon(bpmnRedo, "redo");
         bpmnProperties.addEventListener("click", function (e: Event) {
             propertyPanel.classList.toggle("hide");
         });
+        setIcon(bpmnProperties, "settings");
         bpmnSaveSvg.addEventListener("click", async function (e: Event) {
             let result: SaveSVGResult = await bpmnModeler.saveSVG();
             await thisRef.saveImageFile(result.svg, "svg");
         });
+        setIcon(bpmnSaveSvg, "image");
 
         // PNG is not working for now
         bpmnSavePng.addEventListener("click", async function (e: Event) {

diff --git a/src/settings.ts b/src/settings.ts
@@ -10,6 +10,7 @@ export class ObsidianBpmnPluginSettings {
     enablepanzoom_by_default: boolean = true;
     height_by_default: number = 400;
     force_white_background_by_default: boolean = true;
+    enable_zeebe_properties: boolean = false;
 }
 
 export class ObsidianBpmnPluginSettingsTab extends PluginSettingTab {
@@ -69,5 +70,13 @@ export class ObsidianBpmnPluginSettingsTab extends PluginSettingTab {
                     this.plugin.settings.force_white_background_by_default = value;
                     this.plugin.saveData(this.plugin.settings);
                 }));
+        new Setting(containerEl)
+            .setName("Enable Zeebe properties")
+            .setDesc("Add the Zeebe properties in the property box. (Warning: Beta)")
+            .addToggle(toggle => toggle.setValue(this.plugin.settings.enable_zeebe_properties)
+                .onChange((value) => {
+                    this.plugin.settings.enable_zeebe_properties = value;
+                    this.plugin.saveData(this.plugin.settings);
+                }));
     }
 }
diff --git a/src/styles.css b/src/styles.css
@@ -2,6 +2,7 @@
 @import "bpmn-js/dist/assets/bpmn-js.css";
 @import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
 @import "bpmn-js-properties-panel/dist/assets/properties-panel.css";
+@import "bpmn-js-properties-panel/dist/assets/element-templates.css";
 /* Styles */
 
 .bpmn-view {
@@ -19,7 +20,7 @@
         color: black !important;
     }
 
-    .bpmn-view > textarea, .bpmn-view > input.metadata-input-text, .bpmn-view > input[type='date'], .bpmn-view > input[type='datetime-local'], .bpmn-view > input[type='text'], .bpmn-view > input[type='search'], .bpmn-view > input[type='email'], .bpmn-view > input[type='password'], .bpmn-view > input[type='number'], .bpmn-view > .bio-properties-panel-input {
+    .bio-properties-panel-input, .bpmn-view textarea, .bpmn-view input.metadata-input-text, .bpmn-view input[type='date'], .bpmn-view input[type='datetime-local'], .bpmn-view input[type='text'], .bpmn-view input[type='search'], .bpmn-view input[type='email'], .bpmn-view input[type='password'], .bpmn-view input[type='number'], .bpmn-view .bio-properties-panel-input {
         background-color: white !important;
         color: black !important;
     }
@@ -47,6 +48,11 @@
     left: 15px !important;
 }
 
+.bpmn-view .djs-popup {
+    top: 0px !important;
+    left: 0px !important;
+}
+
 .bpmn-properties-panel {
     width: 400px;
     position: absolute;
@@ -62,12 +68,12 @@
 
 @font-face {
     font-family: 'bpmn';
-    src: url('https://unpkg.com/bpmn-js@13.2.2/dist/assets/bpmn-font/font/bpmn.eot?21877404');
-    src: url('https://unpkg.com/bpmn-js@13.2.2/dist/assets/bpmn-font/font/bpmn.eot?21877404#iefix') format('embedded-opentype'),
-    url('https://unpkg.com/bpmn-js@13.2.2/dist/assets/bpmn-font/font/bpmn.woff2?21877404') format('woff2'),
-    url('https://unpkg.com/bpmn-js@13.2.2/dist/assets/bpmn-font/font/bpmn.woff?21877404') format('woff'),
-    url('https://unpkg.com/bpmn-js@13.2.2/dist/assets/bpmn-font/font/bpmn.ttf?21877404') format('truetype'),
-    url('https://unpkg.com/bpmn-js@13.2.2/dist/assets/bpmn-font/font/bpmn.svg?21877404#bpmn') format('svg');
+    src: url('https://unpkg.com/bpmn-js@14.0.0/dist/assets/bpmn-font/font/bpmn.eot?21877404');
+    src: url('https://unpkg.com/bpmn-js@14.0.0/dist/assets/bpmn-font/font/bpmn.eot?21877404#iefix') format('embedded-opentype'),
+    url('https://unpkg.com/bpmn-js@14.0.0/dist/assets/bpmn-font/font/bpmn.woff2?21877404') format('woff2'),
+    url('https://unpkg.com/bpmn-js@14.0.0/dist/assets/bpmn-font/font/bpmn.woff?21877404') format('woff'),
+    url('https://unpkg.com/bpmn-js@14.0.0/dist/assets/bpmn-font/font/bpmn.ttf?21877404') format('truetype'),
+    url('https://unpkg.com/bpmn-js@14.0.0/dist/assets/bpmn-font/font/bpmn.svg?21877404#bpmn') format('svg');
     font-weight: normal;
     font-style: normal;
 }
diff --git a/versions.json b/versions.json
@@ -10,5 +10,6 @@
   "0.6.0": "0.15.0",
   "0.7.0": "0.15.0",
   "0.7.1": "0.15.0",
-  "0.8.0": "0.15.0"
+  "0.8.0": "0.15.0",
+  "0.9.0": "0.15.0"
 }