Custom Stencil

[VictorPulzz]

Introduction

Please advise on whether this is the correct implementation. The problem is that when I start dragging my shape and hover the mouse over my stencil, it ends up on the paper, but I don't want that to happen (as in the original stencil). Am I thinking correctly?

import { Icon } from '~/components'
import { FC, PointerEvent, useRef } from 'react';

import { ShapeNamesEnum } from '~/services/bpmn-jointjs/shapes/consts';
import { baseShadow } from '~/services/bpmn-jointjs/shapes/shadow';

import { useBpmnService } from '../_atomic/useBpmnService';

export const CustomStencil: FC = () => {
  const { bpmnService } = useBpmnService();
  const stencilRef = useRef<HTMLDivElement>(null);

  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
    const shapeShadow = event.currentTarget.dataset.shapeShadow as ShapeNamesEnum;

    bpmnService?.stencil.startDragging(
      baseShadow.getByName(shapeShadow),
      event as unknown as Event,
    );

    const handlePointerUp = (event: Event) => {
      if (stencilRef.current?.contains(event.target as Node)) {
        bpmnService?.stencil.cancelDrag();
      }

      window.removeEventListener('pointerup', () => handlePointerUp);
    };

    window.addEventListener('pointerup', event => {
      event.stopPropagation();
      event.preventDefault();
      handlePointerUp(event);
    });
  };

  return (
    <div
      className="absolute flex flex-col items-center w-[2.75rem] top-3 left-20 p-1.5 bg-white rounded-md overflow-hidden shadow-[0px_4px_24px_0px_hsla(0,0%,40%,0.1)]"
      id="stenceil"
      ref={stencilRef}
    >
      <div
        className="w-8 h-8 rounded-md base-transition hover:bg-gray-8 flex-center cursor-grab"
        data-shape-shadow={baseShadow.ns.shadow.Task.get('name')}
        onPointerDown={handlePointerDown}
      >
        <Icon className="pointer-events-none" name="activity" size={18} />
      </div>
    </div>
  );
};

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

• You should listen to the stencil event element:dragend instead of window pointerup.
• You can not check if the stencil element contains dragged node. It is never appended to the stencil DOM element. You need to check its client position.

The stencil checks the drop area already:

• it checks if the element is inside the paper or paper scroller
• it makes sure it is not above the stencil

Since you are not rendering the stencil (and use a custom one instead), this check fails. I think it would be nice to add a new option to the stencil that enables you to provide a custom stencil node.

[kumilingus]

You can also try to create the stencil like this: new ui.Stencil({ el: stencilRef.current })

[VictorPulzz]

Yes, I'll use the default one at first, but unfortunately it has limited customization options. I need to add separators between groups, plus I need to add not only drag-and-drop elements, but also buttons such as zoomIn, zoomOut, etc...
Btw, thanks for answer, I will check it;)

[VictorPulzz]

That's great, thanks for the idea, everything has been reduced to a couple of lines! Thank you for always being available and helping us with your cool and extensive library!

    this.listenTo(stencil, {
      'element:drag': this.onElementDrag,
      'element:drop': this.onElementDrop,
      'element:dragend': (service, __, event) => {
        const element = document.getElementById('custom-stencil');
        if (element?.contains(event.target as Node)) {
          service?.stencil.cancelDrag();
        }
      },
    });