@ddd-tool/domain-designer-ui-component 0.1.0-beta.5 → 0.1.0-beta.6

package/domain/diagram-agg/define.d.ts

@@ -0,0 +1 @@
+export declare const EMPTY_STORY = "__Empty__";

package/domain/diagram-agg/gen-code.d.ts

@@ -1,2 +1,25 @@
-import type { DomainDesigner } from '@ddd-tool/domain-designer-core';
-export declare function nomnomlCodeGenerator<T extends DomainDesigner>(design: T, displayReadModel: boolean, displaySystem: boolean): Generator<string, void, unknown>;
+import type { DomainDesignAgg, DomainDesigner } from '@ddd-tool/domain-designer-core';
+export declare function nomnomlCodeGenerator<T extends DomainDesigner>(params: {
+    design: T;
+    currentStory: string;
+    displayReadModel: boolean;
+    displaySystem: boolean;
+}): Generator<string, void, unknown>;
+export declare function filterContext(params: {
+    design: DomainDesigner;
+    currentStory: string;
+    displayReadModel: boolean;
+    displaySystem: boolean;
+}): {
+    aggs: DomainDesignAgg<any>[];
+    commands: import("@ddd-tool/domain-designer-core").DomainDesignCommand<any>[];
+    facadeCommands: import("@ddd-tool/domain-designer-core").DomainDesignFacadeCommand<any>[];
+    events: import("@ddd-tool/domain-designer-core").DomainDesignEvent<any>[];
+    services: import("@ddd-tool/domain-designer-core").DomainDesignService[];
+    actors: import("@ddd-tool/domain-designer-core").DomainDesignActor[];
+    policies: import("@ddd-tool/domain-designer-core").DomainDesignPolicy[];
+    readModels: import("@ddd-tool/domain-designer-core").DomainDesignReadModel<any>[];
+    systems: import("@ddd-tool/domain-designer-core").DomainDesignSystem[];
+    links: Record<string, import("@ddd-tool/domain-designer-core/common").LinkType>;
+    getIdMap: () => Record<string, import("@ddd-tool/domain-designer-core").DomainDesignObject>;
+};

package/domain/diagram-agg/index.d.ts

@@ -1,9 +1,9 @@
 import type { DomainDesigner } from '@ddd-tool/domain-designer-core';
+export { EMPTY_STORY } from './define';
 interface FocusFlowFn {
     (workflow: undefined, userStory?: string): void;
     (workflow: string, userStory: string): void;
 }
