kie-issues#793: The keyboard shortcuts panel doesn't show the new DMN Editor keyboard shortcuts

packages/dmn-editor-envelope/package.json

@@ -27,6 +27,7 @@
     "@kie-tools-core/editor": "workspace:*",
     "@kie-tools-core/envelope": "workspace:*",
     "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/keyboard-shortcuts": "workspace:*",
     "@kie-tools-core/notifications": "workspace:*",
     "@kie-tools-core/react-hooks": "workspace:*",
     "@kie-tools-core/workspace": "workspace:*",

packages/dmn-editor-envelope/src/DmnEditorFactory.tsx

@@ -150,6 +150,7 @@ function DmnEditorRootWrapper({
         onOpenFileFromNormalizedPosixPathRelativeToTheWorkspaceRoot
       }
       workspaceRootAbsolutePosixPath={workspaceRootAbsolutePosixPath}
+      keyboardShortcutsService={envelopeContext?.services.keyboardShortcuts}
     />
   );
 }

packages/dmn-editor-envelope/src/DmnEditorRoot.tsx

@@ -41,6 +41,7 @@ import {
   imperativePromiseHandle,
   PromiseImperativeHandle,
 } from "@kie-tools-core/react-hooks/dist/useImperativePromiseHandler";
+import { KeyboardShortcutsService } from "@kie-tools-core/keyboard-shortcuts/dist/envelope/KeyboardShortcutsService";
 
 export const EXTERNAL_MODELS_SEARCH_GLOB_PATTERN = "**/*.{dmn,pmml}";
 
@@ -60,6 +61,7 @@ export type DmnEditorRootProps = {
   onRequestWorkspaceFileContent: WorkspaceChannelApi["kogitoWorkspace_resourceContentRequest"];
   onOpenFileFromNormalizedPosixPathRelativeToTheWorkspaceRoot: WorkspaceChannelApi["kogitoWorkspace_openFile"];
   workspaceRootAbsolutePosixPath: string;
+  keyboardShortcutsService: KeyboardShortcutsService | undefined;
 };
 
 export type DmnEditorRootState = {
@@ -70,6 +72,8 @@ export type DmnEditorRootState = {
   externalModelsByNamespace: DmnEditor.ExternalModelsIndex;
   readonly: boolean;
   externalModelsManagerDoneBootstraping: boolean;
+  keyboardShortcutsRegisterIds: number[];
+  keyboardShortcutsRegistred: boolean;
 };
 
 export class DmnEditorRoot extends React.Component<DmnEditorRootProps, DmnEditorRootState> {
@@ -89,6 +93,8 @@ export class DmnEditorRoot extends React.Component<DmnEditorRootProps, DmnEditor
       openFilenormalizedPosixPathRelativeToTheWorkspaceRoot: undefined,
       readonly: true,
       externalModelsManagerDoneBootstraping: false,
+      keyboardShortcutsRegisterIds: [],
+      keyboardShortcutsRegistred: false,
     };
   }
 
@@ -271,6 +277,177 @@ export class DmnEditorRoot extends React.Component<DmnEditorRootProps, DmnEditor
     );
   };
 
