[sc] hide offscreen cards

a-type · Jun 6, 2024 · 5a52d33 · 5a52d33
1 parent 1ab0222
commit 5a52d33
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 5 deletions.
diff --git a/apps/star-chart/web/src/components/canvas/AutoPan.ts b/apps/star-chart/web/src/components/canvas/AutoPan.ts
@@ -78,6 +78,7 @@ export class AutoPan extends EventSubscriber<{
   };
 
   private loop = () => {
+    console.log('autopan loop');
     const autoPan = this.getAutoPan();
 
     if (vectorLength(autoPan)) {

diff --git a/apps/star-chart/web/src/components/canvas/CanvasObject.tsx b/apps/star-chart/web/src/components/canvas/CanvasObject.tsx
@@ -6,6 +6,7 @@ import {
   createContext,
   CSSProperties,
   ReactNode,
+  RefObject,
   useCallback,
   useContext,
   useEffect,
@@ -48,6 +49,7 @@ export function CanvasObjectRoot({
 }: CanvasObjectRootProps) {
   const ref = useRef<HTMLDivElement>(null);
   useRerasterize(ref);
+  useHideOffscreen(ref);
 
   const register = useRegister(canvasObject.id, canvasObject.metadata);
   const finalRef = useMergedRef(ref, register);
@@ -222,3 +224,29 @@ export function useCanvasObject({
 
   return canvasObject;
 }
+
+function useHideOffscreen(ref: RefObject<HTMLDivElement | null>) {
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) {
+          ref.current?.style.setProperty('visibility', 'hidden');
+        } else {
+          ref.current?.style.setProperty('visibility', 'visible');
+        }
+      },
+      {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0,
+      },
+    );
+
+    observer.observe(ref.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+}
diff --git a/apps/star-chart/web/src/components/canvas/Wire.tsx b/apps/star-chart/web/src/components/canvas/Wire.tsx
@@ -14,7 +14,7 @@ export interface WireProps extends Omit<SVGProps<SVGPathElement>, 'ref'> {
   targetPosition: LiveVector2;
   className?: string;
   hoverClassName?: string;
-  onTap?: (relativePosition: Vector2, info: CanvasGestureInfo) => void;
+  onTap?: (info: CanvasGestureInfo) => void;
   id: string;
   metadata?: any;
 }
@@ -53,10 +53,17 @@ export function Wire({
 
           state.event.preventDefault();
           state.event.stopPropagation();
-          onTap?.(worldPos, {
+          onTap?.({
             shift: state.shiftKey,
             ctrlOrMeta: state.ctrlKey || state.metaKey,
             alt: state.altKey,
+            delta: viewport.viewportDeltaToWorld({
+              x: state.delta[0],
+              y: state.delta[1],
+            }),
+            worldPosition: worldPos,
+            intentional: state.intentional,
+            targetId: id,
           });
         }
       },
@@ -100,7 +107,7 @@ export function Wire({
         fill="none"
         opacity="50%"
         className={clsx(
-          'touch-none',
+          'touch-none content-visibility-auto',
           onTap && hovered ? hoverClassName : 'stroke-transparent',
           onTap ? 'cursor-pointer' : '',
         )}
@@ -110,7 +117,10 @@ export function Wire({
         id={id}
         d={curve}
         fill="none"
-        className={clsx('pointer-events-none', className)}
+        className={clsx(
+          'pointer-events-none content-visibility-auto',
+          className,
+        )}
         data-hovered={hovered}
         {...rest}
       />

diff --git a/apps/star-chart/web/src/components/project/ConnectionWire.tsx b/apps/star-chart/web/src/components/project/ConnectionWire.tsx
@@ -27,7 +27,7 @@ export function ConnectionWire({ connection }: ConnectionWireProps) {
 
   const canvas = useCanvas();
   const onTap = useCallback(
-    (pos: Vector2, info: CanvasGestureInfo) => {
+    (info: CanvasGestureInfo) => {
       if (info.shift) {
         canvas.selections.add(id);
       } else {