-export declare const EMPTY_STORY = "__Empty__";
 export declare function useDiagramAgg(data?: Record<string, DomainDesigner>): Readonly<{
     states: Readonly<{
         design: Readonly<import("vue").Ref<{
@@ -191,6 +191,19 @@ export declare function useDiagramAgg(data?: Record<string, DomainDesigner>): Re
     commands: Readonly<{
         focusFlow: FocusFlowFn;
         downloadSvg: () => void;
+        filterContext: () => {
+            aggs: import("@ddd-tool/domain-designer-core").DomainDesignAgg<any>[];
+            commands: import("@ddd-tool/domain-designer-core").DomainDesignCommand<any>[];
+            facadeCommands: import("@ddd-tool/domain-designer-core").DomainDesignFacadeCommand<any>[];
+            events: import("@ddd-tool/domain-designer-core").DomainDesignEvent<any>[];
+            services: import("@ddd-tool/domain-designer-core").DomainDesignService[];
+            actors: import("@ddd-tool/domain-designer-core").DomainDesignActor[];
+            policies: import("@ddd-tool/domain-designer-core").DomainDesignPolicy[];
+            readModels: import("@ddd-tool/domain-designer-core").DomainDesignReadModel<any>[];
+            systems: import("@ddd-tool/domain-designer-core").DomainDesignSystem[];
+            links: Record<string, import("@ddd-tool/domain-designer-core/common").LinkType>;
+            getIdMap: () => Record<string, import("@ddd-tool/domain-designer-core").DomainDesignObject>;
+        };
         setDownloadEnabled: (b: boolean) => void;
         setWorkflowPlayInterval: (i: number) => void;
         setDisplayReadModel: (b: boolean) => void;
@@ -230,4 +243,3 @@ export declare function useDiagramAgg(data?: Record<string, DomainDesigner>): Re
         };
     }>;
 }>;
-export {};

package/index.css

@@ -1,5 +1,5 @@
 
-.nomnoml[data-v-83e775ca] {
+.nomnoml[data-v-ddc71b2c] {
   height: 100%;
   overflow: auto;
 }

package/index.js

@@ -7117,7 +7117,7 @@ let __tla = (async () => {
         if (value.getTime && filter.getTime) return value.getTime() <= filter.getTime();
         else return value <= filter;
       },
-      gt: function gt2(value, filter) {
+      gt: function gt(value, filter) {
         if (filter === void 0 || filter === null) {
           return true;
         }
@@ -13545,55 +13545,57 @@ Stack : ${c2.stack || "unkown"}`);
       }
     };
   }
-  function* nomnomlCodeGenerator(design, displayReadModel, displaySystem) {
-    const context = design._getContext();
-    for (const i2 in context.getAggs()) {
-      const agg2 = context.getAggs()[i2];
+  const EMPTY_STORY = "__Empty__";
+  function* nomnomlCodeGenerator(params) {
+    const design = params.design;
+    const currentStory = params.currentStory;
+    const context = filterContext({
+      design,
+      currentStory
+    });
+    for (const i2 in context.aggs) {
+      const agg2 = context.aggs[i2];
       yield `[<aggregation id=${agg2._attributes.__id}> ${agg2._attributes.name}: Aggregation ${infosToCode(agg2._attributes.infos)} ${noteToCode$1(agg2._attributes.note)}]`;
     }
-    for (const i2 in context.getCommands()) {
-      const command = context.getCommands()[i2];
+    for (const i2 in context.commands) {
+      const command = context.commands[i2];
       yield `[<command id=${command._attributes.__id}> ${command._attributes.name}: Command ${infosToCode(command._attributes.infos)} ${noteToCode$1(command._attributes.note)}]`;
     }
-    for (const i2 in context.getFacadeCommands()) {
-      const facadeCommand = context.getFacadeCommands()[i2];
+    for (const i2 in context.facadeCommands) {
+      const facadeCommand = context.facadeCommands[i2];
       yield `[<facadeCommand id=${facadeCommand._attributes.__id}> ${facadeCommand._attributes.name}: FacadeCommand ${infosToCode(facadeCommand._attributes.infos)} ${noteToCode$1(facadeCommand._attributes.note)}]`;
     }
-    for (const i2 in context.getEvents()) {
-      const event = context.getEvents()[i2];
+    for (const i2 in context.events) {
+      const event = context.events[i2];
       yield `[<event id=${event._attributes.__id}> ${event._attributes.name}: Event ${infosToCode(event._attributes.infos)} ${noteToCode$1(event._attributes.note)}]`;
     }
-    for (const i2 in context.getServices()) {
-      const service = context.getServices()[i2];
+    for (const i2 in context.services) {
+      const service = context.services[i2];
       yield `[<service id=${service._attributes.__id}> ${service._attributes.name}: Service ${noteToCode$1(service._attributes.note)}]`;
     }
-    for (const i2 in context.getActors()) {
-      const actor = context.getActors()[i2];
+    for (const i2 in context.actors) {
+      const actor = context.actors[i2];
       yield `[<actor id=${actor._attributes.__id}> ${actor._attributes.name}: Actor ${noteToCode$1(actor._attributes.note)}]`;
     }
-    for (const i2 in context.getPolicies()) {
-      const policy = context.getPolicies()[i2];
+    for (const i2 in context.policies) {
+      const policy = context.policies[i2];
       yield `[<policy id=${policy._attributes.__id}> ${policy._attributes.name}: Policy ${noteToCode$1(policy._attributes.note)}]`;
     }
-    if (displayReadModel) {
-      for (const i2 in context.getReadModels()) {
-        const readModel = context.getReadModels()[i2];
-        yield `[<readModel id=${readModel._attributes.__id}> ${readModel._attributes.name}: ReadModel ${infosToCode(readModel._attributes.infos)} ${noteToCode$1(readModel._attributes.note)}]`;
-      }
+    for (const i2 in context.readModels) {
+      const readModel = context.readModels[i2];
+      yield `[<readModel id=${readModel._attributes.__id}> ${readModel._attributes.name}: ReadModel ${infosToCode(readModel._attributes.infos)} ${noteToCode$1(readModel._attributes.note)}]`;
     }
-    if (displaySystem) {
-      for (const i2 in context.getSystems()) {
-        const system = context.getSystems()[i2];
-        yield `[<system id=${system._attributes.__id}> ${system._attributes.name}: System ${noteToCode$1(system._attributes.note)}]`;
-      }
+    for (const i2 in context.systems) {
+      const system = context.systems[i2];
+      yield `[<system id=${system._attributes.__id}> ${system._attributes.name}: System ${noteToCode$1(system._attributes.note)}]`;
     }
-    for (const i2 in context.getLinks()) {
-      const linkType = context.getLinks()[i2];
+    for (const i2 in context.links) {
+      const linkType = context.links[i2];
       const [_rule1, from, _rule2, to] = i2.split(",");
-      if (!displayReadModel && (_rule1 === "ReadModel" || _rule2 === "ReadModel")) {
+      if (!params.displayReadModel && (_rule1 === "ReadModel" || _rule2 === "ReadModel")) {
         continue;
       }
-      if (!displaySystem && (_rule1 === "System" || _rule2 === "System")) {
+      if (!params.displaySystem && (_rule1 === "System" || _rule2 === "System")) {
         continue;
       }
       if (linkType === "Association") {
@@ -13605,6 +13607,75 @@ Stack : ${c2.stack || "unkown"}`);
       }
     }
   }
+  function filterContext(params) {
+    const originalContext = params.design._getContext();
+    const getIdMap = originalContext.getIdMap;
+    let commands = originalContext.getCommands();
+    let facadeCommands = originalContext.getFacadeCommands();
+    let aggs = originalContext.getAggs();
+    let events = originalContext.getEvents();
+    let services = originalContext.getServices();
+    let actors = originalContext.getActors();
+    let policies = originalContext.getPolicies();
+    let readModels = originalContext.getReadModels();
+    let systems = originalContext.getSystems();
+    let links = originalContext.getLinks();
+    originalContext.getUserStories;
+    if (isEmptyStory(params.currentStory)) {
+      return {
+        aggs,
+        commands,
+        facadeCommands,
+        events,
+        services,
+        actors,
+        policies,
+        readModels,
+        systems,
+        links,
+        getIdMap
+      };
+    }
+    const workflows = [];
+    for (const workflowName of originalContext.getUserStories()[params.currentStory]) {
+      for (const id of originalContext.getWorkflows()[workflowName]) {
+        workflows.push(id);
+      }
+    }
+    commands = commands.filter((i2) => workflows.includes(i2._attributes.__id));
+    facadeCommands = facadeCommands.filter((i2) => workflows.includes(i2._attributes.__id));
+    aggs = aggs.filter((i2) => workflows.includes(i2._attributes.__id));
+    events = events.filter((i2) => workflows.includes(i2._attributes.__id));
+    services = services.filter((i2) => workflows.includes(i2._attributes.__id));
+    actors = actors.filter((i2) => workflows.includes(i2._attributes.__id));
+    policies = policies.filter((i2) => workflows.includes(i2._attributes.__id));
+    readModels = readModels.filter((i2) => workflows.includes(i2._attributes.__id));
+    systems = systems.filter((i2) => workflows.includes(i2._attributes.__id));
+    links = {};
+    const originalContextLinks = originalContext.getLinks();
+    for (const k2 of Object.keys(originalContextLinks)) {
+      const [_srcRule, srcId, _targetRule, targetId] = k2.split(",");
+      if (workflows.includes(srcId) && workflows.includes(targetId)) {
+        links[k2] = originalContextLinks[k2];
+      }
+    }
+    return {
+      aggs,
+      commands,
+      facadeCommands,
+      events,
+      services,
+      actors,
+      policies,
+      readModels,
+      systems,
+      links,
+      getIdMap
+    };
+  }
+  function isEmptyStory(story) {
+    return story === EMPTY_STORY;
+  }
   function infosToCode(infos) {
     if (!infos) {
       return "";
@@ -13651,7 +13722,6 @@ Stack : ${c2.stack || "unkown"}`);
     return "|" + code;
   }
   let agg$1;
-  const EMPTY_STORY = "__Empty__";
   function createAgg(data) {
     return X$2(() => {
       const designRecords = ref(data);
@@ -13675,7 +13745,12 @@ Stack : ${c2.stack || "unkown"}`);
           return "";
         }
         const code2 = [];
-        const generator = nomnomlCodeGenerator(design.value, displayReadModel.value, displaySystem.value);
+        const generator = nomnomlCodeGenerator({
+          design: design.value,
+          currentStory: currentStory.value,
+          displayReadModel: displayReadModel.value,
+          displaySystem: displaySystem.value
+        });
         let item = generator.next();
         while (!item.done) {
           code2.push(item.value);
@@ -13712,12 +13787,17 @@ Stack : ${c2.stack || "unkown"}`);
         return result;
       });
       const onFocusFlow = x$2();
-      function focusFlow(workflow, userStory = "Others") {
-        currentWorkflow.value = workflow;
+      function focusFlow(workflow, userStory = EMPTY_STORY) {
+        var _a, _b;
         currentStory.value = userStory;
+        if (userStory !== EMPTY_STORY && (!workflow || !((_a = design.value) == null ? void 0 : _a._getContext().getUserStories()[userStory].includes(workflow)))) {
+          currentWorkflow.value = ((_b = design.value) == null ? void 0 : _b._getContext().getUserStories()[userStory][0]) || void 0;
+        } else {
+          currentWorkflow.value = workflow;
+        }
         onFocusFlow.publish({
           userStory,
-          workflow,
+          workflow: currentWorkflow.value,
           displayReadModel: displayReadModel.value,
           displaySystem: displaySystem.value
         });
@@ -13748,6 +13828,14 @@ Stack : ${c2.stack || "unkown"}`);
           downloadSvg() {
             onDownloadSvg.publish({});
           },
+          filterContext() {
+            return filterContext({
+              design: design.value,
+              currentStory: currentStory.value,
+              displayReadModel: displayReadModel.value,
+              displaySystem: displaySystem.value
+            });
+          },
           setDownloadEnabled(b2) {
             downloadEnabled.value = b2;
           },
@@ -13811,17 +13899,17 @@ Stack : ${c2.stack || "unkown"}`);
   function Ln(t2) {
     return t2 && t2._attributes && t2._attributes.rule === "Info";
   }
-  const yt = process.env.NODE_ENV !== "production" ? Object.freeze({}) : {};
+  const Et = process.env.NODE_ENV !== "production" ? Object.freeze({}) : {};
   process.env.NODE_ENV !== "production" && Object.freeze([]);
   const Lt = () => {
   }, Re = (t2) => t2.charCodeAt(0) === 111 && t2.charCodeAt(1) === 110 && (t2.charCodeAt(2) > 122 || t2.charCodeAt(2) < 97), B = Object.assign, y$1 = Array.isArray, $$1 = (t2) => typeof t2 == "function", x$1 = (t2) => typeof t2 == "string", Z$1 = (t2) => typeof t2 == "symbol", R$1 = (t2) => t2 !== null && typeof t2 == "object";
   let $t;
   const dt = () => $t || ($t = typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : typeof window < "u" ? window : typeof global < "u" ? global : {});
-  function Rt(t2) {
+  function Ft(t2) {
     if (y$1(t2)) {
       const e2 = {};
       for (let n2 = 0; n2 < t2.length; n2++) {
-        const s2 = t2[n2], r2 = x$1(s2) ? Me(s2) : Rt(s2);
+        const s2 = t2[n2], r2 = x$1(s2) ? Me(s2) : Ft(s2);
         if (r2) for (const o2 in r2) e2[o2] = r2[o2];
       }
       return e2;
@@ -13837,11 +13925,11 @@ Stack : ${c2.stack || "unkown"}`);
       }
     }), e2;
   }
