@hunterchen/canvas 0.1.0

package/src/components/canvas/navbar/index.tsx

@@ -0,0 +1,213 @@
+import { motion, useMotionValueEvent } from "framer-motion";
+import { useState, useRef, useEffect, useCallback } from "react";
+import SingleButton from "./single-button";
+// TODO: These should be passed as props or provided via context from the app
+// For now, apps will need to re-export from this library
+import { CanvasSection } from "../../../types";
+import { useCanvasContext } from "../../../contexts/CanvasContext";
+import useWindowDimensions from "../../../hooks/useWindowDimensions";
+import { usePerformanceMode } from "../../../hooks/usePerformanceMode";
+import {
+  getScreenSizeEnum,
+  getSectionPanCoordinates,
+} from "../../../lib/canvas";
+import {
+  RESPONSIVE_ZOOM_MAP,
+  NAVBAR_DEBOUNCE_MS,
+} from "../../../lib/constants";
+
+interface NavbarProps {
+  panToOffset: (
+    offset: { x: number; y: number },
+    onComplete?: () => void,
+    zoom?: number,
+  ) => void;
+  onReset: () => void;
+  // App must provide section coordinates mapping
+  coordinates: Record<string, { x: number; y: number; width: number; height: number }>;
+  sections: CanvasSection[];
+  homeSection: CanvasSection;
+}
+
+export default function Navbar({
+  panToOffset,
+  onReset,
+  coordinates,
+  sections,
+  homeSection,
+}: NavbarProps) {
+  const { x, y, scale, animationStage, setNextTargetSection } =
+    useCanvasContext();
+  const [expandedButton, setExpandedButton] = useState<string | null>(null);
+  const activePans = useRef(0);
+  const panTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  // Debounce state
+  const debounceBlocked = useRef(false);
+  const debounceCooldownTimeout = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  const { height, width } = useWindowDimensions();
+  const { mode } = usePerformanceMode();
+
+  const defaultZoom = RESPONSIVE_ZOOM_MAP[getScreenSizeEnum(width)];
+
+  // Derive debounce duration from performance mode
+  const debounceMs = NAVBAR_DEBOUNCE_MS[mode] ?? 0;
+
+  // Leading-edge debounce handler
+  const handleDebouncedClick = useCallback(
+    (callback: () => void) => {
+      if (debounceMs === 0) {
+        callback();
+        return;
+      }
+
+      if (debounceBlocked.current) {
+        // We're in the cooldown window; ignore this click
+        return;
+      }
+
+      // Enter cooldown and perform the click immediately
+      debounceBlocked.current = true;
+      callback();
+
+      if (debounceCooldownTimeout.current) {
+        clearTimeout(debounceCooldownTimeout.current);
+      }
+
+      debounceCooldownTimeout.current = setTimeout(() => {
+        debounceBlocked.current = false;
+        debounceCooldownTimeout.current = null;
+      }, debounceMs);
+    },
+    [debounceMs],
+  );
+
+  const updateExpandedButton = () => {
+    // reset activePans if no movement has occurred recently
+    if (panTimeout.current) clearTimeout(panTimeout.current);
+    panTimeout.current = setTimeout(() => {
+      activePans.current = 0;
+    }, 500);
+
+    if (activePans.current == 0) setExpandedButton(null);
+  };
+
+  useMotionValueEvent(x, "change", updateExpandedButton);
+  useMotionValueEvent(y, "change", updateExpandedButton);
+  useMotionValueEvent(scale, "change", updateExpandedButton);
+
+  const handlePan = useCallback(
+    function handlePan(section: CanvasSection) {
+      setExpandedButton(section);
+      activePans.current++;
+
+      // Predictive pre-render hint: mark the target section so its CanvasComponent can
+      // render even before it comes fully into view.
+      setNextTargetSection(section);
+
+      if (section === homeSection) {
+        onReset();
+        return;
+      }
+
+      const sectionCoords = coordinates[section];
+      if (!sectionCoords) return;
+
+      const panCoords = getSectionPanCoordinates({
+        windowDimensions: { width, height },
+        coords: sectionCoords,
+        targetZoom: defaultZoom,
+        negative: true,
+      });
+
+      panToOffset(
+        panCoords,
+        () => {
+          activePans.current--;
+        },
+        defaultZoom,
+      );
+    },
+    [panToOffset, onReset, width, height, defaultZoom, setNextTargetSection],
+  );
+
+  // Clean up timers on unmount
+  useEffect(() => {
+    if (animationStage < 2) return;
+    handlePan(CanvasSection.Home);
+    return () => {
+      if (panTimeout.current) clearTimeout(panTimeout.current);
+      if (debounceCooldownTimeout.current)
+        clearTimeout(debounceCooldownTimeout.current);
+    };
+  }, [handlePan, animationStage]);
+
+  return (
+    <div
+      className="bottom-12 md:bottom-4"
+      style={{
+        position: "fixed",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 1000,
+        pointerEvents: "auto",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {/* padding to prevent edge bug */}
+      <div className="px-4 md:px-8">
+        <motion.div className="flex select-none items-center justify-center gap-1 rounded-[10px] border-[1px] border-border bg-offwhite p-1 shadow-[0_6px_12px_rgba(0,0,0,0.10)]">
+          <div className="flex items-center gap-1">
+            <SingleButton
+              label="Home"
+              icon="Home"
+              onClick={() => handlePan(CanvasSection.Home)}
+              isPushed={expandedButton === CanvasSection.Home}
+              onDebouncedClick={handleDebouncedClick}
+            />
+            <SingleButton
+              label="About"
+              icon="Info"
+              onClick={() => handlePan(CanvasSection.About)}
+              isPushed={expandedButton === CanvasSection.About}
+              onDebouncedClick={handleDebouncedClick}
+            />
+            <SingleButton
+              label="Projects"
+              icon="LayoutDashboard"
+              onClick={() => handlePan(CanvasSection.Projects)}
+              isPushed={expandedButton === CanvasSection.Projects}
+              onDebouncedClick={handleDebouncedClick}
+            />
+            <SingleButton
+              label="Sponsors"
+              icon="Handshake"
+              onClick={() => handlePan(CanvasSection.Sponsors)}
+              isPushed={expandedButton === CanvasSection.Sponsors}
+              onDebouncedClick={handleDebouncedClick}
+            />
+            <SingleButton
+              label="FAQ"
+              icon="HelpCircle"
+              onClick={() => handlePan(CanvasSection.FAQ)}
+              isPushed={expandedButton === CanvasSection.FAQ}
+              onDebouncedClick={handleDebouncedClick}
+            />
+            <SingleButton
+              label="Team"
+              icon="Users"
+              onClick={() => handlePan(CanvasSection.Team)}
+              isPushed={expandedButton === CanvasSection.Team}
+              onDebouncedClick={handleDebouncedClick}
+            />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/src/components/canvas/navbar/single-button.tsx

@@ -0,0 +1,199 @@
+import { useState, useEffect } from "react";
+import * as LucideIcons from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useToast } from "../../../hooks/use-toast";
+import { copyText } from "../../../lib/copy";
+
+type IconName = keyof typeof LucideIcons;
+
+interface SingleButtonProps {
+  label: string;
+  icon?: IconName;
+  customIcon?: React.ComponentType<{ className?: string }>;
+  onClick?: () => void;
+  isPushed: boolean;
+  link?: string;
+  emailAddress?: string;
+  onDebouncedClick?: (callback: () => void) => void;
+}
+
+export default function SingleButton({
+  label,
+  icon,
+  customIcon,
+  onClick,
+  isPushed,
+  link,
+  emailAddress,
+  onDebouncedClick,
+}: SingleButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showTag, setShowTag] = useState(false);
+  const [copiedEmail, setCopiedEmail] = useState(false);
+  const Icon = icon ? (LucideIcons[icon] as LucideIcons.LucideIcon) : null;
+  const CustomIcon = customIcon;
+  const TagDelay = 100;
+  const { toast } = useToast();
+
+  // Ensure either icon or customIcon is provided
+  if (!Icon && !CustomIcon) {
+    throw new Error("Either 'icon' or 'customIcon' prop must be provided");
+  }
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+
+    if (isHovered) {
+      timeoutId = setTimeout(() => {
+        setShowTag(true);
+      }, TagDelay);
+    } else {
+      setShowTag(false);
+    }
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [isHovered]);
+
+  useEffect(() => {
+    setShowTag(false);
+    setIsHovered(false);
+  }, [isPushed]);
+
+  // Reset copied email state after 2 seconds
+  useEffect(() => {
+    if (copiedEmail) {
+      const timeoutId = setTimeout(() => {
+        setCopiedEmail(false);
+      }, 2000);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [copiedEmail]);
+
+  const performClick = () => {
+    if (emailAddress) {
+      const mailto = `mailto:${emailAddress}`;
+
+      void (async () => {
+        const copied =
+          (await copyText(mailto)) || (await copyText(emailAddress));
+
+        if (copied) {
+          setCopiedEmail(true);
+          toast({
+            title: "Email copied!",
+            variant: "cute",
+            duration: 2000,
+          });
+        } else {
+          window.open(mailto, "_blank");
+          toast({
+            title: "Email app opened!",
+            duration: 3000,
+            variant: "cute",
+          });
+        }
+      })();
+
+      return;
+    }
+
+    if (link) {
+      window.open(link, "_blank", "noopener,noreferrer");
+      return;
+    }
+
+    onClick?.();
+  };
+
+  const handleClick = () => {
+    if (onDebouncedClick) {
+      onDebouncedClick(performClick);
+    } else {
+      performClick();
+    }
+  };
+
+  const displayLabel = copiedEmail ? "Email copied!" : label;
+
+  return (
+    <motion.button
+      aria-label={label}
+      className={`relative flex items-center rounded-md p-2 text-medium transition-colors duration-200 ${isPushed ? "bg-[#EEE2FB]" : isHovered ? "bg-highlight" : ""
+        }`}
+      onClick={handleClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      whileTap={{ scale: 0.95 }}
+      transition={{
+        type: "spring",
+        stiffness: 400,
+        damping: 25,
+      }}
+    >
+      {isPushed ? (
+        <div className="flex items-center gap-2">
+          <div>
+            {Icon ? (
+              <Icon
+                className={`h-5 w-5 flex-shrink-0 ${isPushed ? "text-emphasis" : "text-medium"}`}
+              />
+            ) : CustomIcon ? (
+              <CustomIcon
+                className={`h-5 w-5 flex-shrink-0 ${isPushed ? "text-white" : "text-medium"
+                  }`}
+              />
+            ) : null}
+          </div>
+          <motion.span
+            initial={{ opacity: 0, width: 0 }}
+            animate={{ opacity: 1, width: "auto" }}
+            exit={{ opacity: 0, width: 0 }}
+            transition={{
+              duration: 0.1,
+              ease: "easeInOut",
+            }}
+            className="overflow-hidden whitespace-nowrap font-figtree text-sm font-medium text-emphasis"
+          >
+            {displayLabel}
+          </motion.span>
+        </div>
+      ) : (
+        <div>
+          {Icon ? (
+            <Icon
+              className={`h-5 w-5 flex-shrink-0 ${isPushed ? "text-white" : "text-medium"
+                }`}
+            />
+          ) : CustomIcon ? (
+            <CustomIcon
+              className={`h-5 w-5 flex-shrink-0 ${isPushed ? "text-white" : "text-medium"
+                }`}
+            />
+          ) : null}
+          <AnimatePresence>
+            {showTag && !isPushed && (
+              <motion.div
+                initial={{ opacity: 0, y: 5, scale: 0.9, x: "-50%" }}
+                animate={{ opacity: 1, y: 0, scale: 1, x: "-50%" }}
+                exit={{ opacity: 0, y: 5, scale: 0.9, x: "-50%" }}
+                transition={{
+                  duration: 0.05,
+                  ease: "easeOut",
+                }}
+                className="pointer-events-none absolute -top-10 left-1/2 z-50"
+              >
+                <div className="rounded-sm bg-gradient-to-t from-black/10 to-transparent px-[1px] pb-[2.5px] pt-[1px]">
+                  <div className="whitespace-nowrap rounded-sm bg-offwhite px-2 py-1 font-figtree text-sm text-medium">
+                    {displayLabel}
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      )}
+    </motion.button>
+  );
+}

package/src/components/canvas/offest.tsx

@@ -0,0 +1,23 @@
+import { motion, type Point } from "framer-motion";
+
+export const OffsetComponent = ({
+  offset,
+  children,
+}: {
+  offset: Point;
+  children: React.ReactNode;
+}) => {
+  return (
+    <motion.div
+      style={{
+        position: "absolute",
+        top: offset.y,
+        left: offset.x,
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+};

package/src/components/canvas/reset.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+const Reset = ({
+  onResetViewAndItems,
+}: {
+  onResetViewAndItems: () => void;
+}) => {
+  return (
+    <div className="absolute bottom-4 left-4 z-[1000] flex cursor-[url('/customcursor.svg'),auto] select-none">
+      <button
+        className="rounded bg-gray-700 p-1.5 font-mono text-xs text-white shadow-md transition-colors hover:bg-gray-600 md:text-sm"
+        onClick={onResetViewAndItems}
+        onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
+      >
+        <Image src="/images/reset.svg" alt="Reset" width={18} height={18} />
+      </button>
+    </div>
+  );
+};
+
+export default Reset;

package/src/components/canvas/toolbar.tsx

@@ -0,0 +1,67 @@
+import { type Point, useTransform, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { useCanvasContext } from "../../contexts/CanvasContext";
+import {
+  TOOLBAR_OPACITY_POS_EPS,
+  TOOLBAR_OPACITY_SCALE_EPS,
+} from "../../lib/constants";
+
+type ToolbarProps = {
+  homeCoordinates?: Point;
+};
+
+const Toolbar = ({ homeCoordinates = { x: 0, y: 0 } }: ToolbarProps) => {
+  const { x, y, scale } = useCanvasContext();
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // numeric MotionValues
+  const rawDx = useTransform(
+    [x, scale],
+    ([lx, ls]) => -((lx as number) / (ls as number)) + homeCoordinates.x,
+  );
+  const rawDy = useTransform(
+    [y, scale],
+    ([ly, ls]) => -((ly as number) / (ls as number)) + homeCoordinates.y,
+  );
+
+  // formatted MotionValues
+  const displayX = useTransform(rawDx, (v) => Math.round(v).toString());
+  const displayY = useTransform(rawDy, (v) => Math.round(v).toString());
+  const displayScale = useTransform(scale, (v) => v.toFixed(2));
+
+  const opacity = useTransform([rawDx, rawDy, scale], ([dx, dy, ls]) =>
+    Math.abs(dx as number) < TOOLBAR_OPACITY_POS_EPS &&
+      Math.abs(dy as number) < TOOLBAR_OPACITY_POS_EPS &&
+      Math.abs((ls as number) - 1) < TOOLBAR_OPACITY_SCALE_EPS
+      ? 0
+      : 1,
+  );
+
+  const handlePointerDown = (e: React.PointerEvent) => e.stopPropagation();
+
+  return (
+    <motion.div
+      className="absolute left-4 top-6 z-[1000] cursor-default select-none rounded-[10px] border border-border bg-offwhite p-2 font-mono text-xs text-heavy shadow-[0_6px_12px_rgba(0,0,0,0.10)] sm:top-4 md:text-sm"
+      onPointerDown={handlePointerDown}
+      data-toolbar-button
+      style={{ opacity }}
+    >
+      {hasMounted ? (
+        <>
+          (<motion.span>{displayX}</motion.span>,{" "}
+          <motion.span>{displayY}</motion.span>)
+          <span className="text-light"> |</span>{" "}
+          <motion.span>{displayScale}</motion.span>x
+        </>
+      ) : (
+        <span style={{ opacity: 0 }}>(0, 0) | 1.00x</span>
+      )}
+    </motion.div>
+  );
+};
+
+export default Toolbar;