feat(2d): drawable canvas

- fix potential pan offset at the first mouse gesture

ref #1076

Author: akiver

src/ui/components/context-menu/items/comment-item.tsx

@@ -1,22 +1,20 @@
 import React from 'react';
-import { Trans, useLingui } from '@lingui/react/macro';
+import { Trans } from '@lingui/react/macro';
 import { ContextMenuItem } from '../context-menu-item';
-import { SHOW_COMMENT_SHORTCUT } from 'csdm/ui/keyboard/keyboard-shortcut';
+import { showCommentKey } from 'csdm/ui/keyboard/keyboard-shortcut';
 
 type CommentItemProps = {
   onClick: () => void;
   isDisabled?: boolean;
 };
 
 export function CommentItem({ onClick, isDisabled = false }: CommentItemProps) {
-  const { t } = useLingui();
-
   return (
     <ContextMenuItem onClick={onClick} isDisabled={isDisabled}>
       <p>
         <Trans context="Context menu">Comment</Trans>
       </p>
-      <p className="text-caption">{t(SHOW_COMMENT_SHORTCUT.label)}</p>
+      <p className="text-caption">{showCommentKey}</p>
     </ContextMenuItem>
   );
 }

src/ui/components/keyboard-keys.tsx

@@ -0,0 +1,17 @@
+import React, { type ReactNode } from 'react';
+
+type Props = {
+  children: string;
+};
+
+export function KeyboardKey({ children }: Props) {
+  return (
+    <div className="flex items-center justify-center bg-gray-50 border border-gray-400 text-caption font-bold rounded-4 py-4 px-8">
+      <p>{children}</p>
+    </div>
+  );
+}
+
+export function KeyboardKeys({ children }: { children: ReactNode }) {
+  return <div className="flex items-center gap-x-4">{children}</div>;
+}

src/ui/components/popover/popover.tsx