-  function Ft(t2) {
+  function Ct(t2) {
     let e2 = "";
     if (x$1(t2)) e2 = t2;
     else if (y$1(t2)) for (let n2 = 0; n2 < t2.length; n2++) {
-      const s2 = Ft(t2[n2]);
+      const s2 = Ct(t2[n2]);
       s2 && (e2 += s2 + " ");
     }
     else if (R$1(t2)) for (const n2 in t2) t2[n2] && (e2 += n2 + " ");
@@ -13877,12 +13965,12 @@ Stack : ${c2.stack || "unkown"}`);
   function en() {
     k$1.pop();
   }
-  let gt = false;
+  let bt = false;
   function W$1(t2, ...e2) {
-    if (gt) return;
-    gt = true;
+    if (bt) return;
+    bt = true;
     const n2 = k$1.length ? k$1[k$1.length - 1].component : null, s2 = n2 && n2.appContext.config.warnHandler, r2 = nn();
-    if (s2) It(s2, n2, 11, [
+    if (s2) Mt(s2, n2, 11, [
       t2 + e2.map((o2) => {
         var c2, i2;
         return (i2 = (c2 = o2.toString) == null ? void 0 : c2.call(o2)) != null ? i2 : JSON.stringify(o2);
@@ -13900,7 +13988,7 @@ Stack : ${c2.stack || "unkown"}`);
       r2.length && o2.push(`
 `, ...rn(r2));
     }
