@anymux/ui-kit 0.1.0

package/src/file-browser/models/ui/TreemapViewUIModel.ts

@@ -0,0 +1,350 @@
+import { makeAutoObservable } from 'mobx';
+import { TreemapViewSettings } from '../../types/ViewModeTypes';
+import { FileBrowserItem } from '../../types/FileBrowserTypes';
+
+interface TreemapOwner {
+  logger?: { info: (message: string) => void } | null;
+}
+
+export interface TreemapNode {
+  id: string;
+  name: string;
+  size: number;
+  type: 'file' | 'directory';
+  children?: TreemapNode[];
+  depth: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color?: string;
+}
+
+export class TreemapViewUIModel {
+  // Treemap settings
+  minTileSize = 10;
+  maxDepth = 3;
+  showLabels = true;
+  showSizes = true;
+  colorScheme: 'type' | 'size' | 'date' | 'custom' = 'type';
+  animationDuration = 300;
+  
+  // Layout settings
+  padding = 2;
+  borderWidth = 1;
+  aspectRatio = 1.618; // Golden ratio
+  
+  // Interaction settings
+  enableZoom = true;
+  enableDrillDown = true;
+  showTooltips = true;
+  
+  // Settings
+  settings: TreemapViewSettings = {};
+  
+  // Current state
+  currentRoot: string | null = null;
+  zoomLevel = 1;
+  
+  // Owner reference for logging
+  private owner: TreemapOwner;
+
+  constructor(owner: TreemapOwner) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+    this.initializeSettings();
+  }
+
+  get logger() {
+    return this.owner.logger;
+  }
+
+  // Computed values
+  get effectiveMinTileSize() {
+    return this.minTileSize * this.zoomLevel;
+  }
+
+  get colorSchemes() {
+    return [
+      { id: 'type', label: 'File Type', description: 'Color by file type' },
+      { id: 'size', label: 'File Size', description: 'Color by file size' },
+      { id: 'depth', label: 'Directory Depth', description: 'Color by directory depth' },
+      { id: 'extension', label: 'File Extension', description: 'Color by file extension' },
+    ];
+  }
+
+  // Actions
+  setMinTileSize = (size: number) => {
+    this.logger?.info(`setMinTileSize: ${size}`);
+    this.minTileSize = Math.max(5, Math.min(50, size));
+  };
+
+  setMaxDepth = (depth: number) => {
+    this.logger?.info(`setMaxDepth: ${depth}`);
+    this.maxDepth = Math.max(1, Math.min(10, depth));
+  };
+
+  setColorScheme = (scheme: 'type' | 'size' | 'date' | 'custom') => {
+    this.logger?.info(`setColorScheme: ${scheme}`);
+    this.colorScheme = scheme;
+  };
+
+  setPadding = (padding: number) => {
+    this.logger?.info(`setPadding: ${padding}`);
+    this.padding = Math.max(0, Math.min(10, padding));
+  };
+
+  setZoomLevel = (level: number) => {
+    this.logger?.info(`setZoomLevel: ${level}`);
+    this.zoomLevel = Math.max(0.1, Math.min(5, level));
+  };
+
+  toggleShowLabels = () => {
+    this.logger?.info(`toggleShowLabels: ${!this.showLabels}`);
+    this.showLabels = !this.showLabels;
+  };
+
+  toggleShowSizes = () => {
+    this.logger?.info(`toggleShowSizes: ${!this.showSizes}`);
+    this.showSizes = !this.showSizes;
+  };
+
+  toggleEnableZoom = () => {
+    this.logger?.info(`toggleEnableZoom: ${!this.enableZoom}`);
+    this.enableZoom = !this.enableZoom;
+  };
+
+  toggleEnableDrillDown = () => {
+    this.logger?.info(`toggleEnableDrillDown: ${!this.enableDrillDown}`);
+    this.enableDrillDown = !this.enableDrillDown;
+  };
+
+  // Navigation
+  drillDown = (nodeId: string) => {
+    if (this.enableDrillDown) {
+      this.logger?.info(`drillDown: ${nodeId}`);
+      this.currentRoot = nodeId;
+    }
+  };
+
+  drillUp = () => {
+    if (this.currentRoot) {
+      this.logger?.info('drillUp');
+      // This would need access to parent hierarchy
+      // Implementation depends on how we access the parent model's items
+      this.currentRoot = null;
+    }
+  };
+
+  resetView = () => {
+    this.logger?.info('resetView');
+    this.currentRoot = null;
+    this.zoomLevel = 1;
+  };
+
+  // Treemap calculation helpers
+  calculateTreemapLayout = (
+    items: FileBrowserItem[], 
+    width: number, 
+    height: number
+  ): TreemapNode[] => {
+    // Convert items to treemap nodes with size calculation
+    const nodes = this.itemsToTreemapNodes(items);
+    
+    // Apply squarified treemap algorithm
+    return this.squarify(nodes, width, height);
+  };
+
+  private itemsToTreemapNodes = (items: FileBrowserItem[]): TreemapNode[] => {
+    return items.map(item => ({
+      id: item.id,
+      name: item.name,
+      size: this.calculateItemSize(item),
+      type: item.type,
+      depth: 0,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      color: this.getItemColor(item),
+    }));
+  };
+
+  private calculateItemSize = (item: FileBrowserItem): number => {
+    // Default size calculation - can be overridden by providers
+    if (item.type === 'file') {
+      return item.size || 1;
+    } else {
+      // For directories, use number of children or default size
+      return item.children?.length || 10;
+    }
+  };
+
+  private getItemColor = (item: FileBrowserItem): string => {
+    switch (this.colorScheme) {
+      case 'type':
+        return item.type === 'directory' ? '#4A90E2' : '#7ED321';
+      case 'size':
+        const size = item.size || 0;
+        if (size < 1024) return '#50E3C2';
+        if (size < 1024 * 1024) return '#F5A623';
+        return '#D0021B';
+      case 'date':
+        // This would need date information from the file
+        return '#9013FE';
+      case 'custom':
+        const ext = item.name.split('.').pop()?.toLowerCase() || '';
+        return this.getExtensionColor(ext);
+      default:
+        return '#4A90E2';
+    }
+  };
+
+  private getExtensionColor = (extension: string): string => {
+    const colorMap: Record<string, string> = {
+      'js': '#F7DF1E',
+      'ts': '#3178C6',
+      'html': '#E34F26',
+      'css': '#1572B6',
+      'json': '#000000',
+      'md': '#083FA1',
+      'txt': '#808080',
+      'pdf': '#FF0000',
+      'jpg': '#4CAF50',
+      'png': '#4CAF50',
+      'gif': '#4CAF50',
+    };
+    return colorMap[extension] || '#9E9E9E';
+  };
+
+  private squarify = (nodes: TreemapNode[], width: number, height: number): TreemapNode[] => {
+    // Simplified squarified treemap algorithm
+    // In a real implementation, this would be more sophisticated
+    const totalSize = nodes.reduce((sum, node) => sum + node.size, 0);
+    
+    let x = 0;
+    let y = 0;
+    let currentRowHeight = 0;
+    
+    return nodes.map(node => {
+      const area = (node.size / totalSize) * width * height;
+      const nodeWidth = Math.sqrt(area * this.aspectRatio);
+      const nodeHeight = area / nodeWidth;
+      
+      // Simple row-based layout
+      if (x + nodeWidth > width) {
+        x = 0;
+        y += currentRowHeight;
+        currentRowHeight = 0;
+      }
+      
+      const result = {
+        ...node,
+        x,
+        y,
+        width: Math.max(this.effectiveMinTileSize, nodeWidth),
+        height: Math.max(this.effectiveMinTileSize, nodeHeight),
+      };
+      
+      x += result.width + this.padding;
+      currentRowHeight = Math.max(currentRowHeight, result.height + this.padding);
+      
+      return result;
+    });
+  };
+
+  // Settings management
+  updateSettings = (newSettings: Partial<TreemapViewSettings>) => {
+    this.logger?.info('updateSettings');
+    this.settings = { ...this.settings, ...newSettings };
+    
+    // Apply settings to local properties
+    if (newSettings.colorScheme !== undefined) {
+      // Map the TreemapViewSettings colorScheme to our internal colorScheme
+      switch (newSettings.colorScheme) {
+        case 'size':
+          this.setColorScheme('size');
+          break;
+        case 'type':
+          this.setColorScheme('type');
+          break;
+                 case 'date':
+           this.setColorScheme('date');
+           break;
+         case 'custom':
+           this.setColorScheme('custom');
+           break;
+      }
+    }
+    if (newSettings.showLabels !== undefined) {
+      this.showLabels = newSettings.showLabels;
+    }
+    if (newSettings.paddingInner !== undefined) {
+      this.setPadding(newSettings.paddingInner);
+    }
+    if (newSettings.zoomable !== undefined) {
+      this.enableZoom = newSettings.zoomable;
+    }
+  };
+
+  // Presets
+  applyPreset = (preset: 'overview' | 'detailed' | 'interactive') => {
+    this.logger?.info(`applyPreset: ${preset}`);
+    
+    switch (preset) {
+      case 'overview':
+        this.setMaxDepth(2);
+        this.setMinTileSize(15);
+        this.showLabels = false;
+        this.showSizes = false;
+        break;
+      case 'detailed':
+        this.setMaxDepth(4);
+        this.setMinTileSize(8);
+        this.showLabels = true;
+        this.showSizes = true;
+        break;
+      case 'interactive':
+        this.setMaxDepth(3);
+        this.setMinTileSize(12);
+        this.showLabels = true;
+        this.showSizes = false;
+        this.enableZoom = true;
+        this.enableDrillDown = true;
+        break;
+    }
+  };
+
+  resetToDefaults = () => {
+    this.logger?.info('resetToDefaults');
+    this.minTileSize = 10;
+    this.maxDepth = 3;
+    this.showLabels = true;
+    this.showSizes = true;
+    this.colorScheme = 'type';
+    this.padding = 2;
+    this.enableZoom = true;
+    this.enableDrillDown = true;
+    this.currentRoot = null;
+    this.zoomLevel = 1;
+    this.initializeSettings();
+  };
+
+  // Private methods
+  private initializeSettings() {
+    this.settings = {
+      colorScheme: this.colorScheme,
+      showLabels: this.showLabels,
+      zoomable: this.enableZoom,
+      defaultSortField: 'size',
+      defaultSortDirection: 'desc',
+    };
+  }
+
+  // Cleanup
+  dispose() {
+    this.logger?.info('TreemapViewUIModel disposing');
+    this.currentRoot = null;
+  }
+}