Val Town Code SearchReturn to Val Town

26
27// Initialize the application
28function init() {
29  setupCanvas();
30  setupEventListeners();
34
35// Set up the canvas
36function setupCanvas() {
37  const container = document.getElementById('canvas-container');
38  const canvas = document.getElementById('diagram-canvas');
41  
42  // Set canvas size to match container
43  function resizeCanvas() {
44    canvas.width = container.clientWidth;
45    canvas.height = container.clientHeight;
52
53// Set up event listeners
54function setupEventListeners() {
55  // Tool buttons
56  document.getElementById('add-entity').addEventListener('click', () => setActiveTool('entity'));
85
86// Set the active tool
87function setActiveTool(tool) {
88  // Remove active class from all tools
89  document.querySelectorAll('.tool-btn').forEach(btn => {
119
120// Handle mouse down on canvas
121function handleCanvasMouseDown(e) {
122  const rect = state.canvas.getBoundingClientRect();
123  const x = e.clientX - rect.left;
165
166// Handle mouse move on canvas
167function handleCanvasMouseMove(e) {
168  const rect = state.canvas.getBoundingClientRect();
169  const x = e.clientX - rect.left;
193
194// Handle mouse up on canvas
195function handleCanvasMouseUp(e) {
196  const rect = state.canvas.getBoundingClientRect();
197  const x = e.clientX - rect.left;
213
214// Find element at position
215function findElementAt(x, y) {
216  // Check in reverse order to select top elements first
217  const ids = Object.keys(state.elements).reverse();
237
238// Create a new entity
239function createEntity(x, y) {
240  const id = generateId();
241  state.elements[id] = {
254
255// Create a new relationship
256function createRelationship(x, y) {
257  const id = generateId();
258  state.elements[id] = {
272
273// Create a new attribute
274function createAttribute(x, y) {
275  const id = generateId();
276  state.elements[id] = {
289
290// Create a connection between elements
291function createConnection(sourceId, targetId) {
292  const id = generateId();
293  const source = state.elements[sourceId];
327
328// Delete an element
329function deleteElement(id) {
330  const element = state.elements[id];
331  
371
372// Select an element
373function selectElement(id) {
374  state.selectedElement = id;
375  render();
382
383// Show properties modal for an element
384function showPropertiesModal(element) {
385  const modal = document.getElementById('properties-modal');
386  const modalTitle = document.getElementById('modal-title');
475
476// Close properties modal
477function closePropertiesModal() {
478  const modal = document.getElementById('properties-modal');
479  modal.classList.add('hidden');
481
482// Save properties from modal
483function savePropertiesModal() {
484  if (!state.selectedElement) return;
485  
511
512// Render the diagram
513function render() {
514  const ctx = state.ctx;
515  const canvas = state.canvas;
537
538// Draw grid
539function drawGrid() {
540  const ctx = state.ctx;
541  const canvas = state.canvas;
561
562// Draw an element
563function drawElement(element) {
564  const ctx = state.ctx;
565  const isSelected = state.selectedElement === element.id;
617
618// Draw a rectangle (for entities)
619function drawRectangle(x, y, width, height, className, isSelected) {
620  const ctx = state.ctx;
621  
637
638// Draw a diamond (for relationships)
639function drawDiamond(x, y, width, height, className, isSelected) {
640  const ctx = state.ctx;
641  const centerX = x + width / 2;
664
665// Draw an ellipse (for attributes)
666function drawEllipse(centerX, centerY, radiusX, radiusY, className, isSelected, attributeType) {
667  const ctx = state.ctx;
668  
713
714// Draw a connection
715function drawConnection(connection) {
716  const sourceElement = state.elements[connection.sourceId];
717  const targetElement = state.elements[connection.targetId];
773
774// Calculate intersection point of a line with an element's boundary
775function calculateIntersection(start, end, element) {
776  // For simplicity, we'll use a rectangular boundary for all elements
777  const left = element.position.x;
870
871// Calculate position for a label along a line
872function calculateLabelPosition(start, end, ratio) {
873  return {
874    x: start.x + (end.x - start.x) * ratio,
878
879// Generate a unique ID
880function generateId() {
881  return 'el_' + Math.random().toString(36).substr(2, 9);
882}
883
884// Create a new diagram
885function createNewDiagram() {
886  if (state.isDirty && !confirm('You have unsaved changes. Create a new diagram anyway?')) {
887    return;
900
901// Save the current diagram
902async function saveDiagram() {
903  const diagramName = document.getElementById('diagram-name').value || 'Untitled Diagram';
904  const diagramContent = JSON.stringify({ elements: state.elements });
942
943// Load saved diagrams
944async function loadSavedDiagrams() {
945  try {
946    const response = await fetch('/api/diagrams');
995
996// Load a diagram
997async function loadDiagram(id) {
998  if (state.isDirty && !confirm('You have unsaved changes. Load another diagram anyway?')) {
999    return;
1026
1027// Delete a diagram from the server
1028async function deleteDiagramFromServer(id) {
1029  try {
1030    const response = await fetch(\`/api/diagrams/\${id}\`, {
1051
1052// Export the diagram as an image
1053function exportDiagram() {
1054  // Create a temporary canvas with white background
1055  const tempCanvas = document.createElement('canvas');
1098
1099// Update status message
1100function updateStatusMessage(message = '') {
1101  const statusElement = document.getElementById('status-message');
1102  

16 * Get all diagrams
17 */
18export async function getDiagrams(): Promise<Diagram[]> {
19  const result = await sqlite.execute(
20    `SELECT * FROM ${DIAGRAMS_TABLE} ORDER BY updated_at DESC`
26 * Get a single diagram by ID
27 */
28export async function getDiagram(id: number): Promise<Diagram | null> {
29  const result = await sqlite.execute(
30    `SELECT * FROM ${DIAGRAMS_TABLE} WHERE id = ?`,
42 * Save a diagram (create or update)
43 */
44export async function saveDiagram(
45  name: string, 
46  content: string, 
70 * Delete a diagram
71 */
72export async function deleteDiagram(id: number): Promise<void> {
73  await sqlite.execute(
74    `DELETE FROM ${DIAGRAMS_TABLE} WHERE id = ?`,