@antelopejs/dms-database 0.0.13 → 0.1.0

package/frontend-vue/app/components/DiagramNoteNode.vue

@@ -1,100 +1,118 @@
 <script setup lang="ts">
-interface NoteNodeData {
-	noteId: string;
-	text: string;
-	color: string | null;
-	width: number;
-	height: number;
-	onTextChange: (noteId: string, text: string) => void;
-	onDelete: (noteId: string) => void;
-}
-
-const props = defineProps<{ data: NoteNodeData; selected: boolean }>();
+import { onClickOutside } from '@vueuse/core'
+import type { NoteNodeData } from '../build/diagram/graph'
 
-// Sticky-note palette (amber). Centralised so the note frame, header and ink
-// stay in sync instead of being repeated as literals across the template.
-const NOTE_DEFAULT_BG = "#fef9c3";
-const NOTE_BORDER = "rgba(202, 138, 4, 0.45)";
-const NOTE_HEADER_BG = "rgba(250, 204, 21, 0.5)";
-const NOTE_HEADER_BORDER = "rgba(202, 138, 4, 0.35)";
-const NOTE_ACCENT = "#92400e";
-const NOTE_INK = "#422006";
-const NOTE_PLACEHOLDER_INK = "rgba(66, 32, 6, 0.45)";
+// A sticky note on the diagram: double-click to write, saved with the layout.
+// A click anywhere else, or Escape, ends the edit.
+const props = defineProps<{
+	data: NoteNodeData
+	selected?: boolean
+	/** Set by Vue Flow once it has measured the node. */
+	dimensions?: { width: number; height: number }
+}>()
 
-const editing = ref(false);
-const textBuffer = ref(props.data.text);
+const root = useTemplateRef<HTMLElement>('root')
+const textarea = useTemplateRef<HTMLTextAreaElement>('textarea')
+const editing = ref(false)
+const textBuffer = ref(props.data.text)
 
 watch(
 	() => props.data.text,
-	(v) => {
-		if (!editing.value) textBuffer.value = v;
+	(value) => {
+		if (!editing.value) textBuffer.value = value
 	},
-);
+)
+
+// Vue Flow shows a new node only once it has measured it: until then the
+// field cannot take the focus. It is tried again when the node's size comes in.
+let focusPending = false
+
+function focusField() {
+	const field = textarea.value
+	if (!focusPending || !field || !editing.value) return
+	field.focus()
+	if (document.activeElement !== field) return
+	focusPending = false
+	field.setSelectionRange(field.value.length, field.value.length)
+}
+
+watch(() => props.dimensions?.width, focusField, { flush: 'post' })
+
+async function startEdit() {
+	if (editing.value) return
+	textBuffer.value = props.data.text
+	editing.value = true
+	focusPending = true
+	await nextTick()
+	focusField()
+}
 
 function commitText() {
-	editing.value = false;
-	const next = textBuffer.value;
-	if (next !== props.data.text) {
-		props.data.onTextChange(props.data.noteId, next);
+	if (!editing.value) return
+	editing.value = false
+	focusPending = false
+	if (textBuffer.value !== props.data.text) {
+		props.data.onTextChange(props.data.noteId, textBuffer.value)
 	}
+	props.data.onEditEnd(props.data.noteId)
 }
+
+// The canvas swallows the pointer down that would blur the field: a click on
+// the pane or a table has to end the edit itself.
+onClickOutside(root, () => {
+	if (editing.value) commitText()
+})
+
+// A note just created opens ready to write.
+onMounted(() => {
+	if (props.data.autoEdit) startEdit()
+})
 </script>
 
 <template>
 	<div
-		class="rounded-lg shadow-md border relative overflow-hidden flex flex-col"
-		:class="{ 'ring-2 ring-primary': selected }"
-		:style="{
-			background: data.color ?? NOTE_DEFAULT_BG,
-			borderColor: NOTE_BORDER,
-			width: `${data.width}px`,
-			height: `${data.height}px`,
-		}"
-		@dblclick="editing = true"
+		ref="root"
+		class="bg-warning/10 border-warning/40 text-toned relative flex flex-col overflow-hidden rounded-sm border shadow-sm backdrop-blur-sm"
+		:class="{ 'ring-warning ring-2': selected || editing }"
+		:style="{ width: `${data.width}px`, height: `${data.height}px` }"
+		@dblclick="startEdit"
 	>
-		<!-- Header strip: gives the note a recognisable sticky-note frame and
-		     hosts the delete affordance without overlapping the text. -->
 		<div
