@likec4/diagram 1.44.0 → 1.46.0

package/dist/editor/editorActor.js

@@ -0,0 +1,324 @@
+import { find } from 'remeda';
+import { setup, assign, fromPromise, enqueueActions, sendTo, log } from 'xstate';
+import { cancelSync, stopHotkey, undo, markHistoryAsSynched, reschedule, isLayoutChange, withoutSnapshotChanges, addSnapshotToPendingChanges, ensureHotKey, pushHistory, saveStateBeforeEdit, stopEditing, startEditing } from './editorActor.actions.js';
+import { hotkeyActorLogic } from './hotkeyActor.js';
+
+const applyLatest = fromPromise(
+  () => {
+    throw new Error("Not implemented");
+  }
+);
+const executeChange = fromPromise(
+  () => {
+    throw new Error("Not implemented");
+  }
+);
+const diagramActorRef = function(params) {
+  return params.system.get("diagram");
+};
+const machine = setup({
+  types: {
+    context: {},
+    events: {},
+    emitted: {},
+    input: {},
+    children: {},
+    tags: {}
+  },
+  delays: {
+    "350ms": 350,
+    "waitBeforeSync": 2e3
+  },
+  actors: {
+    applyLatest,
+    executeChange,
+    hotkey: hotkeyActorLogic
+  },
+  guards: {
+    "has pending": ({ context }) => context.pendingChanges.length > 0,
+    "can undo": ({ context }) => context.history.length > 0
+  }
+});
+const to = {
+  idle: { target: "#idle" },
+  editing: { target: "#editing" },
+  afterEdit: { target: "#afterEdit" },
+  pending: { target: "#pending" },
+  applyLatestToManual: { target: "#applyLatestToManual" },
+  executeChanges: { target: "#executeChanges" }
+};
+const idle = machine.createStateConfig({
+  id: "idle",
+  on: {
+    "sync": {
+      ...to.pending
+    },
+    "edit.start": {
+      ...to.editing
+    }
+  }
+});
+const editing = machine.createStateConfig({
+  id: "editing",
+  tags: "pending",
+  entry: [
+    startEditing(),
+    cancelSync()
+  ],
+  on: {
+    change: {
+      actions: stopEditing(),
+      ...to.executeChanges
+    },
+    "edit.finish": {
+      actions: stopEditing(),
+      ...to.afterEdit
+    },
+    "undo": {
+      actions: stopEditing(),
+      ...to.idle
+    }
+  }
+});
+const pending = machine.createStateConfig({
+  id: "pending",
+  tags: ["pending"],
+  entry: ensureHotKey(),
+  on: {
+    "sync": {
+      reenter: true,
+      ...to.pending
+    },
+    "edit.start": {
+      // this allows to return back from editing in afterEdit state
+      actions: [
+        addSnapshotToPendingChanges()
+      ],
+      ...to.editing
+    }
+  },
+  after: {
+    "waitBeforeSync": {
+      actions: [
+        addSnapshotToPendingChanges()
+      ],
+      ...to.executeChanges
+    }
+  }
+});
+const afterEdit = machine.createStateConfig({
+  id: "afterEdit",
+  always: [
+    { guard: "has pending", ...to.pending },
+    { ...to.idle }
+  ]
+});
+const applyLatestToManual = machine.createStateConfig({
+  id: "applyLatestToManual",
+  entry: [
+    cancelSync(),
+    saveStateBeforeEdit()
+  ],
+  initial: "call",
+  on: {
+    // catch all events
+    "*": {
+      actions: [
+        log(({ event }) => `applyLatestToManual received unexpected event: ${event.type}`),
+        reschedule(350)
+      ]
+    }
+  },
+  states: {
+    // Fetch latest and manual layouts
+    // Apply changes, send update to diagram
+    call: {
+      invoke: {
+        src: "applyLatest",
+        input: ({ context }) => {
+          const current = context.beforeEditing?.change.layout;
+          return {
+            current: current && current._layout === "manual" ? current : void 0,
+            viewId: context.viewId
+          };
+        },
+        onDone: {
+          actions: sendTo(
+            diagramActorRef,
+            ({ event }) => ({
+              type: "update.view",
+              view: event.output.updated
+            }),
+            { delay: 10 }
+          ),
+          target: "wait"
+        },
+        onError: {
+          actions: [
+            assign({
+              beforeEditing: null,
+              pendingChanges: []
+            }),
+            ({ event }) => {
+              console.error(event.error);
+            }
+          ],
+          ...to.idle
+        }
+      }
+    },
+    // Now we wait 350ms, take new snapshot and send save-view-snapshot
+    wait: {
+      entry: pushHistory(),
+      after: {
+        "350ms": {
+          actions: [
+            addSnapshotToPendingChanges(),
+            ensureHotKey()
+          ],
+          ...to.executeChanges
+        }
+      }
+    }
+  }
+});
+const executeChanges = machine.createStateConfig({
+  id: "executeChanges",
+  entry: [
+    assign(({ event, context }) => {
+      if (event.type === "change") {
+        if (isLayoutChange(event.change)) {
+          return {
+            pendingChanges: [
+              ...withoutSnapshotChanges(context.pendingChanges),
+              event.change
+            ]
+          };
+        }
+        if (!context.pendingChanges.includes(event.change)) {
+          return {
+            pendingChanges: [
+              ...context.pendingChanges,
+              event.change
+            ]
+          };
+        }
+      }
+      return {};
+    }),
+    cancelSync()
+  ],
+  invoke: {
+    src: "executeChange",
+    input: ({ context }) => ({
+      changes: context.pendingChanges,
+      viewId: context.viewId
+    }),
+    onDone: {
+      actions: enqueueActions(({ context, enqueue }) => {
+        const snapshot = find(context.pendingChanges, (c) => c.op === "save-view-snapshot");
+        if (snapshot) {
+          enqueue.sendTo(
+            diagramActorRef,
+            {
+              type: "update.view-bounds",
+              bounds: snapshot.layout.bounds
+            }
+          );
+        }
+        enqueue.assign({
+          pendingChanges: []
+        });
+      }),
+      ...to.idle
+    },
+    onError: {
+      actions: ({ event }) => {
+        console.error(event.error);
+      },
+      ...to.afterEdit
+    }
+  },
+  on: {
+    "*": {
+      actions: reschedule()
+    }
+  }
+});
+const _editorActorLogic = machine.createMachine({
+  id: "editor",
+  context: ({ input }) => ({
+    viewId: input.viewId,
+    beforeEditing: null,
+    editing: null,
+    pendingChanges: [],
+    history: []
+  }),
+  initial: "idle",
+  // TODO: listen to diagram actor, if switches to "sequence" dynamic view, cancel editing
+  // entry: ({ self, system }) => {
+  //   // let previous = ''
+  //   // const a = (self._parent as DiagramMachineRef).subscribe({
+  //   //   next({ context }) {
+  //   //     const current = context.view._type === 'dynamic' ? context.dynamicViewVariant
+  //   //   },
+  //   // })
+  //   const s = self.subscribe({
+  //     complete: () => {
+  //       console.log('editor actor completed')
+  //       s.unsubscribe()
+  //     },
+  //   })
+  // },
+  states: {
+    idle,
+    editing,
+    pending,
+    afterEdit,
+    applyLatestToManual,
+    executeChanges
+  },
+  on: {
+    cancel: {
+      actions: [
+        cancelSync(),
+        assign({
+          editing: null,
+          beforeEditing: null,
+          pendingChanges: []
+        })
+      ],
+      ...to.idle
+    },
+    synced: {
+      actions: markHistoryAsSynched()
+    },
+    undo: {
+      guard: "can undo",
+      actions: undo(),
+      ...to.idle
+    },
+    change: {
+      ...to.executeChanges
+    },
+    "applyLatestToManual": {
+      ...to.applyLatestToManual
+    },
+    reset: {
+      actions: [
+        cancelSync(),
+        assign({
+          history: [],
+          editing: null,
+          beforeEditing: null,
+          pendingChanges: []
+        }),
+        stopHotkey()
+      ],
+      ...to.idle
+    }
+  }
+});
+const editorActorLogic = _editorActorLogic;
+
+export { editorActorLogic, machine };