-    gt = false;
+    bt = false;
   }
   function nn() {
     let t2 = k$1[k$1.length - 1];
@@ -13991,7 +14079,7 @@ Stack : ${c2.stack || "unkown"}`);
     15: "component update",
     16: "app unmount cleanup function"
   };
-  function It(t2, e2, n2, s2) {
+  function Mt(t2, e2, n2, s2) {
     try {
       return s2 ? t2(...s2) : t2();
     } catch (r2) {
@@ -13999,7 +14087,7 @@ Stack : ${c2.stack || "unkown"}`);
     }
   }
   function oe(t2, e2, n2, s2 = true) {
-    const r2 = e2 ? e2.vnode : null, { errorHandler: o2, throwUnhandledErrorInProduction: c2 } = e2 && e2.appContext.config || yt;
+    const r2 = e2 ? e2.vnode : null, { errorHandler: o2, throwUnhandledErrorInProduction: c2 } = e2 && e2.appContext.config || Et;
     if (e2) {
       let i2 = e2.parent;
       const a2 = e2.proxy, d2 = process.env.NODE_ENV !== "production" ? re[n2] : `https://vuejs.org/error-reference/#runtime-${n2}`;
@@ -14011,7 +14099,7 @@ Stack : ${c2.stack || "unkown"}`);
         i2 = i2.parent;
       }
       if (o2) {
-        It(o2, null, 10, [
+        Mt(o2, null, 10, [
           t2,
           a2,
           d2
@@ -14032,7 +14120,7 @@ Stack : ${c2.stack || "unkown"}`);
   const L = [];
   let V$1 = null, K$1 = 0;
   const un = Promise.resolve();
-  let Ot = null;
+  let Tt = null;
   const an = 100;
   function ln(t2) {
     let e2 = D + 1, n2 = O$1.length;
@@ -14049,7 +14137,7 @@ Stack : ${c2.stack || "unkown"}`);
     }
   }
   function se() {
-    Ot || (Ot = un.then(ie));
+    Tt || (Tt = un.then(ie));
   }
   function dn(t2) {
     y$1(t2) ? L.push(...t2) : V$1 && t2.id === -1 ? V$1.splice(K$1 + 1, 0, t2) : t2.flags & 1 || (L.push(t2), t2.flags |= 1), se();
@@ -14079,7 +14167,7 @@ Stack : ${c2.stack || "unkown"}`);
         const n2 = O$1[D];
         if (n2 && !(n2.flags & 8)) {
           if (process.env.NODE_ENV !== "production" && e2(n2)) continue;
-          n2.flags & 4 && (n2.flags &= -2), It(n2, n2.i, n2.i ? 15 : 14), n2.flags & 4 || (n2.flags &= -2);
+          n2.flags & 4 && (n2.flags &= -2), Mt(n2, n2.i, n2.i ? 15 : 14), n2.flags & 4 || (n2.flags &= -2);
         }
       }
     } finally {
@@ -14087,7 +14175,7 @@ Stack : ${c2.stack || "unkown"}`);
         const n2 = O$1[D];
         n2 && (n2.flags &= -2);
       }
-      D = -1, O$1.length = 0, _n(t2), Ot = null, (O$1.length || L.length) && ie(t2);
+      D = -1, O$1.length = 0, _n(t2), Tt = null, (O$1.length || L.length) && ie(t2);
     }
   }
   function ce(t2, e2) {
@@ -14098,11 +14186,11 @@ Stack : ${c2.stack || "unkown"}`);
     }
     return t2.set(e2, n2 + 1), false;
   }
