angular-data-mapper 1.0.0

package/projects/ngx-data-mapper/src/lib/components/schema-tree/schema-tree.component.html

@@ -0,0 +1,82 @@
+<div class="schema-tree" [class.source]="side === 'source'" [class.target]="side === 'target'">
+  <div class="schema-header">
+    @if (showSchemaName) {
+      <span class="schema-title">{{ schema.name }}</span>
+    }
+    <span class="schema-badge">{{ side === 'source' ? 'Source' : 'Target' }}</span>
+  </div>
+
+  <div class="schema-fields" #schemaFields>
+    <ng-container *ngTemplateOutlet="fieldList; context: { fields: schema.fields, level: 0 }"></ng-container>
+  </div>
+</div>
+
+<ng-template #fieldList let-fields="fields" let-level="level">
+  @for (field of fields; track trackByFieldId($index, field)) {
+    <div
+      #fieldItem
+      class="field-item"
+      [class.mapped]="isFieldMapped(field)"
+      [class.has-default]="hasDefaultValue(field)"
+      [class.has-children]="field.children && field.children.length > 0"
+      [class.expanded]="field.expanded"
+      [class.is-array]="field.type === 'array'"
+      [class.draggable]="side === 'source' && ((!field.children || field.children.length === 0) || field.type === 'array') && !isEndpointDragMode()"
+      [class.droppable]="(side === 'target' && ((!field.children || field.children.length === 0) || field.type === 'array' || field.type === 'object')) || (side === 'source' && isSourceEndpointDragging() && ((!field.children || field.children.length === 0) || field.type === 'array'))"
+      [class.endpoint-drop-target]="(side === 'source' && isSourceEndpointDragging()) || (side === 'target' && isTargetEndpointDragging())"
+      [class.clickable]="side === 'target' && (!isFieldMapped(field) || hasDefaultValue(field)) && field.type !== 'object' && field.type !== 'array'"
+      [style.padding-left.px]="16 + level * 20"
+      [attr.data-field-id]="field.id"
+      (mousedown)="onDragStart($event, field)"
+      (mouseup)="onDrop($event, field)"
+      (click)="onFieldClick($event, field)"
+    >
+      <!-- Expand/Collapse button for nested objects -->
+      @if (field.children && field.children.length > 0) {
+        <button class="expand-btn" (click)="toggleExpand(field, $event)">
+          <mat-icon>{{ field.expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>
+        </button>
+      } @else {
+        <span class="expand-placeholder"></span>
+      }
+
+      <!-- Field type icon -->
+      <mat-icon class="type-icon" [matTooltip]="field.type">{{ getTypeIcon(field.type) }}</mat-icon>
+
+      <!-- Field name with array indicator -->
+      <span class="field-name">{{ field.name }}@if (field.type === 'array') {<span class="array-indicator">[]</span>}</span>
+
+      <!-- Mapping indicator -->
+      @if (isFieldMapped(field)) {
+        <span class="mapping-indicator" [matTooltip]="getFieldMappingCount(field) + ' mapping(s)'">
+          <mat-icon>{{ field.type === 'array' ? 'loop' : 'link' }}</mat-icon>
+          @if (getFieldMappingCount(field) > 1) {
+            <span class="mapping-count">{{ getFieldMappingCount(field) }}</span>
+          }
+        </span>
+      }
+
+      <!-- Default value indicator -->
+      @if (hasDefaultValue(field)) {
+        <span class="default-indicator" [matTooltip]="'Default: ' + getDefaultValueDisplay(field)">
+          <mat-icon>edit</mat-icon>
+          <span class="default-value">{{ getDefaultValueDisplay(field) }}</span>
+        </span>
+      }
+
+      <!-- Connection point - show for leaf nodes, arrays, and objects (on target for array-to-object) -->
+      @if ((!field.children || field.children.length === 0) || field.type === 'array' || (side === 'target' && field.type === 'object')) {
+        <div class="connection-point" [class.source]="side === 'source'" [class.target]="side === 'target'" [class.array-point]="field.type === 'array'" [class.object-point]="field.type === 'object'">
+          <span class="point-dot"></span>
+        </div>
+      }
+    </div>
+
+    <!-- Nested children -->
+    @if (field.children && field.children.length > 0 && field.expanded) {
+      <div class="nested-fields">
+        <ng-container *ngTemplateOutlet="fieldList; context: { fields: field.children, level: level + 1 }"></ng-container>
+      </div>
+    }
+  }
+</ng-template>

package/projects/ngx-data-mapper/src/lib/components/schema-tree/schema-tree.component.scss

@@ -0,0 +1,352 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.schema-tree {
+  background: var(--data-mapper-panel-bg, var(--surface-card, #ffffff));
+  border-radius: var(--data-mapper-panel-border-radius, 12px);
+  border: var(--data-mapper-panel-border, none);
+  box-shadow: var(--data-mapper-panel-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
+  overflow: hidden;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &.source {
+    .schema-header {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    }
+
+    .connection-point {
+      right: 8px;
+    }
+  }
+
+  &.target {
+    .schema-header {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    }
+
+    .connection-point {
+      left: 8px;
+    }
+  }
+}
+
+.schema-header {
+  padding: 16px 20px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.schema-title {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.schema-badge {
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 10px;
+  border-radius: 20px;
+}
+
+.schema-fields {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px 0;
+  min-height: 0;
+}
+
+.field-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  gap: 8px;
+  cursor: default;
+  transition: background-color 0.15s ease;
+  position: relative;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--surface-hover, #f8fafc);
+  }
+
+  &.mapped {
+    background-color: var(--surface-mapped, #f0fdf4);
+
+    &:hover {
+      background-color: #dcfce7;
+    }
+  }
+
+  &.draggable {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &:hover .connection-point .point-dot {
+      transform: scale(1.3);
+      background: #6366f1;
+    }
+  }
+
+  &.droppable {
+    cursor: pointer;
+
+    &:hover .connection-point .point-dot {
+      transform: scale(1.3);
+      background: #10b981;
+    }
+  }
+
+  &.endpoint-drop-target {
+    background-color: #fef3c7;
+
+    &:hover {
+      background-color: #fde68a;
+    }
+
+    .connection-point .point-dot {
+      animation: pulse-drop-target 1s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes pulse-drop-target {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
+  }
+  50% {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.2);
+  }
+}
+
+.expand-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #94a3b8;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background-color: #e2e8f0;
+    color: #475569;
+  }
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.expand-placeholder {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.type-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  color: #64748b;
+  flex-shrink: 0;
+}
+
+.field-name {
+  flex: 1;
+  font-size: 14px;
+  color: #1e293b;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  .array-indicator {
+    color: #f59e0b;
+    font-weight: 600;
+    margin-left: 2px;
+  }
+}
+
+.field-item.is-array {
+  background-color: #fffbeb;
+
+  &:hover {
+    background-color: #fef3c7;
+  }
+
+  &.mapped {
+    background-color: #fef3c7;
+  }
+
+  .type-icon {
+    color: #f59e0b;
+  }
+}
+
+.connection-point.array-point {
+  .point-dot {
+    background: #f59e0b;
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
+  }
+}
+
+.connection-point.object-point {
+  .point-dot {
+    background: #8b5cf6;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
+  }
+}
+
+.mapping-indicator {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  color: #10b981;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  .mapping-count {
+    font-size: 11px;
+    font-weight: 600;
+    background: #10b981;
+    color: white;
+    padding: 1px 5px;
+    border-radius: 10px;
+    min-width: 16px;
+    text-align: center;
+  }
+}
+
+.connection-point {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.source {
+    right: 8px;
+  }
+
+  &.target {
+    left: 8px;
+  }
+}
+
+.point-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #cbd5e1;
+  transition: all 0.2s ease;
+  box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.3);
+
+  .mapped & {
+    background: #10b981;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
+  }
+}
+
+.nested-fields {
+  border-left: 2px solid #e2e8f0;
+  margin-left: 28px;
+}
+
+.field-item.has-default {
+  background-color: #eff6ff;
+
+  &:hover {
+    background-color: #dbeafe;
+  }
+}
+
+.field-item.clickable {
+  cursor: pointer;
+
+  &:hover:not(.has-default) {
+    background-color: #f1f5f9;
+
+    &::after {
+      content: 'Click to set default';
+      position: absolute;
+      right: 32px;
+      font-size: 11px;
+      color: #64748b;
+      font-style: italic;
+    }
+  }
+
+  &.has-default:hover {
+    &::after {
+      content: 'Click to edit';
+      position: absolute;
+      right: 32px;
+      font-size: 11px;
+      color: #3b82f6;
+      font-style: italic;
+    }
+  }
+}
+
+.default-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #3b82f6;
+  font-size: 12px;
+  background: #dbeafe;
+  padding: 2px 8px;
+  border-radius: 4px;
+  max-width: 100px;
+  overflow: hidden;
+
+  mat-icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+  }
+
+  .default-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+}

