@antelopejs/dms-database 0.0.13 → 0.1.0

package/frontend-vue/app/build/diagram/history.ts

@@ -0,0 +1,178 @@
+import type { DiagramPositions } from '../composables/useDiagramPersistence'
+import type { NoteDraft } from './graph'
+
+// The diagram's undo stack. Every change is an operation that knows how to
+// apply itself and how to take itself back; the canvas saves whatever state
+// results, so undo and redo are saved like any other change.
+
+interface Point {
+	x: number
+	y: number
+}
+
+export type DiagramOperation =
+	| { kind: 'tableMove'; tableName: string; from: Point; to: Point }
+	| { kind: 'noteMove'; noteId: string; from: Point; to: Point }
+	| { kind: 'noteText'; noteId: string; from: string; to: string }
+	| { kind: 'noteCreate'; snapshot: NoteDraft }
+	| { kind: 'noteDelete'; snapshot: NoteDraft }
+	| { kind: 'layout'; from: DiagramPositions; to: DiagramPositions }
+
+export interface DiagramState {
+	positions: DiagramPositions
+	notes: NoteDraft[]
+}
+
+type OperationOf<K extends DiagramOperation['kind']> = Extract<
+	DiagramOperation,
+	{ kind: K }
+>
+type Apply<K extends DiagramOperation['kind']> = (
+	state: DiagramState,
+	op: OperationOf<K>,
+) => void
+interface Handlers<K extends DiagramOperation['kind']> {
+	forward: Apply<K>
+	reverse: Apply<K>
+}
+type OperationHandlers = { [K in DiagramOperation['kind']]: Handlers<K> }
+
+// Moves and text edits made in quick succession are one step.
+const SQUASH_WINDOW_MS = 600
+
+export function clonePositions(positions: DiagramPositions): DiagramPositions {
+	return Object.fromEntries(
+		Object.entries(positions).map(([name, point]) => [
+			name,
+			{ x: point.x, y: point.y },
+		]),
+	)
+}
+
+function findNote(state: DiagramState, noteId: string): NoteDraft | undefined {
+	return state.notes.find((note) => note.id === noteId)
+}
+
+function moveNote(state: DiagramState, noteId: string, point: Point) {
+	const note = findNote(state, noteId)
+	if (note) Object.assign(note, { x: point.x, y: point.y })
+}
+
+function setNoteText(state: DiagramState, noteId: string, text: string) {
+	const note = findNote(state, noteId)
+	if (note) note.text = text
+}
+
+function addNote(state: DiagramState, snapshot: NoteDraft) {
+	if (!findNote(state, snapshot.id)) state.notes.push({ ...snapshot })
+}
+
+function removeNote(state: DiagramState, noteId: string) {
+	const index = state.notes.findIndex((note) => note.id === noteId)
+	if (index >= 0) state.notes.splice(index, 1)
+}
+
+const HANDLERS: OperationHandlers = {
+	tableMove: {
+		forward: (state, op) => (state.positions[op.tableName] = { ...op.to }),
+		reverse: (state, op) => (state.positions[op.tableName] = { ...op.from }),
+	},
+	noteMove: {
+		forward: (state, op) => moveNote(state, op.noteId, op.to),
+		reverse: (state, op) => moveNote(state, op.noteId, op.from),
+	},
+	noteText: {
+		forward: (state, op) => setNoteText(state, op.noteId, op.to),
+		reverse: (state, op) => setNoteText(state, op.noteId, op.from),
+	},
+	noteCreate: {
+		forward: (state, op) => addNote(state, op.snapshot),
+		reverse: (state, op) => removeNote(state, op.snapshot.id),
+	},
+	noteDelete: {
+		forward: (state, op) => removeNote(state, op.snapshot.id),
+		reverse: (state, op) => addNote(state, op.snapshot),
+	},
+	layout: {
+		forward: (state, op) => (state.positions = clonePositions(op.to)),
+		reverse: (state, op) => (state.positions = clonePositions(op.from)),
+	},
+}
+
+function run(
+	state: DiagramState,
+	op: DiagramOperation,
+	direction: keyof Handlers<never>,
+) {
+	const handlers = HANDLERS[op.kind] as Handlers<typeof op.kind>
+	;(handlers[direction] as (s: DiagramState, o: DiagramOperation) => void)(
+		state,
+		op,
+	)
+}
+
+/** Folds `next` into `head` when both edit the same thing in a burst. */
+function squash(head: DiagramOperation, next: DiagramOperation): boolean {
+	if (head.kind !== next.kind) return false
+	if (
+		next.kind === 'tableMove' &&
+		head.kind === 'tableMove' &&
+		head.tableName === next.tableName
+	) {
+		head.to = next.to
+		return true
+	}
+	if (
+		(next.kind === 'noteMove' || next.kind === 'noteText') &&
+		(head.kind === 'noteMove' || head.kind === 'noteText') &&
+		head.noteId === next.noteId
+	) {
+		head.to = next.to as never
+		return true
+	}
+	return false
+}
+
+export class DiagramHistory {
+	private operations: DiagramOperation[] = []
+	private cursor = 0
+	private lastPushAt = 0
+
+	get canUndo(): boolean {
+		return this.cursor > 0
+	}
+
+	get canRedo(): boolean {
+		return this.cursor < this.operations.length
+	}
+
+	clear() {
+		this.operations = []
+		this.cursor = 0
+	}
+
+	/** Records an operation already applied to the state. */
+	push(op: DiagramOperation, now = Date.now()) {
+		this.operations.splice(this.cursor)
+		const head = this.operations[this.cursor - 1]
+		const recent = now - this.lastPushAt < SQUASH_WINDOW_MS
+		this.lastPushAt = now
+		if (head && recent && squash(head, op)) return
+		this.operations.push(op)
+		this.cursor += 1
+	}
+
+	undo(state: DiagramState): boolean {
+		if (!this.canUndo) return false
+		this.cursor -= 1
+		run(state, this.operations[this.cursor] as DiagramOperation, 'reverse')
+		return true
+	}
+
+	redo(state: DiagramState): boolean {
+		if (!this.canRedo) return false
+		run(state, this.operations[this.cursor] as DiagramOperation, 'forward')
+		this.cursor += 1
+		return true
+	}
+}