-  const bt = /* @__PURE__ */ new Map();
+  const mt = /* @__PURE__ */ new Map();
   process.env.NODE_ENV !== "production" && (dt().__VUE_HMR_RUNTIME__ = {
-    createRecord: mt(pn),
-    rerender: mt(hn),
-    reload: mt(gn)
+    createRecord: yt(pn),
+    rerender: yt(hn),
+    reload: yt(gn)
   });
   const ut = /* @__PURE__ */ new Map();
   function pn(t2, e2) {
@@ -14131,20 +14219,20 @@ Stack : ${c2.stack || "unkown"}`);
     ];
     for (let r2 = 0; r2 < s2.length; r2++) {
       const o2 = s2[r2], c2 = at(o2.type);
-      let i2 = bt.get(c2);
-      i2 || (c2 !== n2.initialDef && Ht(c2, e2), bt.set(c2, i2 = /* @__PURE__ */ new Set())), i2.add(o2), o2.appContext.propsCache.delete(o2.type), o2.appContext.emitsCache.delete(o2.type), o2.appContext.optionsCache.delete(o2.type), o2.ceReload ? (i2.add(o2), o2.ceReload(e2.styles), i2.delete(o2)) : o2.parent ? fn(() => {
+      let i2 = mt.get(c2);
+      i2 || (c2 !== n2.initialDef && Ht(c2, e2), mt.set(c2, i2 = /* @__PURE__ */ new Set())), i2.add(o2), o2.appContext.propsCache.delete(o2.type), o2.appContext.emitsCache.delete(o2.type), o2.appContext.optionsCache.delete(o2.type), o2.ceReload ? (i2.add(o2), o2.ceReload(e2.styles), i2.delete(o2)) : o2.parent ? fn(() => {
         o2.parent.update(), i2.delete(o2);
       }) : o2.appContext.reload ? o2.appContext.reload() : typeof window < "u" && window.location.reload(), o2.root.ce && o2 !== o2.root && o2.root.ce._removeChildStyle(c2);
     }
     dn(() => {
-      bt.clear();
+      mt.clear();
     });
   }
   function Ht(t2, e2) {
     B(t2, e2);
     for (const n2 in t2) n2 !== "__file" && !(n2 in e2) && delete t2[n2];
   }
-  function mt(t2) {
+  function yt(t2) {
     return (e2, n2) => {
       try {
         return t2(e2, n2);
@@ -14201,18 +14289,18 @@ Stack : ${c2.stack || "unkown"}`);
       appContext: null,
       ctx: lt
     };
