BKM as literal expression

packages/dmn-js-boxed-expression/.babelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "../../babel.config.json",
+  "plugins": [
+    "inferno"
+  ]
+}

packages/dmn-js-boxed-expression/.gitignore

@@ -0,0 +1 @@
+lib

packages/dmn-js-boxed-expression/LICENSE

@@ -0,0 +1,23 @@
+Copyright (c) 2024-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.

packages/dmn-js-boxed-expression/README.md

@@ -0,0 +1,8 @@
+# dmn-js-boxed-expression
+
+A boxed expression viewer and editor for [dmn-js](https://github.com/bpmn-io/dmn-js).
+
+
+## License
+
+Use under the terms of the [bpmn.io license](http://bpmn.io/license).

packages/dmn-js-boxed-expression/assets/css/dmn-js-boxed-expression-controls.css

@@ -0,0 +1,130 @@
+.dmn-boxed-expression-container {
+  --context-menu-background-color: var(--color-white);
+  --context-menu-border-color: var(--color-grey-225-10-75);
+  --context-menu-color: var(--color-grey-225-10-15);
+  --context-menu-box-shadow-color: var(--color-black-opacity-10);
+  --context-menu-group-entry-border-color: var(--color-grey-225-10-75);
+  --context-menu-group-entry-disabled-color: var(--color-grey-225-10-75);
+  --context-menu-group-entry-hover-background-color: var(--color-grey-225-10-95);
+  --edit-button-color: var(--color-grey-225-10-15);
+  --edit-button-background-color: var(--color-grey-225-10-97);
+  --edit-button-border-color: var(--color-grey-225-10-75);
+  --edit-button-box-shadow-color: var(--color-black-opacity-10);
+  --edit-button-disabled-color: var(--color-grey-225-10-75);
+}
+
+/* common */
+.dmn-boxed-expression-container button {
+  background: var(--color-white);
+  border: solid 1px var(--color-grey-225-10-75);
+  color: var(--color-grey-225-10-15);
+  font-size: var(--font-size);
+}
+
+.dmn-boxed-expression-container button:hover {
+  background-color: var(--color-grey-225-10-97);
+}
+
+.dmn-boxed-expression-container .dms-input {
+  width: 160px;
+}
+
+/* element-name */
+.dmn-boxed-expression-container .element-name {
+  /* TODO(@barmac): rework focus indicators to use outline instead of border */
+  border: solid 1px transparent;
+  width: 24em;
+  max-width: 100%;
+}
+
+/* context-menu */
+
+.dmn-boxed-expression-container .context-menu {
+  position: absolute;
+  background: var(--context-menu-background-color);
+  border: solid 1px var(--context-menu-border-color);
+  border-radius: 2px;
+  font-size: 14px;
+  color: var(--context-menu-color);
+  box-shadow: 1px 1px 1px 1px var(--context-menu-box-shadow-color);
+}
+
+.dmn-boxed-expression-container .context-menu .context-menu-container {
+  margin: 8px;
+}
+
+.dmn-boxed-expression-container .context-menu .context-menu-flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  padding: 8px 16px;
+  cursor: default;
+  white-space: nowrap;
+}
+
+.dmn-boxed-expression-container .context-menu-group .context-menu-group-entry:hover {
+  background-color: var(--context-menu-group-entry-hover-background-color);
+}
+
+.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry.disabled {
+  pointer-events: none;
+  color: var(--context-menu-group-entry-disabled-color);
+}
+
+.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon {
+  display: inline-block;
+  text-align: center;
+  width: 14px;
+  margin-right: 6px;
+}
+
+.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon::before {
+  margin: 0;
+}
+
+.dmn-boxed-expression-container .context-menu-group:not(:last-child)::after {
+  content: '';
+  display: block;
+  margin: 0 8px;
+  border-bottom: 1px solid var(--context-menu-group-entry-border-color);
+  height: 1px;
+}
+
+/* edit-button */
+
+.dmn-boxed-expression-container .edit-button {
+  color: var(--edit-button-color);
+  background-color: var(--edit-button-background-color);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  padding: 4px;
+  border-radius: 2px;
+  border: solid 1px var(--edit-button-border-color);
+  font-size: var(--font-size);
+  box-shadow: 1px 1px 1px 1px var(--edit-button-box-shadow-color);
+}
+
+.dmn-boxed-expression-container :not(:hover, :focus-within) .edit-button {
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/* function-definition */
+.dmn-boxed-expression-container .context-menu .function-definition-parameter button {
+  border: none;
+}
+
+.dmn-boxed-expression-container .context-menu .formal-parameters .add-parameter {
+  margin-left: 3px;
+}

packages/dmn-js-boxed-expression/assets/css/dmn-js-boxed-expression.css

@@ -0,0 +1,185 @@
+.dmn-boxed-expression-container {
+  --element-properties-background-color: var(--color-white);
+  --element-properties-border-color: var(--color-grey-225-10-15);
+  --element-properties-color: var(--color-grey-225-10-15);
+  --boxed-expression-color: var(--color-grey-225-10-15);
+  --boxed-expression-properties-border-color: var(--color-grey-225-10-15);
+  --boxed-expression-properties-color: var(--color-grey-225-10-15);
+  --powered-by-overlay-background-color: var(--color-black-opacity-20);
+  --powered-by-overlay-content-background-color: var(--color-white);
+  --powered-by-overlay-content-border-color: var(--color-grey-225-10-75);
+  --powered-by-overlay-content-color: var(--color-grey-225-10-15);
+  --textarea-border-color: var(--color-grey-225-10-15);
+  --textarea-color: var(--color-grey-225-10-15);
+  --view-drd-button-background-color: var(--color-white);
+  --view-drd-button-border-color: var(--color-grey-225-10-75);
+  --view-drd-button-color: var(--color-grey-225-10-15);
+  --view-drd-button-hover-background-color: var(--color-grey-225-10-97);
+  --boxed-expression-font-family: 'Arial', sans-serif;
+  --boxed-expression-font-family-monospace: monospace;
+  --section-padding: 20px;
+  --padding: 12px;
+  --font-size: 14px;
+  --font-size-big: 16px;
+  --font-size-bigger: 21px;
+
+  font-family: var(--boxed-expression-font-family);
+  color: var(--boxed-expression-color);
+  width: 100%;
+  height: 100%;
+}
+
+.dmn-boxed-expression-container .viewer-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-size);
+}
+
+.dmn-boxed-expression-container * {
+  box-sizing: border-box;
+}
+
+.dmn-boxed-expression-container .dmn-boxed-expression-section {
+  border: 1px solid var(--element-properties-border-color);
+
+  & + .dmn-boxed-expression-section {
+    border-top: none;
+  }
+}
+
+.dmn-boxed-expression-container h2 {
+  margin: 0;
+  font-size: var(--font-size-big);
+}
+
+/* element properties */
+.dmn-boxed-expression-container .element-properties {
+  padding: var(--section-padding);
+  color: var(--element-properties-color);
+  position: relative;
+  min-width: 192px;
+}
+
+.dmn-boxed-expression-container .element-name {
+  margin: 0;
+  font-size: var(--font-size-bigger);
+  font-weight: normal;
+  white-space: pre;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.dmn-boxed-expression-container .textarea .content-editable {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.dmn-boxed-expression-container .element-name.editor:not(.focussed):hover {
+  cursor: text;
+}
+
+.dmn-boxed-expression-container .element-name.focussed .content-editable {
+  text-overflow: unset;
+}
+
+/* textarea */
+.dmn-boxed-expression-container .textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--padding);
+  font-family: var(--boxed-expression-font-family-monospace);
+  line-height: 1.4;
+  white-space: pre;
+  font-size: var(--font-size);
+  color: var(--textarea-color);
+  min-height: 250px;
+  overflow: auto;
+}
+
+.dmn-boxed-expression-container .textarea div:focus {
+  outline: none;
+}
+
+.dmn-boxed-expression-container .textarea.editor {
+  cursor: text;
+}
+
+.dmn-boxed-expression-container .textarea:not(.editor) {
+  cursor: default;
+}
+
+/* view drd */
+.dmn-boxed-expression-container .view-drd {
+  margin-right: 10px;
+  padding-bottom: 10px;
+}
+
+.dmn-boxed-expression-container .view-drd .view-drd-button {
+  background: var(--view-drd-button-background-color);
+  padding: 8px;
+  border: solid 1px var(--view-drd-button-border-color);
+  border-radius: 2px;
+  font-size: 14px;
+  color: var(--view-drd-button-color);
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.dmn-boxed-expression-container .view-drd .view-drd-button:hover {
+  background: var(--view-drd-button-hover-background-color);
+}
+
+/* function definition */
+.dmn-boxed-expression-container .function-definition {
+  display: grid;
+  grid-template-columns: 50px auto;
+  grid-template-rows: 50px auto;
+
+  & .function-definition-kind, & .function-definition-parameters {
+    position: relative;
+  }
+}
+
+.dmn-boxed-expression-container .function-definition .function-definition-kind {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  font-size: var(--font-size-bigger);
+}
+
+.dmn-boxed-expression-container .function-definition .function-definition-parameters {
+  display: flex;
+  align-items: center;
+  padding-left: var(--padding);
+  border-left: 1px solid var(--element-properties-border-color);
+  font-size: var(--font-size-big);
+}
+
+.dmn-boxed-expression-container .function-definition .function-definition-body {
+  grid-column: span 2;
+  border-top: 1px solid var(--element-properties-border-color);
+}
+
+/* element-variable */
+
+.dmn-boxed-expression-container .element-variable {
+  padding: var(--section-padding);
+  display: inline-grid;
+  grid: auto / 1fr 1fr;
+  gap: 10px 20px;
+
+  & > h2 {
+    grid-column: span 2;
+  }
+
+  & .element-variable-name-label, & .element-variable-type-label {
+    display: block;
+    padding-bottom: 7px;
+    color: var(--color-grey-225-10-35)
+  }
+}

packages/dmn-js-boxed-expression/karma.conf.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var createConfig = require('dmn-js-shared/karma.base');
+
+var path = require('path');
+
+module.exports = createConfig(path.resolve(__dirname));