package/frontend-vue/app/build/diagram/shortcuts.ts

@@ -0,0 +1,62 @@
+// The diagram's keyboard shortcuts, the ones its toolbar's tooltips name.
+// Letters match whatever their case (Caps Lock, Shift); undo and redo take
+// Ctrl or ⌘, with Shift+Z or Y for redo.
+
+export type DiagramCommand =
+	| 'search'
+	| 'note'
+	| 'select'
+	| 'pan'
+	| 'fit'
+	| 'resetZoom'
+	| 'undo'
+	| 'redo'
+	| 'escape'
+
+type KeyInput = Pick<
+	KeyboardEvent,
+	'key' | 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'
+>
+
+const PLAIN_KEYS: Record<string, DiagramCommand> = {
+	f: 'search',
+	n: 'note',
+	v: 'select',
+	h: 'pan',
+	'1': 'fit',
+	'0': 'resetZoom',
+	escape: 'escape',
+}
+
+export function diagramCommand(event: KeyInput): DiagramCommand | null {
+	if (event.altKey) return null
+	const key = event.key.toLowerCase()
+	if (event.ctrlKey || event.metaKey) {
+		if (key === 'z') return event.shiftKey ? 'redo' : 'undo'
+		if (key === 'y' && !event.shiftKey) return 'redo'
+		return null
+	}
+	return PLAIN_KEYS[key] ?? null
+}
+
+const EDITABLE =
+	'input, textarea, select, [contenteditable=""], [contenteditable="true"]'
+
+/**
+ * Whether a key pressed on `target` is the canvas's to handle: not while
+ * typing, not while a dialog such as the inspector's drawer is open, and not
+ * from an element outside the canvas that has the focus.
+ */
+export function canvasOwnsKey(
+	target: EventTarget | null,
+	canvas: Element | null,
+): boolean {
+	const element = target as Element | null
+	if (!element || typeof element.closest !== 'function') return true
+	if (element.closest(EDITABLE)) return false
+	if (element.ownerDocument?.querySelector('[role="dialog"]')) return false
+	const isPage =
+		element === element.ownerDocument?.body ||
+		element === element.ownerDocument?.documentElement
+	return isPage || Boolean(canvas?.contains(element))
+}

package/frontend-vue/app/build/diagram/sync.ts

