@likec4/diagram 1.19.2 → 1.20.1

package/src/likec4diagram/state/hotkeyActor.ts

@@ -0,0 +1,20 @@
+import { getHotkeyHandler } from '@mantine/hooks'
+import { type AnyEventObject, type NonReducibleUnknown, fromCallback } from 'xstate'
+
+export type HotKeyEvent = { type: 'key.esc' | `key.arrow.${'left' | 'right'}` }
+// TODO: naming convention for actors
+export const hotkeyActor = fromCallback<AnyEventObject, NonReducibleUnknown, HotKeyEvent>(({ sendBack }: {
+  sendBack: (event: HotKeyEvent) => void
+}) => {
+  const handler = getHotkeyHandler([
+    ['Escape', () => sendBack({ type: 'key.esc' }), {
+      preventDefault: true,
+    }],
+    ['ArrowLeft', () => sendBack({ type: 'key.arrow.left' })],
+    ['ArrowRight', () => sendBack({ type: 'key.arrow.right' })],
+  ])
+  document.body.addEventListener('keydown', handler, { capture: true })
+  return () => {
+    document.body.removeEventListener('keydown', handler, { capture: true })
+  }
+})

package/src/likec4diagram/state/inspector.ts

@@ -0,0 +1,23 @@
+import { createBrowserInspector } from '@statelyai/inspect'
+import { useRef } from 'react'
+import type { InspectionEvent, Observer } from 'xstate'
+
+const useInspector: () => { inspect?: Observer<InspectionEvent> } =
+  // @ts-ignore
+  process.env.NODE_ENV === 'production'
+    ? () => ({})
+    : () => {
+      const inspectorRef = useRef<ReturnType<typeof createBrowserInspector>>(null)
+      if (!inspectorRef.current) {
+        inspectorRef.current = createBrowserInspector({
+          filter: (event) => {
+            return event.type !== '@xstate.event' || !event.event.type.startsWith('xyflow.apply')
+          },
+        })
+      }
+      return {
+        inspect: inspectorRef.current.inspect,
+      }
+    }
+
+export { useInspector }