Angular Layout Builder

This document provides a concise overview for evaluating and running the Angular Layout Builder project. Built with Angular 16 and Angular CDK drag-and-drop, this lightweight builder allows users to create and manipulate layouts.

Purpose & Architecture

The application consists of the following components:

• AppComponent: The main application container.
• SidePanelComponent: A palette of draggable items, configurable via @Input() and @Output().
• CanvasComponent: The main canvas area, handling item drops, metadata, resizing, snapping, collision resolution, and history management.
• models.ts: Defines shared TypeScript interfaces (PaletteItem, WidgetMeta, LayoutItem, Snapshot).

The CanvasComponent maintains the layout state (basket, basketMeta, and layout[]) and emits layoutChange on updates. Undo/redo functionality is also implemented within this component. Simple enter/leave and transition animations are defined in src/app/animations.ts and enabled via BrowserAnimationsModule.

Implementation Notes

• Copy vs. Move: Dragging items from the SidePanelComponent to the CanvasComponent creates a copy. Reordering within the CanvasComponent moves the existing item.
• Positioning: Widget positions (x, y) are calculated from DOM bounding rectangles and snapped to a configurable gridSize. Collision detection nudges overlapping items downward.
• Resizing: Resize handles update basketMeta during pointer movement and finalize changes to layout[] on pointer up.
• Types: Shared interfaces in src/app/models.ts improve type safety, replacing most previous any usages.

Development Setup

1. Install dependencies:

   npm install

2. (Optional) Build:

   npm run build

3. Start the development server:

   • Preferred (NX):

     npm run start # or nx serve

   • Alternative (Angular CLI):

     npx ng serve

   Open http://localhost:4200 in your browser (the port may vary if 4200 is in use).

Key Files

• Palette items: src/app/app.component.ts and src/app/side-panel/side-panel.component.ts
• Canvas logic and state: src/app/canvas/canvas.component.ts
• Models and typings: src/app/models.ts

Potential Improvements

• Replace DOM-rect-based position calculations with FLIP animations for improved reflow handling.
• Persist layout snapshots using localStorage or provide import/export functionality.
• Implement unit tests for layout state transitions.

Angular CLI Information

This project was generated with Angular CLI version 16.2.16.

Development Server

Run ng serve to start a development server. Navigate to http://localhost:4200/. Changes to source files will trigger automatic reloads.

Code Scaffolding

Use ng generate component component-name to create new components. Similar commands exist for directives, pipes, services, classes, guards, interfaces, enums, and modules.

Build

Run ng build to build the project. Build artifacts are stored in the dist/ directory.

Unit Tests

Run ng test to execute unit tests using Karma.

End-to-End Tests

Run ng e2e to execute end-to-end tests. This requires adding a package that implements end-to-end testing capabilities.

Further Help

For more information on the Angular CLI, use ng help or visit the Angular CLI Overview and Command Reference page.