@@ -0,0 +1,137 @@
+import type {
+	DiagramNote,
+	DiagramNoteCreate,
+	DiagramNoteUpdate,
+	DiagramPositions,
+} from '../composables/useDiagramPersistence'
+import type { NoteDraft } from './graph'
+import { clonePositions, type DiagramState } from './history'
+
+// Saves the diagram as it changes (D-10): the layout and the notes are
+// compared with what was last stored, and only the differences are written.
+// One DiagramSync belongs to one schema: it only ever writes under its id.
+
+export interface DiagramStore {
+	saveLayout(schema: string, positions: DiagramPositions): Promise<void>
+	createNote(payload: DiagramNoteCreate): Promise<DiagramNote>
+	updateNote(id: string, patch: DiagramNoteUpdate): Promise<DiagramNote>
+	deleteNote(id: string): Promise<void>
+}
+
+const NOTE_FIELDS = ['text', 'x', 'y', 'width', 'height', 'color'] as const
+
+function noteChanged(saved: NoteDraft, current: NoteDraft): boolean {
+	return NOTE_FIELDS.some((field) => saved[field] !== current[field])
+}
+
+function notePatch(note: NoteDraft): DiagramNoteUpdate {
+	return {
+		text: note.text,
+		x: note.x,
+		y: note.y,
+		width: note.width,
+		height: note.height,
+		color: note.color ?? undefined,
+	}
+}
+
+export function noteFromStored(note: DiagramNote): NoteDraft {
+	return {
+		id: note.id,
+		schemaName: note.schemaName,
+		text: note.text,
+		x: note.x,
+		y: note.y,
+		width: note.width,
+		height: note.height,
+		color: note.color,
+		isTemp: false,
+	}
+}
+
+export class DiagramSync {
+	private saved: DiagramState = { positions: {}, notes: [] }
+	// The id the store gave each note created on the canvas, by its temporary
+	// id. The canvas keeps the temporary one, so the note's node is not
+	// remounted (and its edit lost) when it is first saved.
+	private readonly created = new Map<string, string>()
+
+	constructor(
+		private readonly store: DiagramStore,
+		readonly schemaId: string,
+	) {}
+
+	/** What is stored now, as loaded or as last written. */
+	reset(state: DiagramState) {
+		this.saved = {
+			positions: clonePositions(state.positions),
+			notes: state.notes.map((note) => ({ ...note, id: this.idOf(note) })),
+		}
+	}
+
+	hasChanges(state: DiagramState): boolean {
+		return this.layoutChanged(state) || this.notesChanged(state)
+	}
+
+	/** Writes the differences; `state` should be a copy the canvas won't change. */
+	async save(state: DiagramState): Promise<void> {
+		if (this.layoutChanged(state)) {
+			await this.store.saveLayout(
+				this.schemaId,
+				clonePositions(state.positions),
+			)
+		}
+		await this.saveNotes(state)
+		this.reset(state)
+	}
+
+	private idOf(note: NoteDraft): string {
+		return this.created.get(note.id) ?? note.id
+	}
+
+	private layoutChanged(state: DiagramState): boolean {
+		return (
+			JSON.stringify(this.saved.positions) !== JSON.stringify(state.positions)
+		)
+	}
+
+	private notesChanged(state: DiagramState): boolean {
+		const saved = new Map(this.saved.notes.map((note) => [note.id, note]))
+		return (
+			saved.size !== state.notes.length ||
+			state.notes.some((note) => {
+				const before = saved.get(this.idOf(note))
+				return !before || noteChanged(before, note)
+			})
+		)
+	}
+
+	private async saveNotes(state: DiagramState) {
+		const saved = new Map(this.saved.notes.map((note) => [note.id, note]))
+		const current = new Set(state.notes.map((note) => this.idOf(note)))
+		for (const note of this.saved.notes) {
+			if (!current.has(note.id)) await this.store.deleteNote(note.id)
+		}
+		for (const note of state.notes) {
+			const id = this.idOf(note)
+			const before = saved.get(id)
+			if (!before) await this.createNote(note)
+			else if (noteChanged(before, note))
+				await this.store.updateNote(id, notePatch(note))
+		}
+	}
+
+	private async createNote(note: NoteDraft) {
+		const created = await this.store.createNote({
+			schemaName: this.schemaId,
+			text: note.text,
+			x: note.x,
+			y: note.y,
+			width: note.width,
+			height: note.height,
+			color: note.color ?? undefined,
+		})
+		this.created.set(note.id, created.id)
+		Object.assign(note, noteFromStored(created))
+	}
+}

package/frontend-vue/app/build/query/completion.ts

