Some nodes are able to overlap already because of their sorted priority (e.g, text in a rectangle, nodes in a swimlane, etc)
This will require a change to the design of how selection works. Rather than querying nodes by x,y position, instead it would track the selected nodes with an id attribute on the Svg node.

A user that tries to do the normal click-drag will be stumped by weird behavior of rect-select (#10). Mentioned having rect-select part of dropdown in #15, however I'm thinking start the click behavior initially but then holding click and dragging enough away from initial click should cancel out any click-selection and start the rect-selection.

The dropdown still might make sense for other click-select scenarios, however rect-selection should just override any other select feature (dropdown/single click select).

use case: while moving mouse left-to-right you intermittently type ctrl-v to paste the same rect node in different places that are almost an aligned row, however it won't be exact and you'd want to fix them all to have the same Y.

In this case when you select them all and change the y attribute in single xml node textarea (that smart maps to all nodes), rather than moving them all by the difference you expect them to become exactly lined up (either to the min or max y value to all become equal).

This means smart mapping an attribute change between elements will have another mode of operating.

One solution option: have toggle controls for keeping alignment fixed, e.g., [|] vertical align and [--] horiz. align buttons next to the Done button.

Provide a button to quickly copy all the SVG's xml, so that it can be pasted into a different editor or in a different tab instance.

palettes containing other UML elements (other than activity diagram).
not doing a comprehensive list, just some of them
Links in the footer - opens the app as a new instance window in a special mode that minimizes everything but the editing image

Provide a download button if the user wants to quickly take a backup.

• file name = act.svg

somewhat improved toolbar buttons
improved appearance of mode-change notification message

• show marker when selected
• clicking (with selection) places at the x,y position of the click

possible keyboard shortcut options

• c => copy, p => paste (should it also copy the xml of node selection to place in other tabbed instance?*)
• d => duplicate

* #6 {Copy between App Instances})

places duplicated nodes at position x,y of the mouse cursor, depends on #2{overlapping nodes}

instead of showing a marker and having to press enter, just directly move the selected nodes to follow the same behavior as described in issue #17.

Using a much smaller threshold than the self-snap for lines.

Examples:

draw a 90 degree connection by free hand to connect line and polyline will likely result in a small gap.

1. draw line downward
2. start drawing arrow from end of line horizontally toward the right
3. it should autocorrect and connect the polyline to the line

drawing a rectangle almost in line with a rectangle above it should correct

1. draw a rectangle to match 1 above it
2. on start drawing the 2nd rect should autocorrect left side to align with upper rect
3. on mousemove to be close to right-side of upper rect should auto correct to line up drawing rect

Fix all tests that relied on 2 clicks that now need to draw with click-drag

shortcut to select all nodes

for each drawing type, draw it following one of the other drawing types and assert it draws.

additional to click-drag selection #16, also should be able to move nodes with click-drag

A node selection should be able to be copied between app tab instances.

2 pieces of functionality:

• copying the XML of the just the selected nodes (e.g., via Ctl-c or c shortcut)
• right now editing the full xml is not possible, perhaps provide another means via button or keyboard shortcut (e.g., Ctl-v or p shortcut) that automatically places the xml into the svg doc

in the same vein as #16 and #17, should be able to click drag to draw a rectangle. should show a visual of what is being drawn

repro steps

cd act.svg
python3 -m http.server

(http://0.0.0.0:8000/)

try copy/cut and console error says navigator.clipboard is undefined

Cannot read properties of undefined (reading 'writeText')

info

clipboard requires a secure origin (ie: https instead of http), see https://stackoverflow.com/questions/71873824/copy-text-to-clipboard-cannot-read-properties-of-undefined-reading-writetext

perhaps document.execCommand("copy") works instead when being served this way.

workarounds

just open index.html from filesystem (if not on firefox* )
OR use ssl as part of web server w/ https URI , probably more work than simple py3 -m http.server

* open in firefox appears to be trying to use file:///run directory and can't find my js scripts there

• ci workflow
• enable command line / node testing running, e.g., via jsdom

implement undo stack. (also look into undo trees)

When there are swimlanes and rectangular selection (#10) is attempted for an element within a lane, then it will actually click to choose the swimlane and rect selection won't work. This can't be resolved by ignoring swimlane single-select clicks because it might make it impossible to select the swimlane/outer rectangle (if rect arround entire page is added).

Don't necessary want to go down the path of layers and groups, etc, as that is a lot of dev work and additional editing features the user has to make use of just to select something.

Having a dropdown to pick which one you meant here might be a good solution. This means you'd not have to worry that single-click select something actually selected something different, e.g.: you want to click an action node rectangle only, however since you click within the bounds of the text that mostly fills the action node rectangle. Since your click was within 2 valid bounds then dropdown will give you the ability to choose, and maybe always give an option to do rectangular select (e.g.: in cases you meant to click the background to start rect-select).