https://builderforce.ai/_next/static/chunks/11468.292a2282f80d9a51.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[11468],{11468:(e,t,r)=>{"use strict";r.r(t),r.d(t,{Canvas3DView:()=>m});var n=r(32957),a=r(3625),l=r(70307),i=r(15948),c=r(5337),s=r(34402),u=r(19773),d=r.n(u);function o(e){let{card:t,face:r,solid:a,orbit:i,selected:u,movable:o,onPointerDown:h,onKeyDown:p,onClick:y}=e,f=(0,l.c)("canvasCommands"),v={transform:(0,s.oL)(t),...t.accent?{"--canvas-3d-accent":t.accent}:{}},m={type:"button","aria-pressed":u,"data-selected":u,"data-movable":o,onPointerDown:h,onKeyDown:p,onClick:y},x=a?{transform:"rotateY(".concat(-i.yaw,"deg) rotateX(").concat(-i.pitch,"deg)")}:void 0,w=f("threeD.previewAlt",{label:t.label});return void 0!==r?(0,n.jsxs)("div",{className:d().faceCard,style:{width:t.width,height:t.height,...v},"data-testid":"canvas-3d-face",children:[(0,n.jsx)("div",{className:d().face,inert:!0,children:r}),a&&(0,n.jsx)("img",{className:d().faceSolid,style:x,src:a,alt:w,width:320,height:190,draggable:!1}),(0,n.jsx)("button",{...m,className:d().faceHandle,"aria-label":t.label})]}):(0,n.jsxs)("button",{...m,className:d().card,style:{width:t.width,minHeight:t.height,...v},children:[(0,n.jsxs)("span",{className:d().cardHead,children:[t.icon&&(0,n.jsx)("i",{"aria-hidden":!0,children:(0,n.jsx)(c.I,{source:t.icon,size:18})}),(0,n.jsx)("b",{children:t.label})]}),(null!=a?a:t.preview)&&(0,n.jsx)("img",{className:d().cardPreview,"data-solid":!!a,...x?{style:x}:{},src:null!=a?a:t.preview,alt:w,width:320,height:190,loading:"lazy",draggable:!1}),t.sublabel&&(0,n.jsx)("span",{className:d().cardSub,children:t.sublabel}),(0,n.jsx)("span",{className:d().cardGroup,children:t.group})]})}let h=(0,a.memo)(function(e){let{node:t,render:r}=e;return(0,n.jsx)(n.Fragment,{children:r(t)})});var p=r(507),y=r(62971);function f(e){return"ArrowLeft"===e?[-12,0]:"ArrowRight"===e?[12,0]:"ArrowUp"===e?[0,-12]:"ArrowDown"===e?[0,12]:null}function v(e){let[t,r]=[...e.values()];return t&&r?{x:(t.x+r.x)/2,y:(t.y+r.y)/2,spread:Math.hypot(r.x-t.x,r.y-t.y)}:null}function m(e){let{nodes:t,edges:r,describe:c,renderCard:u,measure:m,selectedIds:x=[],onSelect:w,onMove:b,onExit:_,exitLabel:g,initialDepthMode:k="flow"}=e,C=(0,l.c)("canvasCommands"),[D,j]=(0,a.useState)(s.yI),[z,V]=(0,a.useState)(k),[N,I]=(0,a.useState)(!0),[M,E]=(0,a.useState)(null),L=(0,a.useRef)(null),S=(0,a.useRef)(null),Y=(0,a.useRef)(new Map),H=(0,a.useRef)(!1),R=(0,a.useMemo)(()=>(0,s.KD)({nodes:t,edges:r,describe:c,depthMode:z,...m?{measure:m}:{}}),[z,c,r,m,t]),X=(0,a.useMemo)(()=>new Set(x),[x]),A=(0,a.useMemo)(()=>u?new Map(t.map(e=>[e.id,e])):null,[t,u]),P=(0,a.useRef)(D);P.current=D;let T=(0,a.useRef)(R);T.current=R;let Z=(0,a.useRef)(b);Z.current=b;let O=(0,a.useCallback)(()=>{var e,t;return(0,s.k_)(R.plane,null!=(t=null==(e=L.current)?void 0:e.getBoundingClientRect())?t:null)},[R.plane]),K=(0,a.useRef)(O);K.current=O;let F=(0,a.useRef)(!1),G=(0,a.useCallback)(e=>{F.current=!0,j(t=>(0,s.bA)(t,e))},[]),B=(0,a.useCallback)(()=>{F.current=!1,j({...s.yI,zoom:K.current()})},[]);(0,a.useLayoutEffect)(()=>{B()},[z,B]),(0,a.useEffect)(()=>{if(F.current)return;let e=O();j(t=>t.zoom===e?t:{...t,zoom:e})},[O]),(0,a.useEffect)(()=>{let e=L.current;if(e&&"undefined"!=typeof ResizeObserver)return(0,i.j)(e,()=>{if(F.current)return;let e=K.current();j(t=>t.zoom===e?t:{...t,zoom:e})})},[]);let J=(0,a.useCallback)(e=>{var t;let r=null==(t=L.current)?void 0:t.getBoundingClientRect();return r?{x:e.clientX-(r.left+r.width/2),y:e.clientY-(r.top+r.height/2)}:{x:0,y:0}},[]);(0,a.useEffect)(()=>{if(!M)return;let e=e=>{var t;let r=S.current;if(!r)return;if(Y.current.has(e.pointerId)&&Y.current.set(e.pointerId,{x:e.clientX,y:e.clientY}),"pinch"===r.kind){let e=v(Y.current);if(!e)return;H.current=!0,F.current=!0;let t=r.spread>0?e.spread/r.spread:1,n=e.x-r.x,a=e.y-r.y;S.current={kind:"pinch",...e},j(e=>(0,s.Te)((0,s.bA)(e,t),n,a));return}if("move"===r.kind&&r.pointerId!==e.pointerId)return;let n=e.clientX-r.x,a=e.clientY-r.y;if(Math.abs(n)+Math.abs(a)>3&&(H.current=!0),"orbit"===r.kind){S.current={...r,x:e.clientX,y:e.clientY},j(e=>(0,s.iJ)(e,n,a));return}if("pan"===r.kind){F.current=!0,S.current={...r,x:e.clientX,y:e.clientY},j(e=>(0,s.Te)(e,n,a));return}let l="depth"===r.axis?{x:0,y:0,z:r.sent.z+(0,s.Vg)(P.current,{dx:n,dy:a},{x:r.grab.x,y:r.grab.y,z:r.planeZ})}:(()=>{let t=(0,s.hF)(P.current,J(e),r.planeZ);return t?{x:t.x-r.grab.x,y:t.y-r.grab.y,z:0}:r.sent})(),i={x:l.x-r.sent.x,y:l.y-r.sent.y,z:l.z-r.sent.z};S.current={...r,x:e.clientX,y:e.clientY,sent:l},(i.x||i.y||i.z)&&(null==(t=Z.current)||t.call(Z,[...r.from.keys()].map(e=>({id:e,dx:i.x,dy:i.y,dz:i.z}))))},t=e=>{Y.current.delete(e.pointerId);let t=S.current;if((null==t?void 0:t.kind)==="move"){if(t.pointerId!==e.pointerId)return;S.current=null,E(null);return}let r=[...Y.current.values()];if((null==t?void 0:t.kind)==="pinch"&&1===r.length){S.current={kind:"orbit",...r[0]},E("orbit");return}Y.current.size||(S.current=null,E(null))};return window.addEventListener("pointermove",e),window.addEventListener("pointerup",t),window.addEventListener("pointercancel",t),()=>{window.removeEventListener("pointermove",e),window.removeEventListener("pointerup",t),window.removeEventListener("pointercancel",t)}},[J,M]),(0,a.useEffect)(()=>{let e=L.current;if(!e)return;let t=e=>{e.preventDefault(),G((0,s.l4)(e.deltaY))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[G]);let W=(0,a.useCallback)(e=>{if("mouse"===e.pointerType&&0!==e.button&&1!==e.button)return;Y.current.set(e.pointerId,{x:e.clientX,y:e.clientY});let t=v(Y.current);if(t){H.current=!0,S.current={kind:"pinch",...t},E("pinch");return}H.current=!1;let r=1===e.button||e.shiftKey?"pan":"orbit";S.current="pan"===r?{kind:"pan",x:e.clientX,y:e.clientY}:{kind:"orbit",x:e.clientX,y:e.clientY},E(r)},[]),Q=(0,a.useCallback)(e=>new Map((X.has(e.id)?T.current.cards.filter(e=>X.has(e.id)&&!e.locked):[e]).map(e=>[e.id,{x:e.x,y:e.y,z:e.z}])),[X]),U=(0,a.useCallback)((e,t)=>

