@nulib/clover 0.0.0-stage → 4.0.0-beta.0

package/dist/components/Scene/SceneView.mjs

@@ -0,0 +1,539 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { attachOrbitGestures } from "./gestures.mjs";
+import { homeOrbit, turned, zoomed, sameOrbit } from "./orbit.mjs";
+import { sceneModels, sceneBackground } from "./models.mjs";
+import { showOrientation, Caret, RotatePad } from "./RotatePad.mjs";
+import Caption, { hasInformation, captionLabelId } from "../Body/Caption.mjs";
+import { BodyAlert } from "../Body/BodyAlert.mjs";
+import { Information } from "../Body/glyphs.mjs";
+import { useControlsVisibility } from "../Body/useControlsVisibility.mjs";
+import { useNearViewport } from "../Body/useNearViewport.mjs";
+import { requestKey } from "../../core/request.mjs";
+import { localize } from "../../core/value.mjs";
+import useFullscreen from "../../hooks/useFullscreen.mjs";
+import useFullscreenSupported from "../../hooks/useFullscreenSupported.mjs";
+import useWithinFullscreen from "../../hooks/useWithinFullscreen.mjs";
+import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { toggleFullscreen } from "../../lib/fullscreen.mjs";
+import { claimContext, returnContext } from "../../lib/renderer/backends/contexts.mjs";
+import { useRootLanguage } from "../../react/language.mjs";
+import Button from "../../ui/Button.mjs";
+import ControlCluster, { renderControl } from "../../ui/ControlCluster.mjs";
+import { Reset, ZoomIn, ZoomOut, ZoomExitFullScreen, ZoomFullScreen } from "../../ui/controlGlyphs.mjs";
+import { ErrorBoundary } from "../../ui/ErrorBoundary.mjs";
+import ExitFullscreen from "../../ui/ExitFullscreen.mjs";
+import { Loading } from "../../ui/Loading.mjs";
+import { SHORTCUTS, forwardShortcut } from "../../ui/Tip.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { engineFor } from "./engines.mjs";
+const ALL_CONTROLS = {
+  zoom: true,
+  fullPage: true,
+  rotation: true,
+  reset: true,
+  information: true
+};
+const TURN = Math.PI / 4;
+const TILT = Math.PI / 12;
+const KEY_TURN = TURN / 2;
+const ZOOM = 1.5;
+const KEYS = [
+  "ArrowLeft ArrowRight ArrowUp ArrowDown",
+  SHORTCUTS.rotateRight.keys,
+  SHORTCUTS.rotateLeft.keys,
+  SHORTCUTS.zoomIn.keys,
+  SHORTCUTS.zoomOut.keys,
+  SHORTCUTS.reset.keys
+].join(" ");
+function SceneView(props) {
+  if (!props.scene) return null;
+  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(SceneBody, { ...props, scene: props.scene }) });
+}
+function SceneBody({
+  scene,
+  label,
+  language,
+  className,
+  controls = true,
+  controlButtons,
+  options,
+  manifestId,
+  engine: drawWith = "clover",
+  children
+}) {
+  const { t } = useCloverTranslation();
+  const [wrapper, setWrapper] = useState(null);
+  const root = useRootLanguage(setWrapper);
+  const hostRef = useRef(null);
+  const isFullscreen = useFullscreen(wrapper);
+  const canFullscreen = useFullscreenSupported();
+  const controlsVisible = useControlsVisibility(
+    wrapper,
+    options == null ? void 0 : options.hideDelay,
+    hostRef
+  );
+  const nearViewport = useNearViewport(wrapper);
+  const made = useUniqueId();
+  const instance = `clover-scene-${made}`;
+  const config = controls === false ? null : controls === true ? ALL_CONTROLS : { ...ALL_CONTROLS, ...controls };
+  const models = sceneModels(scene);
+  const background = sceneBackground(scene);
+  const request = options == null ? void 0 : options.request;
+  const drawingKey = JSON.stringify([
+    scene.id,
+    models,
+    requestKey(request),
+    drawWith
+  ]);
+  const cleared = manifestId === "loading";
+  const [status, setStatus] = useState({ state: "waiting" });
+  const engine = useRef(null);
+  const bounds = useRef(null);
+  const home = useRef(null);
+  const orbit = useRef(null);
+  const frame = useRef(0);
+  const [generation, setGeneration] = useState(0);
+  const holder = useRef({
+    hiddenSince: null,
+    release: () => void 0
+  });
+  const released = useRef(false);
+  const navigation = useRef(null);
+  const indicator = useRef(null);
+  const withinFullscreen = useWithinFullscreen(wrapper);
+  const redraw = useCallback(() => {
+    if (frame.current || !engine.current) return;
+    frame.current = requestAnimationFrame(() => {
+      var _a;
+      frame.current = 0;
+      if (!orbit.current) return;
+      (_a = engine.current) == null ? void 0 : _a.draw(orbit.current);
+      showOrientation(indicator.current, orbit.current);
+    });
+  }, []);
+  const homeFor = useCallback(() => {
+    const host = hostRef.current;
+    const aspect = host && host.clientHeight ? host.clientWidth / host.clientHeight : 1;
+    return bounds.current ? homeOrbit(bounds.current, aspect) : null;
+  }, []);
+  const move = useCallback(
+    (next) => {
+      if (!orbit.current || !home.current) return;
+      orbit.current = next(orbit.current, home.current);
+      redraw();
+    },
+    [redraw]
+  );
+  const turning = useRef(0);
+  const turn = useCallback(
+    (dTheta, dPhi) => {
+      move((current) => turned(current, dTheta, dPhi));
+      const corner = navigation.current;
+      if (!corner) return;
+      corner.setAttribute("data-turning", "");
+      window.clearTimeout(turning.current);
+      turning.current = window.setTimeout(
+        () => corner.removeAttribute("data-turning"),
+        400
+      );
+    },
+    [move]
+  );
+  useEffect(() => () => window.clearTimeout(turning.current), []);
+  const zoom = useCallback(
+    (factor) => move((current, start) => zoomed(current, factor, start)),
+    [move]
+  );
+  const viewHeight = useCallback(() => {
+    var _a;
+    return ((_a = hostRef.current) == null ? void 0 : _a.clientHeight) ?? 0;
+  }, []);
+  const reset = useCallback(() => {
+    home.current = homeFor();
+    orbit.current = home.current;
+    redraw();
+  }, [homeFor, redraw]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || !nearViewport) return;
+    if (cleared) {
+      setStatus({ state: "loading" });
+      return;
+    }
+    let live = true;
+    let drawing = null;
+    const giveBack = () => {
+      cancelAnimationFrame(frame.current);
+      frame.current = 0;
+      drawing == null ? void 0 : drawing.dispose();
+      drawing = null;
+      engine.current = null;
+      returnContext(holder.current);
+    };
+    holder.current.release = () => {
+      giveBack();
+      released.current = true;
+      if (live) setStatus({ state: "waiting" });
+    };
+    released.current = false;
+    if (!claimContext(holder.current)) {
+      released.current = true;
+      setStatus({ state: "waiting" });
+      return () => {
+        live = false;
+      };
+    }
+    setStatus({ state: "loading" });
+    engineFor(drawWith)().then(({ createEngine }) => {
+      if (!live) return;
+      drawing = createEngine(host, {
+        onLost: () => {
+          giveBack();
+          if (live)
+            setStatus({
+              state: "error",
+              error: new Error(
+                "The browser took back the 3D view's graphics."
+              )
+            });
+        }
+      });
+      engine.current = drawing;
+      return drawing.load(models, request).then((found) => {
+        if (!live) return;
+        bounds.current = found;
+        home.current = homeFor();
+        orbit.current ?? (orbit.current = home.current);
+        setStatus({ state: "ready" });
+        redraw();
+      });
+    }).catch((error) => {
+      if (!live) return;
+      giveBack();
+      setStatus({
+        state: "error",
+        error: error instanceof Error ? error : new Error(String(error))
+      });
+    });
+    return () => {
+      live = false;
+      giveBack();
+    };
+  }, [drawingKey, cleared, nearViewport, generation, homeFor, redraw]);
+  useEffect(() => {
+    orbit.current = null;
+  }, [drawingKey]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => {
+      holder.current.hiddenSince = (entry == null ? void 0 : entry.isIntersecting) ? null : performance.now();
+      if ((entry == null ? void 0 : entry.isIntersecting) && released.current)
+        setGeneration((count) => count + 1);
+    });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      var _a;
+      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+      (_a = navigation.current) == null ? void 0 : _a.toggleAttribute(
+        "data-compact",
+        host.clientWidth < 32 * rem || host.clientHeight < 24 * rem
+      );
+      if (!engine.current) return;
+      engine.current.resize();
+      const atHome = orbit.current && home.current && sameOrbit(orbit.current, home.current);
+      home.current = homeFor();
+      if (atHome) orbit.current = home.current;
+      cancelAnimationFrame(frame.current);
+      frame.current = 0;
+      if (!orbit.current) return;
+      engine.current.draw(orbit.current);
+      showOrientation(indicator.current, orbit.current);
+    });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [homeFor]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || status.state !== "ready") return;
+    return attachOrbitGestures(host, { turn, zoom });
+  }, [status.state, turn, zoom]);
+  const onViewportKey = (event) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.altKey || event.metaKey || event.ctrlKey) return;
+    const step = event.shiftKey ? TURN : KEY_TURN;
+    const tilt = event.shiftKey ? 2 * TILT : TILT;
+    switch (event.key) {
+      case "ArrowLeft":
+        turn(step, 0);
+        break;
+      case "ArrowRight":
+        turn(-step, 0);
+        break;
+      case "ArrowUp":
+        turn(0, tilt);
+        break;
+      case "ArrowDown":
+        turn(0, -tilt);
+        break;
+      case "r":
+        turn(-TURN, 0);
+        break;
+      case "R":
+        turn(TURN, 0);
+        break;
+      case "+":
+      case "=":
+        zoom(ZOOM);
+        break;
+      case "-":
+      case "_":
+        zoom(1 / ZOOM);
+        break;
+      case "0":
+        reset();
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
+  const captionId = `caption-${instance}`;
+  const captioned = useMemo(
+    () => (config == null ? void 0 : config.information) && hasInformation(scene) ? [scene] : [],
+    [config == null ? void 0 : config.information, scene]
+  );
+  const [captionOpen, setCaptionOpen] = useState(false);
+  const isCaptionOpen = captionOpen && captioned.length > 0;
+  const closeCaption = useCallback(
+    (restoreFocus) => {
+      var _a;
+      setCaptionOpen(false);
+      if (restoreFocus)
+        (_a = document.getElementById(`information-${instance}`)) == null ? void 0 : _a.focus();
+    },
+    [instance]
+  );
+  const figureLabel = captioned.length && localize(scene.label, language).text ? captionLabelId(captionId, 0) : void 0;
+  const ownName = [label, scene.label].map((value) => localize(value, language)).find((value) => value.text);
+  const viewportName = useContainerName(
+    (ownName == null ? void 0 : ownName.text) || t("sceneModel"),
+    ownName ? ownName.lang : root.langOf("sceneModel"),
+    false,
+    root.hostLanguage
+  );
+  const keysId = `keys-${instance}`;
+  const roleDescription = !root.langOf("sceneRoleDescription") ? t("sceneRoleDescription") : void 0;
+  const spec = (key, words, glyph, onClick, shortcut) => ({
+    key,
+    id: `${key}-${instance}`,
+    label: t(words),
+    lang: root.langOf(words),
+    glyph,
+    onClick,
+    ...shortcut ? { shortcut } : {}
+  });
+  const toolSpecs = (fullscreen) => {
+    if (!config) return [];
+    return [
+      ...config.zoom ? [
+        spec(
+          "zoomIn",
+          "imageZoomIn",
+          /* @__PURE__ */ jsx(ZoomIn, {}),
+          () => zoom(ZOOM),
+          SHORTCUTS.zoomIn
+        ),
+        spec(
+          "zoomOut",
+          "imageZoomOut",
+          /* @__PURE__ */ jsx(ZoomOut, {}),
+          () => zoom(1 / ZOOM),
+          SHORTCUTS.zoomOut
+        )
+      ] : [],
+      ...config.fullPage && canFullscreen ? [
+        {
+          key: "fullPage",
+          id: `fullPage-${instance}`,
+          label: t(fullscreen ? "imageExitFullScreen" : "imageFullScreen"),
+          lang: root.langOf(
+            fullscreen ? "imageExitFullScreen" : "imageFullScreen"
+          ),
+          glyph: fullscreen ? /* @__PURE__ */ jsx(ZoomExitFullScreen, {}) : /* @__PURE__ */ jsx(ZoomFullScreen, {}),
+          // Straight from the click: the Fullscreen API only honors a user gesture.
+          onClick: (event) => void toggleFullscreen(event.currentTarget)
+        }
+      ] : []
+    ];
+  };
+  const padName = useContainerName(
+    t("sceneRotate"),
+    root.langOf("sceneRotate"),
+    false,
+    root.hostLanguage
+  );
+  const padControls = config ? {
+    ...config.rotation && {
+      rotateUp: spec(
+        "rotateUp",
+        "sceneRotateUp",
+        /* @__PURE__ */ jsx(Caret, { rotate: -90 }),
+        () => turn(0, TILT)
+      ),
+      rotateLeft: spec(
+        "rotateLeft",
+        "imageRotateLeft",
+        /* @__PURE__ */ jsx(Caret, { rotate: 180 }),
+        () => turn(TURN, 0),
+        SHORTCUTS.rotateLeft
+      ),
+      rotateRight: spec(
+        "rotateRight",
+        "imageRotateRight",
+        /* @__PURE__ */ jsx(Caret, { rotate: 0 }),
+        () => turn(-TURN, 0),
+        SHORTCUTS.rotateRight
+      ),
+      rotateDown: spec(
+        "rotateDown",
+        "sceneRotateDown",
+        /* @__PURE__ */ jsx(Caret, { rotate: 90 }),
+        () => turn(0, -TILT)
+      )
+    },
+    ...config.reset && {
+      reset: spec(
+        "reset",
+        "sceneResetView",
+        /* @__PURE__ */ jsx(Reset, {}),
+        reset,
+        SHORTCUTS.reset
+      )
+    }
+  } : {};
+  const tools = toolSpecs(withinFullscreen);
+  const loading = status.state === "loading" || status.state === "waiting" && nearViewport;
+  return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "aria-labelledby": figureLabel,
+      className: join("clover-canvas", "clover-scene", className),
+      "data-testid": "clover-scene",
+      "data-status": status.state === "ready" ? "ready" : status.state === "error" ? "error" : "loading",
+      "data-fullscreen": isFullscreen,
+      "data-controls": controlsVisible ? "visible" : "hidden",
+      "data-navigable": "true",
+      ref: root.ref,
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && isCaptionOpen && !event.defaultPrevented) {
+          event.preventDefault();
+          closeCaption(false);
+          return;
+        }
+        forwardShortcut(event, hostRef.current);
+      },
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        margin: 0,
+        overflow: "hidden",
+        isolation: "isolate"
+      },
+      children: [
+        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !isFullscreen }),
+        (captioned.length > 0 || React.Children.count(children) > 0) && /* @__PURE__ */ jsxs(ControlCluster, { controls: () => [], controlButtons, children: [
+          captioned.length > 0 && /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: `information-${instance}`,
+              label: t("informationPanelTabsAbout"),
+              lang: root.langOf("informationPanelTabsAbout"),
+              onClick: () => setCaptionOpen((open) => !open),
+              expanded: isCaptionOpen,
+              controls: captionId,
+              children: /* @__PURE__ */ jsx(Information, {})
+            }
+          ),
+          children
+        ] }),
+        (tools.length > 0 || Object.keys(padControls).length > 0) && /* @__PURE__ */ jsxs("div", { ref: navigation, className: "clover-scene-navigation", children: [
+          tools.length > 0 && /* @__PURE__ */ jsx("div", { className: "clover-scene-tools", children: tools.map((tool) => renderControl(tool, controlButtons)) }),
+          Object.keys(padControls).length > 0 && /* @__PURE__ */ jsx(
+            RotatePad,
+            {
+              controls: padControls,
+              controlButtons,
+              turn,
+              zoom,
+              span: viewHeight,
+              indicator,
+              name: padName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: hostRef,
+            className: "clover-canvas-viewport",
+            style: {
+              position: "absolute",
+              inset: 0,
+              overflow: "hidden",
+              zIndex: -1,
+              ...background ? { backgroundColor: background } : {}
+            },
+            "data-testid": "clover-scene-viewport",
+            role: "img",
+            "aria-roledescription": roleDescription,
+            ...viewportName.props,
+            "aria-describedby": keysId,
+            "aria-keyshortcuts": KEYS,
+            "aria-busy": loading,
+            tabIndex: 0,
+            onKeyDown: onViewportKey
+          }
+        ),
+        viewportName.node,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: keysId,
+            style: visuallyHidden,
+            lang: root.langOf("sceneKeys"),
+            children: t("sceneKeys")
+          }
+        ),
+        status.state === "error" && /* @__PURE__ */ jsx(BodyAlert, { error: status.error, className: "clover-scene-error" }),
+        loading && /* @__PURE__ */ jsx(Loading, { overlay: true }),
+        captioned.length > 0 && /* @__PURE__ */ jsx(
+          Caption,
+          {
+            id: captionId,
+            canvases: captioned,
+            open: isCaptionOpen,
+            onClose: closeCaption,
+            language
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  SceneView,
+  SceneView as default
+};

package/dist/components/Scene/cloverEngine.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { isDrawable, MODEL_FORMATS } from "./models.mjs";
+import { cameraPosition, FIELD_OF_VIEW } from "./orbit.mjs";
+import { loadGltf } from "../../lib/gltf/load.mjs";
+import { scaling, translation, rotation, multiply, perspective, lookAt, identity } from "../../lib/gltf/mat4.mjs";
+import { createModelRenderer } from "../../lib/gltf/renderer.mjs";
+const MAX_PIXEL_RATIO = 2;
+function placement({ position, transforms }) {
+  let matrix = identity();
+  for (const { type, x, y, z } of transforms) {
+    const step = type === "scale" ? scaling([x, y, z]) : type === "translate" ? translation([x, y, z]) : rotation([x, y, z]);
+    matrix = multiply(step, matrix);
+  }
+  return multiply(translation(position), matrix);
+}
+function createEngine(host, { onLost }) {
+  const canvas = document.createElement("canvas");
+  canvas.className = "clover-canvas-surface";
+  canvas.setAttribute("aria-hidden", "true");
+  canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none";
+  const gl = canvas.getContext("webgl2", { antialias: true, alpha: true });
+  if (!gl) throw new Error("This browser cannot draw 3D: it offers no WebGL2.");
+  const lost = (event) => {
+    event.preventDefault();
+    onLost();
+  };
+  canvas.addEventListener("webglcontextlost", lost);
+  host.prepend(canvas);
+  const renderer = createModelRenderer(gl);
+  let bounds = { center: [0, 0, 0], radius: 1 };
+  let disposed = false;
+  const resize = () => {
+    const ratio = Math.min(globalThis.devicePixelRatio || 1, MAX_PIXEL_RATIO);
+    const width = Math.round(host.clientWidth * ratio);
+    const height = Math.round(host.clientHeight * ratio);
+    if (!width || !height) return;
+    canvas.width = width;
+    canvas.height = height;
+  };
+  resize();
+  return {
+    async load(models, request) {
+      const drawable = models.filter(isDrawable);
+      if (!drawable.length) {
+        const formats = [
+          ...new Set(models.map((model) => model.format ?? model.src))
+        ];
+        throw new Error(
+          models.length ? `Clover draws glTF models (${MODEL_FORMATS.join(", ")}), not ${formats.join(", ")}.` : "The Scene paints no model."
+        );
+      }
+      const assets = await Promise.all(
+        drawable.map((model) => loadGltf(model.src, request))
+      );
+      if (disposed) return bounds;
+      assets.forEach(
+        (asset, index) => renderer.add(asset, placement(drawable[index]))
+      );
+      const box = renderer.bounds();
+      if (box) {
+        const center = box.min.map(
+          (min, axis) => (min + box.max[axis]) / 2
+        );
+        const radius = Math.hypot(...box.max.map((max, axis) => max - box.min[axis])) / 2;
+        bounds = { center, radius: radius || 1 };
+      }
+      return bounds;
+    },
+    draw(orbit) {
+      if (disposed || !canvas.width || !canvas.height) return;
+      const eye = cameraPosition(orbit, bounds.center);
+      const near = Math.max(
+        bounds.radius / 1e3,
+        orbit.distance - bounds.radius * 2
+      );
+      const far = orbit.distance + bounds.radius * 4;
+      const projection = perspective(
+        FIELD_OF_VIEW * Math.PI / 180,
+        canvas.width / canvas.height,
+        near,
+        far
+      );
+      renderer.draw(
+        multiply(projection, lookAt(eye, bounds.center)),
+        eye,
+        canvas.width,
+        canvas.height
+      );
+    },
+    resize,
+    dispose() {
+      var _a;
+      if (disposed) return;
+      disposed = true;
+      canvas.removeEventListener("webglcontextlost", lost);
+      renderer.dispose();
+      (_a = gl.getExtension("WEBGL_lose_context")) == null ? void 0 : _a.loseContext();
+      canvas.remove();
+    }
+  };
+}
+export {
+  createEngine,
+  placement
+};