├── .gitignore ├── docs ├── screenshot.png ├── screenshot2.png ├── screenshot3.png └── screenshot4.png ├── index.js ├── client ├── bpmn-js-extension │ ├── index.js │ └── DraculaTheme.js └── index.js ├── webpack.config.js ├── package.json ├── LICENSE ├── menu └── menu.js ├── README.md ├── style ├── colors.css ├── codemirror-dracula.css ├── style.css └── diagram-js.css └── dist ├── client.js.map └── client.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | package-lock.json 3 | .idea/ 4 | -------------------------------------------------------------------------------- /docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hlucasfranca/camunda-modeler-plugin-dracula/HEAD/docs/screenshot.png -------------------------------------------------------------------------------- /docs/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hlucasfranca/camunda-modeler-plugin-dracula/HEAD/docs/screenshot2.png -------------------------------------------------------------------------------- /docs/screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hlucasfranca/camunda-modeler-plugin-dracula/HEAD/docs/screenshot3.png -------------------------------------------------------------------------------- /docs/screenshot4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hlucasfranca/camunda-modeler-plugin-dracula/HEAD/docs/screenshot4.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | name: 'Dracula Theme', 5 | style: './style/style.css', 6 | script: './dist/client.js', 7 | menu: './menu/menu.js' 8 | }; 9 | -------------------------------------------------------------------------------- /client/bpmn-js-extension/index.js: -------------------------------------------------------------------------------- 1 | import DraculaTheme from './DraculaTheme'; 2 | 3 | export default { 4 | __init__: [ 'DraculaTheme' ], 5 | DraculaTheme: ['type', DraculaTheme ] 6 | }; 7 | -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | registerBpmnJSPlugin 3 | } from 'camunda-modeler-plugin-helpers'; 4 | 5 | import DraculaTheme from './bpmn-js-extension'; 6 | 7 | registerBpmnJSPlugin(DraculaTheme); 8 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'development', 5 | entry: './client/index.js', 6 | output: { 7 | path: path.resolve(__dirname, 'dist'), 8 | filename: 'client.js' 9 | }, 10 | devtool: 'cheap-module-source-map' 11 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "camunda-modeler-plugin-dracula-theme", 3 | "version": "0.1.0", 4 | "description": "Dracula theme for Camunda Modeler", 5 | "main": "index.js", 6 | "scripts": { 7 | "all": "run-s bundle", 8 | "bundle": "webpack", 9 | "dev": "webpack -w", 10 | "prepublishOnly": "run-s bundle" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/camunda/camunda-modeler-plugin-example.git" 15 | }, 16 | "keywords": [ 17 | "camunda", 18 | "modeler", 19 | "plugin", 20 | "theme" 21 | ], 22 | "author": "Henrique Lucas França", 23 | "license": "MIT", 24 | "devDependencies": { 25 | "camunda-modeler-plugin-helpers": "^5.0.0", 26 | "npm-run-all": "^4.1.5", 27 | "webpack": "^4.39.2", 28 | "webpack-cli": "^3.3.7" 29 | }, 30 | "files": [ 31 | "dist", 32 | "index.js" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Henrique Lucas França 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /menu/menu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * NOTE: 3 | * 4 | * This file defines menu entries for your plugin, if you do not need these, 5 | * remove the ../menu folder as well as the menu reference in the root index file (plugin entry point). 6 | * 7 | * You may define as many entries as you would like, here we enable the first when 8 | * focusing a Camunda Platform/7 BPMN diagram and the second on any BPMN diagram. Accelerator are 9 | * always optional. 10 | * 11 | * Menu plugins have some quirks so we advise visiting our documentation for more information at 12 | * https://docs.camunda.io/docs/components/modeler/desktop-modeler/plugins/ 13 | */ 14 | 15 | module.exports = function (electronApp, menuState) { 16 | return [ 17 | // { 18 | // label: 'Send a message to the console', 19 | // accelerator: 'CommandOrControl+=', 20 | // enabled: () => menuState.bpmn && menuState.platform === 'platform', 21 | // action: () => console.log('📓 A custom menu entry was triggered') 22 | // }, 23 | // { 24 | // label: 'Send a different message to the console aa', 25 | // accelerator: 'CommandOrControl+-', 26 | // enabled: () => menuState.bpmn, 27 | // action: () => console.log('📓 A different custom menu entry was triggered') 28 | // } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Camunda Modeler Plugin - Dracula Theme 2 | 3 | [![Compatible with Camunda Modeler version 5](https://img.shields.io/badge/Modeler_Version-5.0.0+-blue.svg)](#) [![Plugin Type](https://img.shields.io/badge/Plugin_Type-Styles-orange.svg)](#) 4 | 5 | This plugin enables [Dracula](https://draculatheme.com/) inspired theme to [Camunda Modeler](https://github.com/camunda/camunda-modeler). 6 | 7 | 8 | 9 | https://user-images.githubusercontent.com/11790275/192173181-0defbd54-1f48-4eec-8887-9928421e5f90.mp4 10 | 11 | 12 | 13 | ![Screenshot](docs/screenshot4.png) 14 | 15 | ![Screenshot](docs/screenshot.png) 16 | 17 | ![Screenshot](docs/screenshot3.png) 18 | 19 | ![Screenshot](docs/screenshot2.png) 20 | 21 | ## How to use 22 | 23 | 1. Download and copy this repository into the `plugins` directory of the Camunda Modeler 24 | 2. Start the Camunda Modeler 25 | 3. That's it :smile: 26 | 27 | ### Installing on macOS 28 | 29 | Open a Terminal window and run the following commands: 30 | 31 | ```sh 32 | cd ~/Library/Application Support/camunda-modeler 33 | mkdir -p resources/plugins 34 | cd resources/plugins 35 | git clone https://github.com/hlucasfranca/camunda-modeler-plugin-dracula.git 36 | ``` 37 | 38 | Restart Camunda Modeler. 39 | 40 | ## Licence 41 | 42 | MIT 43 | -------------------------------------------------------------------------------- /style/colors.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dracula-background: hsl(231, 15%, 18%); 3 | --dracula-current-line: hsl(232, 14, 31); 4 | --dracula-foreground: hsl(60, 30, 96); 5 | --dracula-comment: hsl(225, 27, 51); 6 | --dracula-cyan: hsl(191, 97, 77); 7 | --dracula-green: hsl(135, 94, 65); 8 | --dracula-orange: hsl(31, 100, 71); 9 | --dracula-pink: hsl(326, 100, 74); 10 | --dracula-purple: hsl(265, 89, 78); 11 | --dracula-red: hsl(0, 100, 67); 12 | --dracula-yellow: hsl(65, 92, 76); 13 | 14 | --color-grey-225-10-15: var(--dracula-foreground); /* text */ 15 | --color-grey-225-10-35: hsl(225, 10%, 35%); /* icons */ 16 | --color-grey-225-10-55: hsl(225, 10%, 55%); 17 | --color-grey-225-10-75: hsl(225, 10%, 75%); /* lines */ 18 | --color-grey-225-10-80: hsl(225, 10%, 80%); /* hover on grey bg */ 19 | --color-grey-225-10-85: hsl(225, 10%, 85%); /* app window */ 20 | --color-grey-225-10-90: hsl(225, 10%, 90%); /* button hover */ 21 | --color-grey-225-10-95: --dracula-background; /* backgrounds, hover */ 22 | --color-grey-225-10-97: hsl(225, 10%, 97%); /* form element backgrounds */ 23 | 24 | --color-blue-205-100-40: hsl(205, 100%, 40%); /* outline */ 25 | --color-blue-205-100-45: hsl(205, 100%, 45%); /* primary hover */ 26 | --color-blue-205-100-50: hsl(205, 100%, 50%); /* primary */ 27 | --color-blue-205-100-95: hsl(205, 100%, 95%); 28 | 29 | --color-green-150-86-44: hsl(150, 86%, 44%); /* success */ 30 | 31 | --color-red-360-100-40: hsl(360, 100%, 40%); /* warning hover */ 32 | --color-red-360-100-45: hsl(360, 100%, 45%); /* warning */ 33 | --color-red-360-100-92: hsl(360, 100%, 92%); /* hover */ 34 | --color-red-360-100-97: hsl(360, 100%, 97%); /* backgrounds */ 35 | 36 | --color-orange-20-98-52: hsl(20, 98%, 52%); /* new badges */ 37 | 38 | --color-white: hsl(0, 0%, 100%); 39 | --color-white-opacity-80: hsla(0, 0%, 100%, 80%); 40 | --color-black: hsl(0, 0%, 0%); 41 | --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 42 | --color-black-opacity-30: hsla(0, 0%, 0%, 30%); 43 | } 44 | -------------------------------------------------------------------------------- /client/bpmn-js-extension/DraculaTheme.js: -------------------------------------------------------------------------------- 1 | export default function DraculaTheme(eventBus) { 2 | 3 | function changeColors(event) { 4 | 5 | // const gfx = event.gfx; 6 | const element = event.element; 7 | const documentElement = document.documentElement; 8 | 9 | if(element && element.di){ 10 | const elementDi = element.di; 11 | 12 | if(!elementDi['background-color']){ 13 | elementDi['background-color']=getComputedStyle(documentElement).getPropertyValue('--color-white'); 14 | } 15 | if(!elementDi['border-color']){ 16 | elementDi['border-color']=getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35'); 17 | } 18 | 19 | if(element.type == 'label'){ 20 | 21 | if(elementDi.label){ 22 | elementDi.label.set('color', element.di['border-color']=getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35')); 23 | } 24 | 25 | } 26 | } 27 | } 28 | 29 | function restoreColors(event) { 30 | const documentElement = document.documentElement; 31 | const borderColor = getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35'); 32 | const backgroundColor = getComputedStyle(documentElement).getPropertyValue('--color-white'); 33 | 34 | for(let planeElement of event.definitions.diagrams[0].plane.planeElement){ 35 | 36 | if(planeElement['border-color'] == borderColor){ 37 | planeElement['border-color'] = ''; 38 | } 39 | 40 | if(planeElement['background-color'] == backgroundColor){ 41 | planeElement['background-color'] = ''; 42 | } 43 | } 44 | } 45 | 46 | eventBus.on([ 47 | 'shape.added', 48 | 'render.shape', 49 | 'render.connection', 50 | 'shape.moved', 51 | 'shape.changed', 52 | 'element.changed' 53 | ], 1250, changeColors); 54 | 55 | eventBus.on([ 56 | 'saveXML.start' 57 | ], 1250, restoreColors); 58 | 59 | eventBus.on('diagram.init', function() { 60 | }); 61 | 62 | } 63 | 64 | DraculaTheme.$inject = [ 65 | 'eventBus' 66 | ]; -------------------------------------------------------------------------------- /style/codemirror-dracula.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: dracula 4 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 5 | 6 | Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) 7 | 8 | */ 9 | 10 | 11 | :root{ 12 | --xml-editor-button-color: var(--color-grey-225-10-15); 13 | --xml-editor-button-border-color: var(--color-grey-225-10-75); 14 | --xml-editor-button-background-color: var(--color-grey-225-10-95); 15 | --xml-editor-font-size: var(--font-size-default); 16 | --xml-editor-font-size-small: 13px; 17 | --xml-editor-tag-color: #ff79c6 !important; 18 | --xml-editor-string-color: #f1fa8c !important; 19 | } 20 | 21 | .CodeMirror, .CodeMirror-gutters, 22 | .cm-editor, .cm-gutters { 23 | background-color: #282a36 !important; 24 | color: #f8f8f2 !important; 25 | border: none !important; 26 | } 27 | .CodeMirror-gutters, .cm-gutters { color: #282a36 !important; } 28 | .CodeMirror-cursor, .cm-cursor { border-left: solid thin #f8f8f0 !important; } 29 | .CodeMirror-linenumber, .cm-lineNumbers { color: #6D8A88 !important; } 30 | .CodeMirror-selected, .cm-selectionBackground { background: rgba(255, 255, 255, 0.1) !important; } 31 | .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection, 32 | .cm-line::selection, .cm-line > span::selection, .cm-line > span > span::selection { background: rgba(255, 255, 255, 0.10) !important; } 33 | .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection, 34 | .cm-line::-moz-selection, .cm-line > span::-moz-selection, .cm-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10) !important; } 35 | span.cm-comment { color: #6272a4 !important; } 36 | span.cm-string, span.cm-string-2, span.ci { color: #f1fa8c !important; } 37 | span.cm-number { color: #bd93f9 !important; } 38 | span.cm-variable { color: #50fa7b !important; } 39 | span.cm-variable-2 { color: white !important; } 40 | span.cm-def { color: #50fa7b !important; } 41 | span.cm-operator { color: #ff79c6 !important; } 42 | span.cm-keyword { color: #ff79c6 !important; } 43 | span.cm-atom { color: #bd93f9 !important; } 44 | span.cm-meta { color: #f8f8f2 !important; } 45 | span.cm-tag { color: #ff79c6 !important; } 46 | span.cm-attribute { color: #50fa7b !important; } 47 | span.cm-qualifier { color: #50fa7b !important; } 48 | span.cm-property { color: #66d9ef !important; } 49 | span.cm-builtin { color: #50fa7b !important; } 50 | span.cm-variable-3, span.cm-type { color: #ffb86c !important; } 51 | 52 | .CodeMirror-activeline-background, .cm-activeLine, .cm-activeLineGutter { background: rgba(255,255,255,0.1) !important; } 53 | .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | /* @import url(diagram-js.css); 2 | @import url(colors.css); */ 3 | @import url(codemirror-dracula.css); 4 | 5 | :root { 6 | --dracula-background: #262936; 7 | --dracula-current-line: #44475a; 8 | --dracula-foreground: #f8f8f2; 9 | --dracula-comment: #6071a4; 10 | --dracula-cyan: #8be8fd; 11 | --dracula-green: #52fa7c; 12 | --dracula-orange: #ffb86b; 13 | --dracula-pink: #ff7ac6; 14 | --dracula-purple: #bf95f9; 15 | --dracula-red: #ff5757; 16 | --dracula-yellow: #f1fa89; 17 | 18 | --color-white: var(--dracula-background); 19 | --color-black: var(--dracula-foreground); 20 | --color-transparent: transparent; 21 | 22 | --color-grey-225-10-15: rgb(248, 248, 242); 23 | --color-grey-225-10-35: rgb(207, 205, 205); 24 | --color-grey-225-10-55: rgb(175, 172, 175); 25 | --color-grey-225-10-75: rgb(146, 143, 149); 26 | --color-grey-225-10-80: rgb(120, 117, 125); 27 | --color-grey-225-10-85: rgb(96, 94, 83); 28 | --color-grey-225-10-90: rgb(76, 74, 85); 29 | --color-grey-225-10-95: rgb(56, 57, 69); 30 | --color-grey-225-10-97: rgb(40, 42, 54); 31 | 32 | --overlay-border-color: var(--color-grey-225-10-85); 33 | --overlay-background-color: var(--color-white); 34 | --overlay-font-color: var(--color-grey-225-10-15); 35 | --overlay-title-color: var(--color-grey-225-10-15); 36 | --overlay-link-color: var(--color-blue-205-100-50); 37 | --overlay-max-height: auto; 38 | --overlay-max-width: auto; 39 | --overlay-min-height: auto; 40 | --overlay-min-width: auto; 41 | 42 | --log-button-background-color: var(--dracula-current-line); 43 | --log-color: var(--dracula-foreground); 44 | 45 | --token-simulation-silver-darken-94: var(--dracula-current-line); 46 | --token-simulation-grey-darken-30: var(--dracula-foreground); 47 | } 48 | 49 | .bts-animation-speed-buttons path{ 50 | fill: var(--dracula-foreground); 51 | } 52 | 53 | .bts-animation-speed-buttons button{ 54 | background-color: var(--dracula-current-line); 55 | color: var(--dracula-foreground); 56 | } 57 | 58 | .bts-notifications .bts-notification{ 59 | color: var(--dracula-foreground) !important; 60 | } 61 | 62 | .bio-properties-panel-group-header, 63 | .form-group label { 64 | color: var(--dracula-pink); 65 | } 66 | 67 | body, .djs-direct-editing-content,.djs-direct-editing-parent{ 68 | background-color: var(--dracula-background) !important; 69 | color: var(--dracula-foreground) !important; 70 | } 71 | 72 | input, 73 | textarea, 74 | select{ 75 | color: var(--dracula-foreground) !important; 76 | background-color: var(--dracula-current-line); 77 | } 78 | 79 | .bio-properties-panel-input:focus, .bio-properties-panel-input:focus-within{ 80 | background-color: var(--dracula-current-line); 81 | color: var(--dracula-foreground); 82 | } 83 | 84 | .welcome-card{ 85 | background-color: var(--dracula-current-line) !important; 86 | color: var(--dracula-foreground) !important; 87 | } 88 | 89 | .bio-properties-panel{ 90 | --color-grey-225-10-15: rgb(248, 248, 242); 91 | --color-grey-225-10-35: rgb(207, 205, 205); 92 | --color-grey-225-10-55: rgb(175, 172, 175); 93 | --color-grey-225-10-75: rgb(146, 143, 149); 94 | --color-grey-225-10-80: rgb(120, 117, 125); 95 | --color-grey-225-10-85: rgb(96, 94, 83); 96 | --color-grey-225-10-90: rgb(76, 74, 85); 97 | --color-grey-225-10-95: rgb(56, 57, 69); 98 | --color-grey-225-10-97: rgb(40, 42, 54); 99 | 100 | --color-blue-205-100-35: hsl(205, 100%, 35%); 101 | --color-blue-205-100-45: hsl(205, 100%, 45%); 102 | --color-blue-205-100-50: hsl(205, 100%, 50%); 103 | --color-blue-205-100-95: hsl(205, 100%, 95%); 104 | 105 | --color-green-150-86-44: hsl(150, 86%, 44%); 106 | 107 | --color-red-360-100-40: hsl(360, 100%, 40%); 108 | --color-red-360-100-45: hsl(360, 100%, 45%); 109 | --color-red-360-100-92: hsl(360, 100%, 92%); 110 | --color-red-360-100-97: hsl(360, 100%, 97%); 111 | 112 | --color-white: var(--dracula-background); 113 | --color-black: var(--dracula-foreground); 114 | --color-transparent: transparent; 115 | 116 | --text-base-color: var(--dracula-foreground) !important; 117 | --text-error-color: var(--dracula-red); 118 | --link-color: var(--dracula-cyan); 119 | 120 | --description-color: hsla(var(--dracula-foreground), .1); 121 | --description-code-background-color: var(--color-grey-225-10-97); 122 | --description-code-border-color: var(--color-grey-225-10-85); 123 | --description-list-item-color: var(--color-grey-225-10-35); 124 | 125 | --placeholder-color: var(--color-grey-225-10-35); 126 | --placeholder-background-color: var(--color-grey-225-10-95); 127 | 128 | --header-background-color: var(--color-grey-225-10-95); 129 | --header-icon-fill-color: var(--color-grey-225-10-15); 130 | --header-bottom-border-color: var(--color-grey-225-10-75); 131 | 132 | --group-background-color: var(--color-white); 133 | --group-bottom-border-color: var(--color-grey-225-10-75); 134 | 135 | --sticky-group-background-color: var(--color-grey-225-10-95); 136 | --sticky-group-bottom-border-color: var(--color-grey-225-10-75); 137 | 138 | --add-entry-fill-color: var(--color-grey-225-10-35); 139 | --add-entry-hover-fill-color: var(--color-white); 140 | --add-entry-hover-background-color: var(--color-blue-205-100-50); 141 | --add-entry-label-color: var(--color-white); 142 | 143 | --remove-entry-fill-color: var(--color-red-360-100-45); 144 | --remove-entry-hover-background-color: var(--color-red-360-100-92); 145 | 146 | --arrow-fill-color: var(--color-grey-225-10-35); 147 | --arrow-hover-background-color: var(--color-grey-225-10-95); 148 | 149 | --dot-color: var(--color-grey-225-10-35); 150 | 151 | --list-badge-color: var(--color-white); 152 | --list-badge-background-color: var(--color-grey-225-10-35); 153 | 154 | --input-background-color: var(--dracula-current-line); 155 | --input-border-color: var(--color-grey-225-10-75); 156 | 157 | --input-focus-background-color: var(--color-blue-205-100-95); 158 | --input-focus-border-color: var(--color-blue-205-100-50); 159 | 160 | --input-error-background-color: var(--color-red-360-100-97); 161 | --input-error-border-color: var(--color-red-360-100-45); 162 | --input-error-focus-border-color: var(--color-red-360-100-45); 163 | 164 | --input-disabled-color: var(--color-grey-225-10-55); 165 | --input-disabled-background-color: var(--color-grey-225-10-97); 166 | --input-disabled-border-color: var(--color-grey-225-10-90); 167 | 168 | --toggle-switch-on-background-color: var(--color-blue-205-100-50); 169 | --toggle-switch-off-background-color: var(--color-grey-225-10-75); 170 | --toggle-switch-switcher-background-color: var(--color-white); 171 | 172 | --side-line-background-color: var(--color-grey-225-10-35); 173 | --side-line-extension-background-color: var(--color-grey-225-10-35); 174 | 175 | --list-entry-dot-background-color: var(--color-grey-225-10-35); 176 | --list-entry-header-button-fill-color: var(--color-grey-225-10-35); 177 | --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50); 178 | --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45); 179 | --list-entry-add-entry-label-color: var(--color-white); 180 | --list-entry-add-entry-background-color: var(--color-blue-205-100-50); 181 | --list-entry-add-entry-fill-color: var(--color-white); 182 | 183 | --dropdown-item-background-color: var(--color-white); 184 | --dropdown-item-hover-background-color: var(--color-grey-225-10-95); 185 | --dropdown-separator-background-color: var(--color-grey-225-10-75); 186 | 187 | --feel-active-color: var(--color-blue-205-100-35); 188 | --feel-inactive-color: var(--color-grey-225-10-35); 189 | 190 | --feel-indicator-background-color: var(--color-grey-225-10-90); 191 | 192 | } 193 | 194 | .align-elements img, 195 | .djs-context-pad img{ 196 | filter: invert(1) !important; 197 | } 198 | 199 | .djs-container { 200 | 201 | --color-black-opacity-10: rgba(248, 248, 242, .1); 202 | 203 | --color-grey-225-10-15: rgb(248, 248, 242); 204 | --color-grey-225-10-35: rgb(207, 205, 205); 205 | --color-grey-225-10-55: rgb(175, 172, 175); 206 | --color-grey-225-10-75: rgb(146, 143, 149); 207 | --color-grey-225-10-80: rgb(120, 117, 125); 208 | --color-grey-225-10-85: rgb(96, 94, 83); 209 | --color-grey-225-10-90: rgb(76, 74, 85); 210 | --color-grey-225-10-95: rgb(56, 57, 69); 211 | --color-grey-225-10-97: rgb(40, 42, 54); 212 | 213 | --color-blue-205-100-35: hsl(205, 100%, 35%); 214 | --color-blue-205-100-45: hsl(205, 100%, 45%); 215 | --color-blue-205-100-50: hsl(205, 100%, 50%); 216 | --color-blue-205-100-95: hsl(205, 100%, 95%); 217 | 218 | --color-green-150-86-44: hsl(150, 86%, 44%); 219 | 220 | --color-red-360-100-40: hsl(360, 100%, 40%); 221 | --color-red-360-100-45: hsl(360, 100%, 45%); 222 | --color-red-360-100-92: hsl(360, 100%, 92%); 223 | --color-red-360-100-97: hsl(360, 100%, 97%); 224 | 225 | --color-white: var(--dracula-background); 226 | --color-black: var(--dracula-foreground); 227 | --color-transparent: transparent; 228 | 229 | --popup-border-color: var(--dracula-comment); 230 | 231 | --context-pad-entry-background-color: var(--color-white); 232 | --context-pad-entry-hover-background-color: var(--color-grey-225-10-95); 233 | 234 | --element-hover-outline-fill-color: var(--color-blue-205-100-45); 235 | --element-selected-outline-stroke-color: var(--dracula-purple); 236 | --element-selected-outline-secondary-stroke-color: var(--element-selected-outline-stroke-color); 237 | --element-dragger-color: var(--element-selected-outline-stroke-color); 238 | 239 | --palette-entry-hover-color: var(--dracula-purple); 240 | 241 | --popup-header-entry-selected-background-color: var(--dracula-current-line); 242 | 243 | --palette-entry-selected-color: var(--dracula-purple); 244 | 245 | --lasso-fill-color: rgba(189, 147, 249,.2); 246 | } 247 | 248 | .modal-dialog, 249 | .btn-primary{ 250 | color: var(--dracula-foreground); 251 | } 252 | 253 | .controls button{ 254 | color: var(--dracula-foreground); 255 | } 256 | 257 | .bts-toggle-mode { 258 | cursor: pointer; 259 | position: absolute; 260 | top: 20px; 261 | left: 20px; 262 | background-color: var(--dracula-current-line); 263 | border: 1px solid var(--dracula-foreground); 264 | border-radius: 2px !important; 265 | padding: 6px; 266 | font-size: 16px; 267 | color: var(--dracula-foreground); 268 | user-select: none; 269 | display: inline-flex; 270 | } 271 | 272 | .djs-container .djs-minimap{ 273 | background-color: rgba(40, 42, 54,0.9); 274 | } 275 | 276 | .bio-properties-panel-description, .bio-properties-panel-description p, .bio-properties-panel-description span, .bio-properties-panel-description div{ 277 | color: var(--dracula-purple); 278 | } 279 | 280 | .djs-popup .entry:hover { 281 | color: var(--dracula-purple); 282 | } 283 | 284 | .djs-context-pad { 285 | position: absolute; 286 | display: none; 287 | pointer-events: none; 288 | line-height: 1; 289 | background-color: var(--dracula-background); 290 | border: 1px solid var(--dracula-comment); 291 | padding: 5px; 292 | width: 42px !important; 293 | } 294 | 295 | .djs-context-pad .group:not(:last-child){ 296 | border-bottom: 1px solid var(--dracula-comment); 297 | } 298 | 299 | .djs-context-pad .entry { 300 | border-radius: 0px !important; 301 | padding: 0px; 302 | background-color: var(--context-pad-entry-background-color); 303 | box-shadow: 0 0 0px 0px var(--context-pad-entry-background-color) !important; 304 | pointer-events: all; 305 | vertical-align: middle; 306 | width: 30px; 307 | height: 22px; 308 | margin: 5px 0 5px 0; 309 | } 310 | 311 | .djs-context-pad .entry:hover { 312 | background: var(--dracula-background); 313 | color: var(--dracula-purple); 314 | } 315 | 316 | .djs-context-pad.open { 317 | display: block; 318 | } 319 | 320 | .djs-element.selected .djs-outline, 321 | .djs-selection-outline { 322 | stroke-dasharray: 2; 323 | stroke-dashoffset: 500; 324 | animation: dash 80s linear infinite; 325 | stroke: var(--element-selected-outline-stroke-color); 326 | } 327 | 328 | 329 | .layer-selectionOutline .djs-selection-outline { 330 | stroke: none; 331 | } 332 | 333 | @keyframes dash { 334 | to { 335 | stroke-dashoffset: 0; 336 | } 337 | } 338 | 339 | .tabs .primary{ 340 | background-color: var(--dracula-background) !important; 341 | color: var(--dracula-foreground) !important; 342 | } 343 | 344 | .tabs .active { 345 | background-color: var(--dracula-current-line) !important; 346 | color: var(--dracula-foreground) !important; 347 | } -------------------------------------------------------------------------------- /dist/client.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"client.js","mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;ACjEA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;ACjWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;ACvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;ACPA;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;ACJA;AACA;AACA;AACA;AACA","sources":["webpack://camunda-modeler-plugin-dracula-theme/./client/bpmn-js-extension/DraculaTheme.js","webpack://camunda-modeler-plugin-dracula-theme/./client/bpmn-js-extension/index.js","webpack://camunda-modeler-plugin-dracula-theme/./node_modules/camunda-modeler-plugin-helpers/index.js","webpack://camunda-modeler-plugin-dracula-theme/webpack/bootstrap","webpack://camunda-modeler-plugin-dracula-theme/webpack/runtime/define property getters","webpack://camunda-modeler-plugin-dracula-theme/webpack/runtime/hasOwnProperty shorthand","webpack://camunda-modeler-plugin-dracula-theme/webpack/runtime/make namespace object","webpack://camunda-modeler-plugin-dracula-theme/./client/index.js"],"sourcesContent":["export default function DraculaTheme(eventBus) {\r\n\r\n function changeColors(event) {\r\n\r\n // const gfx = event.gfx;\r\n const element = event.element;\r\n const documentElement = document.documentElement;\r\n\r\n if(element && element.di){\r\n const elementDi = element.di;\r\n\r\n if(!elementDi['background-color']){\r\n elementDi['background-color']=getComputedStyle(documentElement).getPropertyValue('--color-white');\r\n }\r\n if(!elementDi['border-color']){\r\n elementDi['border-color']=getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35');\r\n }\r\n\r\n if(element.type == 'label'){\r\n\r\n if(elementDi.label){\r\n elementDi.label.set('color', element.di['border-color']=getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35'));\r\n }\r\n\r\n }\r\n }\r\n }\r\n\r\n function restoreColors(event) {\r\n const documentElement = document.documentElement;\r\n const borderColor = getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35');\r\n const backgroundColor = getComputedStyle(documentElement).getPropertyValue('--color-white');\r\n\r\n for(let planeElement of event.definitions.diagrams[0].plane.planeElement){\r\n\r\n if(planeElement['border-color'] == borderColor){\r\n planeElement['border-color'] = '';\r\n }\r\n\r\n if(planeElement['background-color'] == backgroundColor){\r\n planeElement['background-color'] = '';\r\n }\r\n }\r\n }\r\n\r\neventBus.on([\r\n 'shape.added',\r\n 'render.shape',\r\n 'render.connection',\r\n 'shape.moved',\r\n 'shape.changed',\r\n 'element.changed'\r\n], 1250, changeColors);\r\n\r\neventBus.on([\r\n 'saveXML.start'\r\n], 1250, restoreColors);\r\n\r\neventBus.on('diagram.init', function() {\r\n});\r\n\r\n}\r\n\r\nDraculaTheme.$inject = [\r\n 'eventBus'\r\n];","import DraculaTheme from './DraculaTheme';\r\n\r\nexport default {\r\n __init__: [ 'DraculaTheme' ],\r\n DraculaTheme: ['type', DraculaTheme ]\r\n};\r\n","/**\n * Validate and register a client plugin.\n *\n * @param {Object} plugin\n * @param {String} type\n */\nexport function registerClientPlugin(plugin, type) {\n var plugins = window.plugins || [];\n window.plugins = plugins;\n\n if (!plugin) {\n throw new Error('plugin not specified');\n }\n\n if (!type) {\n throw new Error('type not specified');\n }\n\n plugins.push({\n plugin: plugin,\n type: type\n });\n}\n\n/**\n * Validate and register a client plugin.\n *\n * @param {import('react').ComponentType} extension\n *\n * @example\n *\n * import MyExtensionComponent from './MyExtensionComponent';\n *\n * registerClientExtension(MyExtensionComponent);\n */\nexport function registerClientExtension(component) {\n registerClientPlugin(component, 'client');\n}\n\n/**\n * Validate and register a bpmn-js plugin.\n *\n * @param {Object} module\n *\n * @example\n *\n * import {\n * registerBpmnJSPlugin\n * } from 'camunda-modeler-plugin-helpers';\n *\n * const BpmnJSModule = {\n * __init__: [ 'myService' ],\n * myService: [ 'type', ... ]\n * };\n *\n * registerBpmnJSPlugin(BpmnJSModule);\n */\nexport function registerBpmnJSPlugin(module) {\n registerClientPlugin(module, 'bpmn.modeler.additionalModules');\n}\n\n/**\n * Validate and register a platform specific bpmn-js plugin.\n *\n * @param {Object} module\n *\n * @example\n *\n * import {\n * registerPlatformBpmnJSPlugin\n * } from 'camunda-modeler-plugin-helpers';\n *\n * const BpmnJSModule = {\n * __init__: [ 'myService' ],\n * myService: [ 'type', ... ]\n * };\n *\n * registerPlatformBpmnJSPlugin(BpmnJSModule);\n */\nexport function registerPlatformBpmnJSPlugin(module) {\n registerClientPlugin(module, 'bpmn.platform.modeler.additionalModules');\n}\n\n/**\n * Validate and register a cloud specific bpmn-js plugin.\n *\n * @param {Object} module\n *\n * @example\n *\n * import {\n * registerCloudBpmnJSPlugin\n * } from 'camunda-modeler-plugin-helpers';\n *\n * const BpmnJSModule = {\n * __init__: [ 'myService' ],\n * myService: [ 'type', ... ]\n * };\n *\n * registerCloudBpmnJSPlugin(BpmnJSModule);\n */\nexport function registerCloudBpmnJSPlugin(module) {\n registerClientPlugin(module, 'bpmn.cloud.modeler.additionalModules');\n}\n\n/**\n * Validate and register a bpmn-moddle extension plugin.\n *\n * @param {Object} descriptor\n *\n * @example\n * import {\n * registerBpmnJSModdleExtension\n * } from 'camunda-modeler-plugin-helpers';\n *\n * var moddleDescriptor = {\n * name: 'my descriptor',\n * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',\n * prefix: 'mydesc',\n *\n * ...\n * };\n *\n * registerBpmnJSModdleExtension(moddleDescriptor);\n */\nexport function registerBpmnJSModdleExtension(descriptor) {\n registerClientPlugin(descriptor, 'bpmn.modeler.moddleExtension');\n}\n\n/**\n * Validate and register a platform specific bpmn-moddle extension plugin.\n *\n * @param {Object} descriptor\n *\n * @example\n * import {\n * registerPlatformBpmnJSModdleExtension\n * } from 'camunda-modeler-plugin-helpers';\n *\n * var moddleDescriptor = {\n * name: 'my descriptor',\n * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',\n * prefix: 'mydesc',\n *\n * ...\n * };\n *\n * registerPlatformBpmnJSModdleExtension(moddleDescriptor);\n */\nexport function registerPlatformBpmnJSModdleExtension(descriptor) {\n registerClientPlugin(descriptor, 'bpmn.platform.modeler.moddleExtension');\n}\n\n/**\n * Validate and register a cloud specific bpmn-moddle extension plugin.\n *\n * @param {Object} descriptor\n *\n * @example\n * import {\n * registerCloudBpmnJSModdleExtension\n * } from 'camunda-modeler-plugin-helpers';\n *\n * var moddleDescriptor = {\n * name: 'my descriptor',\n * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',\n * prefix: 'mydesc',\n *\n * ...\n * };\n *\n * registerCloudBpmnJSModdleExtension(moddleDescriptor);\n */\nexport function registerCloudBpmnJSModdleExtension(descriptor) {\n registerClientPlugin(descriptor, 'bpmn.cloud.modeler.moddleExtension');\n}\n\n/**\n * Validate and register a dmn-moddle extension plugin.\n *\n * @param {Object} descriptor\n *\n * @example\n * import {\n * registerDmnJSModdleExtension\n * } from 'camunda-modeler-plugin-helpers';\n *\n * var moddleDescriptor = {\n * name: 'my descriptor',\n * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',\n * prefix: 'mydesc',\n *\n * ...\n * };\n *\n * registerDmnJSModdleExtension(moddleDescriptor);\n */\nexport function registerDmnJSModdleExtension(descriptor) {\n registerClientPlugin(descriptor, 'dmn.modeler.moddleExtension');\n}\n\n/**\n * Validate and register a cloud specific dmn-moddle extension plugin.\n *\n * @param {Object} descriptor\n *\n * @example\n * import {\n * registerCloudDmnJSModdleExtension\n * } from 'camunda-modeler-plugin-helpers';\n *\n * var moddleDescriptor = {\n * name: 'my descriptor',\n * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',\n * prefix: 'mydesc',\n *\n * ...\n * };\n *\n * registerCloudDmnJSModdleExtension(moddleDescriptor);\n */\nexport function registerCloudDmnJSModdleExtension(descriptor) {\n registerClientPlugin(descriptor, 'dmn.cloud.modeler.moddleExtension');\n}\n\n/**\n * Validate and register a platform specific dmn-moddle extension plugin.\n *\n * @param {Object} descriptor\n *\n * @example\n * import {\n * registerPlatformDmnJSModdleExtension\n * } from 'camunda-modeler-plugin-helpers';\n *\n * var moddleDescriptor = {\n * name: 'my descriptor',\n * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0',\n * prefix: 'mydesc',\n *\n * ...\n * };\n *\n * registerPlatformDmnJSModdleExtension(moddleDescriptor);\n */\nexport function registerPlatformDmnJSModdleExtension(descriptor) {\n registerClientPlugin(descriptor, 'dmn.platform.modeler.moddleExtension');\n}\n\n/**\n * Validate and register a dmn-js plugin.\n *\n * @param {Object} module\n *\n * @example\n *\n * import {\n * registerDmnJSPlugin\n * } from 'camunda-modeler-plugin-helpers';\n *\n * const DmnJSModule = {\n * __init__: [ 'myService' ],\n * myService: [ 'type', ... ]\n * };\n *\n * registerDmnJSPlugin(DmnJSModule, [ 'drd', 'literalExpression' ]);\n * registerDmnJSPlugin(DmnJSModule, 'drd')\n */\nexport function registerDmnJSPlugin(module, components) {\n\n if (!Array.isArray(components)) {\n components = [ components ]\n }\n\n components.forEach(c => registerClientPlugin(module, `dmn.modeler.${c}.additionalModules`));\n}\n\n/**\n * Validate and register a cloud specific dmn-js plugin.\n *\n * @param {Object} module\n *\n * @example\n *\n * import {\n * registerCloudDmnJSPlugin\n * } from 'camunda-modeler-plugin-helpers';\n *\n * const DmnJSModule = {\n * __init__: [ 'myService' ],\n * myService: [ 'type', ... ]\n * };\n *\n * registerCloudDmnJSPlugin(DmnJSModule, [ 'drd', 'literalExpression' ]);\n * registerCloudDmnJSPlugin(DmnJSModule, 'drd')\n */\nexport function registerCloudDmnJSPlugin(module, components) {\n\n if (!Array.isArray(components)) {\n components = [ components ]\n }\n\n components.forEach(c => registerClientPlugin(module, `dmn.cloud.modeler.${c}.additionalModules`));\n}\n\n/**\n * Validate and register a platform specific dmn-js plugin.\n *\n * @param {Object} module\n *\n * @example\n *\n * import {\n * registerPlatformDmnJSPlugin\n * } from 'camunda-modeler-plugin-helpers';\n *\n * const DmnJSModule = {\n * __init__: [ 'myService' ],\n * myService: [ 'type', ... ]\n * };\n *\n * registerPlatformDmnJSPlugin(DmnJSModule, [ 'drd', 'literalExpression' ]);\n * registerPlatformDmnJSPlugin(DmnJSModule, 'drd')\n */\nexport function registerPlatformDmnJSPlugin(module, components) {\n\n if (!Array.isArray(components)) {\n components = [ components ]\n }\n\n components.forEach(c => registerClientPlugin(module, `dmn.platform.modeler.${c}.additionalModules`));\n}\n\n/**\n * Return the modeler directory, as a string.\n *\n * @deprecated Will be removed in future Camunda Modeler versions without replacement.\n *\n * @return {String}\n */\nexport function getModelerDirectory() {\n return window.getModelerDirectory();\n}\n\n/**\n * Return the modeler plugin directory, as a string.\n *\n * @deprecated Will be removed in future Camunda Modeler versions without replacement.\n *\n * @return {String}\n */\nexport function getPluginsDirectory() {\n return window.getPluginsDirectory();\n}","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import {\r\n registerBpmnJSPlugin\r\n} from 'camunda-modeler-plugin-helpers';\r\n\r\nimport DraculaTheme from './bpmn-js-extension';\r\n\r\nregisterBpmnJSPlugin(DraculaTheme);\r\n"],"names":[],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/client.js: -------------------------------------------------------------------------------- 1 | /******/ (() => { // webpackBootstrap 2 | /******/ "use strict"; 3 | /******/ var __webpack_modules__ = ({ 4 | 5 | /***/ "./client/bpmn-js-extension/DraculaTheme.js": 6 | /*!**************************************************!*\ 7 | !*** ./client/bpmn-js-extension/DraculaTheme.js ***! 8 | \**************************************************/ 9 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 10 | 11 | __webpack_require__.r(__webpack_exports__); 12 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 13 | /* harmony export */ "default": () => (/* binding */ DraculaTheme) 14 | /* harmony export */ }); 15 | function DraculaTheme(eventBus) { 16 | 17 | function changeColors(event) { 18 | 19 | // const gfx = event.gfx; 20 | const element = event.element; 21 | const documentElement = document.documentElement; 22 | 23 | if(element && element.di){ 24 | const elementDi = element.di; 25 | 26 | if(!elementDi['background-color']){ 27 | elementDi['background-color']=getComputedStyle(documentElement).getPropertyValue('--color-white'); 28 | } 29 | if(!elementDi['border-color']){ 30 | elementDi['border-color']=getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35'); 31 | } 32 | 33 | if(element.type == 'label'){ 34 | 35 | if(elementDi.label){ 36 | elementDi.label.set('color', element.di['border-color']=getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35')); 37 | } 38 | 39 | } 40 | } 41 | } 42 | 43 | function restoreColors(event) { 44 | const documentElement = document.documentElement; 45 | const borderColor = getComputedStyle(documentElement).getPropertyValue('--color-grey-225-10-35'); 46 | const backgroundColor = getComputedStyle(documentElement).getPropertyValue('--color-white'); 47 | 48 | for(let planeElement of event.definitions.diagrams[0].plane.planeElement){ 49 | 50 | if(planeElement['border-color'] == borderColor){ 51 | planeElement['border-color'] = ''; 52 | } 53 | 54 | if(planeElement['background-color'] == backgroundColor){ 55 | planeElement['background-color'] = ''; 56 | } 57 | } 58 | } 59 | 60 | eventBus.on([ 61 | 'shape.added', 62 | 'render.shape', 63 | 'render.connection', 64 | 'shape.moved', 65 | 'shape.changed', 66 | 'element.changed' 67 | ], 1250, changeColors); 68 | 69 | eventBus.on([ 70 | 'saveXML.start' 71 | ], 1250, restoreColors); 72 | 73 | eventBus.on('diagram.init', function() { 74 | }); 75 | 76 | } 77 | 78 | DraculaTheme.$inject = [ 79 | 'eventBus' 80 | ]; 81 | 82 | /***/ }), 83 | 84 | /***/ "./client/bpmn-js-extension/index.js": 85 | /*!*******************************************!*\ 86 | !*** ./client/bpmn-js-extension/index.js ***! 87 | \*******************************************/ 88 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 89 | 90 | __webpack_require__.r(__webpack_exports__); 91 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 92 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 93 | /* harmony export */ }); 94 | /* harmony import */ var _DraculaTheme__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DraculaTheme */ "./client/bpmn-js-extension/DraculaTheme.js"); 95 | 96 | 97 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ 98 | __init__: [ 'DraculaTheme' ], 99 | DraculaTheme: ['type', _DraculaTheme__WEBPACK_IMPORTED_MODULE_0__["default"] ] 100 | }); 101 | 102 | 103 | /***/ }), 104 | 105 | /***/ "./node_modules/camunda-modeler-plugin-helpers/index.js": 106 | /*!**************************************************************!*\ 107 | !*** ./node_modules/camunda-modeler-plugin-helpers/index.js ***! 108 | \**************************************************************/ 109 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 110 | 111 | __webpack_require__.r(__webpack_exports__); 112 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 113 | /* harmony export */ getModelerDirectory: () => (/* binding */ getModelerDirectory), 114 | /* harmony export */ getPluginsDirectory: () => (/* binding */ getPluginsDirectory), 115 | /* harmony export */ registerBpmnJSModdleExtension: () => (/* binding */ registerBpmnJSModdleExtension), 116 | /* harmony export */ registerBpmnJSPlugin: () => (/* binding */ registerBpmnJSPlugin), 117 | /* harmony export */ registerClientExtension: () => (/* binding */ registerClientExtension), 118 | /* harmony export */ registerClientPlugin: () => (/* binding */ registerClientPlugin), 119 | /* harmony export */ registerCloudBpmnJSModdleExtension: () => (/* binding */ registerCloudBpmnJSModdleExtension), 120 | /* harmony export */ registerCloudBpmnJSPlugin: () => (/* binding */ registerCloudBpmnJSPlugin), 121 | /* harmony export */ registerCloudDmnJSModdleExtension: () => (/* binding */ registerCloudDmnJSModdleExtension), 122 | /* harmony export */ registerCloudDmnJSPlugin: () => (/* binding */ registerCloudDmnJSPlugin), 123 | /* harmony export */ registerDmnJSModdleExtension: () => (/* binding */ registerDmnJSModdleExtension), 124 | /* harmony export */ registerDmnJSPlugin: () => (/* binding */ registerDmnJSPlugin), 125 | /* harmony export */ registerPlatformBpmnJSModdleExtension: () => (/* binding */ registerPlatformBpmnJSModdleExtension), 126 | /* harmony export */ registerPlatformBpmnJSPlugin: () => (/* binding */ registerPlatformBpmnJSPlugin), 127 | /* harmony export */ registerPlatformDmnJSModdleExtension: () => (/* binding */ registerPlatformDmnJSModdleExtension), 128 | /* harmony export */ registerPlatformDmnJSPlugin: () => (/* binding */ registerPlatformDmnJSPlugin) 129 | /* harmony export */ }); 130 | /** 131 | * Validate and register a client plugin. 132 | * 133 | * @param {Object} plugin 134 | * @param {String} type 135 | */ 136 | function registerClientPlugin(plugin, type) { 137 | var plugins = window.plugins || []; 138 | window.plugins = plugins; 139 | 140 | if (!plugin) { 141 | throw new Error('plugin not specified'); 142 | } 143 | 144 | if (!type) { 145 | throw new Error('type not specified'); 146 | } 147 | 148 | plugins.push({ 149 | plugin: plugin, 150 | type: type 151 | }); 152 | } 153 | 154 | /** 155 | * Validate and register a client plugin. 156 | * 157 | * @param {import('react').ComponentType} extension 158 | * 159 | * @example 160 | * 161 | * import MyExtensionComponent from './MyExtensionComponent'; 162 | * 163 | * registerClientExtension(MyExtensionComponent); 164 | */ 165 | function registerClientExtension(component) { 166 | registerClientPlugin(component, 'client'); 167 | } 168 | 169 | /** 170 | * Validate and register a bpmn-js plugin. 171 | * 172 | * @param {Object} module 173 | * 174 | * @example 175 | * 176 | * import { 177 | * registerBpmnJSPlugin 178 | * } from 'camunda-modeler-plugin-helpers'; 179 | * 180 | * const BpmnJSModule = { 181 | * __init__: [ 'myService' ], 182 | * myService: [ 'type', ... ] 183 | * }; 184 | * 185 | * registerBpmnJSPlugin(BpmnJSModule); 186 | */ 187 | function registerBpmnJSPlugin(module) { 188 | registerClientPlugin(module, 'bpmn.modeler.additionalModules'); 189 | } 190 | 191 | /** 192 | * Validate and register a platform specific bpmn-js plugin. 193 | * 194 | * @param {Object} module 195 | * 196 | * @example 197 | * 198 | * import { 199 | * registerPlatformBpmnJSPlugin 200 | * } from 'camunda-modeler-plugin-helpers'; 201 | * 202 | * const BpmnJSModule = { 203 | * __init__: [ 'myService' ], 204 | * myService: [ 'type', ... ] 205 | * }; 206 | * 207 | * registerPlatformBpmnJSPlugin(BpmnJSModule); 208 | */ 209 | function registerPlatformBpmnJSPlugin(module) { 210 | registerClientPlugin(module, 'bpmn.platform.modeler.additionalModules'); 211 | } 212 | 213 | /** 214 | * Validate and register a cloud specific bpmn-js plugin. 215 | * 216 | * @param {Object} module 217 | * 218 | * @example 219 | * 220 | * import { 221 | * registerCloudBpmnJSPlugin 222 | * } from 'camunda-modeler-plugin-helpers'; 223 | * 224 | * const BpmnJSModule = { 225 | * __init__: [ 'myService' ], 226 | * myService: [ 'type', ... ] 227 | * }; 228 | * 229 | * registerCloudBpmnJSPlugin(BpmnJSModule); 230 | */ 231 | function registerCloudBpmnJSPlugin(module) { 232 | registerClientPlugin(module, 'bpmn.cloud.modeler.additionalModules'); 233 | } 234 | 235 | /** 236 | * Validate and register a bpmn-moddle extension plugin. 237 | * 238 | * @param {Object} descriptor 239 | * 240 | * @example 241 | * import { 242 | * registerBpmnJSModdleExtension 243 | * } from 'camunda-modeler-plugin-helpers'; 244 | * 245 | * var moddleDescriptor = { 246 | * name: 'my descriptor', 247 | * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0', 248 | * prefix: 'mydesc', 249 | * 250 | * ... 251 | * }; 252 | * 253 | * registerBpmnJSModdleExtension(moddleDescriptor); 254 | */ 255 | function registerBpmnJSModdleExtension(descriptor) { 256 | registerClientPlugin(descriptor, 'bpmn.modeler.moddleExtension'); 257 | } 258 | 259 | /** 260 | * Validate and register a platform specific bpmn-moddle extension plugin. 261 | * 262 | * @param {Object} descriptor 263 | * 264 | * @example 265 | * import { 266 | * registerPlatformBpmnJSModdleExtension 267 | * } from 'camunda-modeler-plugin-helpers'; 268 | * 269 | * var moddleDescriptor = { 270 | * name: 'my descriptor', 271 | * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0', 272 | * prefix: 'mydesc', 273 | * 274 | * ... 275 | * }; 276 | * 277 | * registerPlatformBpmnJSModdleExtension(moddleDescriptor); 278 | */ 279 | function registerPlatformBpmnJSModdleExtension(descriptor) { 280 | registerClientPlugin(descriptor, 'bpmn.platform.modeler.moddleExtension'); 281 | } 282 | 283 | /** 284 | * Validate and register a cloud specific bpmn-moddle extension plugin. 285 | * 286 | * @param {Object} descriptor 287 | * 288 | * @example 289 | * import { 290 | * registerCloudBpmnJSModdleExtension 291 | * } from 'camunda-modeler-plugin-helpers'; 292 | * 293 | * var moddleDescriptor = { 294 | * name: 'my descriptor', 295 | * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0', 296 | * prefix: 'mydesc', 297 | * 298 | * ... 299 | * }; 300 | * 301 | * registerCloudBpmnJSModdleExtension(moddleDescriptor); 302 | */ 303 | function registerCloudBpmnJSModdleExtension(descriptor) { 304 | registerClientPlugin(descriptor, 'bpmn.cloud.modeler.moddleExtension'); 305 | } 306 | 307 | /** 308 | * Validate and register a dmn-moddle extension plugin. 309 | * 310 | * @param {Object} descriptor 311 | * 312 | * @example 313 | * import { 314 | * registerDmnJSModdleExtension 315 | * } from 'camunda-modeler-plugin-helpers'; 316 | * 317 | * var moddleDescriptor = { 318 | * name: 'my descriptor', 319 | * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0', 320 | * prefix: 'mydesc', 321 | * 322 | * ... 323 | * }; 324 | * 325 | * registerDmnJSModdleExtension(moddleDescriptor); 326 | */ 327 | function registerDmnJSModdleExtension(descriptor) { 328 | registerClientPlugin(descriptor, 'dmn.modeler.moddleExtension'); 329 | } 330 | 331 | /** 332 | * Validate and register a cloud specific dmn-moddle extension plugin. 333 | * 334 | * @param {Object} descriptor 335 | * 336 | * @example 337 | * import { 338 | * registerCloudDmnJSModdleExtension 339 | * } from 'camunda-modeler-plugin-helpers'; 340 | * 341 | * var moddleDescriptor = { 342 | * name: 'my descriptor', 343 | * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0', 344 | * prefix: 'mydesc', 345 | * 346 | * ... 347 | * }; 348 | * 349 | * registerCloudDmnJSModdleExtension(moddleDescriptor); 350 | */ 351 | function registerCloudDmnJSModdleExtension(descriptor) { 352 | registerClientPlugin(descriptor, 'dmn.cloud.modeler.moddleExtension'); 353 | } 354 | 355 | /** 356 | * Validate and register a platform specific dmn-moddle extension plugin. 357 | * 358 | * @param {Object} descriptor 359 | * 360 | * @example 361 | * import { 362 | * registerPlatformDmnJSModdleExtension 363 | * } from 'camunda-modeler-plugin-helpers'; 364 | * 365 | * var moddleDescriptor = { 366 | * name: 'my descriptor', 367 | * uri: 'http://example.my.company.localhost/schema/my-descriptor/1.0', 368 | * prefix: 'mydesc', 369 | * 370 | * ... 371 | * }; 372 | * 373 | * registerPlatformDmnJSModdleExtension(moddleDescriptor); 374 | */ 375 | function registerPlatformDmnJSModdleExtension(descriptor) { 376 | registerClientPlugin(descriptor, 'dmn.platform.modeler.moddleExtension'); 377 | } 378 | 379 | /** 380 | * Validate and register a dmn-js plugin. 381 | * 382 | * @param {Object} module 383 | * 384 | * @example 385 | * 386 | * import { 387 | * registerDmnJSPlugin 388 | * } from 'camunda-modeler-plugin-helpers'; 389 | * 390 | * const DmnJSModule = { 391 | * __init__: [ 'myService' ], 392 | * myService: [ 'type', ... ] 393 | * }; 394 | * 395 | * registerDmnJSPlugin(DmnJSModule, [ 'drd', 'literalExpression' ]); 396 | * registerDmnJSPlugin(DmnJSModule, 'drd') 397 | */ 398 | function registerDmnJSPlugin(module, components) { 399 | 400 | if (!Array.isArray(components)) { 401 | components = [ components ] 402 | } 403 | 404 | components.forEach(c => registerClientPlugin(module, `dmn.modeler.${c}.additionalModules`)); 405 | } 406 | 407 | /** 408 | * Validate and register a cloud specific dmn-js plugin. 409 | * 410 | * @param {Object} module 411 | * 412 | * @example 413 | * 414 | * import { 415 | * registerCloudDmnJSPlugin 416 | * } from 'camunda-modeler-plugin-helpers'; 417 | * 418 | * const DmnJSModule = { 419 | * __init__: [ 'myService' ], 420 | * myService: [ 'type', ... ] 421 | * }; 422 | * 423 | * registerCloudDmnJSPlugin(DmnJSModule, [ 'drd', 'literalExpression' ]); 424 | * registerCloudDmnJSPlugin(DmnJSModule, 'drd') 425 | */ 426 | function registerCloudDmnJSPlugin(module, components) { 427 | 428 | if (!Array.isArray(components)) { 429 | components = [ components ] 430 | } 431 | 432 | components.forEach(c => registerClientPlugin(module, `dmn.cloud.modeler.${c}.additionalModules`)); 433 | } 434 | 435 | /** 436 | * Validate and register a platform specific dmn-js plugin. 437 | * 438 | * @param {Object} module 439 | * 440 | * @example 441 | * 442 | * import { 443 | * registerPlatformDmnJSPlugin 444 | * } from 'camunda-modeler-plugin-helpers'; 445 | * 446 | * const DmnJSModule = { 447 | * __init__: [ 'myService' ], 448 | * myService: [ 'type', ... ] 449 | * }; 450 | * 451 | * registerPlatformDmnJSPlugin(DmnJSModule, [ 'drd', 'literalExpression' ]); 452 | * registerPlatformDmnJSPlugin(DmnJSModule, 'drd') 453 | */ 454 | function registerPlatformDmnJSPlugin(module, components) { 455 | 456 | if (!Array.isArray(components)) { 457 | components = [ components ] 458 | } 459 | 460 | components.forEach(c => registerClientPlugin(module, `dmn.platform.modeler.${c}.additionalModules`)); 461 | } 462 | 463 | /** 464 | * Return the modeler directory, as a string. 465 | * 466 | * @deprecated Will be removed in future Camunda Modeler versions without replacement. 467 | * 468 | * @return {String} 469 | */ 470 | function getModelerDirectory() { 471 | return window.getModelerDirectory(); 472 | } 473 | 474 | /** 475 | * Return the modeler plugin directory, as a string. 476 | * 477 | * @deprecated Will be removed in future Camunda Modeler versions without replacement. 478 | * 479 | * @return {String} 480 | */ 481 | function getPluginsDirectory() { 482 | return window.getPluginsDirectory(); 483 | } 484 | 485 | /***/ }) 486 | 487 | /******/ }); 488 | /************************************************************************/ 489 | /******/ // The module cache 490 | /******/ var __webpack_module_cache__ = {}; 491 | /******/ 492 | /******/ // The require function 493 | /******/ function __webpack_require__(moduleId) { 494 | /******/ // Check if module is in cache 495 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 496 | /******/ if (cachedModule !== undefined) { 497 | /******/ return cachedModule.exports; 498 | /******/ } 499 | /******/ // Create a new module (and put it into the cache) 500 | /******/ var module = __webpack_module_cache__[moduleId] = { 501 | /******/ // no module.id needed 502 | /******/ // no module.loaded needed 503 | /******/ exports: {} 504 | /******/ }; 505 | /******/ 506 | /******/ // Execute the module function 507 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 508 | /******/ 509 | /******/ // Return the exports of the module 510 | /******/ return module.exports; 511 | /******/ } 512 | /******/ 513 | /************************************************************************/ 514 | /******/ /* webpack/runtime/define property getters */ 515 | /******/ (() => { 516 | /******/ // define getter functions for harmony exports 517 | /******/ __webpack_require__.d = (exports, definition) => { 518 | /******/ for(var key in definition) { 519 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 520 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 521 | /******/ } 522 | /******/ } 523 | /******/ }; 524 | /******/ })(); 525 | /******/ 526 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 527 | /******/ (() => { 528 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 529 | /******/ })(); 530 | /******/ 531 | /******/ /* webpack/runtime/make namespace object */ 532 | /******/ (() => { 533 | /******/ // define __esModule on exports 534 | /******/ __webpack_require__.r = (exports) => { 535 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 536 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 537 | /******/ } 538 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 539 | /******/ }; 540 | /******/ })(); 541 | /******/ 542 | /************************************************************************/ 543 | var __webpack_exports__ = {}; 544 | // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk. 545 | (() => { 546 | /*!*************************!*\ 547 | !*** ./client/index.js ***! 548 | \*************************/ 549 | __webpack_require__.r(__webpack_exports__); 550 | /* harmony import */ var camunda_modeler_plugin_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! camunda-modeler-plugin-helpers */ "./node_modules/camunda-modeler-plugin-helpers/index.js"); 551 | /* harmony import */ var _bpmn_js_extension__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./bpmn-js-extension */ "./client/bpmn-js-extension/index.js"); 552 | 553 | 554 | 555 | 556 | (0,camunda_modeler_plugin_helpers__WEBPACK_IMPORTED_MODULE_0__.registerBpmnJSPlugin)(_bpmn_js_extension__WEBPACK_IMPORTED_MODULE_1__["default"]); 557 | 558 | })(); 559 | 560 | /******/ })() 561 | ; 562 | //# sourceMappingURL=client.js.map -------------------------------------------------------------------------------- /style/diagram-js.css: -------------------------------------------------------------------------------- 1 | /** 2 | * color definitions 3 | */ 4 | .djs-container { 5 | --color-grey-225-10-15: hsl(225, 10%, 15%); 6 | --color-grey-225-10-35: hsl(225, 10%, 35%); 7 | --color-grey-225-10-55: hsl(225, 10%, 55%); 8 | --color-grey-225-10-75: hsl(225, 10%, 75%); 9 | --color-grey-225-10-80: hsl(225, 10%, 80%); 10 | --color-grey-225-10-85: hsl(225, 10%, 85%); 11 | --color-grey-225-10-90: hsl(225, 10%, 90%); 12 | --color-grey-225-10-95: hsl(225, 10%, 95%); 13 | --color-grey-225-10-97: hsl(225, 10%, 97%); 14 | 15 | --color-blue-205-100-45: hsl(205, 100%, 45%); 16 | --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%); 17 | --color-blue-205-100-50: hsl(205, 100%, 50%); 18 | --color-blue-205-100-50-opacity-15: hsla(205, 100%, 50%, 15%); 19 | --color-blue-205-100-70: hsl(205, 100%, 75%); 20 | --color-blue-205-100-95: hsl(205, 100%, 95%); 21 | 22 | --color-green-150-86-44: hsl(150, 86%, 44%); 23 | 24 | --color-red-360-100-40: hsl(360, 100%, 40%); 25 | --color-red-360-100-45: hsl(360, 100%, 45%); 26 | --color-red-360-100-92: hsl(360, 100%, 92%); 27 | --color-red-360-100-97: hsl(360, 100%, 97%); 28 | 29 | --color-white: hsl(0, 0%, 100%); 30 | --color-black: hsl(0, 0%, 0%); 31 | --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 32 | 33 | --canvas-fill-color: var(--color-white); 34 | 35 | --bendpoint-fill-color: var(--color-blue-205-100-45); 36 | --bendpoint-stroke-color: var(--canvas-fill-color); 37 | 38 | --context-pad-entry-background-color: var(--color-white); 39 | --context-pad-entry-hover-background-color: var(--color-grey-225-10-95); 40 | 41 | --element-dragger-color: var(--color-blue-205-100-50); 42 | --element-hover-outline-fill-color: var(--color-blue-205-100-45); 43 | --element-selected-outline-stroke-color: var(--color-blue-205-100-50); 44 | --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70); 45 | 46 | --lasso-fill-color: var(--color-blue-205-100-50-opacity-15); 47 | --lasso-stroke-color: var(--element-selected-outline-stroke-color); 48 | 49 | --palette-entry-color: var(--color-grey-225-10-15); 50 | --palette-entry-hover-color: var(--color-blue-205-100-45); 51 | --palette-entry-selected-color: var(--color-blue-205-100-50); 52 | --palette-separator-color: var(--color-grey-225-10-75); 53 | --palette-toggle-hover-background-color: var(--color-grey-225-10-55); 54 | --palette-background-color: var(--color-grey-225-10-97); 55 | --palette-border-color: var(--color-grey-225-10-75); 56 | 57 | --popup-body-background-color: var(--color-white); 58 | --popup-header-entry-selected-color: var(--color-blue-205-100-50); 59 | --popup-header-entry-selected-background-color: var(--color-black-opacity-10); 60 | --popup-header-separator-color: var(--color-grey-225-10-75); 61 | --popup-background-color: var(--color-grey-225-10-97); 62 | --popup-border-color: var(--color-grey-225-10-75); 63 | 64 | --resizer-fill-color: var(--color-blue-205-100-45); 65 | --resizer-stroke-color: var(--canvas-fill-color); 66 | 67 | --search-container-background-color: var(--color-grey-225-10-97); 68 | --search-container-border-color: var(--color-blue-205-100-50); 69 | --search-container-box-shadow-color: var(--color-blue-205-100-95); 70 | --search-container-box-shadow-inset-color: var(--color-grey-225-10-80); 71 | --search-input-border-color: var(--color-grey-225-10-75); 72 | --search-result-border-color: var(--color-grey-225-10-75); 73 | --search-result-highlight-color: var(--color-black); 74 | --search-result-selected-color: var(--color-blue-205-100-45-opacity-30); 75 | 76 | --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50); 77 | --shape-connect-allowed-fill-color: var(--color-grey-225-10-97); 78 | --shape-drop-allowed-fill-color: var(--color-grey-225-10-97); 79 | --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97); 80 | --shape-resize-preview-stroke-color: var(--color-blue-205-100-50); 81 | 82 | --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30); 83 | 84 | --space-tool-crosshair-stroke-color: var(--color-black); 85 | 86 | --tooltip-error-background-color: var(--color-red-360-100-97); 87 | --tooltip-error-border-color: var(--color-red-360-100-45); 88 | --tooltip-error-color: var(--color-red-360-100-45); 89 | } 90 | 91 | /** 92 | * outline styles 93 | */ 94 | 95 | .djs-outline, 96 | .djs-selection-outline { 97 | fill: none; 98 | shape-rendering: geometricPrecision; 99 | stroke-width: 2px; 100 | } 101 | 102 | .djs-outline { 103 | visibility: hidden; 104 | } 105 | 106 | .djs-selection-outline { 107 | stroke: var(--element-selected-outline-stroke-color); 108 | } 109 | 110 | .djs-element.selected .djs-outline { 111 | visibility: visible; 112 | 113 | stroke: var(--element-selected-outline-stroke-color); 114 | } 115 | 116 | .djs-multi-select .djs-element.selected .djs-outline { 117 | stroke: var(--element-selected-outline-secondary-stroke-color); 118 | } 119 | 120 | .djs-shape.connect-ok .djs-visual > :nth-child(1) { 121 | fill: var(--shape-connect-allowed-fill-color) !important; 122 | } 123 | 124 | .djs-shape.connect-not-ok .djs-visual > :nth-child(1), 125 | .djs-shape.drop-not-ok .djs-visual > :nth-child(1) { 126 | fill: var(--shape-drop-not-allowed-fill-color) !important; 127 | } 128 | 129 | .djs-shape.new-parent .djs-visual > :nth-child(1) { 130 | fill: var(--shape-drop-allowed-fill-color) !important; 131 | } 132 | 133 | svg.drop-not-ok { 134 | background: var(--shape-drop-not-allowed-fill-color) !important; 135 | } 136 | 137 | svg.new-parent { 138 | background: var(--shape-drop-allowed-fill-color) !important; 139 | } 140 | 141 | 142 | /* Override move cursor during drop and connect */ 143 | .drop-not-ok, 144 | .connect-not-ok, 145 | .drop-not-ok *, 146 | .connect-not-ok * { 147 | cursor: not-allowed !important; 148 | } 149 | 150 | .drop-ok, 151 | .connect-ok, 152 | .drop-ok *, 153 | .connect-ok * { 154 | cursor: default !important; 155 | } 156 | 157 | .djs-element.attach-ok .djs-visual > :nth-child(1) { 158 | stroke-width: 5px !important; 159 | stroke: var(--shape-attach-allowed-stroke-color) !important; 160 | } 161 | 162 | .djs-frame.connect-not-ok .djs-visual > :nth-child(1), 163 | .djs-frame.drop-not-ok .djs-visual > :nth-child(1) { 164 | stroke-width: 3px !important; 165 | stroke: var(--shape-drop-not-allowed-fill-color) !important; 166 | fill: none !important; 167 | } 168 | 169 | /** 170 | * Selection box style 171 | * 172 | */ 173 | .djs-lasso-overlay { 174 | fill: var(--lasso-fill-color); 175 | stroke: var(--lasso-stroke-color); 176 | stroke-width: 2px; 177 | shape-rendering: geometricPrecision; 178 | pointer-events: none; 179 | } 180 | 181 | /** 182 | * Resize styles 183 | */ 184 | .djs-resize-overlay { 185 | fill: none; 186 | 187 | stroke-dasharray: 5 1 3 1; 188 | stroke: var(--shape-resize-preview-stroke-color); 189 | 190 | pointer-events: none; 191 | } 192 | 193 | .djs-resizer-hit { 194 | fill: none; 195 | pointer-events: all; 196 | } 197 | 198 | .djs-resizer-visual { 199 | fill: var(--resizer-fill-color); 200 | stroke-width: 1px; 201 | stroke: var(--resizer-stroke-color); 202 | shape-rendering: geometricPrecision; 203 | } 204 | 205 | .djs-resizer:hover .djs-resizer-visual { 206 | stroke: var(--resizer-stroke-color); 207 | stroke-opacity: 1; 208 | } 209 | 210 | .djs-cursor-resize-ns, 211 | .djs-resizer-n, 212 | .djs-resizer-s { 213 | cursor: ns-resize; 214 | } 215 | 216 | .djs-cursor-resize-ew, 217 | .djs-resizer-e, 218 | .djs-resizer-w { 219 | cursor: ew-resize; 220 | } 221 | 222 | .djs-cursor-resize-nwse, 223 | .djs-resizer-nw, 224 | .djs-resizer-se { 225 | cursor: nwse-resize; 226 | } 227 | 228 | .djs-cursor-resize-nesw, 229 | .djs-resizer-ne, 230 | .djs-resizer-sw { 231 | cursor: nesw-resize; 232 | } 233 | 234 | .djs-shape.djs-resizing > .djs-outline { 235 | visibility: hidden !important; 236 | } 237 | 238 | .djs-shape.djs-resizing > .djs-resizer { 239 | visibility: hidden; 240 | } 241 | 242 | .djs-dragger > .djs-resizer { 243 | visibility: hidden; 244 | } 245 | 246 | /** 247 | * drag styles 248 | */ 249 | .djs-dragger * { 250 | fill: none !important; 251 | stroke: var(--element-dragger-color) !important; 252 | } 253 | 254 | .djs-dragger tspan, 255 | .djs-dragger text { 256 | fill: var(--element-dragger-color) !important; 257 | stroke: none !important; 258 | } 259 | 260 | marker.djs-dragger circle, 261 | marker.djs-dragger path, 262 | marker.djs-dragger polygon, 263 | marker.djs-dragger polyline, 264 | marker.djs-dragger rect { 265 | fill: var(--element-dragger-color) !important; 266 | stroke: none !important; 267 | } 268 | 269 | marker.djs-dragger text, 270 | marker.djs-dragger tspan { 271 | fill: none !important; 272 | stroke: var(--element-dragger-color) !important; 273 | } 274 | 275 | .djs-dragging { 276 | opacity: 0.3; 277 | } 278 | 279 | .djs-dragging, 280 | .djs-dragging > * { 281 | pointer-events: none !important; 282 | } 283 | 284 | .djs-dragging .djs-context-pad, 285 | .djs-dragging .djs-outline { 286 | display: none !important; 287 | } 288 | 289 | /** 290 | * no pointer events for visual 291 | */ 292 | .djs-visual, 293 | .djs-outline { 294 | pointer-events: none; 295 | } 296 | 297 | .djs-element.attach-ok .djs-hit { 298 | stroke-width: 60px !important; 299 | } 300 | 301 | /** 302 | * all pointer events for hit shape 303 | */ 304 | .djs-element > .djs-hit-all, 305 | .djs-element > .djs-hit-no-move { 306 | pointer-events: all; 307 | } 308 | 309 | .djs-element > .djs-hit-stroke, 310 | .djs-element > .djs-hit-click-stroke { 311 | pointer-events: stroke; 312 | } 313 | 314 | /** 315 | * shape / connection basic styles 316 | */ 317 | .djs-connection .djs-visual { 318 | stroke-width: 2px; 319 | fill: none; 320 | } 321 | 322 | .djs-cursor-grab { 323 | cursor: -webkit-grab; 324 | cursor: -moz-grab; 325 | cursor: grab; 326 | } 327 | 328 | .djs-cursor-grabbing { 329 | cursor: -webkit-grabbing; 330 | cursor: -moz-grabbing; 331 | cursor: grabbing; 332 | } 333 | 334 | .djs-cursor-crosshair { 335 | cursor: crosshair; 336 | } 337 | 338 | .djs-cursor-move { 339 | cursor: move; 340 | } 341 | 342 | .djs-cursor-resize-ns { 343 | cursor: ns-resize; 344 | } 345 | 346 | .djs-cursor-resize-ew { 347 | cursor: ew-resize; 348 | } 349 | 350 | 351 | /** 352 | * snapping 353 | */ 354 | .djs-snap-line { 355 | stroke: var(--snap-line-stroke-color); 356 | stroke-linecap: round; 357 | stroke-width: 2px; 358 | pointer-events: none; 359 | } 360 | 361 | /** 362 | * snapping 363 | */ 364 | .djs-crosshair { 365 | stroke: var(--space-tool-crosshair-stroke-color); 366 | stroke-linecap: round; 367 | stroke-width: 1px; 368 | pointer-events: none; 369 | shape-rendering: geometricPrecision; 370 | stroke-dasharray: 5, 5; 371 | } 372 | 373 | /** 374 | * palette 375 | */ 376 | 377 | .djs-palette { 378 | position: absolute; 379 | left: 20px; 380 | top: 20px; 381 | 382 | box-sizing: border-box; 383 | width: 48px; 384 | } 385 | 386 | .djs-palette .separator { 387 | margin: 5px; 388 | padding-top: 5px; 389 | 390 | border: none; 391 | border-bottom: solid 1px var(--palette-separator-color); 392 | 393 | clear: both; 394 | } 395 | 396 | .djs-palette .entry:before { 397 | vertical-align: initial; 398 | } 399 | 400 | .djs-palette .djs-palette-toggle { 401 | cursor: pointer; 402 | } 403 | 404 | .djs-palette .entry, 405 | .djs-palette .djs-palette-toggle { 406 | color: var(--palette-entry-color); 407 | font-size: 30px; 408 | 409 | text-align: center; 410 | } 411 | 412 | .djs-palette .entry { 413 | float: left; 414 | } 415 | 416 | .djs-palette .entry img { 417 | max-width: 100%; 418 | } 419 | 420 | .djs-palette .djs-palette-entries:after { 421 | content: ''; 422 | display: table; 423 | clear: both; 424 | } 425 | 426 | .djs-palette .djs-palette-toggle:hover { 427 | background: var(--palette-toggle-hover-background-color); 428 | } 429 | 430 | .djs-palette .entry:hover { 431 | color: var(--palette-entry-hover-color); 432 | } 433 | 434 | .djs-palette .highlighted-entry { 435 | color: var(--palette-entry-selected-color) !important; 436 | } 437 | 438 | .djs-palette .entry, 439 | .djs-palette .djs-palette-toggle { 440 | width: 46px; 441 | height: 46px; 442 | line-height: 46px; 443 | cursor: default; 444 | } 445 | 446 | /** 447 | * Palette open / two-column layout is controlled via 448 | * classes on the palette. Events to hook into palette 449 | * changed life-cycle are available in addition. 450 | */ 451 | .djs-palette.two-column.open { 452 | width: 94px; 453 | } 454 | 455 | .djs-palette:not(.open) .djs-palette-entries { 456 | display: none; 457 | } 458 | 459 | .djs-palette:not(.open) { 460 | overflow: hidden; 461 | } 462 | 463 | .djs-palette.open .djs-palette-toggle { 464 | display: none; 465 | } 466 | 467 | /** 468 | * context-pad 469 | */ 470 | .djs-overlay-context-pad { 471 | width: 72px; 472 | z-index: 100; 473 | } 474 | 475 | .djs-context-pad { 476 | position: absolute; 477 | display: none; 478 | pointer-events: none; 479 | line-height: 1; 480 | } 481 | 482 | .djs-context-pad .entry { 483 | width: 22px; 484 | height: 22px; 485 | text-align: center; 486 | display: inline-block; 487 | font-size: 22px; 488 | margin: 0 2px 2px 0; 489 | 490 | border-radius: 3px; 491 | 492 | cursor: default; 493 | 494 | background-color: var(--context-pad-entry-background-color); 495 | box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color); 496 | pointer-events: all; 497 | vertical-align: middle; 498 | } 499 | 500 | .djs-context-pad .entry:hover { 501 | background: var(--context-pad-entry-hover-background-color); 502 | } 503 | 504 | .djs-context-pad.open { 505 | display: block; 506 | } 507 | 508 | /** 509 | * popup styles 510 | */ 511 | .djs-popup .entry { 512 | line-height: 20px; 513 | white-space: nowrap; 514 | cursor: default; 515 | } 516 | 517 | /* larger font for prefixed icons */ 518 | .djs-popup .entry:before { 519 | vertical-align: middle; 520 | font-size: 20px; 521 | } 522 | 523 | .djs-popup .entry > span { 524 | vertical-align: middle; 525 | font-size: 14px; 526 | } 527 | 528 | .djs-popup .entry:hover, 529 | .djs-popup .entry.active:hover { 530 | background: var(--popup-header-entry-selected-background-color); 531 | } 532 | 533 | .djs-popup .entry.disabled { 534 | background: inherit; 535 | } 536 | 537 | .djs-popup .djs-popup-header .entry { 538 | display: inline-block; 539 | padding: 2px 3px 2px 3px; 540 | 541 | border: solid 1px transparent; 542 | border-radius: 3px; 543 | } 544 | 545 | .djs-popup .djs-popup-header .entry.active { 546 | color: var(--popup-header-entry-selected-color); 547 | border: solid 1px var(--popup-header-entry-selected-color); 548 | background-color: var(--popup-header-entry-selected-background-color); 549 | } 550 | 551 | .djs-popup-body .entry { 552 | padding: 4px 5px; 553 | } 554 | 555 | .djs-popup-body .entry > span { 556 | margin-left: 5px; 557 | } 558 | 559 | .djs-popup-body { 560 | background-color: var(--popup-body-background-color); 561 | } 562 | 563 | .djs-popup-header { 564 | border-bottom: 1px solid var(--popup-header-separator-color); 565 | } 566 | 567 | .djs-popup-header .entry { 568 | margin: 1px; 569 | margin-left: 3px; 570 | } 571 | 572 | .djs-popup-header .entry:last-child { 573 | margin-right: 3px; 574 | } 575 | 576 | /** 577 | * popup / palette styles 578 | */ 579 | .djs-palette { 580 | background: var(--palette-background-color); 581 | border: solid 1px var(--palette-border-color); 582 | border-radius: 2px; 583 | } 584 | 585 | .djs-popup { 586 | background: var(--popup-background-color); 587 | border: solid 1px var(--popup-border-color); 588 | border-radius: 2px; 589 | } 590 | 591 | /** 592 | * touch 593 | */ 594 | 595 | .djs-shape, 596 | .djs-connection { 597 | touch-action: none; 598 | } 599 | 600 | .djs-segment-dragger, 601 | .djs-bendpoint { 602 | display: none; 603 | } 604 | 605 | /** 606 | * bendpoints 607 | */ 608 | .djs-segment-dragger .djs-visual { 609 | display: none; 610 | 611 | fill: var(--bendpoint-fill-color); 612 | stroke: var(--bendpoint-stroke-color); 613 | stroke-width: 1px; 614 | stroke-opacity: 1; 615 | } 616 | 617 | .djs-segment-dragger:hover .djs-visual { 618 | display: block; 619 | } 620 | 621 | .djs-bendpoint .djs-visual { 622 | fill: var(--bendpoint-fill-color); 623 | stroke: var(--bendpoint-stroke-color); 624 | stroke-width: 1px; 625 | } 626 | 627 | .djs-segment-dragger:hover, 628 | .djs-bendpoints.hover .djs-segment-dragger, 629 | .djs-bendpoints.selected .djs-segment-dragger, 630 | .djs-bendpoint:hover, 631 | .djs-bendpoints.hover .djs-bendpoint, 632 | .djs-bendpoints.selected .djs-bendpoint { 633 | display: block; 634 | } 635 | 636 | .djs-drag-active .djs-bendpoints * { 637 | display: none; 638 | } 639 | 640 | .djs-bendpoints:not(.hover) .floating { 641 | display: none; 642 | } 643 | 644 | .djs-segment-dragger:hover .djs-visual, 645 | .djs-segment-dragger.djs-dragging .djs-visual, 646 | .djs-bendpoint:hover .djs-visual, 647 | .djs-bendpoint.floating .djs-visual { 648 | fill: var(--bendpoint-fill-color); 649 | stroke: var(--bendpoint-stroke-color); 650 | stroke-opacity: 1; 651 | } 652 | 653 | .djs-bendpoint.floating .djs-hit { 654 | pointer-events: none; 655 | } 656 | 657 | .djs-segment-dragger .djs-hit, 658 | .djs-bendpoint .djs-hit { 659 | fill: none; 660 | pointer-events: all; 661 | } 662 | 663 | .djs-segment-dragger.horizontal .djs-hit { 664 | cursor: ns-resize; 665 | } 666 | 667 | .djs-segment-dragger.vertical .djs-hit { 668 | cursor: ew-resize; 669 | } 670 | 671 | .djs-segment-dragger.djs-dragging .djs-hit { 672 | pointer-events: none; 673 | } 674 | 675 | .djs-updating, 676 | .djs-updating > * { 677 | pointer-events: none !important; 678 | } 679 | 680 | .djs-updating .djs-context-pad, 681 | .djs-updating .djs-outline, 682 | .djs-updating .djs-bendpoint, 683 | .djs-multi-select .djs-bendpoint, 684 | .djs-multi-select .djs-segment-dragger, 685 | .connect-ok .djs-bendpoint, 686 | .connect-not-ok .djs-bendpoint, 687 | .drop-ok .djs-bendpoint, 688 | .drop-not-ok .djs-bendpoint { 689 | display: none !important; 690 | } 691 | 692 | .djs-segment-dragger.djs-dragging, 693 | .djs-bendpoint.djs-dragging { 694 | display: block; 695 | opacity: 1.0; 696 | } 697 | 698 | 699 | /** 700 | * tooltips 701 | */ 702 | .djs-tooltip-error { 703 | width: 160px; 704 | padding: 6px; 705 | 706 | background: var(--tooltip-error-background-color); 707 | border: solid 1px var(--tooltip-error-border-color); 708 | border-radius: 2px; 709 | color: var(--tooltip-error-color); 710 | font-size: 12px; 711 | line-height: 16px; 712 | 713 | opacity: 0.75; 714 | } 715 | 716 | .djs-tooltip-error:hover { 717 | opacity: 1; 718 | } 719 | 720 | 721 | /** 722 | * search pad 723 | */ 724 | .djs-search-container { 725 | position: absolute; 726 | top: 20px; 727 | left: 0; 728 | right: 0; 729 | margin-left: auto; 730 | margin-right: auto; 731 | 732 | width: 25%; 733 | min-width: 300px; 734 | max-width: 400px; 735 | z-index: 10; 736 | 737 | font-size: 1.05em; 738 | opacity: 0.9; 739 | background: var(--search-container-background-color); 740 | border: solid 1px var(--search-container-border-color); 741 | border-radius: 2px; 742 | box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset; 743 | } 744 | 745 | .djs-search-container:not(.open) { 746 | display: none; 747 | } 748 | 749 | .djs-popup-search input, 750 | .djs-search-input input { 751 | font-size: 1.05em; 752 | width: 100%; 753 | padding: 6px 10px; 754 | border: 1px solid var(--search-input-border-color) !important; 755 | box-sizing: border-box; 756 | } 757 | 758 | .djs-popup-search input:focus, 759 | .djs-search-input input:focus { 760 | outline: none; 761 | border-color: var(--search-input-border-color) !important; 762 | } 763 | 764 | .djs-search-results { 765 | position: relative; 766 | overflow-y: auto; 767 | max-height: 200px; 768 | } 769 | 770 | .djs-search-results:hover { 771 | cursor: pointer; 772 | } 773 | 774 | .djs-search-result { 775 | width: 100%; 776 | padding: 6px 10px; 777 | background: white; 778 | border-bottom: solid 1px var(--search-result-border-color); 779 | border-radius: 1px; 780 | } 781 | 782 | .djs-search-highlight { 783 | color: var(--search-result-highlight-color); 784 | } 785 | 786 | .djs-search-result-primary { 787 | margin: 0 0 10px; 788 | } 789 | 790 | .djs-search-result-secondary { 791 | font-family: monospace; 792 | margin: 0; 793 | } 794 | 795 | .djs-search-result:hover { 796 | background: var(--search-result-selected-color); 797 | } 798 | 799 | .djs-search-result-selected { 800 | background: var(--search-result-selected-color); 801 | } 802 | 803 | .djs-search-result-selected:hover { 804 | background: var(--search-result-selected-color); 805 | } 806 | 807 | .djs-search-overlay { 808 | background: var(--search-result-selected-color); 809 | } 810 | 811 | /** 812 | * hidden styles 813 | */ 814 | .djs-element-hidden, 815 | .djs-element-hidden .djs-hit, 816 | .djs-element-hidden .djs-outline, 817 | .djs-label-hidden .djs-label { 818 | display: none !important; 819 | } 820 | 821 | .djs-element .djs-hit-stroke, 822 | .djs-element .djs-hit-click-stroke, 823 | .djs-element .djs-hit-all { 824 | cursor: move; 825 | } --------------------------------------------------------------------------------