hivemq / hivemq-edge

HiveMQ Edge is an MQTT gateway that enables interoperability between OT devices and IT systems. It translates diverse protocols into MQTT for streamlined communication and helps organize data into a unified namespace, making managing and streaming data across your infrastructure easier.
http://hivemq.com
Apache License 2.0
90 stars 20 forks source link

feat(21481): Add node duplication and copy-and-paste support #388

Closed vanch3d closed 2 months ago

vanch3d commented 2 months ago

See https://hivemq.kanbanize.com/ctrl_board/57/cards/21481/details/

This PR improves the UX of the Data Hub Designer by allowing users to copy nodes from the graph and duplicate them as new elements.

The operation is an internal "copy-and-paste" of the selection in the designer:

A small feedback widget has been added to the bottom centre of the Designer. It contains a "copy" indicator, with the number of nodes copied.

Note that copied content is not shared in the clipboard and its scope is limited to the current draft. Leaving the Designer will wipe the buffer. The copy-and-paste feature is also only available on DRAFT policies.

The PR also adds a "cheat sheet" with all the keyboard shortcuts supported by React Flow or the Data Hub Designer. The modal is available from the canvas toolbox.

After

screenshot-localhost_3000-2024 04 25-09_30_37

screenshot-localhost_3000-2024 04 25-09_30_51

screenshot-localhost_3000-2024 04 25-09_31_05

antpaw commented 2 months ago

I would suggest to change the name of the "Meta" key to something dynamic like this

  const shortcut = useMemo(() => {
    const os = window.navigator.platform;
    if (os.startsWith('Mac')) {
      return '⌘K';
    } else {
      return '^K';
    }
  }, [])
vanch3d commented 2 months ago

I would suggest to change the name of the "Meta" key to something dynamic like this

  const shortcut = useMemo(() => {
    const os = window.navigator.platform;
    if (os.startsWith('Mac')) {
      return '⌘K';
    } else {
      return '^K';
    }
  }, [])

I cannot use the symbols, as I have multiple keys and non-key binding. So I'm using the official modifier name (Command and Ctrl)

screenshot-localhost_3000-2024 04 29-09_07_56