-			class="flex items-center justify-between h-6 px-2 shrink-0 cursor-grab"
-			:style="{
-				background: NOTE_HEADER_BG,
-				borderBottom: `1px solid ${NOTE_HEADER_BORDER}`,
-			}"
+			class="text-warning flex h-7 shrink-0 cursor-grab items-center gap-1.5 px-3"
 		>
-			<UIcon
-				name="i-ph-note-pencil"
-				class="size-3.5"
-				:style="{ color: NOTE_ACCENT }"
-			/>
+			<UIcon name="i-ph-note-pencil" class="size-3.5" />
+			<span
+				class="font-mono text-[10px] font-semibold uppercase tracking-[0.12em]"
+			>
+				{{ $t('dms_database.diagram.notes.label') }}
+			</span>
 			<button
-				v-if="selected"
+				v-if="selected || editing"
 				type="button"
-				class="p-0.5 rounded hover:bg-black/10"
-				:style="{ color: NOTE_ACCENT }"
+				class="nodrag hover:bg-warning/20 ml-auto rounded p-0.5"
 				:aria-label="$t('dms_database.diagram.notes.delete')"
+				:title="$t('dms_database.diagram.notes.delete')"
+				@pointerdown.stop
 				@click.stop="data.onDelete(data.noteId)"
 			>
-				<UIcon name="i-ph-x" class="size-3.5" />
+				<UIcon name="i-ph-trash" class="size-3.5" />
 			</button>
 		</div>
-		<!-- Body. Fixed dark ink so the text stays readable on the light note in
-		     any app theme (the previous theme-aware text colour washed out). -->
 		<textarea
 			v-if="editing"
+			ref="textarea"
 			v-model="textBuffer"
-			class="flex-1 w-full bg-transparent text-sm p-3 resize-none outline-none"
-			:style="{ color: NOTE_INK }"
+			class="nodrag nowheel w-full flex-1 resize-none bg-transparent px-3 pb-3 text-[12.5px] leading-normal outline-none"
 			:placeholder="$t('dms_database.diagram.notes.placeholder')"
-			autofocus
 			@blur="commitText"
-			@keydown.escape.prevent="commitText"
+			@keydown.escape.prevent.stop="commitText"
 		/>
 		<div
 			v-else
-			class="flex-1 w-full p-3 text-sm whitespace-pre-wrap break-words cursor-text overflow-auto"
-			:style="{ color: data.text ? NOTE_INK : NOTE_PLACEHOLDER_INK }"
+			class="w-full flex-1 cursor-text overflow-auto whitespace-pre-wrap break-words px-3 pb-3 text-[12.5px] leading-normal"
+			:class="data.text ? '' : 'text-dimmed'"
 		>
-			{{ data.text || $t("dms_database.diagram.notes.placeholder") }}
+			{{ data.text || $t('dms_database.diagram.notes.placeholder') }}
 		</div>
 	</div>
 </template>

package/frontend-vue/app/components/DiagramRelationEdge.vue

@@ -1,34 +1,46 @@
 <script setup lang="ts">
-import { BaseEdge, type EdgeProps, Position, getBezierPath } from "@vue-flow/core";
+import {
+	BaseEdge,
+	type EdgeProps,
+	Position,
+	getBezierPath,
+} from '@vue-flow/core'
+import { EDGE_ACTIVE_COLOR, type EdgeEnds } from '../build/diagram/graph'
 
-const props = defineProps<EdgeProps>();
+// A relation column pointing at a table. The relations of the selected table
+// are drawn in the primary colour; the others stay quiet.
+const props = defineProps<EdgeProps<EdgeEnds>>()
 
