@dxos/react-ui-canvas 0.7.5-main.9d2a38b → 0.7.5-main.b19bfc8

package/src/hooks/useWheel.tsx

@@ -3,36 +3,54 @@
 //
 
 import { bindAll } from 'bind-event-listener';
-import { type Dispatch, type SetStateAction, useEffect } from 'react';
+import { useEffect } from 'react';
 
-import { getZoomTransform, type ProjectionState } from './projection';
+import { getZoomTransform } from './projection';
+import { useCanvasContext } from './useCanvasContext';
 import { getRelativePoint } from '../util';
 
+export type WheelOptions = {
+  zoom?: boolean;
+};
+
+const defaultOptions: WheelOptions = {
+  zoom: true,
+};
+
 /**
  * Handle wheel events to update the transform state (zoom and offset).
  */
-export const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {
+export const useWheel = (options: WheelOptions = defaultOptions) => {
+  const { root, setProjection } = useCanvasContext();
   useEffect(() => {
-    if (!el) {
+    if (!root) {
       return;
     }
 
-    return bindAll(el, [
+    return bindAll(root, [
       {
         type: 'wheel',
         options: { capture: true, passive: false },
         listener: (ev: WheelEvent) => {
+          const zooming = isWheelZooming(ev);
+          if (!hasFocus(root) && !zooming) {
+            return;
+          }
+
           ev.preventDefault();
+          if (zooming && !options.zoom) {
+            return;
+          }
 
           // Zoom or pan.
           if (ev.ctrlKey) {
-            if (!el) {
+            if (!root) {
               return;
             }
 
             // Keep centered while zooming.
             setProjection(({ scale, offset }) => {
-              const pos = getRelativePoint(el, ev);
+              const pos = getRelativePoint(root, ev);
               const scaleSensitivity = 0.01;
               const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);
               return getZoomTransform({ scale, offset, newScale, pos });
@@ -51,5 +69,39 @@ export const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetS
         },
       },
     ]);
-  }, [el, setProjection]);
+  }, [root]);
+};
+
+const isWheelZooming = (ev: WheelEvent): boolean => {
+  // Check for ctrl/cmd key + wheel action.
+  if (ev.ctrlKey || ev.metaKey) {
+    // Some browsers use deltaY, others deltaZ for zoom.
+    return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;
+  }
+
+  return false;
+};
+
+const hasFocus = (element: HTMLElement): boolean => {
+  const activeElement = document.activeElement;
+  if (!activeElement) {
+    return false;
+  }
+
+  // Handle shadow DOM.
+  let shadowActive = activeElement;
+  while (shadowActive?.shadowRoot?.activeElement) {
+    shadowActive = shadowActive.shadowRoot.activeElement;
+  }
+
+  // Check if element or any parent has focus.
+  let current: HTMLElement | null = element;
+  while (current) {
+    if (current === activeElement || current === shadowActive) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+
+  return false;
 };

package/src/util/svg.stories.tsx

@@ -13,7 +13,7 @@ import { Arrow, createPath } from './svg';
 import { testId } from './util';
 
 const Render = () => (
-  <svg className='border border-neutral-500 w-[400px] h-[400px]'>
+  <svg className='border border-neutral-500 w-[30rem] h-[400px]'>
     <defs>
       <Arrow id='arrow-start' classNames='fill-none stroke-red-500' dir='start' />
       <Arrow id='arrow-end' classNames='fill-none stroke-red-500' dir='end' />

package/src/util/svg.tsx

@@ -28,8 +28,8 @@ export const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?:
       <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />
       <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />
       <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />
-      <Marker id={`${id}-circle`} pos={{ x: 6, y: 6 }} size={{ width: 12, height: 12 }}>
-        <circle cx={6} cy={6} r={5} stroke={'context-stroke'} className={mx(classNames)} />
+      <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>
+        <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />
       </Marker>
     </>
   );

package/src/util/util.ts

@@ -36,4 +36,15 @@ export const testId = <ID = string>(id: ID, inspect = false) => {
   return { [DATA_TEST_ID]: id };
 };
 
+export const inspectElement = (el: Element) => {
+  (window as any).INSPECT = () => {
+    (window as any).inspect(el);
+    (window as any).element = el;
+    // eslint-disable-next-line no-console
+    console.log('Open storybook in expanded window;\nthen run INSPECT()');
+    // eslint-disable-next-line no-console
+    console.log(el);
+  };
+};
+
 export const DATA_TEST_ID = 'data-test-id';

package/dist/types/src/hooks/useProjection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useProjection.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useProjection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAC;AAI1G,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG;IAC5C,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CAC1D,CAAC;AAQF,eAAO,MAAM,aAAa,QAAO,aAEhC,CAAC"}