+  public componentDidUpdate(
+    prevProps: Readonly<DmnEditorRootProps>,
+    prevState: Readonly<DmnEditorRootState>,
+    snapshot?: any
+  ): void {
+    if (this.props.keyboardShortcutsService === undefined || this.state.keyboardShortcutsRegistred === true) {
+      return;
+    }
+
+    const commands = this.dmnEditorRef.current?.getCommands();
+    if (commands === undefined) {
+      return;
+    }
+    const cancelAction = this.props.keyboardShortcutsService.registerKeyPress("Escape", "Edit | Unselect", async () =>
+      commands.cancelAction()
+    );
+    const deleteSelectionBackspace = this.props.keyboardShortcutsService.registerKeyPress(
+      "Backspace",
+      "Edit | Delete selection",
+      async () => {}
+    );
+    const deleteSelectionDelete = this.props.keyboardShortcutsService.registerKeyPress(
+      "Delete",
+      "Edit | Delete selection",
+      async () => {}
+    );
+    const selectAll = this.props.keyboardShortcutsService?.registerKeyPress(
+      "A",
+      "Edit | Select/Deselect all",
+      async () => commands.selectAll()
+    );
+    const createGroup = this.props.keyboardShortcutsService?.registerKeyPress(
+      "G",
+      "Edit | Create group wrapping selection",
+      async () => {
+        console.log(" KEY GROUP PRESSED, ", commands);
+        return commands.createGroup();
+      }
+    );
+    const hideFromDrd = this.props.keyboardShortcutsService?.registerKeyPress("X", "Edit | Hide from DRD", async () =>
+      commands.hideFromDrd()
+    );
+    const copy = this.props.keyboardShortcutsService?.registerKeyPress("Ctrl+C", "Edit | Copy nodes", async () =>
+      commands.copy()
+    );
+    const cut = this.props.keyboardShortcutsService?.registerKeyPress("Ctrl+X", "Edit | Cut nodes", async () =>
+      commands.cut()
+    );
+    const paste = this.props.keyboardShortcutsService?.registerKeyPress("Ctrl+V", "Edit | Paste nodes", async () =>
+      commands.paste()
+    );
+    const togglePropertiesPanel = this.props.keyboardShortcutsService?.registerKeyPress(
+      "I",
+      "Misc | Open/Close properties panel",
+      async () => commands.togglePropertiesPanel()
+    );
+    const toggleHierarchyHighlight = this.props.keyboardShortcutsService?.registerKeyPress(
+      "H",
+      "Misc | Toggle hierarchy highlights",
+      async () => commands.toggleHierarchyHighlight()
+    );
+    const moveUp = this.props.keyboardShortcutsService.registerKeyPress(
+      "Up",
+      "Move | Move selection up",
+      async () => {}
+    );
+    const moveDown = this.props.keyboardShortcutsService.registerKeyPress(
+      "Down",
+      "Move | Move selection down",
+      async () => {}
+    );
+    const moveLeft = this.props.keyboardShortcutsService.registerKeyPress(
+      "Left",
+      "Move | Move selection left",
+      async () => {}
+    );
+    const moveRight = this.props.keyboardShortcutsService.registerKeyPress(
+      "Right",
+      "Move | Move selection right",
+      async () => {}
+    );
+    const bigMoveUp = this.props.keyboardShortcutsService.registerKeyPress(
+      "Shift + Up",
+      "Move | Move selection up a big distance",
+      async () => {}
+    );
+    const bigMoveDown = this.props.keyboardShortcutsService.registerKeyPress(
+      "Shift + Down",
+      "Move | Move selection down a big distance",
+      async () => {}
+    );
+    const bigMoveLeft = this.props.keyboardShortcutsService.registerKeyPress(
+      "Shift + Left",
+      "Move | Move selection left a big distance",
+      async () => {}
+    );
+    const bigMoveRight = this.props.keyboardShortcutsService.registerKeyPress(
+      "Shift + Right",
+      "Move | Move selection right a big distance",
+      async () => {}
+    );
+    const focusOnBounds = this.props.keyboardShortcutsService?.registerKeyPress(
+      "B",
+      "Navigate | Focus on selection",
+      async () => commands.focusOnSelection()
+    );
+    const resetPosition = this.props.keyboardShortcutsService?.registerKeyPress(
+      "Space",
+      "Navigate | Reset position to origin",
+      async () => commands.resetPosition()
+    );
+    const pan = this.props.keyboardShortcutsService?.registerKeyDownThenUp(
+      "Alt",
+      "Navigate | Hold and drag to Pan",
+      async () => commands.panDown(),
+      async () => commands.panUp()
+    );
+    const zoom = this.props.keyboardShortcutsService?.registerKeyPress(
+      "Ctrl",
+      "Navigate | Hold and scroll to zoom in/out",
+      async () => {}
+    );
+    const navigateHorizontally = this.props.keyboardShortcutsService?.registerKeyPress(
+      "Shift",
+      "Navigate | Hold and scroll to navigate horizontally",
+      async () => {}
+    );
+
+    this.setState((prev) => ({
+      ...prev,
+      keyboardShortcutsRegistred: true,
+      keyboardShortcutsRegisterIds: [
+        bigMoveDown,
+        bigMoveLeft,
+        bigMoveRight,
+        bigMoveUp,
+        cancelAction,
+        copy,
+        createGroup,
+        cut,
+        deleteSelectionBackspace,
+        deleteSelectionDelete,
+        focusOnBounds,
+        hideFromDrd,
+        moveDown,
+        moveLeft,
+        moveRight,
+        moveUp,
+        navigateHorizontally,
+        pan,
+        paste,
+        resetPosition,
+        selectAll,
+        toggleHierarchyHighlight,
+        togglePropertiesPanel,
+        zoom,
+      ],
+    }));
+  }
+
+  public componentWillUnmount() {
+    const keyboardShortcuts = this.dmnEditorRef.current?.getCommands();
+    if (keyboardShortcuts === undefined) {
+      return;
+    }
+
+    this.state.keyboardShortcutsRegisterIds.forEach((id) => {
+      this.props.keyboardShortcutsService?.deregister(id);
+    });
+  }
+
   public render() {
     return (
       <>

packages/dmn-editor/src/DmnEditor.css

@@ -71,6 +71,7 @@
   z-index: 1;
 }
 .kie-dmn-editor--input-data-node {
+  outline: none;
   width: 100%;
   height: 100%;
 }

packages/dmn-editor/src/DmnEditor.tsx

@@ -56,6 +56,7 @@ import { INITIAL_COMPUTED_CACHE } from "./store/computed/initial";
 
 import "@kie-tools/dmn-marshaller/dist/kie-extensions"; // This is here because of the KIE Extension for DMN.
 import "./DmnEditor.css"; // Leave it for last, as this overrides some of the PF and RF styles.
+import { Commands, CommandsContextProvider, useCommands } from "./commands/CommandsContextProvider";
 
 const ON_MODEL_CHANGE_DEBOUNCE_TIME_IN_MS = 500;
 
@@ -64,6 +65,7 @@ const SVG_PADDING = 20;
 export type DmnEditorRef = {
   reset: (mode: DmnLatestModel) => void;
   getDiagramSvg: () => Promise<string | undefined>;
+  getCommands: () => Commands;
 };
 
 export type EvaluationResults = Record<string, any>;
@@ -170,14 +172,13 @@ export const DmnEditorInternal = ({
   const navigationTab = useDmnEditorStore((s) => s.navigation.tab);
   const dmn = useDmnEditorStore((s) => s.dmn);
   const isDiagramEditingInProgress = useDmnEditorStore((s) => s.computed(s).isDiagramEditingInProgress());
-
   const dmnEditorStoreApi = useDmnEditorStoreApi();
+  const { commandsRef } = useCommands();
 
   const { dmnModelBeforeEditingRef, dmnEditorRootElementRef } = useDmnEditor();
   const { externalModelsByNamespace } = useExternalModels();
 
   // Refs
-
   const diagramRef = useRef<DiagramRef>(null);
   const diagramContainerRef = useRef<HTMLDivElement>(null);
   const beeContainerRef = useRef<HTMLDivElement>(null);
@@ -232,8 +233,9 @@ export const DmnEditorInternal = ({
 
         return new XMLSerializer().serializeToString(svg);
       },
+      getCommands: () => commandsRef.current,
     }),
-    [dmnEditorStoreApi, externalModelsByNamespace]
+    [dmnEditorStoreApi, externalModelsByNamespace, commandsRef]
   );
 
   // Make sure the DMN Editor reacts to props changing.
@@ -406,7 +408,9 @@ export const DmnEditor = React.forwardRef((props: DmnEditorProps, ref: React.Ref
       <ErrorBoundary FallbackComponent={DmnEditorErrorFallback} onReset={resetState}>
         <DmnEditorExternalModelsContextProvider {...props}>
           <DmnEditorStoreApiContext.Provider value={storeRef.current}>
-            <DmnEditorInternal forwardRef={ref} {...props} />
+            <CommandsContextProvider>
+              <DmnEditorInternal forwardRef={ref} {...props} />
+            </CommandsContextProvider>
           </DmnEditorStoreApiContext.Provider>
         </DmnEditorExternalModelsContextProvider>
       </ErrorBoundary>

packages/dmn-editor/src/commands/CommandsContextProvider.tsx

@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import { useContext, useRef } from "react";
+
+export interface Commands {
+  hideFromDrd: () => void;
+  toggleHierarchyHighlight: () => void;
+  togglePropertiesPanel: () => void;
+  createGroup: () => void;
+  selectAll: () => void;
+  panDown: () => void;
+  panUp: () => void;
+  paste: () => void;
+  copy: () => void;
+  cut: () => void;
+  cancelAction: () => void;
+  focusOnSelection: () => void;
+  resetPosition: () => void;
+}
+
+const CommandsContext = React.createContext<{
+  commandsRef: React.MutableRefObject<Commands>;
+}>({} as any);
+
+export function useCommands() {
+  return useContext(CommandsContext);
+}
+
+export function CommandsContextProvider(props: React.PropsWithChildren<{}>) {
+  const commandsRef = useRef<Commands>({
+    hideFromDrd: () => {},
+    toggleHierarchyHighlight: () => {},
+    togglePropertiesPanel: () => {},
+    createGroup: () => {},
+    selectAll: () => {},
+    panDown: () => {},
+    panUp: () => {},
+    paste: () => {},
+    copy: () => {},
+    cut: () => {},
+    cancelAction: () => {},
+    focusOnSelection: () => {},
+    resetPosition: () => {},
+  });
+
+  return <CommandsContext.Provider value={{ commandsRef }}>{props.children}</CommandsContext.Provider>;
+}