REA-462: Adapt react-yfiles-process-mining to HTML 3.0

Author: jiasheng1100

docs/introduction/GettingStarted.mdx

@@ -31,7 +31,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
 
    Add the yFiles dependency:
    ```
-   npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
+   npm install <yFiles package path>/lib-dev/yfiles-30.0.0+dev.tgz
    ```
 
    <details>
@@ -43,7 +43,7 @@ You can learn how to work with the yFiles npm module in our [Developer’s Guide
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "yfiles": "./lib-dev/yfiles-26.0.0.tgz"
+        "@yfiles/yfiles": "./lib-dev/yfiles-30.0.0.tgz"
      }
    ```
    </details>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yworks/react-yfiles-process-mining",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "author": {
     "name": "yFiles for HTML team @ yWorks GmbH",
     "email": "[email protected]"
@@ -50,7 +50,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "yfiles": "^26.0.0"
+    "@yfiles/yfiles": ">=30"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/ProcessMining.tsx

@@ -25,7 +25,13 @@ import {
   useReactNodeRendering,
   withGraphComponent
 } from '@yworks/react-yfiles-core'
-import { ClickEventArgs, GraphViewerInputMode, ICanvasObject, IEdge, INode } from 'yfiles'
+import {
+  ClickEventArgs,
+  GraphViewerInputMode,
+  IEdge,
+  INode,
+  IRenderTreeElement
+} from '@yfiles/yfiles'
 import {
   ProcessMiningProvider,
   useProcessMiningContext,
@@ -274,14 +280,14 @@ export interface ProcessMiningProps<TEvent extends ActivityEvent, TNeedle> {
    * The optional position of the popup. The default is 'north'.
    */
   popupPosition?:
-    | 'east'
-    | 'north'
-    | 'north-east'
-    | 'north-west'
-    | 'south'
-    | 'south-east'
-    | 'south-west'
-    | 'west'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'top-right'
+    | 'top-left'
+    | 'bottom-right'
+    | 'bottom-left'
   /**
    * An optional component used for rendering a custom popup.
    */
@@ -414,7 +420,7 @@ const ProcessMiningCore = withGraphComponent(
     }, [])
 
     useEffect(() => {
-      checkStylesheetLoaded(graphComponent.div, 'react-yfiles-process-mining')
+      checkStylesheetLoaded(graphComponent.htmlElement, 'react-yfiles-process-mining')
     }, [])
 
     useEffect(() => {
@@ -440,7 +446,7 @@ const ProcessMiningCore = withGraphComponent(
     }, [transitionStyles])
 
     useEffect(() => {
-      let heatMapCanvasObject: ICanvasObject | null = null
+      let heatMapCanvasObject: IRenderTreeElement | null = null
 
       if (showHeatmap) {
         // this function provides the heat for a node or edge at a specific time
@@ -455,14 +461,14 @@ const ProcessMiningCore = withGraphComponent(
 
       return () => {
         if (heatMapCanvasObject) {
-          heatMapCanvasObject.remove()
+          heatMapCanvasObject.renderTree.remove(heatMapCanvasObject)
           heatMapCanvasObject = null
         }
       }
     }, [graphComponent, showHeatmap, timestamp])
 
     useEffect(() => {
-      transitionEventVisualSupport.hideVisual()
+      transitionEventVisualSupport.hideVisual(graphComponent)
       if (showTransitionEvents) {
         // add the item visual to be able to render dots for the traversing events
         transitionEventVisualSupport.showVisual(graphComponent)
@@ -492,16 +498,17 @@ const ProcessMiningCore = withGraphComponent(
       return () => {
         // clean up
         hoverItemChangedListener &&
-          (
-            graphComponent.inputMode as GraphViewerInputMode
-          ).itemHoverInputMode.removeHoveredItemChangedListener(hoverItemChangedListener)
+          (graphComponent.inputMode as GraphViewerInputMode).itemHoverInputMode.removeEventListener(
+            'hovered-item-changed',
+            hoverItemChangedListener
+          )
       }
     }, [onItemHover])
 
     useEffect(() => {
       let transitionEventsClickedListener: (
-        inputMode: GraphViewerInputMode,
-        event: ClickEventArgs
+        event: ClickEventArgs,
+        inputMode: GraphViewerInputMode
       ) => void
 
       if (showTransitionEvents) {
@@ -515,10 +522,12 @@ const ProcessMiningCore = withGraphComponent(
       return () => {
         // clean up
         if (transitionEventsClickedListener) {
-          ;(graphComponent.inputMode as GraphViewerInputMode).removeCanvasClickedListener(
+          ;(graphComponent.inputMode as GraphViewerInputMode).removeEventListener(
+            'canvas-clicked',
             transitionEventsClickedListener
           )
-          ;(graphComponent.inputMode as GraphViewerInputMode).removeItemClickedListener(
+          ;(graphComponent.inputMode as GraphViewerInputMode).removeEventListener(
+            'item-clicked',
             transitionEventsClickedListener
           )
         }
@@ -533,9 +542,11 @@ const ProcessMiningCore = withGraphComponent(
       return () => {
         // clean up the listeners
         currentItemChangedListener &&
-          graphComponent.removeCurrentItemChangedListener(currentItemChangedListener)
+          graphComponent.removeEventListener('current-item-changed', currentItemChangedListener)
+        selectedItemChangedListener &&
+          graphComponent.selection.removeEventListener('item-added', selectedItemChangedListener)
         selectedItemChangedListener &&
-          graphComponent.selection.removeItemSelectionChangedListener(selectedItemChangedListener)
+          graphComponent.selection.removeEventListener('item-removed', selectedItemChangedListener)
       }
     }, [onItemFocus, onItemSelect])
 

src/ProcessMiningModel.ts

@@ -1,4 +1,4 @@
-import { GraphComponent } from 'yfiles'
+import { GraphComponent } from '@yfiles/yfiles'
 import { ExportSettings, PrintSettings } from '@yworks/react-yfiles-core'
 import { ProcessStep, Transition } from './core/process-graph-extraction.ts'
 import { ActivityEvent, LayoutOptions } from './ProcessMining.tsx'

src/ProcessMiningProvider.tsx

@@ -11,17 +11,17 @@ import {
 import { ProcessMiningModel, ProcessMiningModelInternal } from './ProcessMiningModel.ts'
 import {
   GraphComponent,
-  HierarchicLayout,
-  HierarchicLayoutData,
-  HierarchicLayoutEdgeLayoutDescriptor,
-  HierarchicLayoutEdgeRoutingStyle,
-  HierarchicLayoutRoutingStyle,
-  ICommand,
+  HierarchicalLayout,
+  HierarchicalLayoutData,
+  HierarchicalLayoutEdgeDescriptor,
+  HierarchicalLayoutRoutingStyle,
+  RoutingStyleDescriptor,
+  Command,
   IGraph,
   INode,
   MutableRectangle,
-  NodeHalo
-} from 'yfiles'
+  Insets
+} from '@yfiles/yfiles'
 import { getProcessStepData, ProcessStep, Transition } from './core/process-graph-extraction.ts'
 import { AnimationController } from './animation/AnimationController.ts'
 import { ActivityEvent, LayoutOptions } from './ProcessMining.tsx'
@@ -242,32 +242,32 @@ export function createProcessMiningModel<TEvent extends ActivityEvent>(
 
     async applyLayout(layoutOptions = defaultLayoutOptions, morphLayout = false) {
       if (_showTransitionEvents && _eventLog) {
-        _transitionEventVisualSupport.hideVisual()
+        _transitionEventVisualSupport.hideVisual(graphComponent)
         _transitionEventVisualSupport.clearItems()
       }
 
-      const layout = new HierarchicLayout({
+      const layout = new HierarchicalLayout({
         layoutOrientation: layoutOptions.direction,
         minimumLayerDistance: layoutOptions.minimumLayerDistance,
-        nodeToNodeDistance: layoutOptions.nodeToNodeDistance,
+        nodeDistance: layoutOptions.nodeToNodeDistance,
         nodeToEdgeDistance: layoutOptions.nodeToEdgeDistance,
-        maximumDuration: layoutOptions.maximumDuration,
+        stopDuration: layoutOptions.maximumDuration,
         automaticEdgeGrouping: layoutOptions.edgeGrouping,
-        edgeLayoutDescriptor: new HierarchicLayoutEdgeLayoutDescriptor({
-          routingStyle: new HierarchicLayoutRoutingStyle(
-            HierarchicLayoutEdgeRoutingStyle.CURVED,
+        defaultEdgeDescriptor: new HierarchicalLayoutEdgeDescriptor({
+          routingStyleDescriptor: new RoutingStyleDescriptor(
+            HierarchicalLayoutRoutingStyle.CURVED,
             false
           )
         })
       })
-      const layoutData = new HierarchicLayoutData({
-        nodeHalos: () => NodeHalo.create(5)
+      const layoutData = new HierarchicalLayoutData({
+        nodeMargins: new Insets(5)
       })
-      await graphComponent.morphLayout({
+      await graphComponent.applyLayoutAnimated({
         layout,
-        morphDuration: morphLayout ? '1s' : '0s',
+        animationDuration: morphLayout ? '1s' : '0s',
         layoutData,
-        targetBoundsInsets: 50
+        targetBoundsPadding: 50
       })
 
       if (_showTransitionEvents && _eventLog) {
@@ -291,19 +291,19 @@ export function createProcessMiningModel<TEvent extends ActivityEvent>(
     zoomTo,
 
     zoomIn() {
-      ICommand.INCREASE_ZOOM.execute(null, graphComponent)
+      graphComponent.executeCommand(Command.INCREASE_ZOOM, null)
     },
 
     zoomOut() {
-      ICommand.DECREASE_ZOOM.execute(null, graphComponent)
+      graphComponent.executeCommand(Command.DECREASE_ZOOM, null)
     },
 
     zoomToOriginal() {
-      ICommand.ZOOM.execute(1.0, graphComponent)
+      graphComponent.executeCommand(Command.ZOOM, 1.0)
     },
 
     fitContent() {
-      ICommand.FIT_GRAPH_BOUNDS.execute(null, graphComponent)
+      graphComponent.executeCommand(Command.FIT_GRAPH_BOUNDS, null)
     },
 
     async exportToSvg(exportSettings: ExportSettings) {

src/animation/AnimationController.ts

@@ -1,4 +1,4 @@
-import { Animator, GraphComponent } from 'yfiles'
+import { Animator, GraphComponent } from '@yfiles/yfiles'
 
 /**
  * This controller manages the animation of the heatmap and transition events.
@@ -15,7 +15,7 @@ export class AnimationController {
   constructor(public graphComponent: GraphComponent) {
     this.running = false
     this.animator = new Animator({
-      canvas: graphComponent,
+      canvasComponent: graphComponent,
       allowUserInteraction: true,
       autoInvalidation: true
     })

src/core/SingleSelectionHelper.ts

@@ -4,14 +4,16 @@ import {
   GraphComponent,
   GraphInputMode,
   GraphItemTypes,
-  ICommand,
+  Command,
   IModelItem,
-  KeyboardInputModeBinding
-} from 'yfiles'
+  KeyboardInputModeBinding,
+  ExecuteCommandArgs,
+  CanExecuteCommandArgs
+} from '@yfiles/yfiles'
 
 // TODO move to core?
 
-type Recognizer = (eventSource: any, evt: EventArgs) => boolean
+type Recognizer = (evt: EventArgs, eventSource: any) => boolean
 
 let commandBindings: KeyboardInputModeBinding[] = []
 
@@ -32,13 +34,13 @@ export function disableSingleSelection(graphComponent: GraphComponent) {
   }
 
   // re-activate commands
-  mode.availableCommands.add(ICommand.TOGGLE_ITEM_SELECTION)
-  mode.availableCommands.add(ICommand.SELECT_ALL)
+  mode.availableCommands.add(Command.TOGGLE_ITEM_SELECTION)
+  mode.availableCommands.add(Command.SELECT_ALL)
 
-  mode.navigationInputMode.availableCommands.add(ICommand.EXTEND_SELECTION_LEFT)
-  mode.navigationInputMode.availableCommands.add(ICommand.EXTEND_SELECTION_UP)
-  mode.navigationInputMode.availableCommands.add(ICommand.EXTEND_SELECTION_DOWN)
-  mode.navigationInputMode.availableCommands.add(ICommand.EXTEND_SELECTION_RIGHT)
+  mode.navigationInputMode.availableCommands.add(Command.EXTEND_SELECTION_LEFT)
+  mode.navigationInputMode.availableCommands.add(Command.EXTEND_SELECTION_UP)
+  mode.navigationInputMode.availableCommands.add(Command.EXTEND_SELECTION_DOWN)
+  mode.navigationInputMode.availableCommands.add(Command.EXTEND_SELECTION_RIGHT)
 
   // remove the previously registered command bindings
   for (const binding of commandBindings) {
@@ -61,26 +63,35 @@ export function enableSingleSelection(graphComponent: GraphComponent) {
   mode.multiSelectionRecognizer = EventRecognizers.NEVER
 
   // deactivate commands that can lead to multi selection
-  mode.availableCommands.remove(ICommand.TOGGLE_ITEM_SELECTION)
-  mode.availableCommands.remove(ICommand.SELECT_ALL)
+  mode.availableCommands.remove(Command.TOGGLE_ITEM_SELECTION)
+  mode.availableCommands.remove(Command.SELECT_ALL)
 
-  mode.navigationInputMode.availableCommands.remove(ICommand.EXTEND_SELECTION_LEFT)
-  mode.navigationInputMode.availableCommands.remove(ICommand.EXTEND_SELECTION_UP)
-  mode.navigationInputMode.availableCommands.remove(ICommand.EXTEND_SELECTION_DOWN)
-  mode.navigationInputMode.availableCommands.remove(ICommand.EXTEND_SELECTION_RIGHT)
+  mode.navigationInputMode.availableCommands.remove(Command.EXTEND_SELECTION_LEFT)
+  mode.navigationInputMode.availableCommands.remove(Command.EXTEND_SELECTION_UP)
+  mode.navigationInputMode.availableCommands.remove(Command.EXTEND_SELECTION_DOWN)
+  mode.navigationInputMode.availableCommands.remove(Command.EXTEND_SELECTION_RIGHT)
 
   // add dummy command bindings that do nothing in order to prevent default behavior
-  commandBindings.push(mode.keyboardInputMode.addCommandBinding(ICommand.EXTEND_SELECTION_LEFT))
-  commandBindings.push(mode.keyboardInputMode.addCommandBinding(ICommand.EXTEND_SELECTION_UP))
-  commandBindings.push(mode.keyboardInputMode.addCommandBinding(ICommand.EXTEND_SELECTION_DOWN))
-  commandBindings.push(mode.keyboardInputMode.addCommandBinding(ICommand.EXTEND_SELECTION_RIGHT))
+  const dummyExecutedHandler = (_: ExecuteCommandArgs) => {}
+  commandBindings.push(
+    mode.keyboardInputMode.addCommandBinding(Command.EXTEND_SELECTION_LEFT, dummyExecutedHandler)
+  )
+  commandBindings.push(
+    mode.keyboardInputMode.addCommandBinding(Command.EXTEND_SELECTION_UP, dummyExecutedHandler)
+  )
+  commandBindings.push(
+    mode.keyboardInputMode.addCommandBinding(Command.EXTEND_SELECTION_DOWN, dummyExecutedHandler)
+  )
+  commandBindings.push(
+    mode.keyboardInputMode.addCommandBinding(Command.EXTEND_SELECTION_RIGHT, dummyExecutedHandler)
+  )
 
   // add custom binding for toggle item selection
   commandBindings.push(
     mode.keyboardInputMode.addCommandBinding(
-      ICommand.TOGGLE_ITEM_SELECTION,
-      (command, parameter) => toggleItemSelectionExecuted(graphComponent, parameter),
-      (command, parameter) => toggleItemSelectionCanExecute(graphComponent, parameter)
+      Command.TOGGLE_ITEM_SELECTION,
+      (evt: ExecuteCommandArgs) => toggleItemSelectionExecuted(graphComponent, evt.parameter),
+      (evt: CanExecuteCommandArgs) => toggleItemSelectionCanExecute(graphComponent, evt.parameter)
     )
   )
   // Also clear the selection - even though the setup works when more than one item is selected, it looks a bit
@@ -105,7 +116,7 @@ function toggleItemSelectionCanExecute(graphComponent: GraphComponent, parameter
  * @param graphComponent The given graphComponent
  * @param parameter The given parameter
  */
-function toggleItemSelectionExecuted(graphComponent: GraphComponent, parameter: any): boolean {
+function toggleItemSelectionExecuted(graphComponent: GraphComponent, parameter: any): void {
   // get the item
   const modelItem = parameter instanceof IModelItem ? parameter : graphComponent.currentItem
   const inputMode = graphComponent.inputMode as GraphInputMode
@@ -117,10 +128,10 @@ function toggleItemSelectionExecuted(graphComponent: GraphComponent, parameter:
     !GraphItemTypes.itemIsOfTypes(inputMode.selectableItems, modelItem) ||
     !inputMode.graphSelection
   ) {
-    return false
+    return
   }
 
-  const isSelected = inputMode.graphSelection.isSelected(modelItem)
+  const isSelected = inputMode.graphSelection.includes(modelItem)
   if (isSelected) {
     // the item is selected and needs to be unselected - just clear the selection
     inputMode.graphSelection.clear()
@@ -129,5 +140,4 @@ function toggleItemSelectionExecuted(graphComponent: GraphComponent, parameter:
     inputMode.graphSelection.clear()
     inputMode.setSelected(modelItem, true)
   }
-  return true
 }