The minimap will regularly move parent elements in front of its children, whenever the parent is changed. Instead, it should take element ordering into account. That ordering can be read from the SVG document which maps to the models parent child hierarchy.

Steps to Reproduce

• Add parent
• Add child
• Resize parent
• Parent in minimap hides child

Expected

• Minimap respects parent / child layering

Describe the Bug

With the current release, the Minimap crashes when opening and interacting

Additionally, you can see following error popping up

Minimap.js:725 Uncaught TypeError: Cannot read property 'width' of undefined
    at fitAspectRatio (Minimap.js:725)
    at mapMousePositionToDiagramPoint (Minimap.js:697)
    at setViewboxCenteredAroundClickEvent (Minimap.js:73)
    at SVGSVGElement.onMousedown (Minimap.js:101)

Steps to Reproduce

Steps to reproduce the behavior:

1. Open Minimap
2. Move a little around the minimap box

Expected Behavior

Should not crash and simply work.

Environment

Please complete the following information:

• Browser: Chrome 76
• OS: macOS 10.14.5
• Library version: 2.0.0

Steps to reproduce

1. Create task
2. Change task type using the replace menu
3. Move the task

Problem

A duplicate of the new task is permanently visible in the mini map

Expected Behavior

No duplicates are visible

Describe the Bug

Unfortunately, the current implementation ignores translations and the buttons texts are hardcoded inside the css.
The easiest fix is to use the title attribute of the parent div that is already translated.

I made a pr: #44

Describe the Bug

Kindly check this demo link

https://stackblitz.com/edit/bpmn-js-minimap-issue?file=src%2Fapp%2Fapp.component.html

The main issue is: in the first tab(Xml1) the minimap working good, but when we open the second tab (Xml2), the map is not displayed well (instead of displaying the graph in a yellow border, it is displayed a yellow point)

Steps to Reproduce

1. Open the demo
2. Open the second tab
3. See the minimap does not provide the content of the tab diagram

After moving around on the canvas, the minimap appears again and works as expected.

Expected Behavior

The minimap shows up correctly immediately.

Environment

• Host (Chrome/Node version : v14.18.0), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS]
• OS: [e.g. Windows 11]

If used with properties panel, minimap is hidden.
How to set/change position in config ?

I see that code exist to manage position (MINIMAP_POSITION) but I don't see how to set an other value.

Since technically parent of attacher is same as parent of element it is attached to _addElement fails.

The message "gfx not found" is always logged when I create a SubProcess with a StartEvent inside. The Start Event is not added yet to the Element Registry when the minimap tries to render it.

Describe the Bug

When I collapse a shape, its children are still displayed on minimap.

Steps to Reproduce

See codesandbox: https://codesandbox.io/s/fervent-waterfall-n7ci0x?file=/src/index.js

Reported via https://forum.bpmn.io/t/mini-map-shows-inner-objects-when-outer-one-is-collapsed/8984

Expected Behavior

Children should be hidden.

Environment

• Host (Browser/Node version), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS]
• OS: [e.g. Windows 7]
• Library version: [e.g. 2.0.0]

Proposal for improvement:

• Minimap should fit all shapes into the minimap window (with some minimal viewport)
• Zooming and moving on the canvas should affect only the semi-transparent view in the minimap

See example for the minimap behaviour.

Current Behavior

• We register a couple of event listeners (global ones on document, too!) and don't deregister them

Expected Behavior

• Hook into the diagram.destroy event and cleanup registered event listeners
• Alternative: Register global event listener only when drag operation started; clean it up once drag is finished / canceled

Right now the minimap close indicator may be overlapped by the viewport indicator, making it unclickable:

Expected Behavior

• The close indicator can always be clicked

Since we had a major release for diagram-js, we should update the dependency to the latest version.

Now bpmnjs supports the touch event on the mobile side, but the small map does not support it

I checked the code, the minimap only listens to the mousemove event, it may be a good way to add support for the touch event depending on the platform.

Add toggle similar to palette toggle

Describe the Bug

Clicking the minimap navigates to a different position after resizing the viewport. The larger the difference between the sizes before and after resizing is, the larger is the discrepency between where I want to navigate and to where the minimap actually navigates.
Dragging the box will still work, but cannot be used if the viewport is outside the diagram so clicking the minimap should work properly.

This is how it looks

Steps to Reproduce