package/projects/ngx-data-mapper/src/lib/components/schema-tree/schema-tree.component.ts

@@ -0,0 +1,225 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  ViewChild,
+  ViewChildren,
+  QueryList,
+  AfterViewInit,
+  OnDestroy,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SchemaField, FieldMapping, DefaultValue } from '../../models/schema.model';
+import { MappingService } from '../../services/mapping.service';
+
+export interface FieldPositionEvent {
+  field: SchemaField;
+  element: HTMLElement;
+  rect: DOMRect;
+}
+
+@Component({
+  selector: 'schema-tree',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, MatTooltipModule],
+  templateUrl: './schema-tree.component.html',
+  styleUrl: './schema-tree.component.scss',
+})
+export class SchemaTreeComponent implements AfterViewInit, OnDestroy {
+  @Input() schema!: { name: string; fields: SchemaField[] };
+  @Input() side: 'source' | 'target' = 'source';
+  @Input() mappings: FieldMapping[] = [];
+  @Input() defaultValues: DefaultValue[] = [];
+  @Input() showSchemaName: boolean = true;
+
+  @Output() fieldDragStart = new EventEmitter<FieldPositionEvent>();
+  @Output() fieldDragEnd = new EventEmitter<void>();
+  @Output() fieldDrop = new EventEmitter<FieldPositionEvent>();
+  @Output() sourceDrop = new EventEmitter<FieldPositionEvent>(); // For endpoint dragging - drop on source field
+  @Output() fieldPositionsChanged = new EventEmitter<Map<string, DOMRect>>();
+  @Output() fieldDefaultValueClick = new EventEmitter<FieldPositionEvent>();
+
+  @ViewChild('schemaFields') schemaFieldsContainer!: ElementRef<HTMLDivElement>;
+  @ViewChildren('fieldItem') fieldItems!: QueryList<ElementRef>;
+
+  private mappingService = inject(MappingService);
+  private resizeObserver!: ResizeObserver;
+  private scrollHandler = () => this.onScroll();
+
+  ngAfterViewInit(): void {
+    this.emitFieldPositions();
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.emitFieldPositions();
+    });
+
+    this.fieldItems.changes.subscribe(() => {
+      this.emitFieldPositions();
+    });
+
+    // Add scroll listener to update connector positions
+    if (this.schemaFieldsContainer?.nativeElement) {
+      this.schemaFieldsContainer.nativeElement.addEventListener('scroll', this.scrollHandler, { passive: true });
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.schemaFieldsContainer?.nativeElement) {
+      this.schemaFieldsContainer.nativeElement.removeEventListener('scroll', this.scrollHandler);
+    }
+  }
+
+  onScroll(): void {
+    this.emitFieldPositions();
+  }
+
+  emitFieldPositions(): void {
+    setTimeout(() => {
+      const positions = new Map<string, DOMRect>();
+      this.fieldItems.forEach((item) => {
+        const fieldId = item.nativeElement.getAttribute('data-field-id');
+        if (fieldId) {
+          positions.set(fieldId, item.nativeElement.getBoundingClientRect());
+        }
+      });
+      this.fieldPositionsChanged.emit(positions);
+    });
+  }
+
+  toggleExpand(field: SchemaField, event: Event): void {
+    event.stopPropagation();
+    field.expanded = !field.expanded;
+    setTimeout(() => this.emitFieldPositions(), 50);
+  }
+
+  onDragStart(event: MouseEvent, field: SchemaField): void {
+    if (this.side !== 'source') return;
+
+    // Don't start new drag if endpoint dragging is in progress
+    const dragState = this.mappingService.currentDragState();
+    if (dragState.isDragging) return;
+
+    const element = event.currentTarget as HTMLElement;
+    const rect = element.getBoundingClientRect();
+
+    this.fieldDragStart.emit({ field, element, rect });
+  }
+
+  isEndpointDragMode(): boolean {
+    const dragState = this.mappingService.currentDragState();
+    return dragState.isDragging && (dragState.dragMode === 'move-source' || dragState.dragMode === 'move-target');
+  }
+
+  isSourceEndpointDragging(): boolean {
+    const dragState = this.mappingService.currentDragState();
+    return dragState.isDragging && dragState.dragMode === 'move-source';
+  }
+
+  isTargetEndpointDragging(): boolean {
+    const dragState = this.mappingService.currentDragState();
+    return dragState.isDragging && dragState.dragMode === 'move-target';
+  }
+
+  onDragOver(event: DragEvent): void {
+    if (this.side === 'target') {
+      event.preventDefault();
+    }
+  }
+
+  onDrop(event: MouseEvent, field: SchemaField): void {
+    const element = event.currentTarget as HTMLElement;
+    const rect = element.getBoundingClientRect();
+
+    // Check if endpoint dragging is in progress (via MappingService drag state)
+    const dragState = this.mappingService.currentDragState();
+
+    // Handle source drop during endpoint dragging (moving source endpoint)
+    if (this.side === 'source' && dragState.isDragging && dragState.dragMode === 'move-source') {
+      this.sourceDrop.emit({ field, element, rect });
+      return;
+    }
+
+    // Handle target drop (either endpoint dragging or new mapping)
+    if (this.side === 'target') {
+      this.fieldDrop.emit({ field, element, rect });
+    }
+  }
+
+  getTypeIcon(type: string): string {
+    const icons: Record<string, string> = {
+      string: 'text_fields',
+      number: 'pin',
+      boolean: 'toggle_on',
+      object: 'data_object',
+      array: 'data_array',
+      date: 'calendar_today',
+    };
+    return icons[type] || 'help_outline';
+  }
+
+  isFieldMapped(field: SchemaField): boolean {
+    if (this.side === 'source') {
+      return this.mappings.some((m) =>
+        m.sourceFields.some((sf) => sf.id === field.id)
+      );
+    } else {
+      return this.mappings.some((m) => m.targetField.id === field.id);
+    }
+  }
+
+  getFieldMappingCount(field: SchemaField): number {
+    if (this.side === 'source') {
+      return this.mappings.filter((m) =>
+        m.sourceFields.some((sf) => sf.id === field.id)
+      ).length;
+    } else {
+      const mapping = this.mappings.find((m) => m.targetField.id === field.id);
+      return mapping ? mapping.sourceFields.length : 0;
+    }
+  }
+
+  hasDefaultValue(field: SchemaField): boolean {
+    return this.defaultValues.some(d => d.targetField.id === field.id);
+  }
+
+  getDefaultValueDisplay(field: SchemaField): string {
+    const defaultValue = this.defaultValues.find(d => d.targetField.id === field.id);
+    if (!defaultValue || defaultValue.value === null) return '';
+
+    if (defaultValue.targetField.type === 'date' && defaultValue.value) {
+      return new Date(defaultValue.value as string).toLocaleDateString();
+    }
+    return String(defaultValue.value);
+  }
+
+  onFieldClick(event: MouseEvent, field: SchemaField): void {
+    // Only handle clicks on target fields that are leaf nodes (no children) or have specific types
+    if (this.side !== 'target') return;
+    if (field.type === 'object' || field.type === 'array') return;
+
+    // Don't trigger if the field is already mapped (unless it has a default value)
+    if (this.isFieldMapped(field) && !this.hasDefaultValue(field)) return;
+
+    // Allow clicking on unmapped fields OR fields with default values (to edit them)
+    if (!this.isFieldMapped(field) || this.hasDefaultValue(field)) {
+      event.stopPropagation();
+
+      const element = event.currentTarget as HTMLElement;
+      const rect = element.getBoundingClientRect();
+
+      this.fieldDefaultValueClick.emit({ field, element, rect });
+    }
+  }
+
+  trackByFieldId(index: number, field: SchemaField): string {
+    return field.id;
+  }
+}