@@ -32,11 +32,15 @@ type PopoverOptions = {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   openOnHover?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
 };
 
 function usePopover({
   initialOpen = false,
   openOnHover = false,
+  openDelay = 0,
+  closeDelay = 0,
   placement = 'top',
   modal,
   open: controlledOpen,
@@ -73,6 +77,7 @@ function usePopover({
   const hover = useHover(context, {
     handleClose: safePolygon(),
     enabled: openOnHover,
+    delay: { open: openDelay, close: closeDelay },
   });
   const interactions = useInteractions([click, dismiss, role, hover]);
 

src/ui/components/table/use-table-comment-widget-visibility.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { SHOW_COMMENT_SHORTCUT } from 'csdm/ui/keyboard/keyboard-shortcut';
+import { showCommentKey } from 'csdm/ui/keyboard/keyboard-shortcut';
 import { isCtrlOrCmdEvent } from 'csdm/ui/keyboard/keyboard';
 
 export function useTableCommentWidgetVisibility() {
@@ -14,7 +14,7 @@ export function useTableCommentWidgetVisibility() {
   };
 
   const onKeyDown = (event: KeyboardEvent) => {
-    if (!isCtrlOrCmdEvent(event) && event.key.toUpperCase() === SHOW_COMMENT_SHORTCUT.key) {
+    if (!isCtrlOrCmdEvent(event) && event.key.toUpperCase() === showCommentKey) {
       setIsWidgetVisible((isVisible) => !isVisible);
     }
   };

src/ui/demo/next-demo-link.tsx

@@ -3,6 +3,7 @@ import { Trans } from '@lingui/react/macro';
 import { useLocation, useParams } from 'react-router';
 import { buildDemoPath } from 'csdm/ui/routes-paths';
 import { NextLink } from '../components/links';
+import { modifierKey } from '../keyboard/keyboard-shortcut';
 
 export function NextDemoLink() {
   const location = useLocation();
@@ -14,7 +15,6 @@ export function NextDemoLink() {
   const currentDemoIndex = siblingDemoPaths.indexOf(currentDemoPath);
   const nextDemoPath = siblingDemoPaths[currentDemoIndex + 1];
   const to = nextDemoPath === undefined ? '' : buildDemoPath(nextDemoPath);
-  const key = window.csdm.isMac ? '⌘' : 'CTRL';
 
-  return <NextLink to={to} tooltip={<Trans>Next demo ({key}+→)</Trans>} />;
+  return <NextLink to={to} tooltip={<Trans>Next demo ({modifierKey}+→)</Trans>} />;
 }

src/ui/demo/previous-demo-link.tsx

@@ -3,6 +3,7 @@ import { useLocation, useParams } from 'react-router';
 import { Trans } from '@lingui/react/macro';
 import { buildDemoPath } from 'csdm/ui/routes-paths';
 import { PreviousLink } from '../components/links';
+import { modifierKey } from '../keyboard/keyboard-shortcut';
 
 export function PreviousDemoLink() {
   const location = useLocation();
@@ -14,7 +15,6 @@ export function PreviousDemoLink() {
   const currentDemoIndex = siblingDemoPaths.indexOf(currentDemoPath);
   const previousDemoPath = siblingDemoPaths[currentDemoIndex - 1];
   const to = previousDemoPath === undefined ? '' : buildDemoPath(previousDemoPath);
-  const key = window.csdm.isMac ? '⌘' : 'CTRL';
 
-  return <PreviousLink to={to} tooltip={<Trans>Previous demo ({key}+←)</Trans>} />;
+  return <PreviousLink to={to} tooltip={<Trans>Previous demo ({modifierKey}+←)</Trans>} />;
 }

src/ui/hooks/use-interactive-map-canvas.ts

@@ -20,6 +20,8 @@ export type InteractiveCanvas = {
   zoomedToRadarY: (y: number, z: number) => number;
   getMouseX: () => number;
   getMouseY: () => number;
+  pixelToWorldX: (x: number) => number;
+  pixelToWorldY: (y: number) => number;
   canvasSize: { width: number; height: number };
 };
 
@@ -146,11 +148,13 @@ export function useInteractiveMapCanvas(
 
       if (event.type === 'mousedown') {
         isDragging.current = true;
+        mouseWorldX.current = pixelToWorldX(mousePixelX.current);
+        mouseWorldY.current = pixelToWorldY(mousePixelY.current);
       } else if (event.type === 'mouseup' || event.type === 'mouseout') {
         isDragging.current = false;
       }
 
-      if (isDragging.current) {
+      if (isDragging.current && event.type !== 'mousedown') {
         worldOriginX.current -= mouseWorldX.current - lastMouseWorldX;
         worldOriginY.current -= mouseWorldY.current - lastMouseWorldY;
         mouseWorldX.current = pixelToWorldX(mousePixelX.current);
@@ -227,6 +231,8 @@ export function useInteractiveMapCanvas(
     zoomedToRadarY,
     getMouseX: () => mousePixelX.current,
     getMouseY: () => mousePixelY.current,
+    pixelToWorldX,
+    pixelToWorldY,
     canvasSize,
   };
 }

src/ui/icons/eraser-icon.svg

@@ -0,0 +1,12 @@
+import type { SVGAttributes } from 'react';
+import React from 'react';
+
+type Props = SVGAttributes<SVGElement>;
+
+export function EraserIcon(props: Props) {
+  return (
+    <svg viewBox="0 0 640 640" {...props}>
+      <path d="M210.5 480L333.5 480L398.8 414.7L225.3 241.2L98.6 367.9L210.6 479.9zM256 544L210.5 544C193.5 544 177.2 537.3 165.2 525.3L49 409C38.1 398.1 32 383.4 32 368C32 352.6 38.1 337.9 49 327L295 81C305.9 70.1 320.6 64 336 64C351.4 64 366.1 70.1 377 81L559 263C569.9 273.9 576 288.6 576 304C576 319.4 569.9 334.1 559 345L424 480L544 480C561.7 480 576 494.3 576 512C576 529.7 561.7 544 544 544L256 544z" />
+    </svg>
+  );
+}