abstract-3d 2.12.2 → 3.0.1

package/src/renderers/react/react-scene.tsx

@@ -1,12 +1,11 @@
 import { Html } from "@react-three/drei";
 import type { ThreeEvent } from "@react-three/fiber";
 import React from "react";
-import type { Scene, Group } from "../../abstract-3d.js";
+import type { Scene, Group, Relation } from "../../abstract-3d.js";
 import { ReactDimensions } from "./react-dimension.js";
 import { ReactGroup } from "./react-group.js";
-import type { HotSpotInfo } from "./react-hotspot.js";
-import { ReactHotSpots } from "./react-hotspot.js";
 import type { MaterialState } from "./react-material.js";
+import { ReactRelations } from "./react-relation.js";
 import type { ReactPopover } from "./react-types.js";
 
 export type SceneMouseEvent = ThreeEvent<MouseEvent>;
@@ -15,10 +14,8 @@ export function ReactScene({
   scene,
   selectedIds,
   hoveredIdsExternal,
-  activeHotSpots,
+  activeRelations,
   activeComponents,
-  hotSpotTexts,
-  showHotSpotTexts,
   showDimensions,
   useAlphaTest,
   materialStateImages,
@@ -27,19 +24,17 @@ export function ReactScene({
   onHoverGroup,
   onContextMenuGroup,
   getTooltips,
-  onClickHotSpot,
+  onClickRelation,
   createGroupKey,
   createGroupId,
 }: {
   readonly scene: Scene;
   readonly selectedIds: Record<string, boolean> | undefined;
   readonly hoveredIdsExternal: ReadonlyArray<string> | undefined;
-  readonly activeHotSpots: Record<string, HotSpotInfo> | undefined;
+  readonly activeRelations: ReadonlyArray<string> | undefined;
   readonly activeComponents: Record<string, MaterialState> | undefined;
-  readonly showHotSpotTexts: boolean;
   readonly showDimensions: boolean;
   readonly useAlphaTest?: boolean;
-  readonly hotSpotTexts?: Record<string, string>;
   readonly materialStateImages?: Record<string, string>;
   readonly reactPopovers?: ReadonlyArray<ReactPopover>;
   readonly onClickGroup?: (
@@ -63,7 +58,7 @@ export function ReactScene({
     e: SceneMouseEvent
   ) => void;
   readonly getTooltips?: (id: string) => ReadonlyArray<ReactPopover>;
-  readonly onClickHotSpot?: (hotSpot: HotSpotInfo, e: SceneMouseEvent) => void;
+  readonly onClickRelation?: (relation: Relation, e: SceneMouseEvent) => void;
   readonly createGroupKey?: (g: Group, idx: number, rootData: Record<string, string> | undefined, id: string) => string;
   readonly createGroupId?: (g: Group) => string;
 }): React.JSX.Element {
@@ -79,7 +74,7 @@ export function ReactScene({
             key={createGroupKey ? createGroupKey(g, 0, g.data, id) : i}
             g={g}
             selectedIds={selectedIds}
-            hotSpotsActive={activeHotSpots !== undefined}
+            relationsActive={activeRelations !== undefined}
             activeComponents={activeComponents}
             materialStateImages={materialStateImages}
             hoveredIdsExternal={hoveredIdsExternal}
@@ -100,19 +95,12 @@ export function ReactScene({
         sceneRotation={scene.rotation_deprecated}
         sceneCenter={scene.center_deprecated}
         selectedIds={selectedIds}
-        hotSpotsActive={activeHotSpots !== undefined}
+        relationsActive={activeRelations !== undefined}
         onClickGroup={onClickGroup}
         onHoverGroup={onHoverGroup}
         onContextMenuGroup={onContextMenuGroup}
       />
-      <ReactHotSpots
-        hotSpots={scene.hotSpots_deprecated}
-        hotSpotZAdjPos={scene.size_deprecated.z / 2}
-        activeHotSpots={activeHotSpots}
-        hotSpotTexts={hotSpotTexts}
-        onClickHotSpot={onClickHotSpot}
-        showHotSpotTexts={showHotSpotTexts}
-      />
+      <ReactRelations relations={scene.relations} activeRelations={activeRelations} onClickRelation={onClickRelation} />
       {reactPopovers?.map((p) => (
         <Html key={p.id} position={[p.pos.x, p.pos.y, p.pos.z]} center pointerEvents="none" style={{ pointerEvents: "none" }}>
           {p.content}

package/src/renderers/react/react.tsx

@@ -2,10 +2,9 @@ import { Html, type OrbitControlsProps } from "@react-three/drei";
 import { Canvas, type CanvasProps, type ThreeEvent } from "@react-three/fiber";
 import { EffectComposer, N8AO } from "@react-three/postprocessing";
 import React, { memo, useMemo } from "react";
-import type { Scene, View, Group } from "../../abstract-3d.js";
+import type { Scene, View, Group, Relation } from "../../abstract-3d.js";
 import type { ControlsHelper, Camera, BufferZones } from "./react-camera.js";
 import { ReactCamera } from "./react-camera.js";
-import type { HotSpotInfo } from "./react-hotspot.js";
 import type { MaterialState } from "./react-material.js";
 import { ReactScene } from "./react-scene.js";
 import type { ReactPopover } from "./react-types.js";
@@ -13,12 +12,14 @@ import type { ReactPopover } from "./react-types.js";
 type ReactProps = {
   readonly scene: Scene | undefined; // undefined to allow for simple early loadign the js when lazy loading the React3Js renderer
   readonly selectedIds: Record<string, boolean> | undefined;
-  readonly activeHotSpots?: Record<string, HotSpotInfo> | undefined;
+  /**
+   * The ids of the relations whose shape is drawn to be clicked, e.g. where a component can be inserted. While defined, even when empty, only the
+   * groups whose material state is Accept can be clicked
+   */
+  readonly activeRelations?: ReadonlyArray<string> | undefined;
   readonly activeComponents?: Record<string, MaterialState> | undefined;
   readonly hoveredIdsExternal?: ReadonlyArray<string> | undefined;
-  readonly showHotSpotTexts?: boolean;
   readonly showDimensions?: boolean;
-  readonly hotSpotTexts?: Record<string, string>;
   readonly popovers?: ReadonlyArray<ReactPopover>;
   readonly useAnimations?: boolean;
   readonly camera?: Camera;
@@ -53,7 +54,7 @@ type ReactProps = {
     e: ThreeEvent<MouseEvent>
   ) => void;
   readonly getTooltips?: (id: string) => ReadonlyArray<ReactPopover>;
-  readonly onClickHotSpot?: (hotSpot: HotSpotInfo, e: ThreeEvent<MouseEvent>) => void;
+  readonly onClickRelation?: (relation: Relation, e: ThreeEvent<MouseEvent>) => void;
   readonly createGroupKey?: (g: Group, idx: number, rootData: Record<string, string> | undefined, id: string) => string;
   readonly createGroupId?: (g: Group) => string;
 };
@@ -63,12 +64,10 @@ export const render = memo(
     scene,
     selectedIds,
     useOldMode,
-    activeHotSpots,
+    activeRelations,
     activeComponents,
     hoveredIdsExternal,
-    hotSpotTexts,
     popovers: reactPopovers,
-    showHotSpotTexts = false,
     showDimensions = true,
     useAnimations = false,
     camera = { type: "Perspective" },
@@ -83,7 +82,7 @@ export const render = memo(
     onHoverGroup,
     onContextMenuGroup,
     getTooltips,
-    onClickHotSpot,
+    onClickRelation,
     createGroupKey,
     createGroupId,
     bufferZones,
@@ -149,19 +148,17 @@ export const render = memo(
           <ReactScene
             scene={scene}
             selectedIds={selectedIds}
-            activeHotSpots={activeHotSpots}
+            activeRelations={activeRelations}
             activeComponents={activeComponents}
             showDimensions={showDimensions}
-            showHotSpotTexts={showHotSpotTexts}
             hoveredIdsExternal={hoveredIdsExternal}
-            hotSpotTexts={hotSpotTexts}
             reactPopovers={reactPopovers}
             materialStateImages={materialStateImages}
             onClickGroup={onClickGroup}
             onHoverGroup={onHoverGroup}
             onContextMenuGroup={onContextMenuGroup}
             getTooltips={getTooltips}
-            onClickHotSpot={onClickHotSpot}
+            onClickRelation={onClickRelation}
             createGroupKey={createGroupKey}
             createGroupId={createGroupId}
             useAlphaTest={useAlphaTest}

package/lib/renderers/react/react-hotspot.d.ts

@@ -1,27 +0,0 @@
-import type { ThreeEvent } from "@react-three/fiber";
-import React from "react";
-import type { HotSpot } from "../../abstract-3d.js";
-export interface HotSpotInfo {
-    readonly replaceId: string;
-    readonly replaceFromId: string;
-    readonly replaceOutlet: string;
-    readonly replaceToId: string;
-    readonly replaceInlet: string;
-}
-export declare const ReactHotSpots: React.MemoExoticComponent<({ hotSpots, showHotSpotTexts, hotSpotTexts, hotSpotZAdjPos, activeHotSpots, onClickHotSpot, }: {
-    readonly hotSpots?: ReadonlyArray<HotSpot>;
-    readonly showHotSpotTexts: boolean;
-    readonly hotSpotZAdjPos: number;
-    readonly hotSpotTexts?: Record<string, string>;
-    readonly activeHotSpots: Record<string, HotSpotInfo> | undefined;
-    readonly onClickHotSpot?: (hotSpot: HotSpotInfo, e: ThreeEvent<MouseEvent>) => void;
-}) => React.JSX.Element>;
-export declare function ReactHotSpot({ h, hotSpotZAdjPos, showHotSpotTexts, hotSpotTexts, activeHotSpots, onClickHotSpot, }: {
-    readonly h: HotSpot;
-    readonly hotSpotZAdjPos: number;
-    readonly showHotSpotTexts: boolean;
-    readonly hotSpotTexts?: Record<string, string>;
-    readonly activeHotSpots: Record<string, HotSpotInfo> | undefined;
-    readonly onClickHotSpot?: (hotSpot: HotSpotInfo, e: ThreeEvent<MouseEvent>) => void;
-}): React.JSX.Element;
-//# sourceMappingURL=react-hotspot.d.ts.map

package/lib/renderers/react/react-hotspot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-hotspot.d.ts","sourceRoot":"","sources":["../../../src/renderers/react/react-hotspot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAO,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAKzD,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,4HAQrB;IACD,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,SAAS,CAAC;IACjE,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACrF,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiBtB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,CAAC,EACD,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,cAAc,GACf,EAAE;IACD,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,SAAS,CAAC;IACjE,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACrF,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+CpB"}

package/lib/renderers/react/react-hotspot.js

@@ -1,37 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Html } from "@react-three/drei";
-import React from "react";
-import { vec3Scale, vec3Zero } from "../../abstract-3d.js";
-import { ReactMaterial } from "./react-material.js";
-import { ReactMesh } from "./react-mesh.js";
-export const ReactHotSpots = React.memo(({ hotSpots, showHotSpotTexts, hotSpotTexts, hotSpotZAdjPos, activeHotSpots, onClickHotSpot, }) => {
-    return (_jsx(_Fragment, { children: hotSpots?.map((h) => (_jsx(ReactHotSpot, { h: h, hotSpotZAdjPos: hotSpotZAdjPos, activeHotSpots: activeHotSpots, hotSpotTexts: hotSpotTexts, onClickHotSpot: onClickHotSpot, showHotSpotTexts: showHotSpotTexts }, h.id))) }));
-});
-export function ReactHotSpot({ h, hotSpotZAdjPos, showHotSpotTexts, hotSpotTexts, activeHotSpots, onClickHotSpot, }) {
-    const [hovered, setHovered] = React.useState(false);
-    const hotSpot = activeHotSpots ? activeHotSpots[h.id] : undefined;
-    const hsPos = h.mesh.geometry.type === "Box" ? h.mesh.geometry.pos : vec3Zero;
-    const text = hotSpotTexts?.[h.id];
-    const geo = h.mesh.geometry;
-    return (_jsxs(_Fragment, { children: [_jsxs("group", { visible: hotSpot !== undefined, ...(hotSpot && {
-                    onClick: (e) => {
-                        if (onClickHotSpot) {
-                            e.stopPropagation();
-                            onClickHotSpot(hotSpot, e);
-                        }
-                    },
-                    onPointerOver: (e) => {
-                        e.stopPropagation();
-                        document.body.style.cursor = "pointer";
-                        setHovered(true);
-                    },
-                    onPointerOut: (_e) => {
-                        document.body.style.cursor = "auto";
-                        setHovered(false);
-                    },
-                    onContextMenu: (e) => {
-                        e.stopPropagation();
-                    },
-                }), children: [_jsx(ReactMesh, { mesh: h.mesh, children: _jsx(ReactMaterial, { isText: false, isHotSpot: true, material: h.mesh.material, hovered: hovered }) }), _jsx(ReactMesh, { mesh: { ...h.mesh, geometry: { ...geo, size: vec3Scale(geo.size, 1.0125) } }, children: _jsx(ReactMaterial, { isText: false, isHotSpot: true, drawBackOnly: true, material: { normal: "rgb(0, 0, 0)", opacity: 1.0 }, hovered: hovered }) })] }), hotSpotTexts && text && (_jsx(Html, { position: [hsPos.x, hsPos.y, hotSpotZAdjPos], center: true, children: _jsx("div", { className: `air-states-container ${showHotSpotTexts ? "" : "air-states-container-hidden"}`, children: _jsx("span", { className: "air-states-text", children: text }) }) }))] }));
-}
-//# sourceMappingURL=react-hotspot.js.map

package/lib/renderers/react/react-hotspot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-hotspot.js","sourceRoot":"","sources":["../../../src/renderers/react/react-hotspot.tsx"],"names":[],"mappings":"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"}

package/src/renderers/react/react-hotspot.tsx

@@ -1,112 +0,0 @@
-import { Html } from "@react-three/drei";
-import type { ThreeEvent } from "@react-three/fiber";
-import React from "react";
-import type { Box, HotSpot } from "../../abstract-3d.js";
-import { vec3Scale, vec3Zero } from "../../abstract-3d.js";
-import { ReactMaterial } from "./react-material.js";
-import { ReactMesh } from "./react-mesh.js";
-
-export interface HotSpotInfo {
-  readonly replaceId: string;
-  readonly replaceFromId: string;
-  readonly replaceOutlet: string;
-  readonly replaceToId: string;
-  readonly replaceInlet: string;
-}
-
-export const ReactHotSpots = React.memo(
-  ({
-    hotSpots,
-    showHotSpotTexts,
-    hotSpotTexts,
-    hotSpotZAdjPos,
-    activeHotSpots,
-    onClickHotSpot,
-  }: {
-    readonly hotSpots?: ReadonlyArray<HotSpot>;
-    readonly showHotSpotTexts: boolean;
-    readonly hotSpotZAdjPos: number;
-    readonly hotSpotTexts?: Record<string, string>;
-    readonly activeHotSpots: Record<string, HotSpotInfo> | undefined;
-    readonly onClickHotSpot?: (hotSpot: HotSpotInfo, e: ThreeEvent<MouseEvent>) => void;
-  }): React.JSX.Element => {
-    return (
-      <>
-        {hotSpots?.map((h) => (
-          <ReactHotSpot
-            key={h.id}
-            h={h}
-            hotSpotZAdjPos={hotSpotZAdjPos}
-            activeHotSpots={activeHotSpots}
-            hotSpotTexts={hotSpotTexts}
-            onClickHotSpot={onClickHotSpot}
-            showHotSpotTexts={showHotSpotTexts}
-          />
-        ))}
-      </>
-    );
-  }
-);
-
-export function ReactHotSpot({
-  h,
-  hotSpotZAdjPos,
-  showHotSpotTexts,
-  hotSpotTexts,
-  activeHotSpots,
-  onClickHotSpot,
-}: {
-  readonly h: HotSpot;
-  readonly hotSpotZAdjPos: number;
-  readonly showHotSpotTexts: boolean;
-  readonly hotSpotTexts?: Record<string, string>;
-  readonly activeHotSpots: Record<string, HotSpotInfo> | undefined;
-  readonly onClickHotSpot?: (hotSpot: HotSpotInfo, e: ThreeEvent<MouseEvent>) => void;
-}): React.JSX.Element {
-  const [hovered, setHovered] = React.useState<boolean>(false);
-  const hotSpot = activeHotSpots ? activeHotSpots[h.id] : undefined;
-  const hsPos = h.mesh.geometry.type === "Box" ? h.mesh.geometry.pos : vec3Zero;
-  const text = hotSpotTexts?.[h.id];
-  const geo = h.mesh.geometry as Box;
-  return (
-    <>
-      <group
-        visible={hotSpot !== undefined}
-        {...(hotSpot && {
-          onClick: (e) => {
-            if (onClickHotSpot) {
-              e.stopPropagation();
-              onClickHotSpot(hotSpot, e);
-            }
-          },
-          onPointerOver: (e) => {
-            e.stopPropagation();
-            document.body.style.cursor = "pointer";
-            setHovered(true);
-          },
-          onPointerOut: (_e) => {
-            document.body.style.cursor = "auto";
-            setHovered(false);
-          },
-          onContextMenu: (e) => {
-            e.stopPropagation();
-          },
-        })}
-      >
-        <ReactMesh mesh={h.mesh}>
-          <ReactMaterial isText={false} isHotSpot={true} material={h.mesh.material} hovered={hovered} />
-        </ReactMesh>
-        <ReactMesh mesh={{ ...h.mesh, geometry: { ...geo, size: vec3Scale(geo.size, 1.0125) } }}>
-          <ReactMaterial isText={false} isHotSpot={true} drawBackOnly={true} material={{ normal: "rgb(0, 0, 0)", opacity: 1.0 }} hovered={hovered} />
-        </ReactMesh>
-      </group>
-      {hotSpotTexts && text && (
-        <Html position={[hsPos.x, hsPos.y, hotSpotZAdjPos]} center>
-          <div className={`air-states-container ${showHotSpotTexts ? "" : "air-states-container-hidden"}`}>
-            <span className="air-states-text">{text}</span>
-          </div>
-        </Html>
-      )}
-    </>
-  );
-}