@@ -0,0 +1,100 @@
+import type { SchemaSummary } from '../composables/useDatabaseSchemas'
+import type { QueryTarget } from './target'
+
+// What the editor completes, by place in the chain (D-12): the methods a
+// query step answers, and the schemas, instances, tables and fields of the
+// workspace, indexed so a table's fields are its own.
+
+// Schema also exposes createInstance/destroyInstance/listInstances, but only
+// instance(id?) continues the browse chain, so it is the only one offered.
+export const SCHEMA_METHODS = ['instance']
+export const INSTANCE_METHODS = ['table'] // a SchemaInstance only exposes table(name)
+// The steps of a Table, Selection, Stream or Datum: each is a method of the
+// staged query classes, so a completion never names one that does not exist.
+export const QUERY_METHODS = [
+	'slice',
+	'orderBy',
+	'filter',
+	'map',
+	'pluck',
+	'without',
+	'get',
+	'getAll',
+	'between',
+	'count',
+	'distinct',
+	'nth',
+	'sum',
+	'avg',
+	'min',
+	'max',
+	'insert',
+	'update',
+	'replace',
+	'delete',
+	'do',
+	'default',
+	'key',
+	'lookup',
+	'changes',
+]
+
+export interface CompletionIndex {
+	schemaIds: string[]
+	tablesBySchema: Record<string, string[]>
+	/** Fields keyed `schema.table`. */
+	fieldsByTable: Record<string, string[]>
+	/** Every field of a schema's tables, when the chain names no table yet. */
+	fieldsBySchema: Record<string, string[]>
+	instancesBySchema: Record<string, string[]>
+	allTables: string[]
+	allFields: string[]
+}
+
+export function buildCompletionIndex(
+	schemas: SchemaSummary[],
+): CompletionIndex {
+	const index: CompletionIndex = {
+		schemaIds: [],
+		tablesBySchema: {},
+		fieldsByTable: {},
+		fieldsBySchema: {},
+		instancesBySchema: {},
+		allTables: [],
+		allFields: [],
+	}
+	const allTables = new Set<string>()
+	const allFields = new Set<string>()
+	for (const schema of schemas) {
+		index.schemaIds.push(schema.id)
+		index.instancesBySchema[schema.id] = schema.instances ?? []
+		const tables: string[] = []
+		const schemaFields = new Set<string>()
+		for (const table of schema.tables ?? []) {
+			tables.push(table.name)
+			allTables.add(table.name)
+			const fields = Object.keys(table.fields ?? {})
+			index.fieldsByTable[`${schema.id}.${table.name}`] = fields
+			for (const field of fields) {
+				schemaFields.add(field)
+				allFields.add(field)
+			}
+		}
+		index.tablesBySchema[schema.id] = tables
+		index.fieldsBySchema[schema.id] = [...schemaFields]
+	}
+	index.allTables = [...allTables]
+	index.allFields = [...allFields]
+	return index
+}
+
+/** The fields to offer where the chain stands: its table's, else wider. */
+export function fieldsAt(index: CompletionIndex, chain: QueryTarget): string[] {
+	if (chain.schema && chain.table) {
+		const own = index.fieldsByTable[`${chain.schema}.${chain.table}`]
+		if (own) return own
+	}
+	if (chain.schema && index.fieldsBySchema[chain.schema])
+		return index.fieldsBySchema[chain.schema] as string[]
+	return index.allFields
+}

package/frontend-vue/app/build/query/csv.ts

@@ -0,0 +1,32 @@
+// A result as CSV, the columns of every row in the order they first appear.
+
+const NEEDS_QUOTES = /[",\n\r]/
+
+function csvCell(value: unknown): string {
+	if (value === null || value === undefined) return ''
+	const text = typeof value === 'object' ? JSON.stringify(value) : String(value)
+	return NEEDS_QUOTES.test(text) ? `"${text.replace(/"/g, '""')}"` : text
+}
+
+export function resultColumns(rows: Record<string, unknown>[]): string[] {
+	const columns = new Set<string>()
+	for (const row of rows) for (const key of Object.keys(row)) columns.add(key)
+	return [...columns]
+}
+
+export function toCsv(rows: Record<string, unknown>[]): string {
+	const columns = resultColumns(rows)
+	const lines = [columns.map(csvCell).join(',')]
+	for (const row of rows)
+		lines.push(columns.map((column) => csvCell(row[column])).join(','))
+	return `${lines.join('\n')}\n`
+}
+
+export function downloadText(filename: string, text: string, type: string) {
+	const url = URL.createObjectURL(new Blob([text], { type }))
+	const link = document.createElement('a')
+	link.href = url
+	link.download = filename
+	link.click()
+	URL.revokeObjectURL(url)
+}

package/frontend-vue/app/build/query/examples.ts

@@ -0,0 +1,38 @@
+// The example queries an empty result offers, built on the workspace's own
+// tables (D-13).
+
+interface ExampleTable {
+	name: string
+	fields?: Record<string, { kind?: string } | unknown>
+}
+
+// Field names that date a row, most telling first.
+const DATE_FIELDS = [
+	'created_at',
+	'createdAt',
+	'created',
+	'inserted_at',
+	'updated_at',
+	'updatedAt',
+	'date',
+]
+
+function kindOf(descriptor: unknown): string | undefined {
+	const kind = (descriptor as { kind?: unknown } | null)?.kind
+	return typeof kind === 'string' ? kind : undefined
+}
+
+/**
+ * The field that orders a table's rows by age, for "Latest rows": a known
+ * creation-date name, else the first date field; null when none dates them.
+ */
+export function latestOrderField(table: ExampleTable): string | null {
+	const fields = table.fields ?? {}
+	const named = DATE_FIELDS.find((name) => Object.hasOwn(fields, name))
+	if (named) return named
+	return (
+		Object.entries(fields).find(
+			([, descriptor]) => kindOf(descriptor) === 'date',
+		)?.[0] ?? null
+	)
+}