-const ARC_MIN_OFFSET = 60;
-const ARC_DY_FACTOR = 0.35;
+const edgeStyle = computed(() =>
+	props.data?.active
+		? { ...(props.style as object), stroke: EDGE_ACTIVE_COLOR, strokeWidth: 2 }
+		: props.style,
+)
+
+const ARC_MIN_OFFSET = 60
+const ARC_DY_FACTOR = 0.35
 
 function sideSign(position: Position): 1 | -1 | 0 {
-	if (position === Position.Right) return 1;
-	if (position === Position.Left) return -1;
-	return 0;
+	if (position === Position.Right) return 1
+	if (position === Position.Left) return -1
+	return 0
 }
 
 const computedPath = computed<[string, number, number]>(() => {
-	const sourceSign = sideSign(props.sourcePosition);
-	const targetSign = sideSign(props.targetPosition);
+	const sourceSign = sideSign(props.sourcePosition)
+	const targetSign = sideSign(props.targetPosition)
 	if (sourceSign !== 0 && targetSign !== 0) {
-		const dy = Math.abs(props.targetY - props.sourceY);
-		const offset = Math.max(ARC_MIN_OFFSET, dy * ARC_DY_FACTOR);
-		const cx1 = props.sourceX + sourceSign * offset;
-		const cy1 = props.sourceY;
-		const cx2 = props.targetX + targetSign * offset;
-		const cy2 = props.targetY;
-		const d = `M${props.sourceX},${props.sourceY} C${cx1},${cy1} ${cx2},${cy2} ${props.targetX},${props.targetY}`;
+		const dy = Math.abs(props.targetY - props.sourceY)
+		const offset = Math.max(ARC_MIN_OFFSET, dy * ARC_DY_FACTOR)
+		const cx1 = props.sourceX + sourceSign * offset
+		const cy1 = props.sourceY
+		const cx2 = props.targetX + targetSign * offset
+		const cy2 = props.targetY
+		const d = `M${props.sourceX},${props.sourceY} C${cx1},${cy1} ${cx2},${cy2} ${props.targetX},${props.targetY}`
 		// Label sits at the bezier midpoint (t = 0.5).
-		const labelX =
-			(props.sourceX + 3 * cx1 + 3 * cx2 + props.targetX) / 8;
-		const labelY =
-			(props.sourceY + 3 * cy1 + 3 * cy2 + props.targetY) / 8;
-		return [d, labelX, labelY];
+		const labelX = (props.sourceX + 3 * cx1 + 3 * cx2 + props.targetX) / 8
+		const labelY = (props.sourceY + 3 * cy1 + 3 * cy2 + props.targetY) / 8
+		return [d, labelX, labelY]
 	}
 	const [d, lx, ly] = getBezierPath({
 		sourceX: props.sourceX,
@@ -37,9 +49,9 @@ const computedPath = computed<[string, number, number]>(() => {
 		targetX: props.targetX,
 		targetY: props.targetY,
 		targetPosition: props.targetPosition,
-	});
-	return [d, lx, ly];
-});
+	})
+	return [d, lx, ly]
+})
 </script>
 
 <template>
