dev-process-kit 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -9
- package/dist/chunks/shared-B2K3LoOU.js +1016 -0
- package/dist/chunks/{shared-D6UXy-Qw.js → shared-BqW3KAJ4.js} +99 -46
- package/dist/chunks/{shared-DZlREPaN.js → shared-Byv6cc0r.js} +480 -238
- package/dist/chunks/{shared-D3EKtSkd.js → shared-CKG_SQh5.js} +1 -1
- package/dist/chunks/{shared-C4Y4jSXa.js → shared-CPAT0Cgk.js} +4 -2
- package/dist/chunks/shared-CwbzACTe.js +1874 -0
- package/dist/chunks/{shared-utv1engQ.js → shared-DBDgdVsd.js} +1 -1
- package/dist/chunks/shared-DMlMTd3c.js +1018 -0
- package/dist/chunks/shared-DaoPCw6-.js +556 -0
- package/dist/chunks/shared-DqB_TR20.js +1599 -0
- package/dist/chunks/shared-DsVxrO_3.js +609 -0
- package/dist/chunks/shared-iQIywbRc.js +676 -0
- package/dist/chunks/shared-xrCdgpNS.js +1 -0
- package/dist/components.js +1 -1
- package/dist/index.js +1 -1
- package/dist/templates/event-storming.js +1 -1
- package/dist/templates/example-mapping.js +1 -1
- package/dist/templates/grill.js +1 -1
- package/dist/templates/plain.js +1 -1
- package/dist/templates/prototype.js +1 -1
- package/dist/templates/slides.js +1 -1
- package/dist/templates/task-board.js +1 -0
- package/dist/templates/usm.js +1 -1
- package/package.json +3 -2
- package/dist/chunks/shared-BFAVBf4I.js +0 -1
- package/dist/chunks/shared-BXV4Dm_n.js +0 -522
- package/dist/chunks/shared-CQlssGTf.js +0 -692
- package/dist/chunks/shared-CcD4vDCE.js +0 -1461
- package/dist/chunks/shared-D2QreyJq.js +0 -926
- package/dist/chunks/shared-OdGbSUTa.js +0 -574
- package/dist/chunks/shared-TjJWiz7W.js +0 -546
|
@@ -1,926 +0,0 @@
|
|
|
1
|
-
import{a9 as le,aa as U,ab as et,ac as nt,at as _,ad as v,au as B,ae as F,af as L,ag as M,q as T,an as S,v as ot,as as ft,P as ce,f as pe,_ as he,V,R as w,a0 as xt,a5 as me,k as ue,$ as gt,a6 as fe,a1 as N,av as xe,a2 as k,A as ge,K as be,i as ve,aw as ke,a4 as X,a3 as bt,ax as Ee,T as vt,m as z}from"./shared-CcD4vDCE.js";import{P as kt,c as ye,r as $e,p as we,a as Te}from"./shared-C4Y4jSXa.js";import{c as Et}from"./shared-ml5h7U5L.js";function Se(e,t){let n=0;for(let o=0;o<e.length;o++)n+=t(e[o],o);return n}const q=["actor","command","aggregate","event","policy","readmodel","external","hotspot"],Ie=U({id:B,name:L(v(),M(1)),description:_(v())}),Le=U({id:B,type:F(q),name:L(v(),M(1)),description:_(v()),contextId:_(v())}),Me=U({id:B,from:L(v(),M(1)),to:L(v(),M(1)),label:_(v()),kind:_(F(["member","flow"]))}),yt=U({title:_(v()),contexts:et(nt(Ie),[]),elements:et(nt(Le),[]),links:et(nt(Me),[])}),$t=e=>{const t=le(yt,e),n=new Set(t.elements.map(i=>i.id)),o=new Set(t.contexts.map(i=>i.id));for(const i of t.elements)if(i.contextId!==void 0&&!o.has(i.contextId))throw new Error(`unknown context "${i.contextId}" for note "${i.id}"`);for(const i of t.links){if(!n.has(i.from))throw new Error(`unknown note "${i.from}" in link "${i.id}"`);if(!n.has(i.to))throw new Error(`unknown note "${i.to}" in link "${i.id}"`)}return t},wt=()=>({contexts:[],elements:[],links:[]}),P=(e,t)=>{if(t!==void 0)return e.elements.find(n=>n.id===t)},Y=(e,t)=>{if(t!==void 0)return e.contexts.find(n=>n.id===t)},it=(e,t)=>{if(t!==void 0)return e.links.find(n=>n.id===t)},K=e=>e.elements.map(t=>t.id),$={SET_ELEMENT_NAME:T("SET_ELEMENT_NAME","element",S({name:L(v(),M(1))})),SET_ELEMENT_DESCRIPTION:T("SET_ELEMENT_DESCRIPTION","element",S({description:v()})),SET_ELEMENT_TYPE:T("SET_ELEMENT_TYPE","element",S({type:F(q)})),SET_ELEMENT_CONTEXT:T("SET_ELEMENT_CONTEXT","element",S({contextId:ft(v())})),MOVE_ELEMENT:T("MOVE_ELEMENT","element",S({after:ft(v())}),{mode:"sequence"}),ADD_ELEMENT:T("ADD_ELEMENT","page",S({id:B,type:F(q),name:L(v(),M(1)),description:_(v()),contextId:_(v())}),{dedupeKey:ot}),DELETE_ELEMENT:T("DELETE_ELEMENT","element",S({})),LINK_ELEMENTS:T("LINK_ELEMENTS","page",S({id:B,from:L(v(),M(1)),to:L(v(),M(1)),label:_(v()),kind:_(F(["member","flow"]))}),{dedupeKey:ot}),SET_LINK_LABEL:T("SET_LINK_LABEL","link",S({label:v()})),UNLINK_ELEMENTS:T("UNLINK_ELEMENTS","page",S({from:L(v(),M(1)),to:L(v(),M(1))}),{mode:"sequence"}),ADD_CONTEXT:T("ADD_CONTEXT","page",S({id:B,name:L(v(),M(1)),description:_(v())}),{dedupeKey:ot}),SET_CONTEXT_NAME:T("SET_CONTEXT_NAME","context",S({name:L(v(),M(1))})),DELETE_CONTEXT:T("DELETE_CONTEXT","context",S({}))},E={setElementName:(e,t)=>({type:"SET_ELEMENT_NAME",target:{type:"element",id:e},payload:{name:t}}),setElementDescription:(e,t)=>({type:"SET_ELEMENT_DESCRIPTION",target:{type:"element",id:e},payload:{description:t}}),setElementType:(e,t)=>({type:"SET_ELEMENT_TYPE",target:{type:"element",id:e},payload:{type:t}}),setElementContext:(e,t)=>({type:"SET_ELEMENT_CONTEXT",target:{type:"element",id:e},payload:{contextId:t}}),moveElement:(e,t)=>({type:"MOVE_ELEMENT",target:{type:"element",id:e},payload:{after:t}}),addElement:(e,t,n)=>({type:"ADD_ELEMENT",target:{type:"page",id:"event-storming"},payload:{id:e,type:t,name:n}}),deleteElement:e=>({type:"DELETE_ELEMENT",target:{type:"element",id:e},payload:{}}),linkElements:(e,t,n,o)=>({type:"LINK_ELEMENTS",target:{type:"page",id:"event-storming"},payload:{id:e,from:t,to:n,...o?.label===void 0?{}:{label:o.label},...o?.kind===void 0?{}:{kind:o.kind}}}),setLinkLabel:(e,t)=>({type:"SET_LINK_LABEL",target:{type:"link",id:e},payload:{label:t}}),unlinkElements:(e,t)=>({type:"UNLINK_ELEMENTS",target:{type:"page",id:"event-storming"},payload:{from:e,to:t}}),addContext:(e,t)=>({type:"ADD_CONTEXT",target:{type:"page",id:"event-storming"},payload:{id:e,name:t}}),setContextName:(e,t)=>({type:"SET_CONTEXT_NAME",target:{type:"context",id:e},payload:{name:t}}),deleteContext:e=>({type:"DELETE_CONTEXT",target:{type:"context",id:e},payload:{}})},Tt=(e,t)=>{const n=ce($,t);if(n===null)return null;const o=n.target.id;switch(n.type){case"SET_ELEMENT_NAME":return j(e,o,i=>({...i,name:n.payload.name}));case"SET_ELEMENT_DESCRIPTION":return j(e,o,i=>({...i,description:n.payload.description}));case"SET_ELEMENT_TYPE":return j(e,o,i=>({...i,type:n.payload.type}));case"SET_ELEMENT_CONTEXT":{const{contextId:i}=n.payload;return i!==null&&!e.contexts.some(s=>s.id===i)?null:j(e,o,s=>i===null?St(s):{...s,contextId:i})}case"MOVE_ELEMENT":{const{after:i}=n.payload,s=Ne(e.elements,o,i);return s===null?null:{...e,elements:s}}case"ADD_ELEMENT":{const i=n.payload;if(e.elements.some(r=>r.id===i.id))return e;if(i.contextId!==void 0&&!e.contexts.some(r=>r.id===i.contextId))return null;const s={id:i.id,type:i.type,name:i.name,...i.description===void 0?{}:{description:i.description},...i.contextId===void 0?{}:{contextId:i.contextId}};return{...e,elements:[...e.elements,s]}}case"DELETE_ELEMENT":return e.elements.some(i=>i.id===o)?{...e,elements:e.elements.filter(i=>i.id!==o),links:e.links.filter(i=>i.from!==o&&i.to!==o)}:null;case"LINK_ELEMENTS":{const i=n.payload;return e.links.some(s=>s.id===i.id)?e:!e.elements.some(s=>s.id===i.from)||!e.elements.some(s=>s.id===i.to)?null:{...e,links:[...e.links,{id:i.id,from:i.from,to:i.to,...i.label===void 0?{}:{label:i.label},...i.kind===void 0?{}:{kind:i.kind}}]}}case"SET_LINK_LABEL":return e.links.some(i=>i.id===o)?{...e,links:e.links.map(i=>i.id===o?{...i,label:n.payload.label}:i)}:null;case"UNLINK_ELEMENTS":{const i=n.payload;return e.links.some(s=>s.from===i.from&&s.to===i.to)?{...e,links:e.links.filter(s=>!(s.from===i.from&&s.to===i.to))}:null}case"ADD_CONTEXT":{const i=n.payload;if(e.contexts.some(r=>r.id===i.id))return e;const s={id:i.id,name:i.name,...i.description===void 0?{}:{description:i.description}};return{...e,contexts:[...e.contexts,s]}}case"SET_CONTEXT_NAME":return e.contexts.some(i=>i.id===o)?{...e,contexts:e.contexts.map(i=>i.id===o?{...i,name:n.payload.name}:i)}:null;case"DELETE_CONTEXT":return e.contexts.some(i=>i.id===o)?{...e,contexts:e.contexts.filter(i=>i.id!==o),elements:e.elements.map(i=>i.contextId===o?St(i):i)}:null;default:return pe(n)}},St=e=>{const t={...e};return delete t.contextId,t},j=(e,t,n)=>e.elements.some(o=>o.id===t)?{...e,elements:e.elements.map(o=>o.id===t?n(o):o)}:null,Ne=(e,t,n)=>{const o=e.findIndex(a=>a.id===t);if(o<0||n!==null&&!e.some(a=>a.id===n))return null;const i=e[o];if(i===void 0)return null;const r=[...e.filter(a=>a.id!==t)];return r.splice(n===null?0:r.findIndex(a=>a.id===n)+1,0,i),r},_e=new Set(["actor>command","command>aggregate","aggregate>event","command>event","policy>command","external>event"]),Z=(e,t)=>_e.has(`${e}>${t}`),Ce=(e,t,n)=>e.kind!==void 0?e.kind==="member":Z(t,n),Oe=["readmodel","actor","policy","command","aggregate","external","event","hotspot"],Ae=(e,t)=>{const n=new Map;for(const o of e.links){const i=t.get(o.from),s=t.get(o.to);if(i===void 0||s===void 0||i==="hotspot"==(s==="hotspot")||o.kind!==void 0&&o.kind!=="member")continue;const r=i==="hotspot"?o.from:o.to;n.has(r)||n.set(r,i==="hotspot"?o.to:o.from)}return n},ze=(e,t,n)=>{const o=new Map(e.map(a=>[a.id,a.id])),i=a=>{let d=a;for(;o.get(d)!==d;)d=o.get(d)??d;let l=a;for(;l!==d;){const p=o.get(l)??d;o.set(l,d),l=p}return d};for(const a of t){if(!o.has(a.from)||!o.has(a.to))continue;const d=n.get(a.from),l=n.get(a.to);d===void 0||l===void 0||Ce(a,d,l)&&o.set(i(a.from),i(a.to))}const s=new Map,r=new Map;for(const a of e){const d=i(a.id);r.set(a.id,d);const l=s.get(d);l?l.push(a):s.set(d,[a])}return{groups:s,rootOf:r}},R=e=>{const t=new Map(e.elements.map(l=>[l.id,l.type])),n=Ae(e,t),o=e.elements.filter(l=>!n.has(l.id)),{groups:i,rootOf:s}=ze(o,e.links,t),r=new Map;for(const[l,p]of n){const m=P(e,l),h=s.get(p);if(m===void 0||h===void 0)continue;const x=r.get(h);x?x.push({note:m,targetId:p}):r.set(h,[{note:m,targetId:p}])}const a=new Map(Oe.map((l,p)=>[l,p])),d=new Map(e.elements.map((l,p)=>[l.id,p]));return[...i].map(([l,p])=>{const m=[...p].sort((h,x)=>(a.get(h.type)??0)-(a.get(x.type)??0)||(d.get(h.id)??0)-(d.get(x.id)??0));return{id:p[0]?.id??"",notes:m,pins:r.get(l)??[],contextId:p.find(h=>h.contextId!==void 0)?.contextId}})},De=e=>{const t=R(e).flatMap(o=>[...o.notes,...o.pins.map(i=>i.note)]),n=new Set(t.map(o=>o.id));return{...e,elements:[...t,...e.elements.filter(o=>!n.has(o.id))]}},It=(e,t)=>{const n=[...e.notes,...e.pins.map(r=>r.note)],o=n.find(r=>Z(t,r.type));if(o!==void 0)return{anchorId:o.id,incoming:!0};const i=n.find(r=>Z(r.type,t));if(i!==void 0)return{anchorId:i.id,incoming:!1};const s=n[0];return s===void 0?void 0:{anchorId:s.id,incoming:!0}},Lt=(e,t)=>{const n=new Map(t.flatMap(o=>o.notes.map(i=>[i.id,o.id])));return e.links.flatMap(o=>{const i=n.get(o.from),s=n.get(o.to);return i===void 0||s===void 0||i===s?[]:[{id:o.id,from:i,to:s,...o.label!==void 0?{label:o.label}:{}}]})},st=(e,t)=>`${e}\0${t}`,Mt=(e,t,n)=>{const{widthOf:o,gapX:i,padX:s,maxWidth:r}=n,a=new Map;for(const c of t)a.set(st(c.from,c.to),c),a.set(st(c.to,c.from),c);const d=(c,f)=>c===void 0||f===void 0?void 0:a.get(st(c,f)),l=c=>Se(c,f=>o(f))+i*Math.max(0,c.length-1)+s*2<=r,p=[];let m=[],h;const x=()=>{m.length!==0&&(p.push({sliceIds:m,...h===void 0?{}:{cutFrom:h}}),m=[],h=void 0)};for(const c of e.map(f=>f.id)){if(m.length>0&&!l([...m,c])){let f=m.length;for(;d(m[f-1],f===m.length?c:m[f])!==void 0&&(f-=1,f!==0););const g=f===0?[]:m.splice(f),b=f===0?d(m.at(-1),c):d(m.at(-1),g[0]);x(),m=g,h=b}m.push(c)}return x(),p},W=e=>[...e.notes].reverse().find(t=>t.type==="event")??e.notes.at(-1),Nt=(e,t)=>{const n=W(e),o=t.notes[0];if(!(n===void 0||o===void 0))return{from:n.id,to:o.id}},_t={actor:"Actor",command:"Command",aggregate:"Aggregate",event:"Domain Event",policy:"Policy",readmodel:"Read Model",external:"External System",hotspot:"Hotspot"},Ct={actor:"\u30A2\u30AF\u30BF\u30FC",command:"\u30B3\u30DE\u30F3\u30C9",aggregate:"\u96C6\u7D04",event:"\u30A4\u30D9\u30F3\u30C8",policy:"\u30DD\u30EA\u30B7\u30FC",readmodel:"\u30EA\u30FC\u30C9\u30E2\u30C7\u30EB",external:"\u5916\u90E8\u30B7\u30B9\u30C6\u30E0",hotspot:"\u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8"},O=he({en:{renameElementTitle:"Rename element",updateDescriptionTitle:"Update element description",changeTypeTitle:"Change element type",changeContextTitle:"Change the element\u2019s context",moveTitle:"Change timeline position",addElementTitle:"Add element",deleteElementTitle:"Delete element",linkTitle:"Link elements",renameLinkTitle:"Change link label",unlinkTitle:"Remove link",addContextTitle:"Add bounded context",renameContextTitle:"Rename bounded context",deleteContextTitle:"Delete bounded context",renamed:(e,t)=>`"${e}" \u2192 "${t}"`,noContext:"No context",moveToFront:"\u2192 To the front",moveAfter:e=>`\u2192 Right after "${e}"`,elementLabel:e=>`Element \xB7 ${e}`,contextLabel:e=>`Bounded context \xB7 ${e}`,linkLabel:(e,t)=>`Link \xB7 ${e}\u2192${t}`,linkGroup:"Link",pageLabel:e=>`Page \xB7 ${e}`,elementGroup:"Element",contextGroup:"Bounded context",noteTypeLabel:e=>_t[e],addTypeLabel:e=>`+ ${_t[e]}`,addHotspot:"+ Hotspot",pinHotspotTitle:"Pin a hotspot on this note",deleteNote:"Delete",noteNameLabel:"Note name",newContextTitle:"New bounded context",contextNamePlaceholder:"Context name",cancel:"Cancel",create:"Create",save:"Save",appendMenuNext:"Note to add next",appendMenuAfter:e=>`Continue after \u201C${e}\u201D`,emptyTitle:"No notes yet",emptyBody:"Start Event Storming by placing domain events on the timeline.",addFirstEvent:"+ First event",portAriaLabel:"Add what comes next (pick a type, or drag to connect to another slice)",portTitle:"Click: pick a note to continue / Drag: connect to another slice",renameContextHint:"Click to rename",dissolveContextAria:e=>`Dissolve bounded context "${e}"`,dissolveContextTitle:"Dissolve the bounded context (notes stay)",noteCount:e=>`${e} notes`,sliceCount:e=>`${e} slices`,contextCount:e=>`${e} bounded contexts`,hudHint:"Wheel: pan \xB7 Pinch: zoom \xB7 Drag background: select area",zoomOut:"Zoom out",zoomReset:"Reset to 100%",zoomIn:"Zoom in",zoomFit:"Fit to view",selectedLinks:e=>`${e} links selected`,deleteLinks:"Delete links",deleteHint:"Delete works too",clearSelection:"Clear selection",selectedSlices:e=>`${e} slices selected`,groupIntoContext:"Group into a bounded context",addToExistingAria:"Add to an existing bounded context",addToExistingOption:"Add to existing\u2026",removeFromContext:"Remove from context",deleteButton:"Delete"},ja:{renameElementTitle:"\u8981\u7D20\u540D\u3092\u5909\u66F4",updateDescriptionTitle:"\u8981\u7D20\u306E\u8AAC\u660E\u3092\u66F4\u65B0",changeTypeTitle:"\u8981\u7D20\u306E\u7A2E\u5225\u3092\u5909\u66F4",changeContextTitle:"\u6240\u5C5E\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u5909\u66F4",moveTitle:"\u30BF\u30A4\u30E0\u30E9\u30A4\u30F3\u4F4D\u7F6E\u3092\u5909\u66F4",addElementTitle:"\u8981\u7D20\u3092\u8FFD\u52A0",deleteElementTitle:"\u8981\u7D20\u3092\u524A\u9664",linkTitle:"\u8981\u7D20\u3092\u9023\u7D50",renameLinkTitle:"\u30EA\u30F3\u30AF\u540D\u3092\u5909\u66F4",unlinkTitle:"\u30EA\u30F3\u30AF\u3092\u524A\u9664",addContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u8FFD\u52A0",renameContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u540D\u3092\u5909\u66F4",deleteContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u524A\u9664",renamed:(e,t)=>`"${e}" \u2192 "${t}"`,noContext:"\u672A\u6240\u5C5E",moveToFront:"\u2192 \u5148\u982D\u3078",moveAfter:e=>`\u2192 "${e}" \u306E\u76F4\u5F8C\u3078`,elementLabel:e=>`\u8981\u7D20 \xB7 ${e}`,contextLabel:e=>`\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8 \xB7 ${e}`,linkLabel:(e,t)=>`\u30EA\u30F3\u30AF \xB7 ${e}\u2192${t}`,linkGroup:"\u30EA\u30F3\u30AF",pageLabel:e=>`\u30DA\u30FC\u30B8 \xB7 ${e}`,elementGroup:"\u8981\u7D20",contextGroup:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8",noteTypeLabel:e=>Ct[e],addTypeLabel:e=>`+ ${Ct[e]}`,addHotspot:"+ \u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8",pinHotspotTitle:"\u3053\u306E\u4ED8\u7B8B\u306B\u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8\u3092\u7ACB\u3066\u308B",deleteNote:"\u524A\u9664",noteNameLabel:"\u4ED8\u7B8B\u540D",newContextTitle:"\u65B0\u3057\u3044\u5883\u754C\u3065\u3051\u3089\u308C\u305F\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8",contextNamePlaceholder:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u540D",cancel:"\u30AD\u30E3\u30F3\u30BB\u30EB",create:"\u4F5C\u6210",save:"\u4FDD\u5B58",appendMenuNext:"\u7D9A\u304D\u306B\u8FFD\u52A0\u3059\u308B\u4ED8\u7B8B",appendMenuAfter:e=>`\u300C${e}\u300D\u306E\u7D9A\u304D\u306B\u8FFD\u52A0`,emptyTitle:"\u4ED8\u7B8B\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093",emptyBody:"\u30A4\u30D9\u30F3\u30C8\u30B9\u30C8\u30FC\u30DF\u30F3\u30B0\u3092\u958B\u59CB\u3057\u307E\u3057\u3087\u3046\u3002\u30C9\u30E1\u30A4\u30F3\u30A4\u30D9\u30F3\u30C8\u3092\u6642\u7CFB\u5217\u306B\u8CBC\u308B\u3068\u3053\u308D\u304B\u3089\u59CB\u3081\u307E\u3059\u3002",addFirstEvent:"+ \u6700\u521D\u306E\u30A4\u30D9\u30F3\u30C8",portAriaLabel:"\u7D9A\u304D\u3092\u8FFD\u52A0\uFF08\u7A2E\u985E\u3092\u9078\u3093\u3067\u8FFD\u52A0 / \u30C9\u30E9\u30C3\u30B0\u3067\u4ED6\u306E\u30B9\u30E9\u30A4\u30B9\u3078\u63A5\u7D9A\uFF09",portTitle:"\u30AF\u30EA\u30C3\u30AF: \u7D9A\u304D\u306E\u4ED8\u7B8B\u3092\u9078\u3093\u3067\u8FFD\u52A0 / \u30C9\u30E9\u30C3\u30B0: \u4ED6\u306E\u30B9\u30E9\u30A4\u30B9\u3078\u63A5\u7D9A",renameContextHint:"\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u540D\u524D\u3092\u5909\u66F4",dissolveContextAria:e=>`\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u300C${e}\u300D\u3092\u89E3\u4F53`,dissolveContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u89E3\u4F53\uFF08\u4ED8\u7B8B\u306F\u6B8B\u308A\u307E\u3059\uFF09",noteCount:e=>`${e} \u4ED8\u7B8B`,sliceCount:e=>`${e} \u30B9\u30E9\u30A4\u30B9`,contextCount:e=>`${e} \u30B3\u30F3\u30C6\u30AD\u30B9\u30C8`,hudHint:"\u30DB\u30A4\u30FC\u30EB: \u79FB\u52D5 \xB7 \u30D4\u30F3\u30C1: \u30BA\u30FC\u30E0 \xB7 \u80CC\u666F\u30C9\u30E9\u30C3\u30B0: \u7BC4\u56F2\u9078\u629E",zoomOut:"\u7E2E\u5C0F",zoomReset:"100% \u306B\u623B\u3059",zoomIn:"\u62E1\u5927",zoomFit:"\u5168\u4F53\u3092\u8868\u793A",selectedLinks:e=>`${e} \u672C\u306E\u30EA\u30F3\u30AF\u3092\u9078\u629E\u4E2D`,deleteLinks:"\u30EA\u30F3\u30AF\u3092\u524A\u9664",deleteHint:"Delete \u3067\u3082\u524A\u9664\u3067\u304D\u307E\u3059",clearSelection:"\u9078\u629E\u89E3\u9664",selectedSlices:e=>`${e} \u30B9\u30E9\u30A4\u30B9\u3092\u9078\u629E\u4E2D`,groupIntoContext:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u306B\u307E\u3068\u3081\u308B",addToExistingAria:"\u65E2\u5B58\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3078\u8FFD\u52A0",addToExistingOption:"\u65E2\u5B58\u3078\u8FFD\u52A0\u2026",removeFromContext:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u89E3\u9664",deleteButton:"\u524A\u9664"}}),Pe={SET_ELEMENT_NAME:(e,t,n)=>({title:e.renameElementTitle,tone:"update",body:e.renamed(P(n,t.target.id)?.name??"?",w($.SET_ELEMENT_NAME,t).name)}),SET_ELEMENT_DESCRIPTION:(e,t)=>({title:e.updateDescriptionTitle,tone:"update",body:`\u2192 "${w($.SET_ELEMENT_DESCRIPTION,t).description.slice(0,60)}"`}),SET_ELEMENT_TYPE:(e,t)=>({title:e.changeTypeTitle,tone:"update",body:`\u2192 ${w($.SET_ELEMENT_TYPE,t).type}`}),SET_ELEMENT_CONTEXT:(e,t)=>({title:e.changeContextTitle,tone:"move",body:`\u2192 ${w($.SET_ELEMENT_CONTEXT,t).contextId??e.noContext}`}),MOVE_ELEMENT:(e,t)=>({title:e.moveTitle,tone:"move",body:w($.MOVE_ELEMENT,t).after===null?e.moveToFront:e.moveAfter(w($.MOVE_ELEMENT,t).after??"")}),ADD_ELEMENT:(e,t)=>({title:e.addElementTitle,tone:"create",body:`+ "${w($.ADD_ELEMENT,t).name}"`}),DELETE_ELEMENT:(e,t,n)=>({title:e.deleteElementTitle,tone:"delete",body:`\u2212 "${P(n,t.target.id)?.name??t.target.id}"`}),LINK_ELEMENTS:(e,t)=>({title:e.linkTitle,tone:"create",body:`${w($.LINK_ELEMENTS,t).from} \u2192 ${w($.LINK_ELEMENTS,t).to}`}),SET_LINK_LABEL:(e,t)=>({title:e.renameLinkTitle,tone:"update",body:`\u2192 "${w($.SET_LINK_LABEL,t).label}"`}),UNLINK_ELEMENTS:(e,t)=>({title:e.unlinkTitle,tone:"delete",body:`${w($.UNLINK_ELEMENTS,t).from} \u2192 ${w($.UNLINK_ELEMENTS,t).to}`}),ADD_CONTEXT:(e,t)=>({title:e.addContextTitle,tone:"create",body:`+ "${w($.ADD_CONTEXT,t).name}"`}),SET_CONTEXT_NAME:(e,t)=>({title:e.renameContextTitle,tone:"update",body:`\u2192 "${w($.SET_CONTEXT_NAME,t).name}"`}),DELETE_CONTEXT:(e,t,n)=>({title:e.deleteContextTitle,tone:"delete",body:`\u2212 "${Y(n,t.target.id)?.name??t.target.id}"`})},Ot=(e,t,n,o)=>{const i=Pe[t.type],r=i?i(e,t,o??n):{title:t.type,tone:"meta"};return{title:r.title,targetLabel:zt(e,n,t.target),tone:r.tone,...r.body===void 0?{}:{summary:r.body}}},At=e=>`${e.type} ${V(e.target)} ${JSON.stringify(e.payload)}`,zt=(e,t,n)=>{switch(n.type){case"element":{const o=P(t,n.id);return o?e.elementLabel(o.name):`${e.elementLabel(n.id)} (missing)`}case"context":{const o=Y(t,n.id);return o?e.contextLabel(o.name):`${e.contextLabel(n.id)} (missing)`}case"link":{const o=it(t,n.id);return o?e.linkLabel(o.from,o.to):`${e.linkGroup} \xB7 ${n.id} (missing)`}case"page":return e.pageLabel(rt(t));default:return`${n.type} \xB7 ${n.id}`}},Dt=(e,t)=>[...t.elements.map(n=>({value:V({type:"element",id:n.id}),label:n.name,group:e.elementGroup})),...t.contexts.map(n=>({value:V({type:"context",id:n.id}),label:n.name,group:e.contextGroup}))],Re=(e,t,n)=>{const o=t.elements.find(i=>i.id===n.note);return o?{value:V({type:"element",id:o.id}),label:o.name,group:e.elementGroup}:null},rt=e=>e.title??"Event Storming",Pt=(e,t)=>{const n={...t},o=P(e,t.note);t.note!==void 0&&!o&&delete n.note;const i=Y(e,t.context);return t.context!==void 0&&!i&&delete n.context,n},Rt=(e,t)=>{switch(t.type){case"element":return P(e,t.id)!==void 0;case"context":return Y(e,t.id)!==void 0;case"link":return it(e,t.id)!==void 0;case"page":return!0;default:return!1}},Bt=e=>{const t=O(e);return{name:"event-storming",label:"Event Storming",parseBase:$t,emptyBase:wt,actions:$,apply:Tt,canonicalState:De,hasTarget:Rt,describe:(n,o,i)=>Ot(t,n,o,i),serialize:At,resolveNavigation:Pt,commentTargets:(n,o)=>Dt(t,n),currentTarget:(n,o)=>Re(t,n,o),title:rt}},Be={width:300,height:260},Xe={event:{bg:"linear-gradient(178deg, #ffbc55, #f8a52e)",ink:"#402703"},command:{bg:"linear-gradient(178deg, #93c9f2, #74b4e8)",ink:"#0e2c4b"},aggregate:{bg:"linear-gradient(178deg, #fff3a6, #fdea7e)",ink:"#4a3a06"},actor:{bg:"linear-gradient(178deg, #ffdf63, #fdd23e)",ink:"#423204"},policy:{bg:"linear-gradient(178deg, #dcc2f7, #c9a6f0)",ink:"#32195c"},readmodel:{bg:"linear-gradient(178deg, #c0e788, #a8dc63)",ink:"#22380a"},external:{bg:"linear-gradient(178deg, #f9bcd3, #f4a0c0)",ink:"#4b1029"},hotspot:{bg:"linear-gradient(178deg, #d63550, #b81c33)",ink:"#ffffff"}},at=e=>{const{bg:t,ink:n}=Xe[e];return`--es-note-bg:${t};--es-note-ink:${n}`},Ye=xt`
|
|
2
|
-
:host {
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
/* Top-aligned: the name stays put when the editor takes its place. */
|
|
6
|
-
justify-content: flex-start;
|
|
7
|
-
position: relative;
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
padding: 16px 9px 8px;
|
|
10
|
-
border-radius: 3px;
|
|
11
|
-
background: var(--es-note-bg, var(--dpk-paper-raised));
|
|
12
|
-
color: var(--es-note-ink, var(--dpk-ink));
|
|
13
|
-
box-shadow:
|
|
14
|
-
0 1px 2px rgba(30, 24, 10, 0.14),
|
|
15
|
-
0 5px 10px -4px rgba(30, 24, 10, 0.24);
|
|
16
|
-
cursor: pointer;
|
|
17
|
-
transform: rotate(var(--es-tilt, 0deg));
|
|
18
|
-
transition:
|
|
19
|
-
transform 180ms ease,
|
|
20
|
-
box-shadow 180ms ease;
|
|
21
|
-
overflow: visible;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:host(:hover) {
|
|
25
|
-
transform: rotate(0deg) translateY(-2px);
|
|
26
|
-
box-shadow:
|
|
27
|
-
0 2px 4px rgba(30, 24, 10, 0.16),
|
|
28
|
-
0 12px 22px -6px rgba(30, 24, 10, 0.3);
|
|
29
|
-
z-index: 6;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:host([focused]) {
|
|
33
|
-
outline: 2px solid var(--dpk-blue);
|
|
34
|
-
outline-offset: 2px;
|
|
35
|
-
transform: rotate(0deg);
|
|
36
|
-
z-index: 5;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
:host([data-mode='editing']),
|
|
40
|
-
:host([data-mode='commenting']) {
|
|
41
|
-
z-index: 7;
|
|
42
|
-
transform: rotate(0deg);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/* --------------------------------------------------- sticky note palette */
|
|
46
|
-
|
|
47
|
-
/* Small, faint, top-left: readable when looked for, quiet when not. */
|
|
48
|
-
.note-type {
|
|
49
|
-
position: absolute;
|
|
50
|
-
top: 5px;
|
|
51
|
-
left: 7px;
|
|
52
|
-
font-family: var(--dpk-mono);
|
|
53
|
-
font-size: 8px;
|
|
54
|
-
font-weight: 600;
|
|
55
|
-
letter-spacing: 0.12em;
|
|
56
|
-
opacity: 0.5;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/* Pinned hotspots are small: the type label is off and the name is centered. */
|
|
60
|
-
:host([compact]) {
|
|
61
|
-
justify-content: center;
|
|
62
|
-
padding: 7px 9px 8px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
:host([compact]) .note-type {
|
|
66
|
-
display: none;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.note-name {
|
|
70
|
-
flex: 1 1 auto;
|
|
71
|
-
min-width: 0;
|
|
72
|
-
min-height: 0;
|
|
73
|
-
font-size: 13px;
|
|
74
|
-
font-weight: 680;
|
|
75
|
-
line-height: 1.32;
|
|
76
|
-
letter-spacing: -0.01em;
|
|
77
|
-
overflow-wrap: anywhere;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:host([compact]) .note-name {
|
|
81
|
-
flex: 0 1 auto;
|
|
82
|
-
font-size: 11.5px;
|
|
83
|
-
line-height: 1.3;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
/* Comments already left: a passive corner flag, readable without hover. */
|
|
87
|
-
.note-flag {
|
|
88
|
-
position: absolute;
|
|
89
|
-
top: -7px;
|
|
90
|
-
right: -7px;
|
|
91
|
-
min-width: 17px;
|
|
92
|
-
height: 17px;
|
|
93
|
-
padding: 0 4px;
|
|
94
|
-
border-radius: 999px;
|
|
95
|
-
background: var(--dpk-accent);
|
|
96
|
-
color: var(--dpk-accent-ink);
|
|
97
|
-
font-family: var(--dpk-mono);
|
|
98
|
-
font-size: 9.5px;
|
|
99
|
-
font-weight: 650;
|
|
100
|
-
line-height: 17px;
|
|
101
|
-
text-align: center;
|
|
102
|
-
box-shadow: 0 1px 4px rgba(217, 73, 32, 0.35);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
/* A side rail of round buttons that fades in on hover, like the hotspot chip:
|
|
106
|
-
nothing crosses the card's face, and it stays clear of the pins above. */
|
|
107
|
-
.note-tools {
|
|
108
|
-
position: absolute;
|
|
109
|
-
top: 9px;
|
|
110
|
-
right: -11px;
|
|
111
|
-
z-index: 8;
|
|
112
|
-
display: flex;
|
|
113
|
-
flex-direction: column;
|
|
114
|
-
gap: 3px;
|
|
115
|
-
opacity: 0;
|
|
116
|
-
pointer-events: none;
|
|
117
|
-
transition: opacity 140ms ease;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
/* Labelled, not a glyph: the hotspot affordance names itself on the card's
|
|
121
|
-
top-right corner. It stays above the pins, which hang above that corner. */
|
|
122
|
-
.note-hotspot {
|
|
123
|
-
position: absolute;
|
|
124
|
-
top: -9px;
|
|
125
|
-
right: -4px;
|
|
126
|
-
z-index: 9;
|
|
127
|
-
padding: 2px 7px;
|
|
128
|
-
border: 1px solid color-mix(in srgb, #e02c44 45%, transparent);
|
|
129
|
-
border-radius: 999px;
|
|
130
|
-
font-size: 9.5px;
|
|
131
|
-
font-weight: 620;
|
|
132
|
-
white-space: nowrap;
|
|
133
|
-
color: var(--dpk-danger);
|
|
134
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
|
|
135
|
-
box-shadow: var(--dpk-shadow-xs);
|
|
136
|
-
cursor: pointer;
|
|
137
|
-
opacity: 0;
|
|
138
|
-
pointer-events: none;
|
|
139
|
-
transition: opacity 140ms ease;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
:host(:hover) .note-hotspot,
|
|
143
|
-
:host([data-mode='editing']) .note-hotspot,
|
|
144
|
-
.note-hotspot:focus-visible {
|
|
145
|
-
opacity: 1;
|
|
146
|
-
pointer-events: auto;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.note-hotspot:hover {
|
|
150
|
-
border-color: #e02c44;
|
|
151
|
-
background: var(--dpk-danger-soft);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
:host(:hover) .note-tools,
|
|
155
|
-
:host([data-mode='commenting']) .note-tools,
|
|
156
|
-
.note-tools:focus-within {
|
|
157
|
-
opacity: 1;
|
|
158
|
-
pointer-events: auto;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.note-tools .dpk-icon-btn {
|
|
162
|
-
width: 22px;
|
|
163
|
-
height: 22px;
|
|
164
|
-
border: 1px solid var(--dpk-rule);
|
|
165
|
-
border-radius: 50%;
|
|
166
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
|
|
167
|
-
backdrop-filter: blur(2px);
|
|
168
|
-
box-shadow: var(--dpk-shadow-xs);
|
|
169
|
-
}
|
|
170
|
-
`;class He extends me{static{this.styles=[ue,Ye,gt]}static{this.properties={note:{attribute:!1},notes:{attribute:!1},mode:{type:String,reflect:!0,attribute:"data-mode"},focused:{type:Boolean,reflect:!0},compact:{type:Boolean,reflect:!0},onIntent:{attribute:!1}}}#e="";#l=new kt(this);#i=new fe(this);constructor(){super(),this.note=null,this.notes=[],this.mode="view",this.focused=!1,this.compact=!1,this.onIntent=null,this.addEventListener("click",()=>this.#t({kind:"select"}))}updated(t){if(t.has("note")&&this.note&&(this.setAttribute("data-type",this.note.type),this.note.description===void 0?this.removeAttribute("title"):this.setAttribute("title",this.note.description)),t.has("mode")&&(this.mode!=="commenting"&&(this.#e=""),this.mode==="editing"&&this.renderRoot.querySelector("dpk-component-inline-edit")?.startEditing()),this.mode!=="commenting")return;const n=this.renderRoot.querySelector(".comment-pop"),o=this.renderRoot.querySelector('[data-role="comment"]');n&&o&&this.#l.open(n,o,Be)}render(){const t=this.note;if(!t)return N;const n=O(this.#i.locale),o=ye(this.#i.locale);return k`
|
|
171
|
-
<div class="note-type">${n.noteTypeLabel(t.type)}</div>
|
|
172
|
-
<dpk-component-inline-edit
|
|
173
|
-
class="note-name"
|
|
174
|
-
?wrap=${!0}
|
|
175
|
-
?seamless=${!0}
|
|
176
|
-
.value=${t.name}
|
|
177
|
-
.label=${n.noteNameLabel}
|
|
178
|
-
@dpk-commit=${xe(i=>this.#t({kind:"rename",name:i}))}
|
|
179
|
-
></dpk-component-inline-edit>
|
|
180
|
-
${this.notes.length>0?k`<span class="note-flag">${this.notes.length}</span>`:N}
|
|
181
|
-
${t.type==="hotspot"?N:k`<button
|
|
182
|
-
class="note-hotspot"
|
|
183
|
-
type="button"
|
|
184
|
-
data-role="hotspot"
|
|
185
|
-
title=${n.pinHotspotTitle}
|
|
186
|
-
@click=${this.#s(()=>({kind:"add-hotspot"}))}
|
|
187
|
-
>
|
|
188
|
-
${n.addHotspot}
|
|
189
|
-
</button>`}
|
|
190
|
-
<div class="note-tools">
|
|
191
|
-
<button
|
|
192
|
-
class="dpk-icon-btn"
|
|
193
|
-
type="button"
|
|
194
|
-
data-role="comment"
|
|
195
|
-
aria-label=${o.comment}
|
|
196
|
-
data-active=${String(this.mode==="commenting")}
|
|
197
|
-
@click=${this.#s(()=>({kind:"toggle-comment"}))}
|
|
198
|
-
>
|
|
199
|
-
${ge()}
|
|
200
|
-
</button>
|
|
201
|
-
<button
|
|
202
|
-
class="dpk-icon-btn"
|
|
203
|
-
type="button"
|
|
204
|
-
data-role="delete"
|
|
205
|
-
aria-label=${n.deleteNote}
|
|
206
|
-
@click=${this.#s(()=>({kind:"delete"}))}
|
|
207
|
-
>
|
|
208
|
-
${be()}
|
|
209
|
-
</button>
|
|
210
|
-
</div>
|
|
211
|
-
${this.mode==="commenting"?this.#c(o):N}
|
|
212
|
-
`}#c(t){return $e(t,we(this.#e,this.notes.map(ve)),n=>{n.kind==="input"?(this.#e=n.body,this.requestUpdate()):this.#t(n)})}#s(t){return n=>{n.stopPropagation(),this.#t(t(n))}}#t(t){this.onIntent?.(t)}}const Fe=()=>{customElements.get("dpk-internal-event-storming-note")||customElements.define("dpk-internal-event-storming-note",He)},dt=.25,Xt=2,Yt=(e,t,n)=>({...e,panX:e.panX+t,panY:e.panY+n}),lt=(e,t,n,o)=>{const i=Et(e.zoom*o,dt,Xt),s=(t-e.panX)/e.zoom,r=(n-e.panY)/e.zoom;return{panX:t-s*i,panY:n-r*i,zoom:i}},Ht=(e,t,n)=>{const o=Math.max(1,t.width-n*2),i=Math.max(1,t.height-n*2),s=Math.max(dt,Math.min(1,o/Math.max(1,e.width),i/Math.max(1,e.height)));return{panX:(t.width-e.width*s)/2,panY:(t.height-e.height*s)/2,zoom:s}},Ft=(e,t,n,o)=>{const i=(s,r,a,d)=>{const l=a*e.zoom;return l<=d?(d-l)/2-r*e.zoom:Math.min(-r*e.zoom,Math.max(d-(r+a)*e.zoom,s))};return{zoom:e.zoom,panX:i(e.panX,-o,t.width+o*2,n.width),panY:i(e.panY,-o,t.height+o*2,n.height)}},Ke=(e,t,n)=>t>=e.left&&t<=e.left+e.width&&n>=e.top&&n<=e.top+e.height,ct=(e,t,n)=>{for(let o=e.length-1;o>=0;o-=1){const i=e[o];if(i!==void 0&&Ke(i.rect,t,n))return i.id}},Kt=(e,t)=>t<e.left+e.width/2?"before":"after",Wt=(e,t)=>e.filter(({rect:n})=>n.left<t.left+t.width&&t.left<n.left+n.width&&n.top<t.top+t.height&&t.top<n.top+n.height).map(({id:n})=>n),pt=(e,t,n,o)=>{const i=new Set(t);if(n.some(p=>i.has(p)))return[];const s=e.filter(p=>!i.has(p)),r=n.map(p=>s.indexOf(p)).filter(p=>p>=0);if(r.length===0)return[];const a=o==="before"?Math.min(...r):Math.max(...r)+1,d=[];let l=s[a-1]??null;for(const p of e)i.has(p)&&(d.push({id:p,after:l}),l=p);return d},Gt=(e,t,n,o)=>{const i=pt(e,t,n,o);if(i.length===0)return i;const s=[...e];for(const r of i){const a=s.indexOf(r.id),d=a<0?void 0:s[a];d!==void 0&&(s.splice(a,1),s.splice(r.after===null?0:s.indexOf(r.after)+1,0,d))}return ke(s,e)?[]:i},Ut=(e,t,n,o=4)=>{if(t.pointerId!==e.pointerId)return e;const{point:i}=t,s={pointerId:e.pointerId,start:e.start,current:i,moved:e.moved||Math.hypot(i.x-e.start.x,i.y-e.start.y)>o},r=ct(n,i.x,i.y);switch(e.kind){case"connect":return{...s,kind:"connect",fromSliceId:e.fromSliceId,...r!==void 0&&r!==e.fromSliceId?{targetSliceId:r}:{}};case"move-slice":{const a=n.find(d=>d.id===r)?.rect;return{...s,kind:"move-slice",sliceId:e.sliceId,...r!==void 0&&r!==e.sliceId&&a!==void 0?{drop:{sliceId:r,side:Kt(a,i.x)}}:{}}}case"select":return{...s,kind:"select"}}},C={kind:"idle"},Vt=(e,t)=>e.kind==="editing"&&e.noteId===t?"editing":e.kind==="commenting"&&e.noteId===t?"commenting":"view",qt=(e,t,n)=>{switch(n.kind){case"toggle-comment":return e.kind==="commenting"&&e.noteId===t?C:{kind:"commenting",noteId:t};case"comment":case"delete":case"dismiss":return C;case"select":case"add-hotspot":return e;case"rename":return e.kind==="editing"&&e.noteId===t?C:e}},G=132,jt=96,ht=10,mt=24,J=12,D=jt+J*2,Q=46,tt=16,Zt=44,Jt=40,ut=16,Qt=13,H=8,We=6,te=92,ee=54,ne=72,oe=ee+4,Ge=e=>Math.max(Zt,ne+(e-1)*oe-J),Ue=["actor","command","aggregate","event","policy","readmodel","external"],ie=e=>mt*2+e*G+(e-1)*ht,Ve=e=>{if(e===void 0)return 0;const t=new Map;for(const n of e.pins)t.set(n.targetId,(t.get(n.targetId)??0)+1);return Math.max(0,...t.values())},qe=(e,t,n)=>{const o=new Map(t.map(x=>[x.id,ie(x.notes.length)])),i=Lt(e,t),s=Mt(t,i,{widthOf:x=>o.get(x)??0,gapX:Q,padX:tt,maxWidth:Math.max(n,ie(1))}),r=new Map,a=new Map,d=new Map,l=new Map(t.map(x=>[x.id,x]));let p=H;const m=s.map((x,c)=>{const f=x.cutFrom===void 0?void 0:a.get(x.cutFrom.from),g=f===void 0?0:Math.max(0,f-tt);let b=g+tt;const y=Ge(Math.max(1,...x.sliceIds.map(I=>Ve(l.get(I)))));for(const I of x.sliceIds)r.set(I,b-g),a.set(I,b),d.set(I,c),b+=(o.get(I)??0)+Q;const u=y+D+Jt,A={sliceIds:x.sliceIds,x:g,width:b-Q+tt-g,height:u,y:p,head:y,cutFrom:x.cutFrom};return p+=u+We,A}),h=m.at(-1);return{slices:t,bands:m,xOf:r,absXOf:a,bandOf:d,widthOf:o,arrows:i,width:Math.max(0,...m.map(x=>x.x+x.width))+H*2,height:h===void 0?H*2:h.y+h.height+H}},je=e=>{const{m:t,context:n,maxRowWidth:o,viewport:i,handlers:s}=e,{state:r}=n,a=24*i.zoom,d=`background-size:${a}px ${a}px;background-position:${i.panX}px ${i.panY}px`;if(r.elements.length===0)return k`<div class="board-viewport board-viewport--empty" style=${d}>
|
|
213
|
-
<div class="empty">
|
|
214
|
-
<h2>${t.emptyTitle}</h2>
|
|
215
|
-
<p>${t.emptyBody}</p>
|
|
216
|
-
<button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>s.addFirst()}>
|
|
217
|
-
${t.addFirstEvent}
|
|
218
|
-
</button>
|
|
219
|
-
</div>
|
|
220
|
-
</div>`;const l=R(r),p=qe(r,l,o);return k`
|
|
221
|
-
<div
|
|
222
|
-
class="board-viewport${e.gesture!==void 0?" board-viewport--gesturing":""}"
|
|
223
|
-
data-testid="es-viewport"
|
|
224
|
-
tabindex="0"
|
|
225
|
-
style=${d}
|
|
226
|
-
@pointerdown=${s.viewportPointerDown}
|
|
227
|
-
@pointermove=${s.viewportPointerMove}
|
|
228
|
-
@pointerup=${s.viewportPointerUp}
|
|
229
|
-
@pointercancel=${s.viewportPointerCancel}
|
|
230
|
-
@pointerleave=${s.viewportPointerLeave}
|
|
231
|
-
@wheel=${s.viewportWheel}
|
|
232
|
-
@keydown=${s.keyDown}
|
|
233
|
-
>
|
|
234
|
-
<div
|
|
235
|
-
class="board-content"
|
|
236
|
-
style=${`transform:translate(${i.panX}px, ${i.panY}px) scale(${i.zoom})`}
|
|
237
|
-
>
|
|
238
|
-
<div class="wall" data-testid="es-wall" style=${`width:${p.width}px;height:${p.height}px`}>
|
|
239
|
-
${rn(e,p)}
|
|
240
|
-
${p.bands.map((m,h)=>Je(e,p,m,h))}
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
${tn(e.gesture)} ${en(t,r,l)} ${nn(e)}
|
|
244
|
-
${on(e)}
|
|
245
|
-
</div>
|
|
246
|
-
`},Ze=(e,t)=>{const n=["slice"];e.selectedSliceIds.includes(t.id)&&n.push("slice--selected");const o=e.gesture;return o?.kind==="connect"&&o.moved&&(o.fromSliceId!==t.id&&n.push("slice--candidate"),o.targetSliceId===t.id&&n.push("slice--target")),o?.kind==="move-slice"&&o.moved&&(o.sliceId===t.id&&n.push("slice--lifted"),o.drop?.sliceId===t.id&&n.push(o.drop.side==="before"?"slice--insert-before":"slice--insert-after")),n.join(" ")},Je=(e,t,n,o)=>{const{m:i,context:s,mode:r,gesture:a,hoverSliceId:d,handlers:l}=e,{navigation:p}=s,m=n.sliceIds.flatMap(c=>t.slices.filter(f=>f.id===c)),h=c=>({x:t.xOf.get(c.id)??0,y:n.head,w:t.widthOf.get(c.id)??0}),x=(c,f,g=!1)=>k`<dpk-internal-event-storming-note
|
|
247
|
-
style=${f}
|
|
248
|
-
.note=${c}
|
|
249
|
-
.notes=${s.comments.filter(b=>b.target.type==="element"&&b.target.id===c.id)}
|
|
250
|
-
.mode=${Vt(r,c.id)}
|
|
251
|
-
?focused=${p.note===c.id}
|
|
252
|
-
?compact=${g}
|
|
253
|
-
.onIntent=${b=>l.noteIntent(c.id,b)}
|
|
254
|
-
></dpk-internal-event-storming-note>`;return k`
|
|
255
|
-
<section class="band" data-band=${o} style=${`left:${H+n.x}px;top:${n.y}px`}>
|
|
256
|
-
<div class="band-canvas" style=${`width:${n.width}px;height:${n.height}px`}>
|
|
257
|
-
${Qe(e,t,o)}
|
|
258
|
-
${m.map(c=>{const{x:f,y:g,w:b}=h(c);return k`<div
|
|
259
|
-
class=${Ze(e,c)}
|
|
260
|
-
data-slice-id=${c.id}
|
|
261
|
-
style=${`left:${f}px;top:${g}px;width:${b}px;height:${D}px`}
|
|
262
|
-
@pointerdown=${y=>l.slicePointerDown(c.id,y)}
|
|
263
|
-
></div>`})}
|
|
264
|
-
${bt(m.flatMap(c=>c.notes.map((f,g)=>({slice:c,note:f,slot:g}))),({note:c})=>c.id,({slice:c,note:f,slot:g})=>{const{x:b,y}=h(c),u=b+mt+g*(G+ht);return x(f,`${at(f.type)};position:absolute;left:${u}px;top:${y+J}px;width:${G}px;height:${jt}px;--es-tilt:${ln(f.id)}deg;z-index:2`)})}
|
|
265
|
-
${bt(m.flatMap(c=>{const f=h(c);return c.notes.flatMap((g,b)=>c.pins.filter(u=>u.targetId===g.id).map((u,A)=>({pin:u,slot:b,index:A,at:f})))}),({pin:c})=>c.note.id,({pin:c,slot:f,index:g,at:b})=>{const y=b.x+mt+f*(G+ht),u=b.y+J;return x(c.note,`${at(c.note.type)};position:absolute;left:${y+G-te-6-g*10}px;top:${u-ne-g*oe}px;width:${te}px;height:${ee}px;--es-tilt:-2.4deg;z-index:3`,!0)})}
|
|
266
|
-
${m.map(c=>{const{x:f,y:g,w:b}=h(c),y=d===c.id||a?.kind==="connect"&&a.fromSliceId===c.id;return k`<button
|
|
267
|
-
class="slice-port${y?" slice-port--on":""}"
|
|
268
|
-
type="button"
|
|
269
|
-
style=${`left:${f+b-Qt}px;top:${g+D/2-Qt}px`}
|
|
270
|
-
aria-label=${i.portAriaLabel}
|
|
271
|
-
title=${i.portTitle}
|
|
272
|
-
@pointerdown=${u=>l.portPointerDown(c.id,u)}
|
|
273
|
-
>
|
|
274
|
-
→
|
|
275
|
-
</button>`})}
|
|
276
|
-
${m.map(c=>{if(d!==c.id||a!==void 0)return N;const{x:f,y:g}=h(c),b=new Set(c.notes.map(u=>u.type)),y=Ue.filter(u=>!b.has(u));return k`<div
|
|
277
|
-
class="slice-chips"
|
|
278
|
-
style=${`left:${f}px;top:${g+D+6}px`}
|
|
279
|
-
@pointerdown=${u=>u.stopPropagation()}
|
|
280
|
-
>
|
|
281
|
-
${y.map(u=>k`<button class="slice-chip" type="button" @click=${()=>l.attachNote(c.id,u)}>
|
|
282
|
-
${i.addTypeLabel(u)}
|
|
283
|
-
</button>`)}
|
|
284
|
-
</div>`})}
|
|
285
|
-
</div>
|
|
286
|
-
</section>
|
|
287
|
-
`},Qe=(e,t,n)=>{const{m:o,context:i,handlers:s}=e,r=i.state.contexts.flatMap((a,d)=>{const p=t.slices.filter(u=>u.contextId===a.id).flatMap(u=>{const A=t.xOf.get(u.id),I=t.bandOf.get(u.id);return A===void 0||I===void 0?[]:[{x:A,band:I,width:t.widthOf.get(u.id)??0}]}),m=p.filter(u=>u.band===n);if(m.length===0)return[];const h=Math.min(...m.map(u=>u.x))-10,x=Math.max(...m.map(u=>u.x+u.width))+10,c=14,f=(t.bands[n]?.head??Zt)+D+12,g=p.some(u=>u.band<n)?"\u2026 ":"",b=p.some(u=>u.band>n)?" \u2026":"",y=String(d%5);return[k`<div
|
|
288
|
-
class="context-region"
|
|
289
|
-
data-hue=${y}
|
|
290
|
-
style=${`left:${h}px;top:${c}px;width:${x-h}px;height:${f-c}px`}
|
|
291
|
-
title=${a.description??a.name}
|
|
292
|
-
></div>
|
|
293
|
-
<div
|
|
294
|
-
class="context-label"
|
|
295
|
-
data-hue=${y}
|
|
296
|
-
style=${`left:${h+10}px;top:${c}px`}
|
|
297
|
-
@pointerdown=${u=>u.stopPropagation()}
|
|
298
|
-
>
|
|
299
|
-
<button
|
|
300
|
-
class="context-label-name"
|
|
301
|
-
type="button"
|
|
302
|
-
title=${o.renameContextHint}
|
|
303
|
-
@click=${u=>s.renameContext(a.id,{x:u.clientX,y:u.clientY})}
|
|
304
|
-
>
|
|
305
|
-
${g}${a.name}${b}
|
|
306
|
-
</button>
|
|
307
|
-
<button
|
|
308
|
-
class="context-label-x"
|
|
309
|
-
type="button"
|
|
310
|
-
aria-label=${o.dissolveContextAria(a.name)}
|
|
311
|
-
title=${o.dissolveContextTitle}
|
|
312
|
-
@click=${()=>s.dissolveContext(a.id)}
|
|
313
|
-
>
|
|
314
|
-
✕
|
|
315
|
-
</button>
|
|
316
|
-
</div>`]});return r.length>0?k`${r}`:N},tn=e=>{if(e===void 0||!e.moved)return N;if(e.kind==="connect")return k`<svg class="gesture-layer" aria-hidden="true">
|
|
317
|
-
${X`<path class="connect-line" d=${`M ${e.start.x} ${e.start.y} L ${e.current.x} ${e.current.y}`}></path>
|
|
318
|
-
<circle class="connect-tip" cx=${e.current.x} cy=${e.current.y} r="5"></circle>`}
|
|
319
|
-
</svg>`;if(e.kind==="select"){const t=Math.min(e.start.x,e.current.x),n=Math.min(e.start.y,e.current.y),o=Math.abs(e.current.x-e.start.x),i=Math.abs(e.current.y-e.start.y);return k`<div
|
|
320
|
-
class="select-rect"
|
|
321
|
-
style=${`left:${t}px;top:${n}px;width:${o}px;height:${i}px`}
|
|
322
|
-
></div>`}return N},en=(e,t,n)=>k`<div class="board-hud">
|
|
323
|
-
<span>${e.noteCount(t.elements.length)}</span>
|
|
324
|
-
<span>${e.sliceCount(n.length)}</span>
|
|
325
|
-
<span>${e.contextCount(t.contexts.length)}</span>
|
|
326
|
-
<span class="board-hint">${e.hudHint}</span>
|
|
327
|
-
</div>`,nn=e=>{const{m:t,viewport:n,handlers:o}=e;return k`<div class="board-zoom" @pointerdown=${i=>i.stopPropagation()}>
|
|
328
|
-
<button type="button" aria-label=${t.zoomOut} @click=${()=>o.zoomStep(-1)}>−</button>
|
|
329
|
-
<button type="button" class="board-zoom-pct" title=${t.zoomReset} @click=${()=>o.zoomReset()}>
|
|
330
|
-
${Math.round(n.zoom*100)}%
|
|
331
|
-
</button>
|
|
332
|
-
<button type="button" aria-label=${t.zoomIn} @click=${()=>o.zoomStep(1)}>+</button>
|
|
333
|
-
<button type="button" aria-label=${t.zoomFit} title=${t.zoomFit} @click=${()=>o.zoomFit()}>⛶</button>
|
|
334
|
-
</div>`},on=e=>{const{m:t,context:n,selectedSliceIds:o,selectedLinkIds:i,handlers:s}=e;if(i.length===0&&o.length===0)return N;const r=n.state.contexts;return i.length>0?k`<div class="board-selection" @pointerdown=${a=>a.stopPropagation()}>
|
|
335
|
-
<span class="board-selection-count">${t.selectedLinks(i.length)}</span>
|
|
336
|
-
<button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>s.deleteSelection()}>
|
|
337
|
-
${t.deleteLinks}
|
|
338
|
-
</button>
|
|
339
|
-
<span class="board-selection-hint">${t.deleteHint}</span>
|
|
340
|
-
<button
|
|
341
|
-
class="dpk-icon-btn"
|
|
342
|
-
type="button"
|
|
343
|
-
aria-label=${t.clearSelection}
|
|
344
|
-
@click=${()=>s.clearSelection()}
|
|
345
|
-
>
|
|
346
|
-
✕
|
|
347
|
-
</button>
|
|
348
|
-
</div>`:k`<div class="board-selection" @pointerdown=${a=>a.stopPropagation()}>
|
|
349
|
-
<span class="board-selection-count">${t.selectedSlices(o.length)}</span>
|
|
350
|
-
<button
|
|
351
|
-
class="dpk-btn dpk-btn--accent"
|
|
352
|
-
type="button"
|
|
353
|
-
@click=${a=>s.groupSelection({x:a.clientX,y:a.clientY})}
|
|
354
|
-
>
|
|
355
|
-
${t.groupIntoContext}
|
|
356
|
-
</button>
|
|
357
|
-
${r.length>0?k`<select
|
|
358
|
-
class="dpk-select"
|
|
359
|
-
aria-label=${t.addToExistingAria}
|
|
360
|
-
@change=${a=>{const d=Ee(a.target,HTMLSelectElement);d!==null&&(d.value!==""&&s.assignSelection(d.value),d.value="")}}
|
|
361
|
-
>
|
|
362
|
-
<option value="" selected>${t.addToExistingOption}</option>
|
|
363
|
-
${r.map(a=>k`<option value=${a.id}>${a.name}</option>`)}
|
|
364
|
-
</select>`:N}
|
|
365
|
-
<button class="dpk-btn" type="button" @click=${()=>s.stripSelectionContext()}>
|
|
366
|
-
${t.removeFromContext}
|
|
367
|
-
</button>
|
|
368
|
-
<button class="dpk-btn" type="button" @click=${()=>s.deleteSelection()}>${t.deleteButton}</button>
|
|
369
|
-
<button class="dpk-icon-btn" type="button" aria-label=${t.clearSelection} @click=${()=>s.clearSelection()}>
|
|
370
|
-
✕
|
|
371
|
-
</button>
|
|
372
|
-
</div>`},se=(e,t,n,o)=>({d:`M ${e.x} ${e.y} C ${t.x} ${t.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`,mid:{x:(e.x+3*t.x+3*n.x+o.x)/8,y:(e.y+3*t.y+3*n.y+o.y)/8}}),sn=()=>X`<marker id="es-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
373
|
-
<path d="M0,0 L8,4 L0,8 z"></path>
|
|
374
|
-
</marker>`,rn=(e,t)=>{const n="url(#es-arrow)",o=[],i=a=>{const d=t.absXOf.get(a),l=t.bandOf.get(a),p=l===void 0?void 0:t.bands[l];if(!(d===void 0||l===void 0||p===void 0))return{x:H+d,y:p.y+p.head,w:t.widthOf.get(a)??0,band:l}},s=a=>{const d=t.bands[a];return d===void 0?0:d.y+d.height},r=(a,d,l,p)=>{o.push(X`<path class="link-hit" d=${d} @pointerdown=${x=>x.stopPropagation()} @click=${x=>e.handlers.linkClick(a.id,x.shiftKey||x.metaKey||x.ctrlKey)}></path>`);const m=e.selectedLinkIds.includes(a.id)?" is-selected":"";if(o.push(X`<path class="link-path${m}" d=${d} marker-end=${n}></path>`),a.label===void 0)return;const h={start:6,end:-6,middle:0}[p];o.push(X`<text class="link-label" x=${l.x+h} y=${l.y-6} text-anchor=${p}>${a.label}</text>`)};for(const a of t.arrows){const d=i(a.from),l=i(a.to);if(d===void 0||l===void 0)continue;if(d.band===l.band){const g=l.x>=d.x+d.w;if((g?l.x-(d.x+d.w):d.x-(l.x+l.w))<=Q+2){const u=d.y+D/2,A=g?d.x+d.w:d.x,I=g?l.x:l.x+l.w;r(a,`M ${A} ${u} L ${I} ${u}`,{x:(A+I)/2,y:u},"middle");continue}const y=an(d,l,s(d.band)-Jt/2);r(a,y.d,y.mid,"middle");continue}const p=d.y<l.y,m=d.x+ut,h=Et(m,l.x+ut,l.x+l.w-ut),x={x:m,y:p?d.y+D:d.y},c={x:h,y:p?l.y:l.y+D},f=p?(s(d.band)+(t.bands[l.band]?.y??0))/2:(s(l.band)+(t.bands[d.band]?.y??0))/2;r(a,dn([x,{x:x.x,y:f},{x:c.x,y:f},c]),{x:c.x-6,y:f},"end")}return X`<svg class="links-layer" width=${t.width} height=${t.height}>
|
|
375
|
-
<defs>${sn()}</defs>
|
|
376
|
-
${o}
|
|
377
|
-
</svg>`},an=(e,t,n)=>{const o=e.y+D;if(t.x>=e.x+e.w){const r={x:e.x+e.w-18,y:o},a={x:t.x+18,y:o};return se(r,{x:r.x+48,y:n},{x:a.x-48,y:n},a)}const i={x:e.x+18,y:o},s={x:t.x+t.w-18,y:o};return se(i,{x:i.x-48,y:n},{x:s.x+48,y:n},s)},dn=(e,t=10)=>{let n=`M ${e[0]?.x??0} ${e[0]?.y??0}`;for(let i=1;i<e.length-1;i+=1){const s=e[i-1],r=e[i],a=e[i+1];if(s===void 0||r===void 0||a===void 0)continue;const d=Math.sign(r.x-s.x),l=Math.sign(r.y-s.y),p=Math.sign(a.x-r.x),m=Math.sign(a.y-r.y),h=Math.hypot(r.x-s.x,r.y-s.y),x=Math.hypot(a.x-r.x,a.y-r.y),c=Math.max(0,Math.min(t,h/2,x/2));n+=` L ${r.x-d*c} ${r.y-l*c} Q ${r.x} ${r.y} ${r.x+p*c} ${r.y+m*c}`}const o=e.at(-1);return o===void 0?n:`${n} L ${o.x} ${o.y}`},ln=e=>{let t=0;for(const n of e)t=(t*31+n.charCodeAt(0))%997;return(t%17-8)*.09},cn=xt`
|
|
378
|
-
/* The board owns the whole main area; the viewport clips, never the shell. */
|
|
379
|
-
.dpk-main {
|
|
380
|
-
overflow: hidden;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
.dpk-main-body {
|
|
384
|
-
flex: 1 1 auto;
|
|
385
|
-
min-height: 0;
|
|
386
|
-
display: flex;
|
|
387
|
-
flex-direction: column;
|
|
388
|
-
padding: 0;
|
|
389
|
-
gap: 0;
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
/* ------------------------------------------------------------- viewport */
|
|
393
|
-
|
|
394
|
-
/* An infinite pannable surface; the dot grid scrolls with the content
|
|
395
|
-
(background-position/-size are set inline from the viewport state). */
|
|
396
|
-
.board-viewport {
|
|
397
|
-
position: relative;
|
|
398
|
-
flex: 1 1 auto;
|
|
399
|
-
min-height: 0;
|
|
400
|
-
overflow: hidden;
|
|
401
|
-
touch-action: none;
|
|
402
|
-
background-color: var(--dpk-paper);
|
|
403
|
-
background-image: radial-gradient(circle, var(--dpk-rule) 1px, transparent 1px);
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
.board-viewport--gesturing,
|
|
407
|
-
.board-viewport--gesturing * {
|
|
408
|
-
user-select: none;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
.board-viewport--empty {
|
|
412
|
-
display: grid;
|
|
413
|
-
place-items: center;
|
|
414
|
-
padding: 24px;
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
.board-viewport:focus-visible {
|
|
418
|
-
outline: none;
|
|
419
|
-
box-shadow: inset var(--dpk-focus);
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.board-content {
|
|
423
|
-
position: absolute;
|
|
424
|
-
left: 0;
|
|
425
|
-
top: 0;
|
|
426
|
-
width: max-content;
|
|
427
|
-
transform-origin: 0 0;
|
|
428
|
-
will-change: transform;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
/* The wall is a fixed-size canvas: bands and the arrow layer are placed inside
|
|
432
|
-
it at explicit coordinates, so an arrow may span several bands. */
|
|
433
|
-
.wall {
|
|
434
|
-
position: relative;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
.band {
|
|
438
|
-
position: absolute;
|
|
439
|
-
display: flex;
|
|
440
|
-
align-items: flex-start;
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
.band-canvas {
|
|
444
|
-
position: relative;
|
|
445
|
-
flex: 0 0 auto;
|
|
446
|
-
}
|
|
447
|
-
|
|
448
|
-
/* ---------------------------------------------------------------- slices */
|
|
449
|
-
|
|
450
|
-
/* One causal slice: its notes framed together, read left to right.
|
|
451
|
-
The frame is also the drag handle for moving the whole slice. */
|
|
452
|
-
.slice {
|
|
453
|
-
position: absolute;
|
|
454
|
-
z-index: 1;
|
|
455
|
-
border: 1px solid var(--dpk-rule-strong);
|
|
456
|
-
border-radius: 12px;
|
|
457
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 78%, transparent);
|
|
458
|
-
box-shadow: var(--dpk-shadow-xs);
|
|
459
|
-
cursor: grab;
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
.slice--selected {
|
|
463
|
-
border-color: var(--dpk-blue);
|
|
464
|
-
box-shadow:
|
|
465
|
-
0 0 0 2px var(--dpk-blue-soft),
|
|
466
|
-
var(--dpk-shadow-xs);
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
/* While a connection drag is out: everywhere it may land lights up dashed… */
|
|
470
|
-
.slice--candidate {
|
|
471
|
-
border: 1.5px dashed color-mix(in srgb, var(--dpk-blue) 55%, transparent);
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
/* …and the slice under the cursor confirms the landing. */
|
|
475
|
-
.slice--target {
|
|
476
|
-
border: 1.5px solid var(--dpk-blue);
|
|
477
|
-
background: color-mix(in srgb, var(--dpk-blue-soft) 55%, transparent);
|
|
478
|
-
box-shadow:
|
|
479
|
-
0 0 0 3px var(--dpk-blue-soft),
|
|
480
|
-
var(--dpk-shadow-sm);
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
/* The slice being carried by a move drag. */
|
|
484
|
-
.slice--lifted {
|
|
485
|
-
opacity: 0.45;
|
|
486
|
-
border-style: dashed;
|
|
487
|
-
cursor: grabbing;
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
/* Insertion bar on the side of the drop target the slice will land on. */
|
|
491
|
-
.slice--insert-before::before,
|
|
492
|
-
.slice--insert-after::after {
|
|
493
|
-
content: '';
|
|
494
|
-
position: absolute;
|
|
495
|
-
top: -6px;
|
|
496
|
-
bottom: -6px;
|
|
497
|
-
width: 3px;
|
|
498
|
-
border-radius: 2px;
|
|
499
|
-
background: var(--dpk-blue);
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
.slice--insert-before::before {
|
|
503
|
-
left: -10px;
|
|
504
|
-
}
|
|
505
|
-
|
|
506
|
-
.slice--insert-after::after {
|
|
507
|
-
right: -10px;
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
/* Connection port on a slice's right edge: click continues, drag connects.
|
|
511
|
-
Shown only for the hovered slice (hover is hit-tested by the element,
|
|
512
|
-
with padding, so it stays up while the cursor crosses over to it). */
|
|
513
|
-
.slice-port {
|
|
514
|
-
position: absolute;
|
|
515
|
-
z-index: 5;
|
|
516
|
-
width: 26px;
|
|
517
|
-
height: 26px;
|
|
518
|
-
border: 1px solid var(--dpk-rule-strong);
|
|
519
|
-
border-radius: 50%;
|
|
520
|
-
background: var(--dpk-paper-raised);
|
|
521
|
-
color: var(--dpk-ink-soft);
|
|
522
|
-
font-size: 13px;
|
|
523
|
-
line-height: 1;
|
|
524
|
-
box-shadow: var(--dpk-shadow-xs);
|
|
525
|
-
cursor: crosshair;
|
|
526
|
-
opacity: 0;
|
|
527
|
-
pointer-events: none;
|
|
528
|
-
transition:
|
|
529
|
-
opacity 120ms ease,
|
|
530
|
-
border-color 120ms ease;
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
.slice-port--on,
|
|
534
|
-
.slice-port:focus-visible {
|
|
535
|
-
opacity: 1;
|
|
536
|
-
pointer-events: auto;
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
.slice-port:hover {
|
|
540
|
-
border-color: var(--dpk-blue);
|
|
541
|
-
color: var(--dpk-blue);
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
/* Add-note chips under the hovered slice: the roles it is still missing. */
|
|
545
|
-
.slice-chips {
|
|
546
|
-
position: absolute;
|
|
547
|
-
z-index: 6;
|
|
548
|
-
display: flex;
|
|
549
|
-
gap: 4px;
|
|
550
|
-
padding: 2px 0;
|
|
551
|
-
}
|
|
552
|
-
|
|
553
|
-
.slice-chip {
|
|
554
|
-
border: 1px dashed var(--dpk-rule-strong);
|
|
555
|
-
border-radius: 999px;
|
|
556
|
-
padding: 3px 9px;
|
|
557
|
-
font-size: 10.5px;
|
|
558
|
-
font-weight: 620;
|
|
559
|
-
white-space: nowrap;
|
|
560
|
-
color: var(--dpk-ink-soft);
|
|
561
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 88%, transparent);
|
|
562
|
-
cursor: pointer;
|
|
563
|
-
transition:
|
|
564
|
-
border-color 120ms ease,
|
|
565
|
-
color 120ms ease;
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
.slice-chip:hover {
|
|
569
|
-
border-color: var(--dpk-blue);
|
|
570
|
-
color: var(--dpk-blue);
|
|
571
|
-
}
|
|
572
|
-
|
|
573
|
-
/* ------------------------------------------------------ bounded contexts */
|
|
574
|
-
|
|
575
|
-
.context-region[data-hue='0'],
|
|
576
|
-
.context-label[data-hue='0'] {
|
|
577
|
-
--ctx-rgb: 51, 102, 204;
|
|
578
|
-
}
|
|
579
|
-
.context-region[data-hue='1'],
|
|
580
|
-
.context-label[data-hue='1'] {
|
|
581
|
-
--ctx-rgb: 13, 148, 136;
|
|
582
|
-
}
|
|
583
|
-
.context-region[data-hue='2'],
|
|
584
|
-
.context-label[data-hue='2'] {
|
|
585
|
-
--ctx-rgb: 174, 110, 6;
|
|
586
|
-
}
|
|
587
|
-
.context-region[data-hue='3'],
|
|
588
|
-
.context-label[data-hue='3'] {
|
|
589
|
-
--ctx-rgb: 124, 58, 237;
|
|
590
|
-
}
|
|
591
|
-
.context-region[data-hue='4'],
|
|
592
|
-
.context-label[data-hue='4'] {
|
|
593
|
-
--ctx-rgb: 190, 50, 100;
|
|
594
|
-
}
|
|
595
|
-
|
|
596
|
-
.context-region {
|
|
597
|
-
position: absolute;
|
|
598
|
-
z-index: 0;
|
|
599
|
-
border: 1.5px dashed rgba(var(--ctx-rgb), 0.33);
|
|
600
|
-
border-radius: 10px;
|
|
601
|
-
background: rgba(var(--ctx-rgb), 0.05);
|
|
602
|
-
pointer-events: none;
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
/* The label rides the region's top edge and carries the rename/dissolve UI. */
|
|
606
|
-
.context-label {
|
|
607
|
-
position: absolute;
|
|
608
|
-
z-index: 7;
|
|
609
|
-
transform: translateY(-55%);
|
|
610
|
-
display: flex;
|
|
611
|
-
align-items: center;
|
|
612
|
-
gap: 4px;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
|
-
.context-label-name {
|
|
616
|
-
border: none;
|
|
617
|
-
border-radius: 999px;
|
|
618
|
-
padding: 3px 10px;
|
|
619
|
-
font-family: var(--dpk-mono);
|
|
620
|
-
font-size: 9.5px;
|
|
621
|
-
font-weight: 650;
|
|
622
|
-
letter-spacing: 0.13em;
|
|
623
|
-
text-transform: uppercase;
|
|
624
|
-
white-space: nowrap;
|
|
625
|
-
color: #fff;
|
|
626
|
-
background: rgba(var(--ctx-rgb), 0.9);
|
|
627
|
-
cursor: pointer;
|
|
628
|
-
box-shadow: var(--dpk-shadow-xs);
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
.context-label-name:hover {
|
|
632
|
-
background: rgba(var(--ctx-rgb), 1);
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
.context-label-x {
|
|
636
|
-
width: 18px;
|
|
637
|
-
height: 18px;
|
|
638
|
-
border: none;
|
|
639
|
-
border-radius: 50%;
|
|
640
|
-
font-size: 9px;
|
|
641
|
-
line-height: 1;
|
|
642
|
-
color: rgba(var(--ctx-rgb), 0.9);
|
|
643
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 92%, transparent);
|
|
644
|
-
box-shadow: var(--dpk-shadow-xs);
|
|
645
|
-
cursor: pointer;
|
|
646
|
-
opacity: 0;
|
|
647
|
-
transition: opacity 120ms ease;
|
|
648
|
-
}
|
|
649
|
-
|
|
650
|
-
.context-label:hover .context-label-x,
|
|
651
|
-
.context-label-x:focus-visible {
|
|
652
|
-
opacity: 1;
|
|
653
|
-
}
|
|
654
|
-
|
|
655
|
-
/* ---------------------------------------------------------------- arrows */
|
|
656
|
-
|
|
657
|
-
.links-layer {
|
|
658
|
-
position: absolute;
|
|
659
|
-
inset: 0;
|
|
660
|
-
/* Causality strokes are annotations drawn over the wall. */
|
|
661
|
-
z-index: 4;
|
|
662
|
-
pointer-events: none;
|
|
663
|
-
overflow: visible;
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
/* Stroke must come from a stylesheet, not a presentation attribute:
|
|
667
|
-
a var() inside stroke="..." is not substituted and the line stays invisible. */
|
|
668
|
-
.link-path {
|
|
669
|
-
fill: none;
|
|
670
|
-
stroke: var(--dpk-ink-soft);
|
|
671
|
-
stroke-width: 1.6;
|
|
672
|
-
stroke-linecap: round;
|
|
673
|
-
opacity: 0.6;
|
|
674
|
-
}
|
|
675
|
-
|
|
676
|
-
/* Invisible fat stroke on top of the line: a mistaken connection is easy to
|
|
677
|
-
pick, and picking it never starts a wall gesture. */
|
|
678
|
-
.link-hit {
|
|
679
|
-
fill: none;
|
|
680
|
-
stroke: transparent;
|
|
681
|
-
stroke-width: 14;
|
|
682
|
-
stroke-linecap: round;
|
|
683
|
-
pointer-events: stroke;
|
|
684
|
-
cursor: pointer;
|
|
685
|
-
}
|
|
686
|
-
|
|
687
|
-
.link-path.is-selected {
|
|
688
|
-
stroke: var(--dpk-blue);
|
|
689
|
-
stroke-width: 2.6;
|
|
690
|
-
opacity: 1;
|
|
691
|
-
}
|
|
692
|
-
|
|
693
|
-
.link-label {
|
|
694
|
-
font-family: var(--dpk-mono);
|
|
695
|
-
font-size: 9px;
|
|
696
|
-
letter-spacing: 0.06em;
|
|
697
|
-
fill: var(--dpk-ink-soft);
|
|
698
|
-
paint-order: stroke;
|
|
699
|
-
stroke: var(--dpk-paper-raised);
|
|
700
|
-
stroke-width: 3;
|
|
701
|
-
stroke-linejoin: round;
|
|
702
|
-
}
|
|
703
|
-
|
|
704
|
-
.links-layer marker path {
|
|
705
|
-
fill: var(--dpk-ink-soft);
|
|
706
|
-
opacity: 0.75;
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
/* --------------------------------------------------------------- gesture */
|
|
710
|
-
|
|
711
|
-
/* Overlays live in viewport space, above the transformed content. */
|
|
712
|
-
.gesture-layer {
|
|
713
|
-
position: absolute;
|
|
714
|
-
inset: 0;
|
|
715
|
-
z-index: 30;
|
|
716
|
-
width: 100%;
|
|
717
|
-
height: 100%;
|
|
718
|
-
pointer-events: none;
|
|
719
|
-
overflow: visible;
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
.connect-line {
|
|
723
|
-
fill: none;
|
|
724
|
-
stroke: var(--dpk-blue);
|
|
725
|
-
stroke-width: 2;
|
|
726
|
-
stroke-linecap: round;
|
|
727
|
-
stroke-dasharray: 6 4;
|
|
728
|
-
}
|
|
729
|
-
|
|
730
|
-
.connect-tip {
|
|
731
|
-
fill: var(--dpk-blue);
|
|
732
|
-
}
|
|
733
|
-
|
|
734
|
-
.select-rect {
|
|
735
|
-
position: absolute;
|
|
736
|
-
z-index: 30;
|
|
737
|
-
border: 1px solid var(--dpk-blue);
|
|
738
|
-
background: color-mix(in srgb, var(--dpk-blue-soft) 40%, transparent);
|
|
739
|
-
pointer-events: none;
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
/* ------------------------------------------------------------ floating UI */
|
|
743
|
-
|
|
744
|
-
.board-hud {
|
|
745
|
-
position: absolute;
|
|
746
|
-
left: 12px;
|
|
747
|
-
bottom: 12px;
|
|
748
|
-
z-index: 40;
|
|
749
|
-
display: flex;
|
|
750
|
-
gap: 12px;
|
|
751
|
-
align-items: center;
|
|
752
|
-
padding: 5px 12px;
|
|
753
|
-
border: 1px solid var(--dpk-rule);
|
|
754
|
-
border-radius: 999px;
|
|
755
|
-
font-family: var(--dpk-mono);
|
|
756
|
-
font-size: 10px;
|
|
757
|
-
letter-spacing: 0.05em;
|
|
758
|
-
color: var(--dpk-ink-faint);
|
|
759
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 82%, transparent);
|
|
760
|
-
backdrop-filter: blur(6px);
|
|
761
|
-
pointer-events: none;
|
|
762
|
-
}
|
|
763
|
-
|
|
764
|
-
.board-hint {
|
|
765
|
-
color: var(--dpk-ink-faint);
|
|
766
|
-
opacity: 0.8;
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
.board-zoom {
|
|
770
|
-
position: absolute;
|
|
771
|
-
right: 12px;
|
|
772
|
-
bottom: 12px;
|
|
773
|
-
z-index: 40;
|
|
774
|
-
display: flex;
|
|
775
|
-
align-items: center;
|
|
776
|
-
border: 1px solid var(--dpk-rule);
|
|
777
|
-
border-radius: 8px;
|
|
778
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 88%, transparent);
|
|
779
|
-
backdrop-filter: blur(6px);
|
|
780
|
-
box-shadow: var(--dpk-shadow-xs);
|
|
781
|
-
overflow: hidden;
|
|
782
|
-
}
|
|
783
|
-
|
|
784
|
-
.board-zoom button {
|
|
785
|
-
border: none;
|
|
786
|
-
background: transparent;
|
|
787
|
-
padding: 6px 10px;
|
|
788
|
-
font-size: 12px;
|
|
789
|
-
line-height: 1;
|
|
790
|
-
color: var(--dpk-ink-soft);
|
|
791
|
-
cursor: pointer;
|
|
792
|
-
}
|
|
793
|
-
|
|
794
|
-
.board-zoom button:hover {
|
|
795
|
-
background: var(--dpk-blue-soft);
|
|
796
|
-
color: var(--dpk-blue);
|
|
797
|
-
}
|
|
798
|
-
|
|
799
|
-
.board-zoom .board-zoom-pct {
|
|
800
|
-
min-width: 48px;
|
|
801
|
-
font-family: var(--dpk-mono);
|
|
802
|
-
font-size: 10.5px;
|
|
803
|
-
}
|
|
804
|
-
|
|
805
|
-
.board-selection {
|
|
806
|
-
position: absolute;
|
|
807
|
-
left: 50%;
|
|
808
|
-
bottom: 14px;
|
|
809
|
-
transform: translateX(-50%);
|
|
810
|
-
z-index: 45;
|
|
811
|
-
display: flex;
|
|
812
|
-
gap: 8px;
|
|
813
|
-
align-items: center;
|
|
814
|
-
padding: 8px 12px;
|
|
815
|
-
border: 1px solid var(--dpk-rule-strong);
|
|
816
|
-
border-radius: 10px;
|
|
817
|
-
background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
|
|
818
|
-
backdrop-filter: blur(6px);
|
|
819
|
-
box-shadow: var(--dpk-shadow);
|
|
820
|
-
}
|
|
821
|
-
|
|
822
|
-
.board-selection-count {
|
|
823
|
-
font-family: var(--dpk-mono);
|
|
824
|
-
font-size: 10.5px;
|
|
825
|
-
color: var(--dpk-ink-soft);
|
|
826
|
-
white-space: nowrap;
|
|
827
|
-
}
|
|
828
|
-
|
|
829
|
-
.board-selection-hint {
|
|
830
|
-
font-size: 10.5px;
|
|
831
|
-
color: var(--dpk-ink-faint);
|
|
832
|
-
white-space: nowrap;
|
|
833
|
-
}
|
|
834
|
-
|
|
835
|
-
/* ----------------------------------------------------------------- empty */
|
|
836
|
-
|
|
837
|
-
.empty {
|
|
838
|
-
border: 1px dashed var(--dpk-rule-strong);
|
|
839
|
-
border-radius: var(--dpk-radius-lg);
|
|
840
|
-
padding: 28px 24px;
|
|
841
|
-
background: var(--dpk-paper-raised);
|
|
842
|
-
max-width: 560px;
|
|
843
|
-
display: grid;
|
|
844
|
-
gap: 10px;
|
|
845
|
-
box-shadow: var(--dpk-shadow-sm);
|
|
846
|
-
justify-items: start;
|
|
847
|
-
}
|
|
848
|
-
|
|
849
|
-
/* --------------------------------------------------------------- pickers */
|
|
850
|
-
|
|
851
|
-
.context-pop {
|
|
852
|
-
min-width: 220px;
|
|
853
|
-
}
|
|
854
|
-
|
|
855
|
-
/* -------------------------------------------------------- append picker */
|
|
856
|
-
|
|
857
|
-
/* The palette travels in --es-note-bg/-ink, so a chip previews what it adds. */
|
|
858
|
-
.append-menu {
|
|
859
|
-
min-width: 220px;
|
|
860
|
-
}
|
|
861
|
-
|
|
862
|
-
.append-menu .type-options {
|
|
863
|
-
display: grid;
|
|
864
|
-
grid-template-columns: 1fr 1fr;
|
|
865
|
-
gap: 4px;
|
|
866
|
-
}
|
|
867
|
-
|
|
868
|
-
.type-chip {
|
|
869
|
-
border: 1px solid var(--dpk-rule-strong);
|
|
870
|
-
border-radius: 4px;
|
|
871
|
-
padding: 6px 8px;
|
|
872
|
-
font-size: 11px;
|
|
873
|
-
font-weight: 620;
|
|
874
|
-
text-align: left;
|
|
875
|
-
background: var(--es-note-bg, var(--dpk-paper-raised));
|
|
876
|
-
color: var(--es-note-ink, var(--dpk-ink));
|
|
877
|
-
cursor: pointer;
|
|
878
|
-
transition: transform 120ms ease;
|
|
879
|
-
}
|
|
880
|
-
|
|
881
|
-
.type-chip:hover {
|
|
882
|
-
transform: translateY(-1px);
|
|
883
|
-
box-shadow: var(--dpk-shadow-sm);
|
|
884
|
-
}
|
|
885
|
-
|
|
886
|
-
.link-add .dpk-select {
|
|
887
|
-
flex: 1 1 auto;
|
|
888
|
-
min-width: 0;
|
|
889
|
-
}
|
|
890
|
-
`,pn={width:260,height:150},hn={width:236,height:210},mn=64,un=["event","command","aggregate","actor","policy","readmodel","external"],fn=1200,re=5,xn={x:20,top:46,bottom:40};class ae extends vt{static{this.styles=[vt.styles,cn,gt]}definitionFor(t){return Bt(t)}static{this.properties={mode:{state:!0},boardWidth:{state:!0},viewport:{state:!0},gesture:{state:!0},hoverSliceId:{state:!0},selectedSliceIds:{state:!0},selectedLinkIds:{state:!0},naming:{state:!0}}}#e;#l=new kt(this);constructor(){super(),this.mode=C,this.boardWidth=fn,this.viewport={panX:24,panY:16,zoom:1},this.gesture=void 0,this.hoverSliceId=void 0,this.selectedSliceIds=[],this.selectedLinkIds=[],this.naming=void 0}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect(),this.#e=void 0}firstUpdated(){typeof ResizeObserver>"u"||(this.#e=new ResizeObserver(t=>{const n=t[0]?.contentRect.width;n!==void 0&&n>0&&(this.boardWidth=n)}),this.#e.observe(this))}updated(){super.updated(),this.#d(this.viewport),this.mode.kind==="append"&&this.#i("#append-menu",this.mode.point,hn),this.naming!==void 0&&this.#i("#context-pop",this.naming.point,pn,"#context-name")}#i(t,n,o,i){const s=this.renderRoot.querySelector(t);if(!s||s.matches(":popover-open")||(this.#l.open(s,Te(n.x,n.y),o),i===void 0))return;const r=this.renderRoot.querySelector(i);r?.focus(),r instanceof HTMLInputElement&&r.select()}#c(){return Math.max(gn,this.boardWidth-96)}renderRegions(t){return{main:this.#s(t)}}#s(t){const n=O(this.locale);return k`
|
|
891
|
-
${je({m:n,context:t,mode:this.mode,maxRowWidth:this.#c(),viewport:this.viewport,gesture:this.gesture,hoverSliceId:this.hoverSliceId,selectedSliceIds:this.selectedSliceIds,selectedLinkIds:this.selectedLinkIds,handlers:{noteIntent:(o,i)=>this.#T(o,i),addFirst:()=>this.#P(t),attachNote:(o,i)=>this.#_(t,o,i),viewportPointerDown:o=>this.#v(o),viewportPointerMove:o=>this.#k(o),viewportPointerUp:o=>this.#E(t,o),viewportPointerCancel:()=>this.gesture=void 0,viewportPointerLeave:()=>{this.gesture===void 0&&(this.hoverSliceId=void 0)},viewportWheel:o=>this.#y(o),portPointerDown:(o,i)=>this.#g(o,i),slicePointerDown:(o,i)=>this.#b(o,i),zoomStep:o=>this.#$(o),zoomFit:()=>this.#w(),zoomReset:()=>this.#h(1/this.viewport.zoom),groupSelection:o=>{this.selectedSliceIds.length>0&&(this.naming={kind:"create-context",sliceIds:this.selectedSliceIds,point:o})},assignSelection:o=>this.#f(t,o),stripSelectionContext:()=>this.#f(t,null),clearSelection:()=>{this.selectedSliceIds=[],this.selectedLinkIds=[]},linkClick:(o,i)=>this.#O(o,i),deleteSelection:()=>this.#u(t),keyDown:o=>this.#A(t,o),renameContext:(o,i)=>this.naming={kind:"rename-context",contextId:o,point:i},dissolveContext:o=>t.dispatch(E.deleteContext(o))}})}
|
|
892
|
-
${this.mode.kind==="append"?this.#D(t,this.mode.sliceId):N}
|
|
893
|
-
${this.naming!==void 0?this.#z(t,this.naming):N}
|
|
894
|
-
`}#t(){return this.renderRoot.querySelector(".board-viewport")}#n(t){const n=this.#t()?.getBoundingClientRect();return n===void 0?{x:t.clientX,y:t.clientY}:{x:t.clientX-n.left,y:t.clientY-n.top}}#r(t){const n=this.#t();if(n===null)return[];const o=n.getBoundingClientRect();return[...this.renderRoot.querySelectorAll("[data-slice-id]")].map(i=>{const s=i.getBoundingClientRect();return{id:i.dataset.sliceId??"",rect:{left:s.left-o.left-(t?.x??0),top:s.top-o.top-(t?.top??0),width:s.width+(t?.x??0)*2,height:s.height+(t?.top??0)+(t?.bottom??0)}}})}#p(t,n){const o=this.#t();o!==null&&(o.setPointerCapture(t.pointerId),this.gesture=n)}#g(t,n){if(n.button!==0)return;n.stopPropagation(),n.preventDefault();const o=this.#n(n);this.#p(n,{kind:"connect",pointerId:n.pointerId,fromSliceId:t,start:o,current:o,moved:!1})}#b(t,n){if(n.button!==0)return;n.stopPropagation(),n.preventDefault();const o=this.#n(n);this.#p(n,{kind:"move-slice",pointerId:n.pointerId,sliceId:t,start:o,current:o,moved:!1})}#v(t){if(t.button!==0||this.gesture!==void 0)return;for(const o of t.composedPath()){if(o===t.currentTarget)break;if(o instanceof Element&&(o.tagName.toLowerCase()==="dpk-internal-event-storming-note"||o.matches("button, select, textarea, input, a")))return}const n=this.#n(t);(this.mode.kind==="editing"||this.mode.kind==="append")&&(this.mode=C),this.selectedLinkIds=[],this.#p(t,{kind:"select",pointerId:t.pointerId,start:n,current:n,moved:!1})}#k(t){const n=this.gesture,o=this.#n(t);if(n===void 0){const i=ct(this.#r(xn),o.x,o.y);i!==this.hoverSliceId&&(this.hoverSliceId=i);return}this.gesture=Ut(n,{pointerId:t.pointerId,point:o},this.#r(),re)}#E(t,n){const o=this.gesture;if(o===void 0||n.pointerId!==o.pointerId)return;const i=Ut(o,{pointerId:n.pointerId,point:this.#n(n)},this.#r(),re);if(this.gesture=void 0,i.kind==="connect"){i.moved?i.targetSliceId!==void 0&&this.#S(t,i.fromSliceId,i.targetSliceId):this.#L(i.fromSliceId);return}if(i.kind==="move-slice"){if(!i.moved){this.selectedSliceIds=this.selectedSliceIds.includes(i.sliceId)?this.selectedSliceIds.filter(r=>r!==i.sliceId):[...this.selectedSliceIds,i.sliceId];return}i.drop!==void 0&&this.#C(t,i.sliceId,i.drop.sliceId,i.drop.side);return}if(!i.moved){this.selectedSliceIds=[];return}const s={left:Math.min(i.start.x,i.current.x),top:Math.min(i.start.y,i.current.y),width:Math.abs(i.current.x-i.start.x),height:Math.abs(i.current.y-i.start.y)};this.selectedSliceIds=[...Wt(this.#r(),s)]}#y(t){t.preventDefault();const n=this.#n(t);this.#d(t.ctrlKey||t.metaKey?lt(this.viewport,n.x,n.y,Math.exp(-t.deltaY*.01)):Yt(this.viewport,-t.deltaX,-t.deltaY))}#h(t){const n=this.#t()?.getBoundingClientRect();this.#d(lt(this.viewport,(n?.width??0)/2,(n?.height??0)/2,t))}#$(t){this.#h(t===1?1.2:1/1.2)}#w(){const t=this.#t()?.getBoundingClientRect(),n=this.#m();t===void 0||n===void 0||this.#d(Ht(n,{width:t.width,height:t.height},48))}#m(){const t=this.renderRoot.querySelector(".wall");return t===null?void 0:{width:t.offsetWidth,height:t.offsetHeight}}#d(t){const n=this.#t()?.getBoundingClientRect(),o=this.#m(),i=n===void 0||o===void 0||o.width===0||n.width===0?t:Ft(t,o,{width:n.width,height:n.height},mn),s=this.viewport;i.panX===s.panX&&i.panY===s.panY&&i.zoom===s.zoom||(this.viewport=i)}#T(t,n){const o=this.context();switch(n.kind){case"select":o.navigate({note:t});break;case"rename":o.dispatch(E.setElementName(t,n.name));break;case"comment":o.dispatch({type:"comment",target:`element:${t}`,payload:{body:n.body}});break;case"delete":o.dispatch(E.deleteElement(t)),o.navigation.note===t&&o.navigate({note:null});break;case"add-hotspot":this.#N(o,t);break}this.mode=qt(this.mode,t,n)}#a(t,n){return R(t).find(o=>o.id===n)}#o(t){return t===void 0?[]:[...t.notes,...t.pins.map(n=>n.note)].map(n=>n.id)}#S(t,n,o){if(n===o)return;const i=R(t.state),s=i.find(h=>h.id===n),r=i.find(h=>h.id===o),a=s&&r?Nt(s,r):void 0;if(s===void 0||r===void 0||a===void 0||t.state.links.some(h=>h.from===a.from&&h.to===a.to))return;const d=t.state.links.map(h=>h.id),l=t.state.elements.map(h=>h.id),p=W(s)?.id,m=p!==void 0&&i.indexOf(r)>i.indexOf(s)?Gt(l,this.#o(r),[p],"after"):[];t.dispatchBatch([E.linkElements(z(`link-${a.from}`,d),a.from,a.to,{kind:"flow"}),...m.map(h=>E.moveElement(h.id,h.after))])}#I(t){const n=this.#t(),o=this.#r().find(s=>s.id===t)?.rect;if(n===null||o===void 0)return;const i=n.getBoundingClientRect();return{x:i.left+o.left+o.width,y:i.top+o.top+o.height/2}}#L(t){const n=this.#I(t);n!==void 0&&(this.mode={kind:"append",sliceId:t,point:n})}#M(t,n,o){const i=this.#a(t.state,n),s=i?W(i):void 0;if(s===void 0){this.mode=C;return}const r=z(`new-${o}`,K(t.state)),a=t.state.links.map(l=>l.id);if(!t.dispatchBatch([E.addElement(r,o,O(this.locale).noteTypeLabel(o)),E.linkElements(z(`link-${s.id}`,a),s.id,r,{kind:"flow"})]).ok){this.mode=C;return}t.navigate({note:r}),this.mode={kind:"editing",noteId:r}}#N(t,n){const o=z("new-hotspot",K(t.state)),i=t.state.links.map(r=>r.id);t.dispatchBatch([E.addElement(o,"hotspot",O(this.locale).noteTypeLabel("hotspot")),E.linkElements(z(`link-${o}`,i),o,n,{kind:"member"})]).ok&&(t.navigate({note:o}),this.mode={kind:"editing",noteId:o})}#_(t,n,o){const i=this.#a(t.state,n),s=i===void 0?void 0:It(i,o);if(s===void 0)return;const r=z(`new-${o}`,K(t.state)),[a,d]=s.incoming?[r,s.anchorId]:[s.anchorId,r],l=t.state.links.map(m=>m.id);t.dispatchBatch([E.addElement(r,o,O(this.locale).noteTypeLabel(o)),E.linkElements(z(`link-${a}`,l),a,d,{kind:"member"})]).ok&&(t.navigate({note:r}),this.mode={kind:"editing",noteId:r})}#C(t,n,o,i){const s=t.state,r=pt(s.elements.map(a=>a.id),this.#o(this.#a(s,n)),this.#o(this.#a(s,o)),i);t.dispatchBatch(r.map(a=>E.moveElement(a.id,a.after)))}#O(t,n){this.mode.kind==="editing"&&(this.mode=C),this.selectedSliceIds=[],this.selectedLinkIds=n?this.selectedLinkIds.includes(t)?this.selectedLinkIds.filter(o=>o!==t):[...this.selectedLinkIds,t]:[t],this.#t()?.focus()}#u(t){if(this.selectedLinkIds.length>0){const i=t.state.links.filter(s=>this.selectedLinkIds.includes(s.id));t.dispatchBatch(i.map(s=>E.unlinkElements(s.from,s.to))),this.selectedLinkIds=[];return}if(this.selectedSliceIds.length===0)return;const n=R(t.state),o=this.selectedSliceIds.flatMap(i=>this.#o(n.find(s=>s.id===i)));t.dispatchBatch(o.map(i=>E.deleteElement(i))),this.selectedSliceIds=[]}#A(t,n){if(n.target!==n.currentTarget)return;if(n.key==="Escape"){this.selectedSliceIds=[],this.selectedLinkIds=[];return}if(n.key!=="Delete"&&n.key!=="Backspace"||this.mode.kind!=="idle"||this.naming!==void 0)return;if(n.preventDefault(),this.selectedLinkIds.length>0||this.selectedSliceIds.length>0){this.#u(t);return}const o=t.navigation.note;o===void 0||P(t.state,o)===void 0||(t.dispatch(E.deleteElement(o)),t.navigate({note:null}))}#f(t,n){const o=R(t.state),i=this.selectedSliceIds.flatMap(r=>this.#o(o.find(a=>a.id===r)));t.dispatchBatch(i.map(r=>E.setElementContext(r,n))).ok&&(this.selectedSliceIds=[])}#x(t,n){const i=this.renderRoot.querySelector("#context-name")?.value.trim()??"";if(i==="")return;if(n.kind==="rename-context"){t.dispatch(E.setContextName(n.contextId,i)).ok&&(this.naming=void 0);return}const s=z("context",t.state.contexts.map(l=>l.id)),r=R(t.state),a=n.sliceIds.flatMap(l=>this.#o(r.find(p=>p.id===l)));t.dispatchBatch([E.addContext(s,i),...a.map(l=>E.setElementContext(l,s))]).ok&&(this.selectedSliceIds=[],this.naming=void 0)}#z(t,n){const o=O(this.locale),i=n.kind==="rename-context"?Y(t.state,n.contextId)?.name??"":"";return k`<div id="context-pop" class="comment-pop context-pop" popover="manual">
|
|
895
|
-
<span class="dpk-label"> ${n.kind==="create-context"?o.newContextTitle:o.renameContextTitle} </span>
|
|
896
|
-
<input
|
|
897
|
-
id="context-name"
|
|
898
|
-
class="dpk-input"
|
|
899
|
-
type="text"
|
|
900
|
-
placeholder=${o.contextNamePlaceholder}
|
|
901
|
-
.value=${i}
|
|
902
|
-
@keydown=${s=>{s.key==="Enter"&&this.#x(t,n),s.key==="Escape"&&(this.naming=void 0)}}
|
|
903
|
-
/>
|
|
904
|
-
<div class="pop-actions">
|
|
905
|
-
<button class="dpk-btn" type="button" @click=${()=>this.naming=void 0}>${o.cancel}</button>
|
|
906
|
-
<button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>this.#x(t,n)}>
|
|
907
|
-
${n.kind==="create-context"?o.create:o.save}
|
|
908
|
-
</button>
|
|
909
|
-
</div>
|
|
910
|
-
</div>`}#D(t,n){const o=O(this.locale),i=this.#a(t.state,n),s=i===void 0?void 0:W(i);return k`<div id="append-menu" class="comment-pop append-menu" popover="manual">
|
|
911
|
-
<span class="dpk-label">${s===void 0?o.appendMenuNext:o.appendMenuAfter(s.name)}</span>
|
|
912
|
-
<div class="type-options">
|
|
913
|
-
${un.map(r=>k`<button
|
|
914
|
-
class="type-chip"
|
|
915
|
-
type="button"
|
|
916
|
-
data-type=${r}
|
|
917
|
-
style=${at(r)}
|
|
918
|
-
@click=${()=>this.#M(t,n,r)}
|
|
919
|
-
>
|
|
920
|
-
${o.noteTypeLabel(r)}
|
|
921
|
-
</button>`)}
|
|
922
|
-
</div>
|
|
923
|
-
<div class="pop-actions">
|
|
924
|
-
<button class="dpk-btn" type="button" @click=${()=>this.mode=C}>${o.cancel}</button>
|
|
925
|
-
</div>
|
|
926
|
-
</div>`}#P(t){const n=z("new-event",K(t.state));if(!t.dispatch(E.addElement(n,"event",O(this.locale).noteTypeLabel("event"))).ok){this.mode=C;return}t.navigate({note:n}),this.mode={kind:"editing",noteId:n}}}const gn=264,de=()=>{Fe(),customElements.get("dpk-template-event-storming")||customElements.define("dpk-template-event-storming",ae)},bn=Object.freeze(Object.defineProperty({__proto__:null,DpkTemplateEventStorming:ae,ES_IDLE:C,NOTE_TYPES:q,ZOOM_MAX:Xt,ZOOM_MIN:dt,allNoteIds:K,applyEventStormingAction:Tt,attachAnchor:It,buildSlices:R,connectionEndpoints:Nt,constrainViewport:Ft,defineEventStormingElement:de,describeEventStormingAction:Ot,dropSide:Kt,emptyEventStormingBase:wt,eventStormingAction:E,eventStormingActions:$,eventStormingBaseSchema:yt,eventStormingCommentTargets:Dt,eventStormingDefinitionFor:Bt,eventStormingHasTarget:Rt,eventStormingMessages:O,eventStormingTargetLabel:zt,eventStormingTitle:rt,findContext:Y,findLink:it,findNote:P,fitViewport:Ht,hitRect:ct,noteCardModeOf:Vt,panBy:Yt,parseEventStormingBase:$t,planSliceBands:Mt,rectsInBand:Wt,reduceNoteIntent:qt,resolveEventStormingNavigation:Pt,sameSlice:Z,serializeEventStormingAction:At,sliceArrows:Lt,sliceMovePlan:pt,sliceMoveSteps:Gt,sliceVoice:W,zoomAt:lt},Symbol.toStringTag,{value:"Module"}));export{de as d,bn as i};
|