1{if(!Z.current||t.locked||"mouse"===e.pointerType&&0!==e.button)return;let r=e.shiftKey?"depth":"plane",n="depth"===r?{x:t.x,y:t.y}:(0,s.hF)(P.current,J(e),t.z);n&&(e.stopPropagation(),H.current=!1,F.current=!0,S.current={kind:"move",pointerId:e.pointerId,axis:r,from:Q(t),planeZ:t.z,grab:n,x:e.clientX,y:e.clientY,sent:{x:0,y:0,z:0}},E("move"))},[Q,J]),q=(0,a.useCallback)((e,t,r,n)=>{Z.current&&!e.locked&&(F.current=!0,Z.current([...Q(e).keys()].map(e=>({id:e,dx:t,dy:r,dz:n}))))},[Q]),$=(0,a.useCallback)((e,t)=>{let r=f(e.key);r&&Z.current&&!t.locked&&(e.preventDefault(),e.stopPropagation(),e.shiftKey?q(t,0,0,-(3.3333333333333335*r[1])):q(t,r[0],r[1],0))},[q]),ee=(0,a.useCallback)(e=>{let t=f(e.key);if(t){e.preventDefault(),e.shiftKey?(F.current=!0,j(e=>(0,s.Te)(e,-t[0],-t[1]))):j(e=>(0,s.iJ)(e,t[0],t[1]));return}"+"===e.key||"="===e.key?(e.preventDefault(),G(1.25)):"-"===e.key||"_"===e.key?(e.preventDefault(),G(.8)):"0"===e.key?(e.preventDefault(),B()):"Escape"===e.key&&(e.preventDefault(),_())},[_,B,G]),[et,er]=(0,a.useState)({yaw:s.yI.yaw,pitch:s.yI.pitch});(0,a.useEffect)(()=>{if(M)return;let e=window.setTimeout(()=>er({yaw:Math.round(D.yaw),pitch:Math.round(D.pitch)}),160);return()=>window.clearTimeout(e)},[M,D.pitch,D.yaw]);let[en,ea]=(0,a.useState)({}),el=R.cards.map(e=>{var t,r;return null!=(r=null==(t=e.geometry)?void 0:t.url)?r:""}).join("\0");(0,a.useEffect)(()=>{let e=T.current.cards.filter(e=>{var t;return null==(t=e.geometry)?void 0:t.url});if(!e.length)return void ea(e=>Object.keys(e).length?{}:e);let t=!0;return Promise.all(e.map(async e=>{let t=e.geometry,r=await (0,y.d)(t.url,t.format);return[e.id,(0,y.e)(t.url,r,et.yaw,-et.pitch)]})).then(e=>{if(!t)return;let r=Object.fromEntries(e.filter(e=>null!==e[1]));ea(e=>Object.keys(r).length===Object.keys(e).length&&Object.entries(r).every(t=>{let[r,n]=t;return e[r]===n})?e:r)}),()=>{t=!1}},[el,et.pitch,et.yaw]);let ei=(0,a.useCallback)((e,t)=>null!=t?t:C("threeD.layerName",{index:e+1}),[C]),ec=(0,a.useMemo)(()=>R.cards.filter(e=>e.z!==e.layerZ),[R.cards]),es=(0,a.useCallback)(()=>{Z.current&&ec.length&&Z.current(ec.filter(e=>!e.locked).map(e=>({id:e.id,dx:0,dy:0,dz:e.layerZ-e.z})))},[ec]),eu=(0,a.useCallback)(e=>{let t=new Set(e),r=T.current.cards.filter(e=>t.has(e.id));r.length&&(F.current=!0,j(e=>(0,s.r_)(e,{x:r.reduce((e,t)=>e+t.x,0)/r.length,y:r.reduce((e,t)=>e+t.y,0)/r.length,z:r.reduce((e,t)=>e+t.z,0)/r.length})))},[]),ed=(0,a.useMemo)(()=>({depthMode:z,toggleDepth:()=>V(e=>s.QH[(s.QH.indexOf(e)+1)%s.QH.length]),zoomIn:()=>G(1.25),zoomOut:()=>G(.8),resetView:B,focusObjects:eu,layersVisible:N,toggleLayers:()=>I(e=>!e),...b&&ec.some(e=>!e.locked)?{dropToLayers:es}:{}}),[z,es,eu,N,ec,b,B,G]);(0,p.yV)(ed);let eo=(0,a.useMemo)(()=>g?(0,s.hN)(D,R):null,[g,D,R]);return(0,n.jsxs)("section",{className:d().scene,"aria-label":C("threeD.title"),"data-testid":"canvas-3d-view",children:[(0,n.jsxs)("div",{ref:L,className:d().viewport,"data-gesture":null!=M?M:"idle",tabIndex:0,"aria-label":C(b?"threeD.spaceLabel":"threeD.orbitLabel"),onPointerDown:W,onKeyDown:ee,children:[0===R.cards.length?(0,n.jsx)("p",{className:d().empty,children:C("threeD.empty")}):(0,n.jsx)("div",{className:d().camera,style:{perspective:"".concat(s.KS,"px"),transform:(0,s.df)(D)},children:(0,n.jsxs)("div",{className:d().stage,style:{transform:(0,s.cB)(D)},children:[N&&R.layers.map(e=>(0,n.jsx)("div",{className:d().plane,"aria-hidden":!0,style:{width:R.plane.width,height:R.plane.height,transform:(0,s.oL)({x:0,y:0,z:e.z})},children:(0,n.jsxs)("span",{className:d().planeTag,children:[ei(e.index,e.label),(0,n.jsx)("i",{children:C("threeD.layerCount",{count:e.count})})]})},e.index)),R.links.map(e=>{let{transform:t,length:r}=(0,s.Ii)(e.from,e.to);return(0,n.jsx)("i",{className:d().link,"aria-hidden":!0,"data-spans":e.spansLayers,style:{width:Math.max(1,r),transform:t}},e.id)}),N&&ec.map(e=>{let{transform:t,length:r}=(0,s.Ii)({x:e.x,y:e.y,z:e.layerZ},e);return(0,n.jsx)("i",{className:d().tether,"aria-hidden":!0,style:{width:Math.max(1,r),transform:t}},"tether:".concat(e.id))}),R.cards.map(e=>{let t=null==A?void 0:A.get(e.id);return(0,n.jsx)(o,{card:e,...t&&u?{face:(0,n.jsx)(h,{node:t,render:u})}:{},solid:en[e.id],orbit:D,selected:X.has(e.id),movable:!!b&&!e.locked,onPointerDown:t=>U(t,e),onKeyDown:t=>

1$(t,e),onClick:t=>{0!==t.detail&&H.current||null==w||w(e.id)}},e.id)})]})}),g&&(0,n.jsx)("button",{type:"button",className:d().exit,style:eo?{"--canvas-3d-exit-x":"".concat(Math.round(eo.x),"px"),"--canvas-3d-exit-y":"".concat(Math.round(eo.y),"px")}:void 0,"data-anchored":!!eo,"aria-label":g,title:g,"data-testid":"canvas-3d-exit",onPointerDown:e=>e.stopPropagation(),onClick:_,children:(0,n.jsx)("span",{"aria-hidden":"true",children:"\xd7"})})]}),(0,n.jsx)("footer",{className:d().hint,children:C(b?"threeD.spaceHint":"threeD.hint")})]})}},19773:e=>{e.exports={scene:"Canvas3DView_scene__jVuOa",viewport:"Canvas3DView_viewport__pxcqB",camera:"Canvas3DView_camera__0ZAuA",stage:"Canvas3DView_stage__oIcv6",empty:"Canvas3DView_empty__i1H6a",plane:"Canvas3DView_plane__6_3C0",planeTag:"Canvas3DView_planeTag__ydmCJ",link:"Canvas3DView_link__WAJ3M",tether:"Canvas3DView_tether__PZb1Z",card:"Canvas3DView_card__VUOYF",cardHead:"Canvas3DView_cardHead__2PpLp",cardPreview:"Canvas3DView_cardPreview__L2nyZ",cardSub:"Canvas3DView_cardSub__rndmG",cardGroup:"Canvas3DView_cardGroup__u74DO",faceCard:"Canvas3DView_faceCard__hWstt",face:"Canvas3DView_face__l2dYU",faceHandle:"Canvas3DView_faceHandle__GZx0j",faceSolid:"Canvas3DView_faceSolid__mZE6h",exit:"Canvas3DView_exit___IxGL",hint:"Canvas3DView_hint__THAcb"}},62971:(e,t,r)=>{"use strict";r.d(t,{d:()=>i,e:()=>c});var n=r(96617);let a=new Map,l=new Map;function i(e,t){let r=a.get(e);if(r)return r;let l=(async()=>{try{let l=await fetch(e);if(!l.ok)return[];let i=await l.arrayBuffer(),c=null!=(r=(0,n.WX)(null!=t?t:""))?r:(0,n.WX)(e);var r,a=(0,n.EI)(i,c);if(a.length<=4e3)return a;let s=a.length/4e3;return Array.from({length:4e3},(e,t)=>a[Math.floor(t*s)])}catch(e){return[]}})();return a.set(e,l),l}function c(e,t,r,a){if(!t.length)return null;let i="".concat(e,"@").concat(r.toFixed(1),"/").concat(a.toFixed(1)),c=l.get(i);if(c)return c;let s=(0,n.Cz)(t,{yaw:r,pitch:a});if(!s)return null;let u=(0,n.yT)(s);if(l.size>=240){let e=l.keys().next().value;void 0!==e&&l.delete(e)}return l.set(i,u),u}}}]);