Merge pull request #15 from yWorks/dev

3.0.0 - yFiles for HTML 3.0

Author: anneeberle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yworks/react-yfiles-core",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "author": {
     "name": "yFiles for HTML team @ yWorks GmbH",
     "email": "[email protected]"
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "yfiles": ">=26"
+    "@yfiles/yfiles": ">=30"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/context-menu/ContextMenu.tsx

@@ -6,16 +6,8 @@ import {
   useLayoutEffect,
   useState
 } from 'react'
-import {
-  GraphComponent,
-  GraphViewerInputMode,
-  IModelItem,
-  Point,
-  PopulateItemContextMenuEventArgs,
-  TouchEventArgs
-} from 'yfiles'
+import { GraphViewerInputMode, IModelItem, PopulateItemContextMenuEventArgs } from '@yfiles/yfiles'
 import { useGraphComponent } from '../graph-component/GraphComponentProvider.tsx'
-import { BrowserDetection } from '../utils/BrowserDetection.ts'
 import './ContextMenu.css'
 import { DefaultRenderMenu } from './DefaultRenderMenu.tsx'
 
@@ -95,19 +87,6 @@ export function ContextMenu<TDataItem>({
 
   const graphComponent = useGraphComponent()!
 
-  const openContextMenu = useCallback(
-    (worldLocation: Point) => {
-      const showMenu = (
-        graphComponent.inputMode as GraphViewerInputMode
-      ).contextMenuInputMode.shouldOpenMenu(worldLocation)
-      if (showMenu) {
-        setMenuVisible(true)
-        setMenuLocation(graphComponent.toViewCoordinates(worldLocation))
-      }
-    },
-    [graphComponent]
-  )
-
   const populateContextMenu = useCallback(
     (args: PopulateItemContextMenuEventArgs<IModelItem>) => {
       const modelItem = args.item
@@ -123,77 +102,33 @@ export function ContextMenu<TDataItem>({
    * Registers the context menu listeners.
    */
   useLayoutEffect(() => {
-    const componentDiv = graphComponent.div
-    const contextMenuListener = (evt: MouseEvent) => {
-      evt.preventDefault()
-      openContextMenu(graphComponent.toWorldFromPage({ x: evt.pageX, y: evt.pageY }))
-    }
-
-    // Listen for the contextmenu event
-    // Note: On Linux based systems (e.g. Ubuntu), the contextmenu event is fired on mouse down
-    // which triggers the ContextMenuInputMode before the ClickInputMode. Therefore, handling the
-    // event, will prevent the ItemRightClicked event from firing.
-    // For more information, see https://docs.yworks.com/yfileshtml/#/kb/article/780/
-    componentDiv.addEventListener('contextmenu', contextMenuListener, false)
-
-    let touchDownListener: (_: GraphComponent, evt: TouchEventArgs) => void | null
-    let touchUpListener: (_: GraphComponent, evt: TouchEventArgs) => void | null
-    if (BrowserDetection.safariVersion > 0 || BrowserDetection.iOSVersion > 0) {
-      // Additionally add a long press listener especially for iOS, since it does not fire the contextmenu event.
-      let contextMenuTimer: ReturnType<typeof setTimeout> | undefined
-      touchDownListener = (_: GraphComponent, evt: TouchEventArgs) => {
-        contextMenuTimer = setTimeout(() => {
-          openContextMenu(evt.location)
-        }, 500)
-      }
-      graphComponent.addTouchDownListener(touchDownListener)
-      touchUpListener = () => {
-        clearTimeout(contextMenuTimer!)
-      }
-      graphComponent.addTouchUpListener(touchUpListener)
-    }
-
-    // Listen to the context menu key to make it work in Chrome
-    const contextMenuKeyListener = (evt: KeyboardEvent) => {
-      if (evt.key === 'ContextMenu') {
-        evt.preventDefault()
-        openContextMenu(graphComponent.toWorldFromPage(getCenterInPage(componentDiv)))
-      }
-    }
-    componentDiv.addEventListener('keyup', contextMenuKeyListener)
-
     // register the close listener
     const closeMenuListener = () => {
       setMenuVisible(false)
     }
     const inputMode = graphComponent.inputMode as GraphViewerInputMode
-    inputMode.contextMenuInputMode.addCloseMenuListener(closeMenuListener)
+    inputMode.contextMenuInputMode.addEventListener('menu-closed', closeMenuListener)
 
     // register populate items listener
-    const populateContextMenuListener = (
-      _: GraphViewerInputMode,
-      args: PopulateItemContextMenuEventArgs<IModelItem>
-    ) => {
+    const populateContextMenuListener = (event: PopulateItemContextMenuEventArgs<IModelItem>) => {
       // select the item
-      if (args.item) {
+      if (event.item) {
         graphComponent.selection.clear()
-        graphComponent.selection.setSelected(args.item, true)
+        graphComponent.selection.add(event.item)
       }
+      setMenuVisible(true)
+      setMenuLocation(graphComponent.worldToViewCoordinates(event.queryLocation))
       // populate the menu
-      populateContextMenu(args)
+      populateContextMenu(event)
     }
-    inputMode.addPopulateItemContextMenuListener(populateContextMenuListener)
+    inputMode.addEventListener('populate-item-context-menu', populateContextMenuListener)
 
     return () => {
       // cleanup
-      componentDiv.removeEventListener('contextmenu', contextMenuListener)
-      componentDiv.removeEventListener('keyup', contextMenuKeyListener)
-      inputMode.contextMenuInputMode.removeCloseMenuListener(closeMenuListener)
-      inputMode.removePopulateItemContextMenuListener(populateContextMenuListener)
-      touchDownListener && graphComponent.removeTouchDownListener(touchDownListener)
-      touchUpListener && graphComponent.removeTouchUpListener(touchUpListener)
+      inputMode.contextMenuInputMode.removeEventListener('menu-closed', closeMenuListener)
+      inputMode.removeEventListener('populate-item-context-menu', populateContextMenuListener)
     }
-  }, [graphComponent, openContextMenu, populateContextMenu])
+  }, [graphComponent, populateContextMenu])
 
   return (
     <>
@@ -249,17 +184,3 @@ function ContextMenuCore<TDataItem>({
     )
   )
 }
-
-/**
- * Helper function to determine the page's center location.
- */
-function getCenterInPage(element: HTMLElement): { x: number; y: number } {
-  let left = element.clientWidth / 2.0
-  let top = element.clientHeight / 2.0
-  while (element.offsetParent) {
-    left += element.offsetLeft
-    top += element.offsetTop
-    element = element.offsetParent as HTMLElement
-  }
-  return { x: left, y: top }
-}

src/controls/DefaultControlButtons.tsx

@@ -1,6 +1,6 @@
 import { ControlButton } from './Controls.tsx'
 import { useGraphComponent } from '../graph-component/GraphComponentProvider.tsx'
-import { ICommand } from 'yfiles'
+import { Command } from '@yfiles/yfiles'
 
 /**
  * A function returning the default control buttons to be used in {@link ControlsProps.buttons}.
@@ -14,22 +14,22 @@ export function DefaultControlButtons(): ControlButton[] {
 
   const items: ControlButton[] = []
   items.push({
-    action: () => ICommand.INCREASE_ZOOM.execute(null, graphComponent),
+    action: () => graphComponent.executeCommand(Command.INCREASE_ZOOM, null),
     className: 'yfiles-react-controls__button--zoom-in',
     tooltip: 'Increase zoom'
   })
   items.push({
-    action: () => ICommand.ZOOM.execute(1.0, graphComponent),
+    action: () => graphComponent.executeCommand(Command.ZOOM, 1.0),
     className: 'yfiles-react-controls__button--zoom-original',
     tooltip: 'Zoom to original size'
   })
   items.push({
-    action: () => ICommand.DECREASE_ZOOM.execute(null, graphComponent),
+    action: () => graphComponent.executeCommand(Command.DECREASE_ZOOM, null),
     className: 'yfiles-react-controls__button--zoom-out',
     tooltip: 'Decrease zoom'
   })
   items.push({
-    action: () => ICommand.FIT_GRAPH_BOUNDS.execute(null, graphComponent),
+    action: () => graphComponent.executeCommand(Command.FIT_GRAPH_BOUNDS, null),
     className: 'yfiles-react-controls__button--zoom-fit',
     tooltip: 'Fit content'
   })

src/graph-component/EdgeStyles.ts

@@ -1,4 +1,4 @@
-import { Arrow as YArrow, ArrowType, IArrow, PolylineEdgeStyle, Stroke } from 'yfiles'
+import { Arrow as YArrow, ArrowType, IArrow, PolylineEdgeStyle, Stroke } from '@yfiles/yfiles'
 
 /**
  * A connection style configuration.
@@ -37,7 +37,17 @@ export interface Arrow {
   /**
    * The shape of the arrow.
    */
-  type?: 'circle' | 'cross' | 'default' | 'diamond' | 'none' | 'short' | 'simple' | 'triangle'
+  type?:
+    | 'ellipse'
+    | 'cross'
+    | 'stealth'
+    | 'diamond'
+    | 'none'
+    | 'open'
+    | 'triangle'
+    | 'deltoid'
+    | 'kite'
+    | 'chevron'
 }
 
 /**
@@ -62,12 +72,12 @@ export function convertToPolylineEdgeStyle(style: EdgeStyle) {
 function convertArrow(style: EdgeStyle, isSource = false): IArrow {
   const arrow = isSource ? style.sourceArrow : style.targetArrow
   if (!arrow) {
-    return IArrow.NONE
+    return new YArrow(ArrowType.NONE)
   }
   const arrowColor = arrow.color ?? (style.className ? 'currentColor' : 'black')
   return new YArrow({
     stroke: `${(style.thickness ?? 1) * 0.5}px ${arrowColor}`,
     fill: arrowColor,
-    type: arrow.type ? ArrowType.from(arrow.type) : 'default'
+    type: arrow.type ?? 'stealth'
   })
 }

src/graph-component/GraphComponentProvider.tsx

@@ -5,7 +5,7 @@ import React, {
   useLayoutEffect,
   useMemo
 } from 'react'
-import { GraphComponent, ScrollBarVisibility } from 'yfiles'
+import { GraphComponent, ScrollBarVisibility } from '@yfiles/yfiles'
 
 const GraphComponentContext = createContext<GraphComponent | null>(null)
 
@@ -34,13 +34,13 @@ export function withGraphComponentProvider<
   return (props: React.ComponentProps<T>) => {
     const graphComponent = useMemo(() => {
       const graphComponent = new GraphComponent()
-      graphComponent.div.style.width = '100%'
-      graphComponent.div.style.height = '100%'
-      graphComponent.div.style.minWidth = '400px'
-      graphComponent.div.style.minHeight = '400px'
+      graphComponent.htmlElement.style.width = '100%'
+      graphComponent.htmlElement.style.height = '100%'
+      graphComponent.htmlElement.style.minWidth = '400px'
+      graphComponent.htmlElement.style.minHeight = '400px'
       // scrollbar styling
-      graphComponent.horizontalScrollBarPolicy = ScrollBarVisibility.AS_NEEDED_DYNAMIC
-      graphComponent.verticalScrollBarPolicy = ScrollBarVisibility.AS_NEEDED_DYNAMIC
+      graphComponent.horizontalScrollBarPolicy = ScrollBarVisibility.AUTO
+      graphComponent.verticalScrollBarPolicy = ScrollBarVisibility.AUTO
       return graphComponent
     }, [])
 
@@ -64,14 +64,14 @@ export function useAddGraphComponent(
     if (parentRef.current) {
       const firstChild = parentRef.current.firstChild
       if (firstChild) {
-        parentRef.current.insertBefore(graphComponent.div, firstChild)
+        parentRef.current.insertBefore(graphComponent.htmlElement, firstChild)
       } else {
-        parentRef.current.appendChild(graphComponent.div)
+        parentRef.current.appendChild(graphComponent.htmlElement)
       }
     }
     return () => {
       if (parentRef.current) {
-        parentRef.current.removeChild(graphComponent.div)
+        parentRef.current.removeChild(graphComponent.htmlElement)
       }
     }
   }, [])

src/graph-component/ReactComponentHtmlGroupNodeStyle.ts

@@ -1,5 +1,5 @@
 import { ComponentType, Dispatch, SetStateAction } from 'react'
-import type { GraphComponent, INode, IRenderContext } from 'yfiles'
+import type { GraphComponent, INode, IRenderContext } from '@yfiles/yfiles'
 import {
   defaultTagProvider,
   NodeRenderInfo,

src/graph-component/ReactComponentHtmlNodeStyle.ts

@@ -5,8 +5,8 @@ import type {
   IRenderContext,
   TypedHtmlVisual,
   Visual
-} from 'yfiles'
-import { HtmlVisual, NodeStyleBase } from 'yfiles'
+} from '@yfiles/yfiles'
+import { HtmlVisual, NodeStyleBase } from '@yfiles/yfiles'
 import { ComponentType, Dispatch, memo, SetStateAction } from 'react'
 
 /**
@@ -119,7 +119,7 @@ export class ReactComponentHtmlNodeStyle<TDataItem> extends NodeStyleBase<
     const graphComponent = context.canvasComponent as GraphComponent
     const inputMode = graphComponent.inputMode as GraphInputMode
     return {
-      selected: graphComponent.selection.isSelected(node),
+      selected: graphComponent.selection.includes(node),
       hovered: inputMode?.itemHoverInputMode.currentHoverItem === node,
       focused: graphComponent.currentItem === node,
       width: node.layout.width,

src/graph-component/ReactNodeRendering.tsx

@@ -11,7 +11,7 @@ import {
   useRef,
   useState
 } from 'react'
-import { FilteredGraphWrapper, GraphComponent, IGraph, INode, Rect } from 'yfiles'
+import { FilteredGraphWrapper, GraphComponent, IGraph, INode, Rect } from '@yfiles/yfiles'
 import {
   NodeRenderInfo,
   ReactComponentHtmlNodeStyle,