@@ -48,7 +60,7 @@ const computedPath = computed<[string, number, number]>(() => {
 		:path="computedPath[0]"
 		:marker-end="markerEnd"
 		:marker-start="markerStart"
-		:style="style"
+		:style="edgeStyle"
 		:label-x="computedPath[1]"
 		:label-y="computedPath[2]"
 		:label="undefined"
@@ -56,13 +68,31 @@ const computedPath = computed<[string, number, number]>(() => {
 	/>
 	<text
 		v-if="label"
-		class="vue-flow__edge-text"
+		class="diagram-edge-label"
+		:class="{ 'diagram-edge-label--active': data?.active }"
 		:x="computedPath[1]"
 		:y="computedPath[2]"
 		text-anchor="middle"
 		dominant-baseline="middle"
-		:style="labelStyle"
 	>
 		{{ label }}
 	</text>
 </template>
+
+<style scoped>
+/* Theme tokens, with a halo of the canvas colour so the line that crosses
+   the label does not run through its letters. */
+.diagram-edge-label {
+	fill: var(--ui-text-muted);
+	stroke: var(--ui-bg-muted);
+	stroke-width: 4px;
+	stroke-linejoin: round;
+	paint-order: stroke;
+	font: 500 10.5px var(--font-mono, ui-monospace, monospace);
+	pointer-events: none;
+	user-select: none;
+}
+.diagram-edge-label--active {
+	fill: var(--ui-primary);
+}
+</style>

package/frontend-vue/app/components/DiagramStubNode.vue

@@ -1,31 +1,30 @@
 <script setup lang="ts">
-import { Handle, Position } from "@vue-flow/core";
+import { Handle, Position } from '@vue-flow/core'
 
-interface StubNodeData {
-	targetSchema: string;
-	targetTable: string;
-}
-
-defineProps<{ data: StubNodeData }>();
+import type { StubNodeData } from '../build/diagram/graph'
 
-const route = useDmsRoute();
-const router = useDmsRouter();
-
-function jumpToSchema(schemaId: string) {
-	router.replace({ query: { ...route.query, schema: schemaId } });
-}
+// A table a relation points to that is not drawn: one of another schema, or
+// one the focus leaves out. The dashed chip opens it: in its own schema's
+// diagram, or here, out of the focus.
+defineProps<{ data: StubNodeData }>()
 </script>
 
 <template>
 	<button
 		type="button"
-		class="diagram-stub-node flex items-center gap-1 px-2 py-1 rounded border border-dashed border-default bg-elevated text-xs text-muted hover:text-highlighted hover:border-primary transition-colors opacity-70 relative"
-		@click="jumpToSchema(data.targetSchema)"
+		class="diagram-stub-node border-accented bg-muted text-muted hover:border-primary hover:text-highlighted relative flex h-7 items-center gap-1.5 rounded-sm border border-dashed px-2.5 font-mono text-[11.5px] transition-colors"
+		:title="
+			$t('dms_database.diagram.stub_title', {
+				schema: data.targetSchema,
+				table: data.targetTable,
+			})
+		"
+		@click="data.onOpenSchema(data.targetSchema, data.targetTable)"
 	>
 		<Handle id="stub::left::target" type="target" :position="Position.Left" />
 		<Handle id="stub::right::target" type="target" :position="Position.Right" />
-		<UIcon name="i-ph-arrow-right" />
-		<span class="font-mono">{{ data.targetSchema }}.{{ data.targetTable }}</span>
+		<UIcon name="i-ph-arrow-square-out" class="text-dimmed size-3.5" />
+		<span>{{ data.targetSchema }}.{{ data.targetTable }}</span>
 	</button>
 </template>
 

package/frontend-vue/app/components/DiagramTableNode.vue

@@ -1,86 +1,124 @@
 <script setup lang="ts">
-import { Handle, Position } from "@vue-flow/core";
+import { Handle, Position } from '@vue-flow/core'
+import type { TableNodeData } from '../build/diagram/graph'
+import {
+	COLUMN_ROLE_CLASSES,
+	type ColumnRole,
+	describeField,
+	describeModifier,
+	isPrimaryKey,
+} from '../build/utils/fieldTypes'
 
-interface NodeData {
-	tableName: string;
-	fields: Record<string, unknown>;
-	indexes: Record<string, { fields?: string[]; multi?: boolean }>;
-	modifiers: Record<string, string[]>;
-}
+// One table of the diagram (D-09): each column with its type as mono text and
+// a neutral icon. Colour only marks structure: the primary key, and the
+// relation columns, which light up with the selected table's relations.
+
+// The canvas keeps the selection in `data.selected`: Vue Flow's own one is
+// off for tables, so one table at most is drawn selected.
+const props = defineProps<{ data: TableNodeData }>()
+
+const SIDES = ['left', 'right'] as const
+const KINDS = ['source', 'target'] as const
+const HANDLE_POSITIONS = { left: Position.Left, right: Position.Right } as const
 
-defineProps<{ data: NodeData }>();
+const relationTargets = computed(
+	() =>
+		new Map(
+			props.data.table.relations.map((relation) => [
+				relation.fromField,
+				relation,
+			]),
+		),
+)
+
+const rows = computed(() =>
+	Object.entries(props.data.table.fields).map(([name, descriptor]) => {
+		const key = isPrimaryKey(name, props.data.table.indexes ?? {})
+		const relation = relationTargets.value.get(name)
+		const role: ColumnRole = key ? 'key' : relation ? 'relation' : 'plain'
+		const type = describeField(descriptor, name)
+		return {
+			name,
+			role,
+			icon: key ? 'i-ph-key' : relation ? 'i-ph-arrow-right' : type.icon,
+			type: relation ? relation.toTable : type.label,
+			modifiers: (props.data.table.modifiers?.[name] ?? []).map(
+				describeModifier,
+			),
+			highlighted: props.data.highlighted.includes(name),
+		}
+	}),
+)
 </script>
 
 <template>
-	<div class="diagram-table-node bg-elevated border border-default rounded-lg w-60 shadow-md">
-		<!-- Fallback handles on the node body for edges that reference a non-existent field -->
-		<Handle id="__node__::left::source" type="source" :position="Position.Left" />
-		<Handle id="__node__::left::target" type="target" :position="Position.Left" />
-		<Handle id="__node__::right::source" type="source" :position="Position.Right" />
-		<Handle id="__node__::right::target" type="target" :position="Position.Right" />
+	<div
+		class="diagram-table-node bg-default w-[232px] cursor-grab rounded-md border text-xs shadow-sm transition-[opacity,border-color,box-shadow]"
+		:class="[
+			data.selected
+				? 'border-primary shadow-[0_0_0_3px_var(--ui-color-primary-500)]/20 ring-primary/30 ring-2'
+				: 'border-accented',
+			data.dimmed ? 'opacity-45' : '',
+		]"
+	>
+		<template v-for="side in SIDES" :key="side">
+			<Handle
+				v-for="kind in KINDS"
+				:id="`__node__::${side}::${kind}`"
+				:key="kind"
+				:type="kind"
+				:position="HANDLE_POSITIONS[side]"
+			/>
+		</template>
 
-		<div class="px-3 py-2 border-b border-default flex items-center gap-2">
-			<UIcon name="i-ph-table" />
-			<span class="font-mono text-sm">{{ data.tableName }}</span>
+		<div
+			class="border-default flex h-9 items-center gap-2 border-b pl-3 pr-2.5"
+		>
+			<UIcon name="i-ph-table" class="text-primary size-[15px] shrink-0" />
+			<span
+				class="text-highlighted truncate font-mono text-[12.5px] font-semibold"
+			>
+				{{ data.tableName }}
+			</span>
 		</div>
 
 		<ul class="py-1">
 			<li
-				v-for="(fieldType, fieldName) in data.fields"
-				:key="fieldName"
-				class="relative flex items-center justify-between px-3 py-1 text-sm"
+				v-for="row in rows"
+				:key="row.name"
+				class="relative flex h-6 items-center gap-1.5 pl-3 pr-2.5 font-mono"
+				:class="[
+					row.role === 'relation' ? 'text-primary' : 'text-toned',
+					row.highlighted ? 'bg-primary/10' : '',
+				]"
 			>
-				<Handle
-					:id="`${fieldName}::left::source`"
-					type="source"
-					:position="Position.Left"
-				/>
-				<Handle
-					:id="`${fieldName}::left::target`"
-					type="target"
-					:position="Position.Left"
-				/>
-				<Handle
-					:id="`${fieldName}::right::source`"
-					type="source"
-					:position="Position.Right"
+				<template v-for="side in SIDES" :key="side">
+					<Handle
+						v-for="kind in KINDS"
+						:id="`${row.name}::${side}::${kind}`"
+						:key="kind"
+						:type="kind"
+						:position="HANDLE_POSITIONS[side]"
+					/>
+				</template>
+				<UIcon
+					:name="row.icon"
+					class="size-3 shrink-0"
+					:class="
+						row.role === 'plain' ? 'text-dimmed' : COLUMN_ROLE_CLASSES[row.role]
+					"
 				/>
-				<Handle
-					:id="`${fieldName}::right::target`"
-					type="target"
-					:position="Position.Right"
+				<span class="truncate">{{ row.name }}</span>
+				<UIcon
+					v-for="modifier in row.modifiers"
+					:key="modifier.id"
+					:name="modifier.icon"
+					class="text-dimmed size-3 shrink-0"
+					:title="modifier.labelKey ? $t(modifier.labelKey) : modifier.id"
 				/>
-
-				<span class="flex items-center gap-0.5 font-mono min-w-0">
-					<UTooltip
-						v-if="isPrimaryKey(String(fieldName), data.indexes)"
-						text="Primary key"
-					>
-						<UIcon name="i-ph-key" class="text-amber-500 size-4 shrink-0" />
-					</UTooltip>
-					<template
-						v-for="modifierId in data.modifiers?.[String(fieldName)] ?? []"
-						:key="modifierId"
-					>
-						<UTooltip :text="resolveModifierIcon(modifierId).label">
-							<UIcon
-								:name="resolveModifierIcon(modifierId).icon"
-								:class="[resolveModifierIcon(modifierId).color, 'size-4 shrink-0']"
-							/>
-						</UTooltip>
-					</template>
-					<span class="truncate ml-1">{{ fieldName }}</span>
+				<span class="text-dimmed ml-auto max-w-24 truncate pl-2 text-[10.5px]">
+					{{ row.type }}
 				</span>
-
-				<UTooltip :text="inferFieldTypeIcon(fieldType, String(fieldName)).label">
-					<UIcon
-						:name="inferFieldTypeIcon(fieldType, String(fieldName)).icon"
-						:class="[
-							inferFieldTypeIcon(fieldType, String(fieldName)).color,
-							'size-4 shrink-0',
-						]"
-					/>
-				</UTooltip>
 			</li>
 		</ul>
 	</div>