1. setup the environment, use one of these options
   • setup a project with diagram-js-minimap
   • go to https://codesandbox.io/s/minimap-demo-forked-n9gfr
   • checkout https://github.com/bpmn-io/bpmn-js-examples and npm start in minimap subdir
2. zoom in to some element so you can see the effect more easily
3. click the minimap once (everything should work as intended), if you skip step this then the resizing won't break the navigation
4. resize the window eg. by snapping the browser window to one side or by resizing the dev-tools
5. click the minimap again: now it navigates to a different position

Expected Behavior

The minimap should navigate to the position that was chosen on the minimap.

Environment

• Host (Browser/Node version), if applicable: Chrome 92.0.4515.131
• OS: Windows 10
• Library version: 2.0.4

With current version of diagram-js (0.27.2) the minimap and diagram show unexpected behavior.

When I click in the "white" area in the minimap (outside the dragging area) the "parent" diagram turns blank and the dragging area in the minimap disappears.
On one occasion I could get everything back by moving the diagram, so I guess the viewport is somewhere off.

When I use the mousewheel anywhere on the minimap the same happens.

I tried to disable the events on the svg in the dev console and then it's working ok.
My current workaround is to stop propagating the events in event capturing phase on the parent container (djs-minimap-map).

IMHO those events should be removed from the minimap anyway. The UX would be much more intuitiv. Especially now that the zooming in the diagram is done with CTRL+wheel.

Reproduce

• open diagram with a single element only

Current Behavior

• preview is centered (yellow X)

Expected Behavior

• preview is aligned to the top-left (orange X)

Note

A positive side-effect of this change would be that the overall minimap noise caused by viewbox computation is minimized. Right now continuous re-layouting happens:

What should we do?

Removed from diagram-js with v14.

Why should we do it?

Ensure our dependency tree is clean.

Sometimes #_update is triggered without the viewer being attached to the DOM. Canvas#viewbox then returns NaN values which cause an error.

• viewport outline only

  

• highlight viewport using an overlay

  

  Working example using CSS clip-path: https://jsfiddle.net/8n0guqft/1/

• align scrolling with canvas scrolling (CTRL + scroll)

Current implementation does not provide a pre-build distribution of the library that could be used in contexts that do not allow any build steps.

Would it be possible to provide those versions within a dist catalog (the way that bpmn-js itself does)?

Is your feature request related to a problem? Please describe.

Hello, I have integrated diagram-js-minimap4.0 in Camunda Bpmn, how do I listen to events in minimap through BpmnModeler?

Will throw error

Cannot read property 'cloneNode' of undefined
    at clone

The release includes a ".git\hooks\README.sample" file.

This makes npm think its a git repo when its not which makes it rather unhappy:
npm install
npm ERR! path c:\Path\node_modules\diagram-js-minimap
npm ERR! code EISGIT
npm ERR! git c:\Path\node_modules\diagram-js-minimap: Appears to be a git repo or submodule.
npm ERR! git c:\Path\node_modules\diagram-js-minimap
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

Right now, when zooming out with zoom levels < 1 the zoom steps are huge, making it impossible zoom to an appropriate level in larger diagrams:

Expected Behavior

• Zooming in and out follows constant steps
• Zooming has the same feel as the diagram-js ZoomScroll implementation

Reproduce

• Bootstrap diagram-js with minimap initially closed (the default)
• Open minimap

Current Behavior

• Viewport indicator does not show

Expected Behavior

• Viewport indicator shows after minimap open

Describe the Bug

I can not use the latest release with diagram-js@7

unhandled error in event listener TypeError: this._canvas.findRoot is not a function
    at Minimap._addElement (index.esm.js:588:1)
    at index.esm.js:273:1
    at bpmn-modeler.production.min.js:7:26123

Steps to Reproduce

1. Include this lib with bpmn-js@8
2. load a process
3. it blows up

Expected Behavior

It works

Environment

• Host (Browser/Node version), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS]
• OS: [e.g. Windows 7]
• Library version: 2.1.0

Could you provide a version on Bower?

Tested on IE 11 but I think later versions will have an issue too.
The problem is the recent change to use css. This line:
https://github.com/bpmn-io/diagram-js-minimap/blob/master/lib/Minimap.js#L374

var viewport = this._viewport = svgCreate('rect');
domClasses(viewport).add('viewport');

is the root cause because classList is not supported for svg elements in Internet Explorer. See the footnote on:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

The solution is to set the attribute directly.