@volter/game-editor 0.5.67 → 0.5.69

package/dist/assets/react-story-board-CCm2Opwn.js

@@ -0,0 +1 @@
+import"./jsx-runtime-DPjLkJKQ.js";import"./index-nmcBqr7Y.js";import"./index-CtzuWnCS.js";import{c_ as Rt,af as b,da as Mt,db as ot,dc as _t}from"./index-C5ZAyrKq.js";const qt="#191c22",Kt="rgba(255, 255, 255, 0.2)",kt="#20242a",K="#2d323a";function St(){return`linear-gradient(45deg, ${K} 25%, transparent 25%, transparent 75%, ${K} 75%), linear-gradient(45deg, ${K} 25%, transparent 25%, transparent 75%, ${K} 75%)`}const B=20,Q=6,H=22,at=10,yt=B+Q,ft=H+at,It=.6,Ct=.4,Lt=.7,$t=.45;function pt(n,s,l){return n>=s?[1,!0]:n<=l?[0,!1]:[(n-l)/(s-l),!0]}function ht(n,s){const l=Math.max(0,n),i=s?Math.min(1,l/ft):0,[u,d]=pt(i,Lt,$t),c=Math.max(0,l-ft*i),y=Math.min(1,c/yt),[v,k]=pt(y,It,Ct),w=k?yt*y:0;return{frame:{scale:y,opacity:v,visible:k,offset:Q*y+B},group:s?{scale:i,opacity:u,visible:d,offset:w+at*i+H}:null}}function mt(n,s){n.style.transformOrigin="0 100%",n.style.transform=s.scale>=1?"":`scale(${s.scale})`,n.style.opacity=s.visible?String(s.opacity):"0",n.style.display=s.visible?"":"none"}const Ot={width:null,height:null};let J=Ot;const st=new Set;function Bt(){return J}function Pt(n,s){const l=n===null?null:Math.max(1,Math.round(n)),i=s===null?null:Math.max(1,Math.round(s));if(!(J.width===l&&J.height===i)){J={width:l,height:i};for(const u of st)u()}}function Jt(){Pt(null,null)}function Ft(n){return st.add(n),()=>st.delete(n)}const Tt=640,Vt=400,N=64,C=64,gt=72,zt=28,nt=C+H+at+B+Q;function wt(n,s){const l=new Map(n.map(i=>[i.id,i]));return s.sections.map(i=>({key:i.id,label:i.label,stories:i.storyIds.flatMap(u=>{const d=l.get(u);return d?[d]:[]})}))}const Nt=n=>n.split("/").map(s=>s.trim()).filter(Boolean);function xt(n){const s=new Set(n.filter(i=>i.stories.length===1).map(i=>i.key)),l=[];{const i=new Map;for(const u of n){if(!s.has(u.key)){l.push({key:u.key,label:u.label,stories:[...u.stories]});continue}const d=Nt(u.label).slice(0,-1).join("/");let c=i.get(d);c||(c={key:`category:${d}`,label:d||null,stories:[]},i.set(d,c),l.push(c)),c.stories.push(...u.stories)}}return l}function Gt(n,s,l){const i=xt(wt(n,s)),u=new Map,d=new Map;let c=N,y=0;i.forEach((w,P)=>{const E=Math.max(1,Math.ceil(Math.sqrt(w.stories.length))),S=Math.ceil(w.stories.length/E),L=w.stories.map(h=>l(h)),I=Array.from({length:E},()=>0),R=Array.from({length:S},()=>0);L.forEach((h,f)=>{const m=f%E,A=Math.floor(f/E);I[m]=Math.max(I[m],h.width),R[A]=Math.max(R[A],h.height)});const F=I.map((h,f)=>I.slice(0,f).reduce((m,A)=>m+A+C,0)),W=R.map((h,f)=>R.slice(0,f).reduce((m,A)=>m+A+C,0)),$=P===0?Number.POSITIVE_INFINITY:w.label!==null?nt:C+B+Q;w.label!==null&&d.set(w.key,{x:N,y:c,roomAbove:$}),w.stories.forEach((h,f)=>{const m=Math.floor(f/E),A=f%E,D=L[f],{width:T,height:U}=D,it=N+F[A],Y=c+W[m];u.set(h.id,{x:it,y:Y,width:T,height:U,roomAbove:m===0?$:C,withGroupLabel:i.length>1&&m===0&&w.label!==null})});const x=I.reduce((h,f)=>h+f,0)+Math.max(0,E-1)*C,O=R.reduce((h,f)=>h+f,0)+Math.max(0,S-1)*C;y=Math.max(y,x),c+=O+nt});const v=N*2+y,k=c-nt+N;return{layouts:u,groupOrigins:d,width:v,height:n.length?k:0}}const _=new WeakMap,rt=new Set,Ht=null;function G(){for(const n of rt)n()}function Qt(n){return rt.add(n),()=>rt.delete(n)}function Xt(n){return n?_.get(n)?.viewport()??Ht:null}function Zt(n,s){const l=n?_.get(n):void 0;return l?(l.setViewport(s),!0):!1}function te(n){const s=n?_.get(n):void 0;return!s||s.viewport().locked?!1:(s.setRotation(!s.viewport().rotated),!0)}function Wt(){const n=Bt();return{width:n.width??Tt,height:n.height??Vt}}function bt(n,s,l){if(s.width<=0||s.height<=0)return;const i=Math.max(1,n.clientWidth-gt*2),u=Math.max(1,n.clientHeight-gt*2),d=Math.min(l,Math.max(.1,Math.min(i/s.width,u/s.height)));_t(n.clientWidth/2-(s.x+s.width/2)*d,n.clientHeight/2-(s.y+s.height/2)*d,d)}function ee(n){const s=_.get(n);return s?(s.fitAll(),!0):!1}function oe(n,s,l){return n?_.get(n)?.selectAtClientPoint(s,l)??!1:!1}function ne(n,s,l){return n?_.get(n)?.zoomAtClientPoint(s,l)??!1:!1}function se(n,s,l,i,u){if(s.length===0)throw new Error("A React story board requires at least one story.");const d=n.parentElement;if(!d)throw new Error("A React story board layer must be attached before mounting.");n.dataset.volterReactStoryBoard="true",n.style.contain="none";const c=document.createElement("div");c.dataset.testid="react-story-board",c.dataset.volterReactStoryBoardCanvas="true",c.style.position="absolute",c.style.left="0",c.style.top="0",c.style.transformOrigin="0 0",n.appendChild(c);const y=document.createElement("div");y.dataset.testid="react-story-board-chrome",y.dataset.volterStoryBoardChromeFor=n.dataset.worldId??"",y.style.position="absolute",y.style.inset="0",y.style.zIndex=String(Rt.sticky),y.style.display=n.style.display||"block",y.style.pointerEvents="none",y.style.overflow="visible",d.appendChild(y);const v=new Map,k=new Map,w=new Map,P=new Map,E=new Map,S=new Map,L=wt(s,u.index),I=new Map,R=new Map,F=new Map,W=new Map;let $,x=s.some(t=>t.id===l)?l:s[0].id,O=!1,h=!1;const f=t=>{const e=u.resolve(t,t.frameSize??Wt(),F.has(t.id)?F.get(t.id):void 0,W.get(t.id)),o=S.get(t.id);return o?{...e,width:o.frame.width,height:o.frame.height,layout:"fullscreen"}:t.frameSize?{...e,layout:"fullscreen"}:e},m=()=>{const t=f(s.find(e=>e.id===x));$={storyId:x,selectedViewportId:t.selectedViewportId,locked:t.locked,rotated:t.rotated,choices:t.choices}};m();const A=new Set(L.filter(t=>t.stories.length===1).map(t=>t.key)),D=t=>t.split("/").map(e=>e.trim()).filter(Boolean),T=new Map;for(const t of L)for(const e of t.stories){const o=(e.title?D(e.title).at(-1):void 0)??D(t.label).at(-1);T.set(e.id,A.has(t.key)?o??e.label:e.label)}const U=xt(L);for(const t of L.flatMap(e=>e.stories)){const e=document.createElement("section");e.dataset.testid="react-story-frame",e.dataset.storyId=t.id,e.dataset.storyLabel=t.label,e.dataset.storyGroup=u.index.sections.find(et=>et.storyIds.includes(t.id))?.label??"",e.style.position="absolute",e.style.border=`1px solid ${b.boundary.strong}`,e.style.borderRadius="0",e.style.backgroundColor=kt,e.style.backgroundImage=St(),e.style.backgroundPosition="0 0, 8px 8px",e.style.backgroundSize="16px 16px",e.style.boxShadow="none";const o=document.createElement("button");o.type="button",o.dataset.testid="react-story-frame-label",o.dataset.storyId=t.id,o.title=`${T.get(t.id)??t.label} — click to select, double-click to zoom — ${t.modulePath}`,o.textContent=T.get(t.id)??t.label,o.style.position="absolute",o.style.height=`${B}px`,o.style.padding="0 2px",o.style.border="0",o.style.appearance="none",o.style.background="transparent",o.style.color=b.content.primary,o.style.font=`600 12px ${b.typography.sans}`,o.style.lineHeight=`${B}px`,o.style.textAlign="left",o.style.cursor="default",o.style.pointerEvents="auto",o.style.whiteSpace="nowrap",o.style.overflow="hidden",o.style.textOverflow="ellipsis",o.style.width="max-content",o.addEventListener("click",()=>i(t.id,"highlight")),o.addEventListener("dblclick",()=>i(t.id,"zoom"));const r=document.createElement("div");r.dataset.testid="react-story-frame-content",r.dataset.storyId=t.id,r.style.position="absolute",r.style.left="0",r.style.top="0",r.style.overflow="hidden",r.style.contain="layout paint",r.style.boxSizing="border-box";const a=document.createElement("div");a.dataset.testid="react-story-frame-note",a.dataset.storyId=t.id,a.style.position="absolute",a.style.left="0",a.style.right="0",a.style.bottom="0",a.style.display="none",a.style.padding="6px 8px",a.style.boxSizing="border-box",a.style.background=b.surface.overlay,a.style.color=b.content.muted,a.style.font=`11px ${b.typography.sans}`,a.style.pointerEvents="none";const p=document.createElement("div");p.dataset.testid="react-story-frame-error",p.dataset.storyId=t.id,p.style.position="absolute",p.style.inset="0",p.style.display="none",p.style.padding="16px",p.style.boxSizing="border-box",p.style.background=b.surface.overlay,p.style.color=b.semantic.danger,p.style.font=`12px ${b.typography.mono}`,p.style.pointerEvents="none",e.append(r,a,p),c.appendChild(e),y.appendChild(o),v.set(t.id,{element:e,content:r}),k.set(t.id,p),w.set(t.id,a),P.set(t.id,o)}if(U.length>1)for(const t of U){if(t.label===null)continue;const e=document.createElement("div");e.dataset.testid="react-story-group-label",e.dataset.storyGroup=t.key,e.textContent=t.label,e.style.position="absolute",e.style.height=`${H}px`,e.style.lineHeight=`${H}px`,e.style.color=b.content.primary,e.style.font=`700 14px ${b.typography.sans}`,e.style.whiteSpace="nowrap",e.style.pointerEvents="none",e.style.width="max-content",y.appendChild(e),I.set(t.key,e)}const Y=()=>{for(const[t,e]of v){const o=t===x;e.element.dataset.active=o?"true":"false",e.element.style.outline=o?`2px solid ${b.accent.default}`:"none",e.element.style.outlineOffset=o?"3px":"0";const r=P.get(t);r.setAttribute("aria-pressed",String(o)),r.style.color=o?b.accent.default:b.content.muted}},lt=(t,e)=>Number.isFinite(t)?t*e:Number.POSITIVE_INFINITY,j=()=>{const t=ot();for(const[e,o]of E){const r=P.get(e),{frame:a}=ht(lt(o.roomAbove,t.zoom),o.withGroupLabel);r.style.left=`${t.x+o.x*t.zoom}px`,r.style.top=`${t.y+o.y*t.zoom-a.offset}px`;const p=Math.max(1,(o.width+C/2)*t.zoom);r.style.maxWidth=`${p}px`,mt(r,p>=zt?a:{...a,opacity:0,visible:!1})}for(const[e,o]of R){const r=I.get(e);if(!r)continue;const{group:a}=ht(lt(o.roomAbove,t.zoom),!0);a&&(r.style.left=`${t.x+o.x*t.zoom}px`,r.style.top=`${t.y+o.y*t.zoom-a.offset}px`,mt(r,a))}},V=()=>{E.clear(),R.clear();const t=Gt(s,u.index,f);for(const[r,a]of t.groupOrigins)R.set(r,a);for(const r of s){const a=t.layouts.get(r.id);if(!a)continue;E.set(r.id,a);const{x:p,y:et,width:dt,height:ut}=a,z=f(r),g=v.get(r.id);g.element.style.left=`${p}px`,g.element.style.top=`${et}px`,g.element.style.width=`${dt}px`,g.element.style.height=`${ut}px`;const M=S.get(r.id);g.element.style.overflow=M?"hidden":"",g.content.style.width=`${M?M.mount.width:dt}px`,g.content.style.height=`${M?M.mount.height:ut}px`,g.content.style.left=`${M?-M.offset.x:0}px`,g.content.style.top=`${M?-M.offset.y:0}px`,g.content.dataset.storyLayout=z.layout,g.content.style.padding=z.layout==="padded"?"16px":"0",g.content.style.display=z.layout==="centered"?"flex":"block",g.content.style.alignItems=z.layout==="centered"?"center":"",g.content.style.justifyContent=z.layout==="centered"?"center":""}const e=t.width,o=t.height;c.style.width=`${e}px`,c.style.height=`${o}px`,n.style.width=`${e}px`,n.style.height=`${o}px`,j()},vt=()=>{const t=Number.parseFloat(c.style.width),e=Number.parseFloat(c.style.height);bt(d,{x:0,y:0,width:t,height:e},1)};let X=null;const Z=()=>{h||(h=!0,queueMicrotask(()=>{h=!1,!O&&(q(x,!0),X=ot())}))},q=(t,e=!1)=>{const o=v.get(t),r=E.get(t);!o||!r||(x=t,Y(),m(),G(),e&&bt(d,r,2))},ct=(t,e)=>{for(const[o,r]of v){const a=r.content.getBoundingClientRect();if(t>=a.left&&t<=a.right&&e>=a.top&&e<=a.bottom)return o}return null},Et=Ft(()=>{V(),Z()}),At=Mt(j);V(),Y(),j();const tt={element:c,frames:v,activeContent:()=>v.get(x).content,activate:q,clearError:t=>{const e=k.get(t);e&&(e.style.display="none",e.textContent="")},fitAll:vt,selectAtClientPoint:(t,e)=>{const o=ct(t,e);return!o||o===x?!1:(i(o,"highlight"),!0)},zoomAtClientPoint:(t,e)=>{const o=ct(t,e);return o?(i(o,"zoom"),!0):!1},setError:(t,e)=>{const o=k.get(t);o&&(o.textContent=e,o.style.display="block")},setMeasuredFrame:(t,e)=>{if(O||!v.has(t))return;const o=S.get(t);if(e===null){if(!o)return;S.delete(t)}else{if(o&&o.frame.width===e.frame.width&&o.frame.height===e.frame.height&&o.mount.width===e.mount.width&&o.mount.height===e.mount.height&&o.offset.x===e.offset.x&&o.offset.y===e.offset.y)return;S.set(t,e)}V(),j(),X!==null&&ot()===X&&Z()},setNote:t=>{for(const e of w.values())e.textContent=t??"",e.style.display=t===null?"none":"block"},viewport:()=>$,setViewport:t=>{$.locked||(F.set(x,t),V(),m(),G(),q(x,!0))},setRotation:t=>{$.locked||(W.set(x,t),V(),m(),G(),q(x,!0))},dispose:()=>{O||(O=!0,Et(),At(),_.get(d)===tt&&_.delete(d),G(),c.remove(),y.remove())}};return _.set(d,tt),G(),Z(),tt}export{qt as R,Qt as a,Xt as b,Zt as c,Pt as d,Jt as e,ee as f,Bt as g,se as h,Kt as i,oe as j,Gt as r,Ft as s,te as t,ne as z};