package/dist/editor/hotkeyActor.d.ts

@@ -0,0 +1,7 @@
+import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from 'xstate';
+export type HotKeyEvent = {
+    type: 'undo';
+};
+export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
+}
+export declare const hotkeyActorLogic: HotkeyActorLogic;

package/dist/editor/hotkeyActor.js

@@ -0,0 +1,19 @@
+import { getHotkeyHandler } from '@mantine/hooks';
+import { fromCallback } from 'xstate';
+
+const hotkeyActorLogic = fromCallback(({ sendBack }) => {
+  const ctrlZHandler = getHotkeyHandler([
+    ["mod + z", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "undo" });
+    }, {
+      preventDefault: true
+    }]
+  ]);
+  document.body.addEventListener("keydown", ctrlZHandler, { capture: true });
+  return () => {
+    document.body.removeEventListener("keydown", ctrlZHandler, { capture: true });
+  };
+});
+
+export { hotkeyActorLogic };

package/dist/editor/index.d.ts

@@ -1,2 +1,3 @@
-export { EnsureEditorContext, LikeC4EditorContext, useLikeC4Editor, useOptionalLikeC4Editor, } from './LikeC4EditorContext';
-export type { LikeC4EditorContextType } from './LikeC4EditorContext';
+export { EnsureEditorContext, LikeC4EditorProvider, useOptionalLikeC4EditorPort, } from './LikeC4EditorProvider';
+export type { LikeC4EditorPort } from './LikeC4EditorProvider';
+export type * from './editorActor';