-    return i2 ? (Mt(a2, n2), o2 & 128 && t2.normalize(a2)) : n2 && (a2.shapeFlag |= x$1(n2) ? 8 : 16), process.env.NODE_ENV !== "production" && a2.key !== a2.key && W$1("VNode created with invalid key (NaN). VNode type:", a2.type), a2;
+    return i2 ? (Pt(a2, n2), o2 & 128 && t2.normalize(a2)) : n2 && (a2.shapeFlag |= x$1(n2) ? 8 : 16), process.env.NODE_ENV !== "production" && a2.key !== a2.key && W$1("VNode created with invalid key (NaN). VNode type:", a2.type), a2;
   }
   const Fn = process.env.NODE_ENV !== "production" ? Tn : _e;
   function _e(t2, e2 = null, n2 = null, s2 = 0, r2 = null, o2 = false) {
     if ((!t2 || t2 === yn) && (process.env.NODE_ENV !== "production" && !t2 && W$1(`Invalid vnode type when creating vnode: ${t2}.`), t2 = Sn), On(t2)) {
       const i2 = ft(t2, e2, true);
-      return n2 && Mt(i2, n2), i2.patchFlag = -2, i2;
+      return n2 && Pt(i2, n2), i2.patchFlag = -2, i2;
     }
     if (be(t2) && (t2 = t2.__vccOpts), e2) {
       e2 = Cn(e2);
       let { class: i2, style: a2 } = e2;
-      i2 && !x$1(i2) && (e2.class = Ft(i2)), R$1(a2) && (ct(a2) && !y$1(a2) && (a2 = B({}, a2)), e2.style = Rt(a2));
+      i2 && !x$1(i2) && (e2.class = Ct(i2)), R$1(a2) && (ct(a2) && !y$1(a2) && (a2 = B({}, a2)), e2.style = Ft(a2));
     }
     const c2 = x$1(t2) ? 1 : Nn(t2) ? 128 : mn(t2) ? 64 : R$1(t2) ? 4 : $$1(t2) ? 2 : 0;
     return process.env.NODE_ENV !== "production" && c2 & 4 && ct(t2) && (t2 = h(t2), W$1("Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.", `
@@ -14264,14 +14352,14 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
   function Dn(t2 = " ", e2 = 0) {
     return Fn(vn, null, t2, e2);
   }
-  function Mt(t2, e2) {
+  function Pt(t2, e2) {
     let n2 = 0;
     const { shapeFlag: s2 } = t2;
     if (e2 == null) e2 = null;
     else if (y$1(e2)) n2 = 16;
     else if (typeof e2 == "object") if (s2 & 65) {
       const r2 = e2.default;
-      r2 && (r2._c && (r2._d = false), Mt(t2, r2()), r2._c && (r2._d = true));
+      r2 && (r2._c && (r2._d = false), Pt(t2, r2()), r2._c && (r2._d = true));
       return;
     } else n2 = 32, !e2._ && !le(e2) && (e2._ctx = lt);
     else $$1(e2) ? (e2 = {
@@ -14286,11 +14374,11 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
     const e2 = {};
     for (let n2 = 0; n2 < t2.length; n2++) {
       const s2 = t2[n2];
-      for (const r2 in s2) if (r2 === "class") e2.class !== s2.class && (e2.class = Ft([
+      for (const r2 in s2) if (r2 === "class") e2.class !== s2.class && (e2.class = Ct([
         e2.class,
         s2.class
       ]));
-      else if (r2 === "style") e2.style = Rt([
+      else if (r2 === "style") e2.style = Ft([
         e2.style,
         s2.style
       ]);
@@ -14397,7 +14485,7 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
     };
     function o2(u2) {
       const f2 = [];
-      u2.type.props && u2.props && f2.push(c2("props", h(u2.props))), u2.setupState !== yt && f2.push(c2("setup", u2.setupState)), u2.data !== yt && f2.push(c2("data", h(u2.data)));
+      u2.type.props && u2.props && f2.push(c2("props", h(u2.props))), u2.setupState !== Et && f2.push(c2("setup", u2.setupState)), u2.data !== Et && f2.push(c2("data", h(u2.data)));
       const _2 = a2(u2, "computed");
       _2 && f2.push(c2("computed", _2));
       const g2 = a2(u2, "inject");
@@ -14503,13 +14591,12 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
   }
   process.env.NODE_ENV !== "production" && Mn();
   function preprocessSvg(diagramAgg, domStr) {
-    var _a;
     const parser = new DOMParser();
     if (/^\s+$/.test(domStr)) {
       return document.createElement("svg");
     }
     const svgDoc = parser.parseFromString(domStr, "image/svg+xml");
-    const context = (_a = diagramAgg.states.design.value) == null ? void 0 : _a._getContext();
+    const context = diagramAgg.commands.filterContext();
     for (const node of Object.values(context.getIdMap())) {
       if (!isNodeLike(node)) {
         continue;
@@ -14549,6 +14636,9 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
         const info = node.inner[key];
         const infoId = info._attributes.__id;
         const infoDoc = nodeDoc.querySelector(`[data-compartment="${index}"]`);
+        if (!infoDoc) {
+          continue;
+        }
         infoDoc.dataset.id = infoId;
         {
           const text = infoDoc.querySelector("text");
@@ -14671,7 +14761,7 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
         for (let i2 = 0; i2 < nodes.length; i2++) {
           const el = document.querySelector(`[data-name="${nodes[i2]}"]`);
           setTimeout(() => {
-            if (animationTask !== currentAnimationTask) return;
+            if (animationTask !== currentAnimationTask || !el) return;
             el.style.transition = `opacity 0s`;
             el.style.opacity = "0.0";
             setTimeout(() => {
@@ -14690,13 +14780,12 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
         const idMap = diagramAgg.commands.getIdMap();
         let items = data.workflow === void 0 ? [] : diagramAgg.states.workflows.value[data.workflow];
         items = items.filter((i2) => {
-          let b2 = true;
           if (!data.displayReadModel && idMap[i2]._attributes.rule === "ReadModel") {
-            b2 = false;
+            return false;
           } else if (!data.displaySystem && idMap[i2]._attributes.rule === "System") {
-            b2 = false;
+            return false;
           }
-          return b2;
+          return true;
         });
         if (!data.displayReadModel || !data.displaySystem) {
           items = removeAdjacentDuplicates(items);
@@ -14769,7 +14858,7 @@ Component that was made reactive: `, t2)), Rn(t2, e2, n2, s2, r2, c2, o2, true);
   const Nomnoml = _export_sfc(_sfc_main$2, [
     [
       "__scopeId",
-      "data-v-83e775ca"
+      "data-v-ddc71b2c"
     ]
   ]);
   function throttle(func, wait) {
@@ -25939,15 +26028,15 @@ input.p-select-label {
           }
         }
       ]);
-      watch([
-        currentStory,
-        currentWorkflow
-      ], ([story, workflow]) => {
-        if (workflow === void 0) {
-          diagramAgg.commands.focusFlow(void 0);
-          return;
+      watch(currentStory, (story) => {
+        var _a;
+        if (story !== EMPTY_STORY) {
+          currentWorkflow.value = (_a = diagramAgg.states.design.value) == null ? void 0 : _a._getContext().getUserStories()[story][0];
         }
-        diagramAgg.commands.focusFlow(workflow, story);
+        diagramAgg.commands.focusFlow(currentWorkflow.value, story);
+      });
+      watch(currentWorkflow, (workflow) => {
+        diagramAgg.commands.focusFlow(workflow, currentStory.value);
       });
       function handleNoFocus() {
         currentStory.value = EMPTY_STORY;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@ddd-tool/domain-designer-ui-component",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.6",
   "private": false,
   "type": "module",
   "dependencies": {
-    "@ddd-tool/domain-designer-core": "0.1.0-beta.5",
+    "@ddd-tool/domain-designer-core": "0.1.0-beta.7",
     "@primeuix/themes": "^1.0.0",
     "nomnoml": "^1.7.0",
     "primeicons": "^7.0.0",