Test Content
' - const mockFormat = 'html' as const - const mockSourceFile = '/path/to/test.calm' - - docifyViewModel.setDocifyResult(mockContent, mockFormat, mockSourceFile) - - expect(docifyViewModel.getDocifyFormat()).toBe(mockFormat) - expect(docifyViewModel.hasContent()).toBe(true) - }) - - it('should emit result event when setting docify result', () => { - const resultSpy = vi.fn() - docifyViewModel.onDocifyResult(resultSpy) - - const mockContent = '# Test' - const mockFormat = 'markdown' as const - const mockSourceFile = '/path/to/test.calm' - - docifyViewModel.setDocifyResult(mockContent, mockFormat, mockSourceFile) - - expect(resultSpy).toHaveBeenCalledWith({ - content: mockContent, - format: mockFormat, - sourceFile: mockSourceFile - }) - }) - - it('should clear content and reset state', () => { - // Set some content first - docifyViewModel.setDocifyResult('# Test', 'markdown', '/test.calm') - expect(docifyViewModel.hasContent()).toBe(true) - - const resultSpy = vi.fn() - docifyViewModel.onDocifyResult(resultSpy) - - docifyViewModel.clear() - - expect(docifyViewModel.getDocifyContent()).toBe('') - expect(docifyViewModel.getDocifyFormat()).toBe('markdown') - expect(docifyViewModel.getSourceFile()).toBe('') - expect(docifyViewModel.hasContent()).toBe(false) - expect(docifyViewModel.getIsRunning()).toBe(false) - expect(resultSpy).toHaveBeenCalledWith({ - content: '', - format: 'markdown', - sourceFile: '' - }) - }) - }) - - describe('error handling', () => { - it('should set and get docify error', () => { - const mockError = 'Test error message' - - docifyViewModel.setDocifyError(mockError) - - expect(docifyViewModel.getLastError()).toBe(mockError) - expect(docifyViewModel.hasError()).toBe(true) - expect(docifyViewModel.getIsRunning()).toBe(false) - }) - - it('should emit error event when setting docify error', () => { - const errorSpy = vi.fn() - docifyViewModel.onDocifyError(errorSpy) - - const mockError = 'Test error message' - docifyViewModel.setDocifyError(mockError) - - expect(errorSpy).toHaveBeenCalledWith(mockError) - }) - - it('should clear error when setting successful result', () => { - // Set error first - docifyViewModel.setDocifyError('Test error') - expect(docifyViewModel.hasError()).toBe(true) - - // Set successful result - docifyViewModel.setDocifyResult('Success!', 'markdown', '/test.calm') - - expect(docifyViewModel.getLastError()).toBeUndefined() - expect(docifyViewModel.hasError()).toBe(false) - }) - }) - - describe('running state management', () => { - it('should set and get running state', () => { - expect(docifyViewModel.getIsRunning()).toBe(false) - - docifyViewModel.setRunning(true) - expect(docifyViewModel.getIsRunning()).toBe(true) - - docifyViewModel.setRunning(false) - expect(docifyViewModel.getIsRunning()).toBe(false) - }) - - it('should emit status changed event when running state changes', () => { - const statusSpy = vi.fn() - docifyViewModel.onDocifyStatusChanged(statusSpy) - - docifyViewModel.setRunning(true) - - expect(statusSpy).toHaveBeenCalledWith({ - isRunning: true, - isLiveMode: false - }) - }) - - it('should not emit status changed event when running state is the same', () => { - docifyViewModel.setRunning(false) // Already false - - const statusSpy = vi.fn() - docifyViewModel.onDocifyStatusChanged(statusSpy) - - docifyViewModel.setRunning(false) // Same value - - expect(statusSpy).not.toHaveBeenCalled() - }) - }) - - describe('live mode', () => { - it('should set and get live mode state', () => { - expect(docifyViewModel.getIsLiveMode()).toBe(false) - - docifyViewModel.setLiveMode(true) - expect(docifyViewModel.getIsLiveMode()).toBe(true) - - docifyViewModel.setLiveMode(false) - expect(docifyViewModel.getIsLiveMode()).toBe(false) - }) - - it('should toggle live mode', () => { - expect(docifyViewModel.getIsLiveMode()).toBe(false) - - docifyViewModel.toggleLiveMode() - expect(docifyViewModel.getIsLiveMode()).toBe(true) - - docifyViewModel.toggleLiveMode() - expect(docifyViewModel.getIsLiveMode()).toBe(false) - }) - - it('should emit live mode changed event', () => { - const liveModeSpy = vi.fn() - docifyViewModel.onLiveModeChanged(liveModeSpy) - - docifyViewModel.setLiveMode(true) - - expect(liveModeSpy).toHaveBeenCalledWith(true) - }) - - it('should emit status changed event when live mode changes', () => { - const statusSpy = vi.fn() - docifyViewModel.onDocifyStatusChanged(statusSpy) - - docifyViewModel.setLiveMode(true) - - expect(statusSpy).toHaveBeenCalledWith({ - isRunning: false, - isLiveMode: true - }) - }) - - it('should not emit events when live mode is the same', () => { - docifyViewModel.setLiveMode(false) // Already false - - const liveModeSpy = vi.fn() - const statusSpy = vi.fn() - docifyViewModel.onLiveModeChanged(liveModeSpy) - docifyViewModel.onDocifyStatusChanged(statusSpy) - - docifyViewModel.setLiveMode(false) // Same value - - expect(liveModeSpy).not.toHaveBeenCalled() - expect(statusSpy).not.toHaveBeenCalled() - }) - }) - - describe('auto-refresh in live mode', () => { - it('should start auto-refresh when live mode is enabled', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - docifyViewModel.setLiveMode(true) - - // Fast-forward timer by 2 seconds + debounce delay (300ms) - vi.advanceTimersByTime(2300) - - expect(requestSpy).toHaveBeenCalledOnce() - }) - - it('should continue auto-refresh every 2 seconds in live mode', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - docifyViewModel.setLiveMode(true) - - // First interval (2s) + debounce (300ms) - vi.advanceTimersByTime(2300) - expect(requestSpy).toHaveBeenCalledTimes(1) - - // Simulate completing the first request - docifyViewModel.setRunning(false) - - // Second interval (2s) + debounce (300ms) - vi.advanceTimersByTime(2300) - expect(requestSpy).toHaveBeenCalledTimes(2) - - // Simulate completing the second request - docifyViewModel.setRunning(false) - - // Third interval (2s) + debounce (300ms) - vi.advanceTimersByTime(2300) - expect(requestSpy).toHaveBeenCalledTimes(3) - }) - - it('should stop auto-refresh when live mode is disabled', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - // Enable live mode - docifyViewModel.setLiveMode(true) - vi.advanceTimersByTime(2300) // 2s auto-refresh + 300ms debounce - expect(requestSpy).toHaveBeenCalledOnce() - - // Disable live mode - docifyViewModel.setLiveMode(false) - requestSpy.mockClear() - - // Fast-forward more time - vi.advanceTimersByTime(4600) // 2 intervals worth of time - - expect(requestSpy).not.toHaveBeenCalled() - }) - - it('should not auto-refresh when docify is already running', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - docifyViewModel.setLiveMode(true) - docifyViewModel.setRunning(true) // Set running state - - // Fast-forward timer (2s auto-refresh + 300ms debounce) - vi.advanceTimersByTime(2300) - - expect(requestSpy).not.toHaveBeenCalled() - }) - }) - - describe('docify request handling', () => { - it('should request docify execution when not running (after debounce)', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - docifyViewModel.requestDocify() - - // Advance past debounce delay (300ms) - vi.advanceTimersByTime(300) - - expect(requestSpy).toHaveBeenCalledOnce() - expect(docifyViewModel.getIsRunning()).toBe(true) - }) - - it('should not request docify execution when already running', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - docifyViewModel.setRunning(true) - docifyViewModel.requestDocify() - - // Advance past debounce delay - vi.advanceTimersByTime(300) - - expect(requestSpy).not.toHaveBeenCalled() - }) - - it('should coalesce multiple rapid requests into one', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - // Rapidly call requestDocify multiple times - docifyViewModel.requestDocify() - vi.advanceTimersByTime(100) - docifyViewModel.requestDocify() - vi.advanceTimersByTime(100) - docifyViewModel.requestDocify() - - // Advance past debounce delay from last call - vi.advanceTimersByTime(300) - - // Should only fire once despite multiple calls - expect(requestSpy).toHaveBeenCalledOnce() - }) - - it('should execute immediately when using requestDocifyImmediate', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - docifyViewModel.requestDocifyImmediate() - - // Should fire immediately without waiting for debounce - expect(requestSpy).toHaveBeenCalledOnce() - expect(docifyViewModel.getIsRunning()).toBe(true) - }) - }) - - describe('state management', () => { - it('should get complete state for debugging', () => { - docifyViewModel.setDocifyResult('# Test', 'html', '/test.calm') - docifyViewModel.setLiveMode(true) - - const state = docifyViewModel.getState() - - expect(state).toEqual({ - hasContent: true, - hasError: false, - isRunning: false, - isLiveMode: true, - format: 'html', - contentLength: 6, - lastError: undefined - }) - }) - - it('should reset all state', () => { - // Set some state - docifyViewModel.setDocifyResult('# Test', 'html', '/test.calm') - docifyViewModel.setLiveMode(true) - docifyViewModel.setDocifyError('Some error') - - const resultSpy = vi.fn() - docifyViewModel.onDocifyResult(resultSpy) - - docifyViewModel.reset() - - expect(docifyViewModel.getDocifyContent()).toBe('') - expect(docifyViewModel.getDocifyFormat()).toBe('markdown') - expect(docifyViewModel.getSourceFile()).toBe('') - expect(docifyViewModel.getIsLiveMode()).toBe(false) - expect(docifyViewModel.getIsRunning()).toBe(false) - expect(docifyViewModel.getLastError()).toBeUndefined() - expect(resultSpy).toHaveBeenCalledWith({ - content: '', - format: 'markdown', - sourceFile: '' - }) - }) - }) - - describe('disposal', () => { - it('should dispose without errors', () => { - expect(() => docifyViewModel.dispose()).not.toThrow() - }) - - it('should stop auto-refresh timer on disposal', () => { - const requestSpy = vi.fn() - docifyViewModel.onDocifyRequest(requestSpy) - - // Enable live mode to start timer - docifyViewModel.setLiveMode(true) - - // Dispose the view model - docifyViewModel.dispose() - - // Fast-forward time - vi.advanceTimersByTime(4000) - - // Timer should be stopped - expect(requestSpy).not.toHaveBeenCalled() - }) - - it('should dispose all emitters', () => { - // This test ensures dispose doesn't throw and cleans up properly - const requestSpy = vi.fn() - const resultSpy = vi.fn() - const errorSpy = vi.fn() - const statusSpy = vi.fn() - const liveModeSpy = vi.fn() - - docifyViewModel.onDocifyRequest(requestSpy) - docifyViewModel.onDocifyResult(resultSpy) - docifyViewModel.onDocifyError(errorSpy) - docifyViewModel.onDocifyStatusChanged(statusSpy) - docifyViewModel.onLiveModeChanged(liveModeSpy) - - expect(() => docifyViewModel.dispose()).not.toThrow() - - // After disposal, events should not be fired - docifyViewModel.setDocifyResult('test', 'markdown', 'file') - docifyViewModel.setDocifyError('error') - docifyViewModel.setRunning(true) - docifyViewModel.setLiveMode(true) - docifyViewModel.requestDocify() - - // Events should not be called after disposal (emitters disposed) - expect(requestSpy).not.toHaveBeenCalled() - }) - }) -}) \ No newline at end of file diff --git a/calm-plugins/vscode/src/features/preview/docify-tab/view-model/docify.view-model.ts b/calm-plugins/vscode/src/features/preview/docify-tab/view-model/docify.view-model.ts deleted file mode 100644 index 10df1c420..000000000 --- a/calm-plugins/vscode/src/features/preview/docify-tab/view-model/docify.view-model.ts +++ /dev/null @@ -1,246 +0,0 @@ -import { debounce } from 'lodash' -import { Emitter } from '../../../../core/emitter' - -/** Debounce delay for docify requests to prevent excessive processing */ -const DOCIFY_DEBOUNCE_MS = 300 - -/** - * DocifyViewModel - Framework-free ViewModel for docify tab - * Manages docify execution, results, and live mode - */ -export class DocifyViewModel { - private docifyRequestEmitter = new EmitterError: ${this.escapeHtml(error)}
`
- }
-
- /**
- * Update the view when external selection changes
- */
- public updateSelection(_selectedId?: string): void {
- // Just update the internal state, don't auto-trigger docify
- // The TabsViewModel will handle triggering docify when appropriate
- }
-
- /**
- * Escape HTML to prevent XSS
- */
- private escapeHtml(str: string): string {
- return str
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''')
- }
-
- /**
- * Cleanup event listeners
- */
- public dispose(): void {
- this.cleanupDiagramControls();
- (this.container as any).innerHTML = ''
- }
-}
\ No newline at end of file
diff --git a/calm-plugins/vscode/src/features/preview/model-tab/view-model/calm-model.view-model.spec.ts b/calm-plugins/vscode/src/features/preview/model-tab/view-model/calm-model.view-model.spec.ts
deleted file mode 100644
index 0f2c3e513..000000000
--- a/calm-plugins/vscode/src/features/preview/model-tab/view-model/calm-model.view-model.spec.ts
+++ /dev/null
@@ -1,331 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { CalmModelViewModel } from './calm-model.view-model'
-
-describe('CalmModelViewModel', () => {
- let calmModelViewModel: CalmModelViewModel
-
- beforeEach(() => {
- calmModelViewModel = new CalmModelViewModel()
- })
-
- afterEach(() => {
- calmModelViewModel.dispose()
- })
-
- describe('initialization', () => {
- it('should create calm model view model with default state', () => {
- expect(calmModelViewModel).toBeDefined()
- expect(calmModelViewModel instanceof CalmModelViewModel).toBe(true)
- expect(calmModelViewModel.getModelData()).toBeNull()
- expect(calmModelViewModel.getSelectedId()).toBeUndefined()
- expect(calmModelViewModel.hasData()).toBe(false)
- })
-
- it('should have proper initial state', () => {
- const state = calmModelViewModel.getState()
-
- expect(state).toEqual({
- hasData: false,
- selectedId: undefined
- })
- })
- })
-
- describe('model data management', () => {
- it('should set and get model data', () => {
- const mockModelData = {
- nodes: [
- { id: 'node1', name: 'Service A', type: 'service' },
- { id: 'node2', name: 'Database B', type: 'database' }
- ],
- relationships: [
- { id: 'rel1', source: 'node1', target: 'node2' }
- ]
- }
-
- calmModelViewModel.setModelData(mockModelData)
-
- expect(calmModelViewModel.getModelData()).toBe(mockModelData)
- expect(calmModelViewModel.hasData()).toBe(true)
- })
-
- it('should emit data changed event when setting model data', () => {
- const dataChangedSpy = vi.fn()
- calmModelViewModel.onDataChanged(dataChangedSpy)
-
- const mockModelData = { nodes: [], relationships: [] }
- calmModelViewModel.setModelData(mockModelData)
-
- expect(dataChangedSpy).toHaveBeenCalledWith({
- modelData: mockModelData,
- selectedId: undefined
- })
- })
-
- it('should handle setting null model data', () => {
- // Set some data first
- calmModelViewModel.setModelData({ test: 'data' })
- expect(calmModelViewModel.hasData()).toBe(true)
-
- // Set to null
- calmModelViewModel.setModelData(null)
-
- expect(calmModelViewModel.getModelData()).toBeNull()
- expect(calmModelViewModel.hasData()).toBe(false)
- })
-
- it('should handle setting undefined model data', () => {
- calmModelViewModel.setModelData(undefined)
-
- expect(calmModelViewModel.getModelData()).toBeUndefined()
- expect(calmModelViewModel.hasData()).toBe(false)
- })
-
- it('should emit data changed event with current selection when setting model data', () => {
- const dataChangedSpy = vi.fn()
-
- // Set selection first
- calmModelViewModel.setSelectedId('test-selection')
- calmModelViewModel.onDataChanged(dataChangedSpy)
-
- const mockModelData = { test: 'data' }
- calmModelViewModel.setModelData(mockModelData)
-
- expect(dataChangedSpy).toHaveBeenCalledWith({
- modelData: mockModelData,
- selectedId: 'test-selection'
- })
- })
- })
-
- describe('selection management', () => {
- it('should set and get selected ID', () => {
- expect(calmModelViewModel.getSelectedId()).toBeUndefined()
-
- calmModelViewModel.setSelectedId('element-123')
- expect(calmModelViewModel.getSelectedId()).toBe('element-123')
-
- calmModelViewModel.setSelectedId('element-456')
- expect(calmModelViewModel.getSelectedId()).toBe('element-456')
- })
-
- it('should emit selection changed event when setting selected ID', () => {
- const selectionChangedSpy = vi.fn()
- calmModelViewModel.onSelectionChanged(selectionChangedSpy)
-
- calmModelViewModel.setSelectedId('element-123')
-
- expect(selectionChangedSpy).toHaveBeenCalledWith('element-123')
- })
-
- it('should emit data changed event when setting selected ID', () => {
- const dataChangedSpy = vi.fn()
- const mockModelData = { test: 'data' }
-
- calmModelViewModel.setModelData(mockModelData)
- calmModelViewModel.onDataChanged(dataChangedSpy)
-
- calmModelViewModel.setSelectedId('element-123')
-
- expect(dataChangedSpy).toHaveBeenCalledWith({
- modelData: mockModelData,
- selectedId: 'element-123'
- })
- })
-
- it('should not emit events when setting same selected ID', () => {
- calmModelViewModel.setSelectedId('element-123')
-
- const selectionChangedSpy = vi.fn()
- const dataChangedSpy = vi.fn()
- calmModelViewModel.onSelectionChanged(selectionChangedSpy)
- calmModelViewModel.onDataChanged(dataChangedSpy)
-
- // Set same ID again
- calmModelViewModel.setSelectedId('element-123')
-
- expect(selectionChangedSpy).not.toHaveBeenCalled()
- expect(dataChangedSpy).not.toHaveBeenCalled()
- })
-
- it('should handle setting undefined selected ID', () => {
- // Set a selection first
- calmModelViewModel.setSelectedId('element-123')
- expect(calmModelViewModel.getSelectedId()).toBe('element-123')
-
- const selectionChangedSpy = vi.fn()
- calmModelViewModel.onSelectionChanged(selectionChangedSpy)
-
- // Clear selection
- calmModelViewModel.setSelectedId(undefined)
-
- expect(calmModelViewModel.getSelectedId()).toBeUndefined()
- expect(selectionChangedSpy).toHaveBeenCalledWith(undefined)
- })
-
- it('should emit events when changing from undefined to defined selection', () => {
- expect(calmModelViewModel.getSelectedId()).toBeUndefined()
-
- const selectionChangedSpy = vi.fn()
- calmModelViewModel.onSelectionChanged(selectionChangedSpy)
-
- calmModelViewModel.setSelectedId('element-123')
-
- expect(selectionChangedSpy).toHaveBeenCalledWith('element-123')
- })
- })
-
- describe('editor reveal functionality', () => {
- it('should emit reveal in editor request', () => {
- const revealSpy = vi.fn()
- calmModelViewModel.onRevealInEditorRequest(revealSpy)
-
- calmModelViewModel.revealInEditor('element-123')
-
- expect(revealSpy).toHaveBeenCalledWith('element-123')
- })
-
- it('should handle multiple reveal requests', () => {
- const revealSpy = vi.fn()
- calmModelViewModel.onRevealInEditorRequest(revealSpy)
-
- calmModelViewModel.revealInEditor('element-123')
- calmModelViewModel.revealInEditor('element-456')
- calmModelViewModel.revealInEditor('element-789')
-
- expect(revealSpy).toHaveBeenCalledTimes(3)
- expect(revealSpy).toHaveBeenNthCalledWith(1, 'element-123')
- expect(revealSpy).toHaveBeenNthCalledWith(2, 'element-456')
- expect(revealSpy).toHaveBeenNthCalledWith(3, 'element-789')
- })
- })
-
- describe('state management', () => {
- it('should get complete state for debugging', () => {
- const mockModelData = { nodes: [], relationships: [] }
- calmModelViewModel.setModelData(mockModelData)
- calmModelViewModel.setSelectedId('element-123')
-
- const state = calmModelViewModel.getState()
-
- expect(state).toEqual({
- hasData: true,
- selectedId: 'element-123'
- })
- })
-
- it('should reset all state', () => {
- const mockModelData = { test: 'data' }
- calmModelViewModel.setModelData(mockModelData)
- calmModelViewModel.setSelectedId('element-123')
-
- const dataChangedSpy = vi.fn()
- const selectionChangedSpy = vi.fn()
- calmModelViewModel.onDataChanged(dataChangedSpy)
- calmModelViewModel.onSelectionChanged(selectionChangedSpy)
-
- calmModelViewModel.reset()
-
- expect(calmModelViewModel.getModelData()).toBeNull()
- expect(calmModelViewModel.getSelectedId()).toBeUndefined()
- expect(calmModelViewModel.hasData()).toBe(false)
-
- expect(dataChangedSpy).toHaveBeenCalledWith({
- modelData: null,
- selectedId: undefined
- })
- expect(selectionChangedSpy).toHaveBeenCalledWith(undefined)
- })
-
- it('should have proper state after reset', () => {
- // Set some state first
- calmModelViewModel.setModelData({ test: 'data' })
- calmModelViewModel.setSelectedId('element-123')
-
- calmModelViewModel.reset()
-
- const state = calmModelViewModel.getState()
- expect(state).toEqual({
- hasData: false,
- selectedId: undefined
- })
- })
- })
-
- describe('data presence checks', () => {
- it('should return false for hasData with null data', () => {
- calmModelViewModel.setModelData(null)
- expect(calmModelViewModel.hasData()).toBe(false)
- })
-
- it('should return false for hasData with undefined data', () => {
- calmModelViewModel.setModelData(undefined)
- expect(calmModelViewModel.hasData()).toBe(false)
- })
-
- it('should return true for hasData with empty object', () => {
- calmModelViewModel.setModelData({})
- expect(calmModelViewModel.hasData()).toBe(true)
- })
-
- it('should return true for hasData with empty array', () => {
- calmModelViewModel.setModelData([])
- expect(calmModelViewModel.hasData()).toBe(true)
- })
-
- it('should return true for hasData with string data', () => {
- calmModelViewModel.setModelData('test')
- expect(calmModelViewModel.hasData()).toBe(true)
- })
-
- it('should return false for hasData with empty string', () => {
- calmModelViewModel.setModelData('')
- expect(calmModelViewModel.hasData()).toBe(false)
- })
-
- it('should return true for hasData with number data', () => {
- calmModelViewModel.setModelData(42)
- expect(calmModelViewModel.hasData()).toBe(true)
- })
-
- it('should return false for hasData with zero', () => {
- calmModelViewModel.setModelData(0)
- expect(calmModelViewModel.hasData()).toBe(false)
- })
- })
-
- describe('disposal', () => {
- it('should dispose without errors', () => {
- expect(() => calmModelViewModel.dispose()).not.toThrow()
- })
-
- it('should dispose all emitters', () => {
- // Set up event listeners
- const dataChangedSpy = vi.fn()
- const selectionChangedSpy = vi.fn()
- const revealSpy = vi.fn()
-
- calmModelViewModel.onDataChanged(dataChangedSpy)
- calmModelViewModel.onSelectionChanged(selectionChangedSpy)
- calmModelViewModel.onRevealInEditorRequest(revealSpy)
-
- // Dispose
- calmModelViewModel.dispose()
-
- // Try to trigger events after disposal - they should not fire
- calmModelViewModel.setModelData({ test: 'data' })
- calmModelViewModel.setSelectedId('element-123')
- calmModelViewModel.revealInEditor('element-456')
-
- // Events should not be called after disposal
- expect(dataChangedSpy).not.toHaveBeenCalled()
- expect(selectionChangedSpy).not.toHaveBeenCalled()
- expect(revealSpy).not.toHaveBeenCalled()
- })
-
- it('should allow multiple dispose calls', () => {
- calmModelViewModel.dispose()
- expect(() => calmModelViewModel.dispose()).not.toThrow()
- })
- })
-})
\ No newline at end of file
diff --git a/calm-plugins/vscode/src/features/preview/model-tab/view-model/calm-model.view-model.ts b/calm-plugins/vscode/src/features/preview/model-tab/view-model/calm-model.view-model.ts
deleted file mode 100644
index 8a67e8582..000000000
--- a/calm-plugins/vscode/src/features/preview/model-tab/view-model/calm-model.view-model.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Emitter } from '../../../../core/emitter'
-
-/**
- * CalmModelViewModel - Framework-free ViewModel for CALM model tab
- * Manages model data display and filtering for JSON rendering
- */
-export class CalmModelViewModel {
- private dataChangedEmitter = new Emitter<{ modelData: any; selectedId?: string }>()
- private selectionChangedEmitter = new Emitter${escapedJson}`
- }
-
- /**
- * Filter model data to show only the selected element and related data
- */
- private filterDataBySelection(modelData: any, selectedId: string): any {
- if (!modelData.nodes) return modelData
-
- // Find the selected node
- const selectedNode = modelData.nodes.find((node: any) => node['unique-id'] === selectedId)
- if (!selectedNode) return modelData
-
- // Return focused view with selected node and related connections
- const relatedInterfaces = modelData.interfaces?.filter((iface: any) =>
- iface.from === selectedId || iface.to === selectedId
- ) || []
-
- const relatedNodeIds = new SetTest
',
- format: 'html',
- sourceFile: '/test/source/demo.md',
- })
-
- // Trigger docify
- await panel['handleRunDocifyImpl']()
-
- // Verify that preprocessing was NOT applied (no markdown preprocessing logs)
- const preprocessingLogs = mockLogger.info.mock.calls.filter((call: any) =>
- call[0] && call[0].includes('Preprocessing markdown images')
- )
- expect(preprocessingLogs).toHaveLength(0)
- })
- })
-
- describe('handleExportDiagram', () => {
- let panel: CalmPreviewPanel
-
- beforeEach(() => {
- panel = new (CalmPreviewPanel as any)(mockPanel, mockContext, mockConfig, mockLogger)
- panel.viewModel.setCurrentUri('/test/source/arch.json')
- })
-
- afterEach(() => {
- panel.dispose()
- })
-
- it('computes a default save location from the current file and shows the save dialog', async () => {
- vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(undefined)
-
- await panel.handleExportDiagram('svg', '', 1)
-
- const callArgs = vi.mocked(vscode.window.showSaveDialog).mock.calls[0][0] as any
- expect(callArgs.defaultUri.fsPath).toBe('/test/source/arch-diagram-1.svg')
- expect(callArgs.filters).toEqual({ 'SVG Image': ['svg'] })
- })
-
- it('uses a PNG filter and the diagram index in the default filename for PNG exports', async () => {
- vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(undefined)
-
- await panel.handleExportDiagram('png', 'QkJC', 2)
-
- const callArgs = vi.mocked(vscode.window.showSaveDialog).mock.calls[0][0] as any
- expect(callArgs.defaultUri.fsPath).toBe('/test/source/arch-diagram-2.png')
- expect(callArgs.filters).toEqual({ 'PNG Image': ['png'] })
- })
-
- it('does not write a file when the user cancels the save dialog', async () => {
- vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(undefined)
-
- await panel.handleExportDiagram('svg', '', 1)
-
- expect(vscode.workspace.fs.writeFile).not.toHaveBeenCalled()
- })
-
- it('writes SVG data as a utf8 buffer and shows a confirmation message', async () => {
- const saveUri = { fsPath: '/test/source/arch-diagram-1.svg' } as any
- vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(saveUri)
-
- await panel.handleExportDiagram('svg', '', 1)
-
- expect(vscode.workspace.fs.writeFile).toHaveBeenCalledWith(saveUri, Buffer.from('', 'utf8'))
- expect(vscode.window.showInformationMessage).toHaveBeenCalledWith('Diagram exported to /test/source/arch-diagram-1.svg')
- })
-
- it('writes PNG data as a base64-decoded buffer', async () => {
- const saveUri = { fsPath: '/test/source/arch-diagram-1.png' } as any
- vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(saveUri)
-
- await panel.handleExportDiagram('png', 'QkJC', 1)
-
- expect(vscode.workspace.fs.writeFile).toHaveBeenCalledWith(saveUri, Buffer.from('QkJC', 'base64'))
- })
-
- it('shows an error message and logs when writing the file fails', async () => {
- const saveUri = { fsPath: '/test/source/arch-diagram-1.svg' } as any
- vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(saveUri)
- vi.mocked(vscode.workspace.fs.writeFile).mockRejectedValue(new Error('disk full'))
-
- await panel.handleExportDiagram('svg', '', 1)
-
- expect(vscode.window.showErrorMessage).toHaveBeenCalledWith(expect.stringContaining('disk full'))
- expect(mockLogger.error).toHaveBeenCalledWith(expect.stringContaining('disk full'))
- })
-
- it('falls back to the workspace root and a generic name when no file is open', async () => {
- panel.viewModel.clearCurrentUri()
- vi.mocked(vscode.window.showSaveDialog).mockResolvedValue(undefined)
-
- await panel.handleExportDiagram('png', 'QkJC', 3)
-
- const callArgs = vi.mocked(vscode.window.showSaveDialog).mock.calls[0][0] as any
- expect(callArgs.defaultUri.fsPath).toBe('/test/workspace/diagram-diagram-3.png')
- })
- })
-})
\ No newline at end of file
diff --git a/calm-plugins/vscode/src/features/preview/preview-panel.ts b/calm-plugins/vscode/src/features/preview/preview-panel.ts
deleted file mode 100644
index 9b3c681f4..000000000
--- a/calm-plugins/vscode/src/features/preview/preview-panel.ts
+++ /dev/null
@@ -1,580 +0,0 @@
-import * as vscode from 'vscode'
-import * as fs from 'fs'
-import * as path from 'path'
-import { detectFileType, FileType } from '../../models/file-types'
-import { parseFrontMatter, parseFrontMatterFromContent } from '@finos/calm-shared'
-import { ModelService } from '../../core/services/model-service'
-import { DiagramExportService } from '../../core/services/diagram-export-service'
-import { TemplateService } from '../../cli/template-service'
-import { HtmlBuilder } from '../../cli/html-builder'
-import { DocifyService } from '../../cli/docify-service'
-import { AsyncGuard } from '../../core/async-guard'
-import {
- isInMsg,
- InMsg,
- CommandRegistry,
- RevealInEditorCmd,
- SelectedCmd,
- ReadyCmd,
- RenderedCmd,
- RunDocifyCmd,
- RequestModelDataCmd,
- RequestTemplateDataCmd,
- RefreshAllCmd,
- ToggleLabelsCmd,
- ExportDiagramCmd,
- LogCmd,
- ErrorCmd,
-} from './commands'
-import { PreviewViewModel } from './preview.view-model'
-import { Logger } from '../../core/ports/logger'
-import { GraphData } from "../../models/model";
-
-/** ---------- main panel ---------- */
-export class CalmPreviewPanel {
- public static currentPanel: CalmPreviewPanel | undefined
- private readonly panel: vscode.WebviewPanel
- private disposables: vscode.Disposable[] = []
- private revealInEditorHandlers: Array<(id: string) => void> = []
- private selectHandlers: Array<(id: string) => void> = []
-
- private getCurrentTreeSelection: (() => string | undefined) | undefined = undefined
-
- private modelService: ModelService
- private templateService: TemplateService
- private htmlBuilder: HtmlBuilder
- private docifyService: DocifyService
- private diagramExportService: DiagramExportService
- public readonly viewModel: PreviewViewModel // Made public for external access
-
- private runDocifyGuard = new AsyncGuard()
- private commands = new CommandRegistry()
-
- static createOrShow(
- context: vscode.ExtensionContext,
- uri: vscode.Uri,
- config: vscode.WorkspaceConfiguration,
- log: Logger
- ) {
- const column = vscode.ViewColumn.Beside
- if (CalmPreviewPanel.currentPanel) {
- // Ensure the existing panel is still valid before reusing
- try {
- CalmPreviewPanel.currentPanel.reveal(uri)
- return CalmPreviewPanel.currentPanel
- } catch {
- // Panel may have been disposed externally, clean up the reference
- log.info('[preview] Existing panel was invalid, creating new one')
- CalmPreviewPanel.currentPanel = undefined
- }
- }
- const panel = vscode.window.createWebviewPanel('calmPreview', 'CALM Preview', column, {
- enableScripts: true,
- retainContextWhenHidden: true,
- localResourceRoots: [
- vscode.Uri.joinPath(context.extensionUri, 'dist'),
- vscode.Uri.joinPath(context.extensionUri, 'media'),
- vscode.Uri.joinPath(context.extensionUri, 'templates'),
- // Add workspace folders to allow access to local images
- ...(vscode.workspace.workspaceFolders || []).map(folder => folder.uri),
- ],
- })
- CalmPreviewPanel.currentPanel = new CalmPreviewPanel(panel, context, config, log)
- // createWebviewPanel already shows the panel; calling reveal() here causes a
- // blank first paint on VSCode 1.116+. Initialize state without re-revealing.
- CalmPreviewPanel.currentPanel.reveal(uri, { revealPanel: false })
- return CalmPreviewPanel.currentPanel
- }
-
- static createOrShowWithViewModel(
- context: vscode.ExtensionContext,
- uri: vscode.Uri,
- config: vscode.WorkspaceConfiguration,
- log: Logger,
- viewModel: PreviewViewModel
- ) {
- const column = vscode.ViewColumn.Beside
- if (CalmPreviewPanel.currentPanel) {
- // Ensure the existing panel is still valid before reusing
- try {
- CalmPreviewPanel.currentPanel.reveal(uri)
- return CalmPreviewPanel.currentPanel
- } catch {
- // Panel may have been disposed externally, clean up the reference
- log.info('[preview] Existing panel was invalid, creating new one')
- CalmPreviewPanel.currentPanel = undefined
- }
- }
- const panel = vscode.window.createWebviewPanel('calmPreview', 'CALM Preview', column, {
- enableScripts: true,
- retainContextWhenHidden: true,
- localResourceRoots: [
- vscode.Uri.joinPath(context.extensionUri, 'dist'),
- vscode.Uri.joinPath(context.extensionUri, 'media'),
- vscode.Uri.joinPath(context.extensionUri, 'templates'),
- // Add workspace folders to allow access to local images
- ...(vscode.workspace.workspaceFolders || []).map(folder => folder.uri),
- ],
- })
- CalmPreviewPanel.currentPanel = new CalmPreviewPanel(panel, context, config, log, viewModel)
- // See note in createOrShow: skip panel.reveal() on brand-new panels.
- CalmPreviewPanel.currentPanel.reveal(uri, { revealPanel: false })
- return CalmPreviewPanel.currentPanel
- }
-
- constructor(
- panel: vscode.WebviewPanel,
- private context: vscode.ExtensionContext,
- private cfg: vscode.WorkspaceConfiguration,
- private log: Logger,
- externalViewModel?: PreviewViewModel
- ) {
- this.panel = panel
- this.modelService = new ModelService()
- this.templateService = new TemplateService(context, log)
- this.htmlBuilder = new HtmlBuilder(context)
- this.docifyService = new DocifyService(log, this.templateService)
- this.diagramExportService = new DiagramExportService()
-
- // Use external ViewModel if provided, otherwise create new one
- this.viewModel = externalViewModel || new PreviewViewModel()
-
- // Bind ViewModel events to service operations
- this.bindViewModelEvents()
-
- // register commands
- this.commands.register(new RevealInEditorCmd(this))
- this.commands.register(new SelectedCmd(this))
- this.commands.register(new ReadyCmd(this))
- this.commands.register(new RenderedCmd(this))
- this.commands.register(new RunDocifyCmd(this))
- this.commands.register(new RequestModelDataCmd(this))
- this.commands.register(new RequestTemplateDataCmd(this))
- this.commands.register(new RefreshAllCmd(this))
- this.commands.register(new ToggleLabelsCmd(this))
- this.commands.register(new ExportDiagramCmd(this))
- this.commands.register(new LogCmd(this))
- this.commands.register(new ErrorCmd(this))
-
- // route messages to commands
- this.panel.webview.onDidReceiveMessage(
- (raw: unknown) => {
- if (!isInMsg(raw)) return
- const msg: InMsg = raw
- try { this.log.info('[preview][rawMsg] ' + JSON.stringify(msg)) } catch { }
- this.commands.dispatch(msg)
- },
- undefined,
- this.disposables
- )
-
- this.panel.webview.html = this.htmlBuilder.getHtml(this.panel)
- this.panel.onDidDispose(() => this.dispose(), null, this.disposables)
- }
-
- private bindViewModelEvents(): void {
- // Bind ViewModel events to actual service operations
- this.viewModel.onVisibilityChanged((visible) => {
- if (visible) {
- this.panel.reveal(vscode.ViewColumn.Beside)
- }
- })
-
- this.viewModel.onStateChanged(() => {
- const state = this.viewModel.getPreviewState()
- this.log.info(`[preview] onStateChanged - ready: ${state.ready}, hasData: ${state.hasData}, selectedId: ${state.selectedId}`)
- if (state.ready && state.hasData) {
- this.post({ type: 'setData', ...this.viewModel.getData() })
- if (state.selectedId) {
- this.log.info(`[preview] Posting select message for: ${state.selectedId}`)
- this.post({ type: 'select', id: state.selectedId })
- }
- }
- })
-
- this.viewModel.onModelDataRequest(() => {
- this.handleRequestModelDataImpl()
- })
-
- this.viewModel.onTemplateDataRequest(() => {
- this.handleRequestTemplateDataImpl()
- })
-
- this.viewModel.onDocifyRequest(() => {
- this.handleRunDocifyImpl()
- })
-
- // Listen for docify results and post them to webview
- this.viewModel.docify.onDocifyResult((result) => {
- // Strip front-matter from the content before displaying in preview
- const parsed = parseFrontMatterFromContent(result.content)
- this.post({ type: 'docifyResult', content: parsed.content, format: result.format, sourceFile: result.sourceFile })
- })
-
- // Listen for docify errors and post them to webview
- this.viewModel.docify.onDocifyError((error) => {
- this.post({ type: 'docifyError', message: error })
- })
- }
-
- private post(msg: unknown) {
- try { this.panel.webview.postMessage(msg) } catch { }
- }
-
- /** --------- public API - now delegates to ViewModel --------- */
- reveal(uri: vscode.Uri, options: { revealPanel?: boolean } = {}) {
- const revealPanel = options.revealPanel !== false
- this.viewModel.setCurrentUri(uri.fsPath)
- const fileInfo = detectFileType(uri.fsPath)
- const isTemplateMode = fileInfo.type === FileType.TemplateFile && fileInfo.isValid
-
- this.log.info(`[preview] reveal() - File: ${uri.fsPath}`)
- this.log.info(`[preview] reveal() - fileInfo: type=${fileInfo.type}, isValid=${fileInfo.isValid}, architecturePath=${fileInfo.architecturePath}`)
- this.log.info(`[preview] reveal() - isTemplateMode set to: ${isTemplateMode}`)
-
- if (isTemplateMode) {
- this.viewModel.setTemplateMode(true, uri.fsPath, fileInfo.architecturePath)
- this.log.info(`[preview] Template mode activated: ${uri.fsPath} -> ${fileInfo.architecturePath}`)
-
- // Send template mode to webview
- this.post({
- type: 'templateMode',
- isTemplateMode: true,
- templatePath: uri.fsPath,
- architecturePath: fileInfo.architecturePath
- })
- } else {
- this.viewModel.setTemplateMode(false, undefined, uri.fsPath)
- this.log.info(`[preview] Architecture mode: ${uri.fsPath}`)
-
- // Send template mode to webview
- this.post({
- type: 'templateMode',
- isTemplateMode: false
- })
- }
-
- // Don't trigger docify immediately here - let refreshForDocument handle it after selection is determined
-
- if (revealPanel) {
- this.panel.reveal(vscode.ViewColumn.Beside)
- }
- }
-
- getCurrentUri(): vscode.Uri | undefined {
- const uriString = this.viewModel.getCurrentUriString()
- return uriString ? vscode.Uri.file(uriString) : undefined
- }
-
- onDidDispose(handler: () => void) { this.panel.onDidDispose(handler) }
- onRevealInEditor(handler: (id: string) => void) { this.revealInEditorHandlers.push(handler) }
- onDidSelect(handler: (id: string) => void) { this.selectHandlers.push(handler) }
-
- setData(payload: { graph: GraphData; selectedId?: string }) {
- this.viewModel.setData(payload)
- }
-
- postSelect(id: string) {
- this.viewModel.setSelectedId(id)
- this.log.info(`[preview] TreeView selection changed to: ${id || 'none'}`)
- }
-
- setGetCurrentTreeSelection(fn: () => string | undefined) {
- this.getCurrentTreeSelection = fn
- }
-
- dispose() {
- this.viewModel.setVisible(false)
- this.viewModel.setReady(false) // Reset ready state so new panel can trigger state changes
- this.viewModel.setRendered(false) // Reset rendered probe so next panel gets a fresh paint check
- this.viewModel.clearCurrentUri() // Clear URI so reopening will trigger proper data loading
- CalmPreviewPanel.currentPanel = undefined
- while (this.disposables.length) {
- const d = this.disposables.pop()
- try { d?.dispose() } catch { }
- }
- }
-
- /** --------- Command handlers using ViewModel --------- */
- public handleRevealInEditor(id: string) {
- this.revealInEditorHandlers.forEach(h => h(id))
- this.viewModel.handleRevealInEditor(id)
- }
-
- public handleSelected(id: string) {
- this.selectHandlers.forEach(h => h(id))
- this.viewModel.handleSelected(id)
- }
-
- public handleReady() {
- this.log.info('[preview] handleReady() called - webview is ready')
- this.viewModel.handleReady()
- }
-
- public handleRendered() {
- this.log.info('[preview] handleRendered() called - webview compositor produced a frame')
- this.viewModel.handleRendered()
- }
-
- public handleRunDocify() {
- this.viewModel.handleRunDocify()
- }
-
- public handleRequestModelData() {
- this.viewModel.handleRequestModelData()
- }
-
- public handleRequestTemplateData() {
- this.viewModel.handleRequestTemplateData()
- }
-
- public handleRefreshAll() {
- this.log.info('[preview] handleRefreshAll() called - refreshing all tabs')
- this.handleRequestModelData()
- this.handleRequestTemplateData()
- this.handleRunDocify()
- }
-
- public async handleToggleLabels(showLabels: boolean) {
- this.viewModel.handleToggleLabels(showLabels)
- }
-
- public async handleExportDiagram(format: 'svg' | 'png', data: string, diagramIndex: number): Promise${this.escapeHtml(content)}`
- : 'No template content available'
-
- ;(this.container as any).innerHTML = displayContent
- }
-
- /**
- * Update the view when external selection changes
- */
- public updateSelection(selectedId?: string): void {
- this.viewModel.setSelectedId(selectedId || 'none')
- }
-
- /**
- * Escape HTML to prevent XSS
- */
- private escapeHtml(str: string): string {
- return str
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''')
- }
-
- /**
- * Cleanup event listeners
- */
- public dispose(): void {
- ;(this.container as any).innerHTML = ''
- }
-}
\ No newline at end of file
diff --git a/calm-plugins/vscode/src/features/preview/tsconfig.json b/calm-plugins/vscode/src/features/preview/tsconfig.json
deleted file mode 100644
index 324bc88fb..000000000
--- a/calm-plugins/vscode/src/features/preview/tsconfig.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "compilerOptions": {
- "target": "ES2020",
- "module": "ESNext",
- "moduleResolution": "Bundler",
- "lib": ["ES2020", "DOM"],
- "strict": true,
- "types": []
- }
-}
diff --git a/calm-plugins/vscode/src/features/preview/webview/diagram-controls.spec.ts b/calm-plugins/vscode/src/features/preview/webview/diagram-controls.spec.ts
deleted file mode 100644
index 06649eded..000000000
--- a/calm-plugins/vscode/src/features/preview/webview/diagram-controls.spec.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { DiagramControls } from './diagram-controls'
-import { PanZoomManager } from './pan-zoom-manager'
-
-vi.mock('svg-pan-zoom', () => ({
- default: vi.fn(function () { return {
- zoom: vi.fn(),
- getZoom: vi.fn(function () { return 1; }),
- getPan: vi.fn(function () { return { x: 0, y: 0 }; }),
- pan: vi.fn(),
- resetZoom: vi.fn(),
- resetPan: vi.fn(),
- fit: vi.fn(),
- center: vi.fn(),
- resize: vi.fn(),
- updateBBox: vi.fn(),
- enablePan: vi.fn(),
- enableZoom: vi.fn(),
- disablePan: vi.fn(),
- disableZoom: vi.fn(),
- destroy: vi.fn(),
- }; })
-}))
-
-function createManager(): PanZoomManager {
- const manager = new PanZoomManager()
- manager.initialize({} as SVGSVGElement)
- return manager
-}
-
-function getButtons(parent: HTMLElement): HTMLButtonElement[] {
- return Array.from(parent.querySelectorAll('button.diagram-control-btn'))
-}
-
-describe('DiagramControls', () => {
- let parent: HTMLElement
-
- beforeEach(() => {
- parent = document.createElement('div')
- })
-
- it('renders zoom in, zoom out and fit controls', () => {
- const controls = new DiagramControls(createManager())
- controls.createControls(parent)
-
- const labels = getButtons(parent).map(btn => btn.textContent)
- expect(labels).toEqual(['➕', '➖', '⊡'])
- })
-
- it('calls the pan/zoom manager and the matching callback when a button is clicked', () => {
- const manager = createManager()
- const zoomInSpy = vi.spyOn(manager, 'zoomIn')
- const onZoomIn = vi.fn()
- const controls = new DiagramControls(manager, { onZoomIn })
- controls.createControls(parent)
-
- getButtons(parent)[0].dispatchEvent(new Event('click'))
-
- expect(zoomInSpy).toHaveBeenCalledTimes(1)
- expect(onZoomIn).toHaveBeenCalledTimes(1)
- })
-
- it('does not render any export control - that is DiagramExportControl\'s responsibility', () => {
- const controls = new DiagramControls(createManager())
- controls.createControls(parent)
-
- expect(parent.querySelector('.diagram-export-control')).toBeNull()
- })
-
- it('returns the toolbar container so callers can compose additional controls into it', () => {
- const controls = new DiagramControls(createManager())
- const toolbar = controls.createControls(parent)
-
- expect(toolbar.className).toBe('diagram-controls')
- expect(parent.contains(toolbar)).toBe(true)
- })
-
- it('removes the controls from the DOM on destroy', () => {
- const controls = new DiagramControls(createManager())
- controls.createControls(parent)
- expect(parent.querySelector('.diagram-controls')).not.toBeNull()
-
- controls.destroy()
-
- expect(parent.querySelector('.diagram-controls')).toBeNull()
- })
-})
diff --git a/calm-plugins/vscode/src/features/preview/webview/diagram-controls.ts b/calm-plugins/vscode/src/features/preview/webview/diagram-controls.ts
deleted file mode 100644
index e2df9628b..000000000
--- a/calm-plugins/vscode/src/features/preview/webview/diagram-controls.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * DiagramControls - UI controls for diagram zoom and pan
- */
-
-import { PanZoomManager } from './pan-zoom-manager';
-
-export interface DiagramControlsOptions {
- onZoomIn?: () => void;
- onZoomOut?: () => void;
- onReset?: () => void;
- onFit?: () => void;
-}
-
-/**
- * Manages the diagram control UI and interactions
- */
-export class DiagramControls {
- private container: HTMLElement | null = null;
- private panZoomManager: PanZoomManager;
- private options: DiagramControlsOptions;
-
- constructor(panZoomManager: PanZoomManager, options: DiagramControlsOptions = {}) {
- this.panZoomManager = panZoomManager;
- this.options = options;
- }
-
- /**
- * Create and inject control UI into a container
- */
- public createControls(parentElement: HTMLElement): HTMLElement {
- // Create controls container
- const controls = document.createElement('div');
- controls.className = 'diagram-controls';
- controls.setAttribute('role', 'toolbar');
- controls.setAttribute('aria-label', 'Diagram zoom and pan controls');
-
- // Zoom in button
- const zoomInBtn = this.createButton('➕', 'Zoom in', () => {
- this.panZoomManager.zoomIn();
- this.options.onZoomIn?.();
- });
- controls.appendChild(zoomInBtn);
-
- // Zoom out button
- const zoomOutBtn = this.createButton('➖', 'Zoom out', () => {
- this.panZoomManager.zoomOut();
- this.options.onZoomOut?.();
- });
- controls.appendChild(zoomOutBtn);
-
- // Fit to view button
- const fitBtn = this.createButton('⊡', 'Fit to view', () => {
- this.panZoomManager.fit();
- this.options.onFit?.();
- });
- controls.appendChild(fitBtn);
-
- // Store reference and inject into parent
- this.container = controls;
- parentElement.appendChild(controls);
-
- return controls;
- }
-
- /**
- * Create a control button
- */
- private createButton(
- label: string,
- title: string,
- onClick: () => void
- ): HTMLButtonElement {
- const button = document.createElement('button');
- button.className = 'diagram-control-btn';
- button.textContent = label;
- button.title = title;
- button.setAttribute('aria-label', title);
- button.addEventListener('click', onClick);
- return button;
- }
-
- /**
- * Show controls
- */
- public show(): void {
- if (this.container) {
- this.container.style.display = 'flex';
- }
- }
-
- /**
- * Hide controls
- */
- public hide(): void {
- if (this.container) {
- this.container.style.display = 'none';
- }
- }
-
- /**
- * Remove controls from DOM
- */
- public destroy(): void {
- if (this.container && this.container.parentElement) {
- this.container.parentElement.removeChild(this.container);
- }
- this.container = null;
- }
-}
diff --git a/calm-plugins/vscode/src/features/preview/webview/diagram-export-control.spec.ts b/calm-plugins/vscode/src/features/preview/webview/diagram-export-control.spec.ts
deleted file mode 100644
index 067268637..000000000
--- a/calm-plugins/vscode/src/features/preview/webview/diagram-export-control.spec.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { vi } from 'vitest'
-import { DiagramExportControl } from './diagram-export-control'
-
-describe('DiagramExportControl', () => {
- let parent: HTMLElement
-
- beforeEach(() => {
- parent = document.createElement('div')
- })
-
- it('returns null when no export callbacks are provided', () => {
- const control = new DiagramExportControl()
- expect(control.createControl()).toBeNull()
- })
-
- it('renders a plain button trigger styled like the other toolbar controls', () => {
- const control = new DiagramExportControl({ onExportSvg: vi.fn() })
- const element = control.createControl()
- parent.appendChild(element as HTMLElement)
-
- const trigger = parent.querySelector('.diagram-export-trigger')
- expect(trigger?.tagName).toBe('BUTTON')
- expect(trigger?.classList.contains('diagram-control-btn')).toBe(true)
- })
-
- it('renders only the SVG menu item when only onExportSvg is provided, and invokes it on click', () => {
- const onExportSvg = vi.fn()
- const control = new DiagramExportControl({ onExportSvg })
- parent.appendChild(control.createControl() as HTMLElement)
-
- const items = Array.from(parent.querySelectorAll('.diagram-export-menu-item'))
- expect(items.map(i => i.textContent)).toEqual(['Export as SVG'])
-
- items[0].dispatchEvent(new Event('click'))
- expect(onExportSvg).toHaveBeenCalledTimes(1)
- })
-
- it('renders SVG and PNG menu items and invokes the matching callback', () => {
- const onExportSvg = vi.fn()
- const onExportPng = vi.fn()
- const control = new DiagramExportControl({ onExportSvg, onExportPng })
- parent.appendChild(control.createControl() as HTMLElement)
-
- const items = Array.from(parent.querySelectorAll('.diagram-export-menu-item'))
- expect(items.map(i => i.textContent)).toEqual(['Export as SVG', 'Export as PNG'])
-
- items[1].dispatchEvent(new Event('click'))
- expect(onExportPng).toHaveBeenCalledTimes(1)
- expect(onExportSvg).not.toHaveBeenCalled()
- })
-
- it('toggles the menu when the trigger is clicked', () => {
- const control = new DiagramExportControl({ onExportSvg: vi.fn() })
- parent.appendChild(control.createControl() as HTMLElement)
-
- const trigger = parent.querySelector('.diagram-export-trigger') as HTMLButtonElement
- const menu = parent.querySelector('.diagram-export-menu') as HTMLElement
- expect(menu.hidden).toBe(true)
- expect(trigger.getAttribute('aria-expanded')).toBe('false')
-
- trigger.dispatchEvent(new Event('click', { bubbles: true }))
- expect(menu.hidden).toBe(false)
- expect(trigger.getAttribute('aria-expanded')).toBe('true')
-
- trigger.dispatchEvent(new Event('click', { bubbles: true }))
- expect(menu.hidden).toBe(true)
- expect(trigger.getAttribute('aria-expanded')).toBe('false')
- })
-
- it('closes the menu when selecting an item', () => {
- const control = new DiagramExportControl({ onExportSvg: vi.fn() })
- parent.appendChild(control.createControl() as HTMLElement)
-
- const trigger = parent.querySelector('.diagram-export-trigger') as HTMLButtonElement
- const menu = parent.querySelector('.diagram-export-menu') as HTMLElement
- const item = parent.querySelector('.diagram-export-menu-item') as HTMLElement
-
- trigger.dispatchEvent(new Event('click', { bubbles: true }))
- expect(menu.hidden).toBe(false)
-
- item.dispatchEvent(new Event('click'))
- expect(menu.hidden).toBe(true)
- })
-
- it('closes the menu when clicking outside the control', () => {
- document.body.appendChild(parent)
- const control = new DiagramExportControl({ onExportSvg: vi.fn() })
- parent.appendChild(control.createControl() as HTMLElement)
-
- const trigger = parent.querySelector('.diagram-export-trigger') as HTMLButtonElement
- const menu = parent.querySelector('.diagram-export-menu') as HTMLElement
-
- trigger.dispatchEvent(new Event('click', { bubbles: true }))
- expect(menu.hidden).toBe(false)
-
- document.body.dispatchEvent(new Event('click', { bubbles: true }))
- expect(menu.hidden).toBe(true)
-
- document.body.removeChild(parent)
- })
-
- it('removes the control from the DOM and stops listening for outside clicks on destroy', () => {
- document.body.appendChild(parent)
- const control = new DiagramExportControl({ onExportSvg: vi.fn() })
- parent.appendChild(control.createControl() as HTMLElement)
- expect(parent.querySelector('.diagram-export-control')).not.toBeNull()
-
- control.destroy()
-
- expect(parent.querySelector('.diagram-export-control')).toBeNull()
- document.body.removeChild(parent)
- })
-
- describe('keyboard navigation', () => {
- afterEach(() => {
- parent.parentElement?.removeChild(parent)
- })
-
- function keydown(target: HTMLElement, key: string): void {
- target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }))
- }
-
- function setUp(): { trigger: HTMLButtonElement; menu: HTMLElement; items: HTMLButtonElement[] } {
- document.body.appendChild(parent)
- const control = new DiagramExportControl({ onExportSvg: vi.fn(), onExportPng: vi.fn() })
- parent.appendChild(control.createControl() as HTMLElement)
- return {
- trigger: parent.querySelector('.diagram-export-trigger') as HTMLButtonElement,
- menu: parent.querySelector('.diagram-export-menu') as HTMLElement,
- items: Array.from(parent.querySelectorAll('.diagram-export-menu-item')),
- }
- }
-
- it('opens the menu and focuses the first item when ArrowDown is pressed on the trigger', () => {
- const { trigger, menu, items } = setUp()
-
- keydown(trigger, 'ArrowDown')
-
- expect(menu.hidden).toBe(false)
- expect(document.activeElement).toBe(items[0])
- })
-
- it('opens the menu and focuses the last item when ArrowUp is pressed on the trigger', () => {
- const { trigger, menu, items } = setUp()
-
- keydown(trigger, 'ArrowUp')
-
- expect(menu.hidden).toBe(false)
- expect(document.activeElement).toBe(items[items.length - 1])
- })
-
- it('moves focus to the next item with ArrowDown and wraps from the last item to the first', () => {
- const { trigger, items } = setUp()
- keydown(trigger, 'ArrowDown')
- expect(document.activeElement).toBe(items[0])
-
- keydown(items[0], 'ArrowDown')
- expect(document.activeElement).toBe(items[1])
-
- keydown(items[1], 'ArrowDown')
- expect(document.activeElement).toBe(items[0])
- })
-
- it('moves focus to the previous item with ArrowUp and wraps from the first item to the last', () => {
- const { trigger, items } = setUp()
- keydown(trigger, 'ArrowDown')
- expect(document.activeElement).toBe(items[0])
-
- keydown(items[0], 'ArrowUp')
- expect(document.activeElement).toBe(items[items.length - 1])
- })
-
- it('closes the menu and returns focus to the trigger when Escape is pressed', () => {
- const { trigger, menu, items } = setUp()
- keydown(trigger, 'ArrowDown')
- expect(menu.hidden).toBe(false)
-
- keydown(items[0], 'Escape')
-
- expect(menu.hidden).toBe(true)
- expect(document.activeElement).toBe(trigger)
- })
-
- it('does nothing on Escape when the menu is already closed', () => {
- const { trigger, menu } = setUp()
-
- expect(() => keydown(trigger, 'Escape')).not.toThrow()
- expect(menu.hidden).toBe(true)
- })
-
- it('closes the menu when focus moves to an element outside the control', () => {
- const outside = document.createElement('button')
- document.body.appendChild(outside)
- const { trigger, menu, items } = setUp()
- keydown(trigger, 'ArrowDown')
- expect(menu.hidden).toBe(false)
-
- items[0].dispatchEvent(new FocusEvent('focusout', { relatedTarget: outside, bubbles: true }))
-
- expect(menu.hidden).toBe(true)
- document.body.removeChild(outside)
- })
- })
-})
diff --git a/calm-plugins/vscode/src/features/preview/webview/diagram-export-control.ts b/calm-plugins/vscode/src/features/preview/webview/diagram-export-control.ts
deleted file mode 100644
index dff418615..000000000
--- a/calm-plugins/vscode/src/features/preview/webview/diagram-export-control.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * DiagramExportControl - "Export" button with an SVG/PNG dropdown menu.
- * Built from plain elements styled via `.diagram-control-btn` so it matches the
- * existing zoom/pan controls, rather than pulling in a separate UI component library.
- */
-
-export interface DiagramExportControlOptions {
- onExportSvg?: () => void
- onExportPng?: () => void
-}
-
-type ExportFormat = 'svg' | 'png'
-
-export class DiagramExportControl {
- private container: HTMLElement | null = null
- private trigger: HTMLButtonElement | null = null
- private menu: HTMLElement | null = null
- private isOpen = false
-
- private readonly handleOutsideClick = (event: MouseEvent): void => {
- if (this.container && !this.container.contains(event.target as Node)) {
- this.close()
- }
- }
-
- private readonly handleFocusOut = (event: FocusEvent): void => {
- const next = event.relatedTarget as Node | null
- if (this.container && !this.container.contains(next)) {
- this.close()
- }
- }
-
- private readonly handleKeydown = (event: KeyboardEvent): void => {
- if (event.key === 'Escape') {
- if (!this.isOpen) return
- event.preventDefault()
- this.close()
- this.trigger?.focus()
- return
- }
-
- if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
-
- const items = this.getMenuItems()
- if (items.length === 0) return
-
- if (!this.isOpen) {
- event.preventDefault()
- this.open()
- this.focusItemAt(event.key === 'ArrowDown' ? 0 : items.length - 1)
- return
- }
-
- const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement)
- if (currentIndex === -1) return
- event.preventDefault()
- const delta = event.key === 'ArrowDown' ? 1 : -1
- this.focusItemAt((currentIndex + delta + items.length) % items.length)
- }
-
- constructor(private options: DiagramExportControlOptions = {}) {}
-
- private getMenuItems(): HTMLButtonElement[] {
- return this.menu ? Array.from(this.menu.querySelectorAll('.diagram-export-menu-item')) : []
- }
-
- private focusItemAt(index: number): void {
- this.getMenuItems()[index]?.focus()
- }
-
- /**
- * Builds the "Export" trigger and its dropdown menu.
- * Returns null if neither export callback was provided.
- */
- public createControl(): HTMLElement | null {
- const items: { label: string; value: ExportFormat }[] = []
- if (this.options.onExportSvg) {
- items.push({ label: 'Export as SVG', value: 'svg' })
- }
- if (this.options.onExportPng) {
- items.push({ label: 'Export as PNG', value: 'png' })
- }
- if (items.length === 0) {
- return null
- }
-
- const wrapper = document.createElement('div')
- wrapper.className = 'diagram-export-control diagram-control-group-start'
-
- const trigger = document.createElement('button')
- trigger.className = 'diagram-control-btn diagram-export-trigger'
- trigger.textContent = 'Export ▾'
- trigger.title = 'Export diagram'
- trigger.setAttribute('aria-label', 'Export diagram')
- trigger.setAttribute('aria-haspopup', 'menu')
- trigger.setAttribute('aria-expanded', 'false')
- trigger.addEventListener('click', (event) => {
- event.stopPropagation()
- this.toggle()
- })
-
- const menu = document.createElement('div')
- menu.className = 'diagram-export-menu'
- menu.setAttribute('role', 'menu')
- menu.hidden = true
-
- items.forEach(item => {
- const menuItem = document.createElement('button')
- menuItem.className = 'diagram-export-menu-item'
- menuItem.setAttribute('role', 'menuitem')
- menuItem.textContent = item.label
- menuItem.addEventListener('click', () => {
- this.close()
- if (item.value === 'svg') {
- this.options.onExportSvg?.()
- } else {
- this.options.onExportPng?.()
- }
- })
- menu.appendChild(menuItem)
- })
-
- wrapper.appendChild(trigger)
- wrapper.appendChild(menu)
- wrapper.addEventListener('keydown', this.handleKeydown)
- wrapper.addEventListener('focusout', this.handleFocusOut)
-
- this.container = wrapper
- this.trigger = trigger
- this.menu = menu
- return wrapper
- }
-
- private toggle(): void {
- if (this.isOpen) {
- this.close()
- } else {
- this.open()
- }
- }
-
- private open(): void {
- if (!this.menu || !this.trigger) return
- this.isOpen = true
- this.menu.hidden = false
- this.trigger.setAttribute('aria-expanded', 'true')
- document.addEventListener('click', this.handleOutsideClick)
- }
-
- private close(): void {
- if (!this.menu || !this.trigger) return
- this.isOpen = false
- this.menu.hidden = true
- this.trigger.setAttribute('aria-expanded', 'false')
- document.removeEventListener('click', this.handleOutsideClick)
- }
-
- /**
- * Remove the control from the DOM and detach its listeners.
- */
- public destroy(): void {
- this.close()
- if (this.container?.parentElement) {
- this.container.parentElement.removeChild(this.container)
- }
- this.container = null
- this.trigger = null
- this.menu = null
- }
-}
diff --git a/calm-plugins/vscode/src/features/preview/webview/diagram-export.spec.ts b/calm-plugins/vscode/src/features/preview/webview/diagram-export.spec.ts
deleted file mode 100644
index a7a3564eb..000000000
--- a/calm-plugins/vscode/src/features/preview/webview/diagram-export.spec.ts
+++ /dev/null
@@ -1,296 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { serializeSvgElement, rasterizeSvgElementToPng, exportDiagram } from './diagram-export'
-
-class FakeImage {
- onload: (() => void) | null = null
- onerror: (() => void) | null = null
- private _src = ''
-
- get src() {
- return this._src
- }
-
- set src(value: string) {
- this._src = value
- queueMicrotask(() => this.onload?.())
- }
-}
-
-function createSvgElement(): SVGSVGElement {
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as unknown as SVGSVGElement
- const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
- rect.setAttribute('width', '10')
- rect.setAttribute('height', '10')
- svg.appendChild(rect)
- return svg
-}
-
-/**
- * Mimics the DOM shape svg-pan-zoom leaves behind: a 100%-sized SVG with no viewBox,
- * wrapping the diagram content in a `.svg-pan-zoom_viewport` group carrying a pan/zoom
- * transform. `initializePanZoom` stashes Mermaid's own layout-computed viewBox as
- * `data-original-viewbox` before svg-pan-zoom strips it.
- */
-function createPanZoomedSvgElement(originalViewBox: string | null): SVGSVGElement {
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') as unknown as SVGSVGElement
- svg.setAttribute('width', '100%')
- svg.style.width = '100%'
- svg.style.height = '100%'
- svg.style.overflow = 'hidden'
-
- if (originalViewBox) {
- svg.setAttribute('data-original-viewbox', originalViewBox)
- }
-
- const viewport = document.createElementNS('http://www.w3.org/2000/svg', 'g')
- viewport.setAttribute('class', 'svg-pan-zoom_viewport')
- viewport.setAttribute('transform', 'matrix(0.23,0,0,0.23,0,223.88)')
- viewport.style.transform = 'matrix(0.23,0,0,0.23,0,223.88)'
-
- const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
- rect.setAttribute('width', '10')
- rect.setAttribute('height', '10')
- viewport.appendChild(rect)
- svg.appendChild(viewport)
-
- return svg
-}
-
-class FakeFileReader {
- onload: (() => void) | null = null
- onerror: (() => void) | null = null
- result: string | null = null
-
- readAsDataURL(blob: Blob): void {
- this.result = `data:${blob.type};base64,FAKE`
- queueMicrotask(() => this.onload?.())
- }
-}
-
-describe('diagram-export', () => {
- let drawImage: ReturnType