Context Pad Always Visible

CHANGELOG.md

@@ -6,6 +6,13 @@ All notable changes to [@camunda/improved-canvas](https://github.com/camunda/imp
 
 ___Note:__ Yet to be released changes appear here._
 
+## 1.5.0
+
+* `FEAT`: context pad always visible as long as elements visible ([#61](https://github.com/camunda/improved-canvas/pull/61))
+* `FEAT`: quick append and attach visible as long as elements visible ([#61](https://github.com/camunda/improved-canvas/pull/61))
+* `CHORE`: comments icon simplified ([#61](https://github.com/camunda/improved-canvas/pull/61))
+* `FIX`: do not show resource linking if start event is inside event subprocess ([#61](https://github.com/camunda/improved-canvas/pull/61))
+
 ## 1.4.0
 
 * `FEAT`: add quick append and attach ([#59](https://github.com/camunda/improved-canvas/pull/59))

assets/context-pad.css

@@ -13,11 +13,12 @@
 }
 
 .bio-improved-canvas .djs-context-pad {
+  width: auto;
   background: var(--context-pad-background-color);
   color: var(--context-pad-color);
   border-radius: 4px;
-  transform: translate(-50%, -100%);
   box-shadow: var(--context-pad-box-shadow);
+  z-index: 200;
 }
 
 .bio-improved-canvas .djs-context-pad.open {
@@ -65,9 +66,14 @@
 }
 
 .bio-improved-canvas .djs-context-pad .bio-properties-panel-tooltip-wrapper {
+  position: relative;
   text-decoration: none;
 }
 
+.bio-improved-canvas .djs-context-pad .bio-properties-panel-tooltip {
+  position: absolute;
+}
+
 .bio-improved-canvas .djs-context-pad .bio-properties-panel-tooltip-content {
   font-size: 12px;
   padding: 9px 12px;
@@ -97,21 +103,4 @@
 /* Resource linking */
 .bio-improved-canvas .djs-context-pad .entry.resource-linking-no-resource svg {
   fill: var(--blue-60);
-}
-
-/* Feedback */
-.bio-improved-canvas .feedback-button {
-  font-family: inherit;
-  font-size: 12px;
-  position: absolute;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--gray-60);
-  white-space: nowrap;
-
-  &:hover {
-    color: var(--gray-80);
-    text-decoration: underline;
-  }
 }

assets/create-pad.css

@@ -1,69 +1,69 @@
-.djs-overlay-create-pad {
-  pointer-events: none;
-
-  .djs-create-pad {
-    pointer-events: all;
+.djs-create-pad {
+  position: absolute;
+  display: flex;
+  align-items: flex-start;
+  transform: translate(-20px, -20px);
+  z-index: 100;
+
+  &:not(.open) {
+    display: none;
+  }
+
+  &:hover {
+    z-index: 150;
+
+    .djs-create-pad-icon {
+      display: none;
+    }
+
+    .djs-create-pad-entries {
+      display: grid;
+    }
+  }
+
+  .djs-create-pad-icon {
     display: flex;
-    align-items: flex-start;
-    position: relative;
-    transform: translate(-20px, -20px);
-
-    &:hover {
-      z-index: 150;
-
-      .djs-create-pad-icon {
-        display: none;
-      }
-
-      .djs-create-pad-entries {
-        display: grid;
-      }
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+
+    svg {
+      width: 20px;
+      height: 20px;
+      border-radius: 100%;
+      background-color: var(--color-blue-205-100-50);
+      box-shadow: var(--context-pad-box-shadow);
     }
-
-    .djs-create-pad-icon {
+  }
+
+  .djs-create-pad-entries {
+    display: none;
+    flex-direction: row;
+    overflow: hidden;
+    padding: 4px;
+    border-radius: 4px;
+    background-color: white;
+    color: var(--gray-80);
+    box-shadow: var(--context-pad-box-shadow);
+
+    .djs-create-pad-entry {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 40px;
-      height: 40px;
-      border-radius: 100%;
-
-      svg {
-        width: 20px;
-        height: 20px;
-        border-radius: 100%;
-        background-color: var(--color-blue-205-100-50);
-        box-shadow: var(--context-pad-box-shadow);
-      }
-    }
+      width: 32px;
+      height: 32px;
+      font-size: 22px;
 
-    .djs-create-pad-entries {
-      display: none;
-      flex-direction: row;
-      overflow: hidden;
-      padding: 4px;
-      border-radius: 4px;
-      background-color: white;
-      color: var(--gray-80);
-      box-shadow: var(--context-pad-box-shadow);
-
-      .djs-create-pad-entry {
+      * {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 32px;
-        height: 32px;
-        font-size: 22px;
-
-        * {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        &:hover {
-          background: var(--context-pad-hover-color);
-        }
+      }
+
+      &:hover {
+        background: var(--context-pad-hover-color);
       }
     }
   }

lib/bpmn/appendCreatePad/AppendCreatePad.js

@@ -4,11 +4,11 @@ import { is } from 'bpmn-js/lib/util/ModelUtil';
 
 import CreatePad from '../../common/createPad/CreatePad';
 
-const CREATE_PAD_MARGIN = 30;
+const CREATE_PAD_MARGIN = 15;
 
 export default class AppendCreatePad extends CreatePad {
-  constructor(appendContextPadProvider, contextPadProvider, eventBus, overlays, rules) {
-    super(eventBus, overlays);
+  constructor(appendContextPadProvider, canvas, contextPadProvider, eventBus, rules) {
+    super(canvas, eventBus);
 
     this._appendContextPadProvider = appendContextPadProvider;
     this._contextPadProvider = contextPadProvider;
@@ -35,25 +35,41 @@ export default class AppendCreatePad extends CreatePad {
       return this._getBoundaryEventPosition(target);
     }
 
+    const container = this._canvas.getContainer();
+
+    const containerBounds = container.getBoundingClientRect();
+
+    const gfx = this._canvas.getGraphics(target);
+
+    const targetBounds = gfx.getBoundingClientRect();
+
     return {
-      left: target.width + CREATE_PAD_MARGIN,
-      top: target.height / 2
+      left: targetBounds.right + (CREATE_PAD_MARGIN * this._canvas.zoom()) - containerBounds.left,
+      top: targetBounds.top + targetBounds.height / 2 - containerBounds.top
     };
   }
 
   _getBoundaryEventPosition(target) {
     const orientation = getOrientation(getMid(target), target.host);
 
+    const container = this._canvas.getContainer();
+
+    const containerBounds = container.getBoundingClientRect();
+
+    const gfx = this._canvas.getGraphics(target);
+
+    const targetBounds = gfx.getBoundingClientRect();
+
     if (orientation.includes('right') || orientation.includes('top') || orientation.includes('left')) {
       return {
-        left: target.width + CREATE_PAD_MARGIN,
-        top: target.height / 2
+        left: targetBounds.right + (CREATE_PAD_MARGIN * this._canvas.zoom()) - containerBounds.left,
+        top: targetBounds.top + targetBounds.height / 2 - containerBounds.top
       };
     }
 
     return {
-      left: target.width / 2,
-      top: target.height + CREATE_PAD_MARGIN
+      left: targetBounds.left + targetBounds.width / 2 - containerBounds.left,
+      top: targetBounds.bottom + (CREATE_PAD_MARGIN * this._canvas.zoom()) - containerBounds.top
     };
   }
 
@@ -72,9 +88,9 @@ export default class AppendCreatePad extends CreatePad {
 
 AppendCreatePad.$inject = [
   'appendContextPadProvider',
+  'canvas',
   'contextPadProvider',
   'eventBus',
-  'overlays',
   'rules'
 ];
 

lib/bpmn/attachCreatePad/AttachCreatePad.js

@@ -6,11 +6,11 @@ import { is } from 'bpmn-js/lib/util/ModelUtil';
 import CreatePad from '../../common/createPad/CreatePad';
 
 const CREATE_PAD_MARGIN_X = -25,
-      CREATE_PAD_MARGIN_Y = 5;
+      CREATE_PAD_MARGIN_Y = -5;
 
 export default class AttachCreatePad extends CreatePad {
-  constructor(appendContextPadProvider, attachPreview, create, elementFactory, eventBus, injector, modeling, overlays, selection, translate) {
-    super(eventBus, overlays);
+  constructor(appendContextPadProvider, attachPreview, canvas, create, elementFactory, eventBus, injector, modeling, selection, translate) {
+    super(canvas, eventBus);
 
     this._appendContextPadProvider = appendContextPadProvider;
     this._attachPreview = attachPreview;
@@ -33,11 +33,17 @@ export default class AttachCreatePad extends CreatePad {
   }
 
   getPosition(target) {
-    const bBox = getBBox([ target ]);
+    const container = this._canvas.getContainer();
+
+    const containerBounds = container.getBoundingClientRect();
+
+    const gfx = this._canvas.getGraphics(target);
+
+    const targetBounds = gfx.getBoundingClientRect();
 
     return {
-      left: bBox.width + CREATE_PAD_MARGIN_X,
-      top: bBox.height + CREATE_PAD_MARGIN_Y
+      left: targetBounds.right + (CREATE_PAD_MARGIN_X * this._canvas.zoom()) - containerBounds.left,
+      top: targetBounds.bottom + (CREATE_PAD_MARGIN_Y * this._canvas.zoom()) - containerBounds.top
     };
   }
 
@@ -129,12 +135,12 @@ export default class AttachCreatePad extends CreatePad {
 AttachCreatePad.$inject = [
   'appendContextPadProvider',
   'attachPreview',
+  'canvas',
   'create',
   'elementFactory',
   'eventBus',
   'injector',
   'modeling',
-  'overlays',
   'selection',
   'translate'
 ];

lib/bpmn/resourceLinking/ResourceLinkingRules.js

@@ -11,9 +11,19 @@ export default class ResourceLinkingRules extends RuleProvider {
     super(eventBus);
 
     this.addRule('resourceLinking.linkResource', ({ element }) => {
-      return !hasElementTemplate(element) && (
-        isAny(element, [ 'bpmn:BusinessRuleTask', 'bpmn:CallActivity', 'bpmn:UserTask' ]) || (isNoneStartEvent(element) && isNoneStartEventSupported(config))
-      );
+      if (hasElementTemplate(element)) {
+        return false;
+      }
+
+      if (isAny(element, [ 'bpmn:BusinessRuleTask', 'bpmn:CallActivity', 'bpmn:UserTask' ])) {
+        return true;
+      }
+
+      if (isNoneStartEvent(element) && isNoneStartEventSupported(config) && !isEventSubProcess(element.parent)) {
+        return true;
+      }
+
+      return false;
     });
   }
 }
@@ -41,4 +51,8 @@ function isNoneStartEventSupported(config = {}) {
   const { noneStartEvent = true } = config;
 
   return noneStartEvent;
+}
+
+function isEventSubProcess(element) {
+  return getBusinessObject(element).get('triggeredByEvent');
 }