@ifc-lite/viewer 1.1.6 → 1.5.0

package/src/components/viewer/ExportChangesButton.tsx

@@ -0,0 +1,195 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Dedicated button for exporting IFC with property mutations applied.
+ * Shows when there are pending changes and provides one-click export.
+ */
+
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { Download, Loader2, Check, AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useViewerStore } from '@/store';
+import { StepExporter } from '@ifc-lite/export';
+import { MutablePropertyView } from '@ifc-lite/mutations';
+import { extractPropertiesOnDemand, type IfcDataStore } from '@ifc-lite/parser';
+
+interface ExportChangesButtonProps {
+  /** Optional custom class name */
+  className?: string;
+}
+
+export function ExportChangesButton({ className }: ExportChangesButtonProps) {
+  const models = useViewerStore((s) => s.models);
+  const getMutationView = useViewerStore((s) => s.getMutationView);
+  const registerMutationView = useViewerStore((s) => s.registerMutationView);
+  const mutationVersion = useViewerStore((s) => s.mutationVersion);
+
+  // Legacy single-model support
+  const legacyIfcDataStore = useViewerStore((s) => s.ifcDataStore);
+  const legacyGeometryResult = useViewerStore((s) => s.geometryResult);
+
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportStatus, setExportStatus] = useState<'idle' | 'success' | 'error'>('idle');
+
+  // Get model info - supports both federated models and legacy single-model
+  const modelInfo = useMemo(() => {
+    // First check federated models
+    if (models.size > 0) {
+      const firstModel = models.values().next().value;
+      if (firstModel) {
+        return {
+          id: firstModel.id,
+          name: firstModel.name,
+          ifcDataStore: firstModel.ifcDataStore,
+          schemaVersion: firstModel.schemaVersion,
+        };
+      }
+    }
+    // Fall back to legacy single-model
+    if (legacyIfcDataStore && legacyGeometryResult) {
+      return {
+        id: '__legacy__',
+        name: 'model',
+        ifcDataStore: legacyIfcDataStore,
+        schemaVersion: legacyIfcDataStore.schemaVersion,
+      };
+    }
+    return null;
+  }, [models, legacyIfcDataStore, legacyGeometryResult]);
+
+  // Count mutations
+  const mutationCount = useMemo(() => {
+    if (!modelInfo) return 0;
+    const mutationView = getMutationView(modelInfo.id);
+    return mutationView?.getMutations().length || 0;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelInfo, getMutationView, mutationVersion]);
+
+  // Ensure mutation view exists
+  useEffect(() => {
+    if (!modelInfo?.ifcDataStore) return;
+
+    let mutationView = getMutationView(modelInfo.id);
+    if (mutationView) return;
+
+    const dataStore = modelInfo.ifcDataStore;
+    mutationView = new MutablePropertyView(dataStore.properties || null, modelInfo.id);
+
+    // Set up on-demand property extraction
+    if (dataStore.onDemandPropertyMap && dataStore.source?.length > 0) {
+      mutationView.setOnDemandExtractor((entityId: number) => {
+        return extractPropertiesOnDemand(dataStore as IfcDataStore, entityId);
+      });
+    }
+
+    registerMutationView(modelInfo.id, mutationView);
+  }, [modelInfo, getMutationView, registerMutationView]);
+
+  // Format date as YYYY-MM-DD
+  const formatDate = useCallback(() => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }, []);
+
+  // Generate filename from model name + date
+  const generateFilename = useCallback(() => {
+    if (!modelInfo) return 'export.ifc';
+    // Remove extension if present
+    const baseName = modelInfo.name.replace(/\.[^.]+$/, '');
+    return `${baseName}_${formatDate()}.ifc`;
+  }, [modelInfo, formatDate]);
+
+  const handleExport = useCallback(async () => {
+    if (!modelInfo) return;
+
+    setIsExporting(true);
+    setExportStatus('idle');
+
+    try {
+      const mutationView = getMutationView(modelInfo.id);
+
+      // Determine schema version
+      const schemaVersion = modelInfo.schemaVersion || 'IFC4';
+      const schema = schemaVersion.includes('2X3') ? 'IFC2X3'
+                   : schemaVersion.includes('4X3') ? 'IFC4X3'
+                   : 'IFC4';
+
+      const exporter = new StepExporter(modelInfo.ifcDataStore, mutationView || undefined);
+      const result = exporter.export({
+        schema: schema as 'IFC2X3' | 'IFC4' | 'IFC4X3',
+        includeGeometry: true,
+        applyMutations: true,
+        deltaOnly: false,
+        description: `Exported from ifc-lite with ${mutationCount} modifications`,
+        application: 'ifc-lite',
+      });
+
+      // Download the file
+      const blob = new Blob([result.content], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = generateFilename();
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      setExportStatus('success');
+
+      // Reset status after 2 seconds
+      setTimeout(() => setExportStatus('idle'), 2000);
+
+      console.log(`[ExportChangesButton] Exported ${result.stats.entityCount} entities (${result.stats.modifiedEntityCount} modified)`);
+    } catch (error) {
+      console.error('[ExportChangesButton] Export failed:', error);
+      setExportStatus('error');
+      setTimeout(() => setExportStatus('idle'), 3000);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [modelInfo, getMutationView, mutationCount, generateFilename]);
+
+  // Don't render if no model or no mutations
+  if (!modelInfo || mutationCount === 0) {
+    return null;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleExport}
+          disabled={isExporting}
+          className={className}
+        >
+          {isExporting ? (
+            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+          ) : exportStatus === 'success' ? (
+            <Check className="h-4 w-4 mr-2 text-green-500" />
+          ) : exportStatus === 'error' ? (
+            <AlertCircle className="h-4 w-4 mr-2 text-red-500" />
+          ) : (
+            <Download className="h-4 w-4 mr-2" />
+          )}
+          Export Changes
+          <Badge variant="secondary" className="ml-2 text-xs">
+            {mutationCount}
+          </Badge>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        Export IFC with {mutationCount} property changes applied
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/viewer/ExportDialog.tsx

@@ -0,0 +1,402 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Export Dialog for IFC export with property mutations
+ */
+
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import {
+  Download,
+  FileText,
+  FileJson,
+  AlertCircle,
+  Check,
+  Loader2,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/ui/alert';
+import { useViewerStore } from '@/store';
+import { StepExporter } from '@ifc-lite/export';
+import { MutablePropertyView } from '@ifc-lite/mutations';
+import { extractPropertiesOnDemand, type IfcDataStore } from '@ifc-lite/parser';
+
+type ExportFormat = 'ifc' | 'ifcx' | 'json';
+type SchemaVersion = 'IFC2X3' | 'IFC4' | 'IFC4X3';
+
+interface ExportDialogProps {
+  trigger?: React.ReactNode;
+}
+
+export function ExportDialog({ trigger }: ExportDialogProps) {
+  const models = useViewerStore((s) => s.models);
+  const dirtyModels = useViewerStore((s) => s.dirtyModels);
+  const getMutationView = useViewerStore((s) => s.getMutationView);
+  const registerMutationView = useViewerStore((s) => s.registerMutationView);
+  const getModifiedEntityCount = useViewerStore((s) => s.getModifiedEntityCount);
+  // Also get legacy single-model state for backward compatibility
+  const legacyIfcDataStore = useViewerStore((s) => s.ifcDataStore);
+  const legacyGeometryResult = useViewerStore((s) => s.geometryResult);
+
+  const [open, setOpen] = useState(false);
+  const [format, setFormat] = useState<ExportFormat>('ifc');
+  const [schema, setSchema] = useState<SchemaVersion>('IFC4');
+  const [selectedModelId, setSelectedModelId] = useState<string>('');
+  const [includeGeometry, setIncludeGeometry] = useState(true);
+  const [applyMutations, setApplyMutations] = useState(true);
+  const [deltaOnly, setDeltaOnly] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportResult, setExportResult] = useState<{ success: boolean; message: string } | null>(null);
+
+  // Get list of models with data stores - includes both federated models and legacy single-model
+  const modelList = useMemo(() => {
+    const list = Array.from(models.values()).map((m) => ({
+      id: m.id,
+      name: m.name,
+      isDirty: dirtyModels.has(m.id),
+      schemaVersion: m.schemaVersion,
+    }));
+
+    // If no models in Map but legacy data exists, add a synthetic entry
+    if (list.length === 0 && legacyIfcDataStore) {
+      list.push({
+        id: '__legacy__',
+        name: 'Current Model',
+        isDirty: false,
+        schemaVersion: legacyIfcDataStore.schemaVersion,
+      });
+    }
+
+    return list;
+  }, [models, dirtyModels, legacyIfcDataStore]);
+
+  // Select first model by default
+  useMemo(() => {
+    if (modelList.length > 0 && !selectedModelId) {
+      setSelectedModelId(modelList[0].id);
+    }
+  }, [modelList, selectedModelId]);
+
+  // Get selected model's data - supports both federated and legacy mode
+  const selectedModel = useMemo(() => {
+    if (selectedModelId === '__legacy__' && legacyIfcDataStore && legacyGeometryResult) {
+      // Return a synthetic FederatedModel-like object for legacy mode
+      return {
+        id: '__legacy__',
+        name: 'Current Model',
+        ifcDataStore: legacyIfcDataStore,
+        geometryResult: legacyGeometryResult,
+        visible: true,
+        collapsed: false,
+        schemaVersion: legacyIfcDataStore.schemaVersion,
+      };
+    }
+    return models.get(selectedModelId);
+  }, [models, selectedModelId, legacyIfcDataStore, legacyGeometryResult]);
+
+  // Ensure mutation view exists for selected model
+  useEffect(() => {
+    if (!selectedModel?.ifcDataStore || !selectedModelId) return;
+
+    // Check if mutation view already exists
+    let mutationView = getMutationView(selectedModelId);
+    if (mutationView) return;
+
+    // Create new mutation view with on-demand property extractor
+    const dataStore = selectedModel.ifcDataStore;
+    mutationView = new MutablePropertyView(dataStore.properties || null, selectedModelId);
+
+    // Set up on-demand property extraction if the data store supports it
+    if (dataStore.onDemandPropertyMap && dataStore.source?.length > 0) {
+      mutationView.setOnDemandExtractor((entityId: number) => {
+        return extractPropertiesOnDemand(dataStore as IfcDataStore, entityId);
+      });
+    }
+
+    // Register the mutation view
+    registerMutationView(selectedModelId, mutationView);
+  }, [selectedModel, selectedModelId, getMutationView, registerMutationView]);
+
+  const modifiedCount = useMemo(() => {
+    return getModifiedEntityCount();
+  }, [getModifiedEntityCount]);
+
+  const handleExport = useCallback(async () => {
+    if (!selectedModel) return;
+
+    setIsExporting(true);
+    setExportResult(null);
+
+    try {
+      const mutationView = getMutationView(selectedModelId);
+
+      if (format === 'ifc') {
+        const exporter = new StepExporter(selectedModel.ifcDataStore, mutationView || undefined);
+        const result = exporter.export({
+          schema,
+          includeGeometry,
+          applyMutations,
+          deltaOnly,
+          description: `Exported from ifc-lite with ${modifiedCount} modifications`,
+          application: 'ifc-lite',
+        });
+
+        // Download the file
+        const blob = new Blob([result.content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${selectedModel.name.replace(/\.[^.]+$/, '')}_modified.ifc`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+        setExportResult({
+          success: true,
+          message: `Exported ${result.stats.entityCount} entities (${result.stats.modifiedEntityCount} modified)`,
+        });
+      } else if (format === 'ifcx') {
+        // Export as IFCX JSON
+        const data = {
+          format: 'ifcx',
+          modelId: selectedModelId,
+          modelName: selectedModel.name,
+          schemaVersion: 'IFC5',
+          mutations: mutationView?.getMutations() || [],
+          exportedAt: new Date().toISOString(),
+        };
+
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${selectedModel.name.replace(/\.[^.]+$/, '')}_modified.ifcx`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+        setExportResult({
+          success: true,
+          message: `Exported IFCX with ${mutationView?.getMutations().length || 0} mutations`,
+        });
+      } else {
+        // Export mutations as JSON
+        const mutations = mutationView?.getMutations() || [];
+        const data = {
+          version: 1,
+          modelId: selectedModelId,
+          modelName: selectedModel.name,
+          mutations,
+          exportedAt: new Date().toISOString(),
+        };
+
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${selectedModel.name.replace(/\.[^.]+$/, '')}_changes.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+        setExportResult({
+          success: true,
+          message: `Exported ${mutations.length} changes as JSON`,
+        });
+      }
+    } catch (error) {
+      console.error('Export failed:', error);
+      setExportResult({
+        success: false,
+        message: `Export failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      });
+    } finally {
+      setIsExporting(false);
+    }
+  }, [selectedModel, selectedModelId, format, schema, includeGeometry, applyMutations, deltaOnly, getMutationView, modifiedCount]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="sm">
+            <Download className="h-4 w-4 mr-2" />
+            Export IFC
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Download className="h-5 w-5" />
+            Export IFC File
+          </DialogTitle>
+          <DialogDescription>
+            Export your model with property modifications applied
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          {/* Model selector */}
+          <div className="flex items-center gap-4">
+            <Label className="w-32">Model</Label>
+            <Select value={selectedModelId} onValueChange={setSelectedModelId}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select model" />
+              </SelectTrigger>
+              <SelectContent>
+                {modelList.map((m) => (
+                  <SelectItem key={m.id} value={m.id}>
+                    <div className="flex items-center gap-2">
+                      {m.name}
+                      {m.isDirty && (
+                        <Badge variant="secondary" className="text-xs">
+                          modified
+                        </Badge>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Format selector */}
+          <div className="flex items-center gap-4">
+            <Label className="w-32">Format</Label>
+            <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ifc">
+                  <div className="flex items-center gap-2">
+                    <FileText className="h-4 w-4" />
+                    IFC (STEP)
+                  </div>
+                </SelectItem>
+                <SelectItem value="ifcx">
+                  <div className="flex items-center gap-2">
+                    <FileJson className="h-4 w-4" />
+                    IFCX (JSON)
+                  </div>
+                </SelectItem>
+                <SelectItem value="json">
+                  <div className="flex items-center gap-2">
+                    <FileJson className="h-4 w-4" />
+                    Changes Only (JSON)
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Schema version (for IFC format) */}
+          {format === 'ifc' && (
+            <div className="flex items-center gap-4">
+              <Label className="w-32">Schema</Label>
+              <Select value={schema} onValueChange={(v) => setSchema(v as SchemaVersion)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="IFC2X3">IFC2X3</SelectItem>
+                  <SelectItem value="IFC4">IFC4</SelectItem>
+                  <SelectItem value="IFC4X3">IFC4X3</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* Options */}
+          {format === 'ifc' && (
+            <>
+              <div className="flex items-center justify-between">
+                <Label>Include Geometry</Label>
+                <Switch checked={includeGeometry} onCheckedChange={setIncludeGeometry} />
+              </div>
+              <div className="flex items-center justify-between">
+                <Label>Apply Property Changes</Label>
+                <Switch checked={applyMutations} onCheckedChange={setApplyMutations} />
+              </div>
+              <div className="flex items-center justify-between">
+                <Label>Export Changes Only (Delta)</Label>
+                <Switch checked={deltaOnly} onCheckedChange={setDeltaOnly} />
+              </div>
+            </>
+          )}
+
+          {/* Stats */}
+          {modifiedCount > 0 && (
+            <Alert>
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Pending Changes</AlertTitle>
+              <AlertDescription>
+                {modifiedCount} entities have been modified
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Export result */}
+          {exportResult && (
+            <Alert variant={exportResult.success ? 'default' : 'destructive'}>
+              {exportResult.success ? (
+                <Check className="h-4 w-4" />
+              ) : (
+                <AlertCircle className="h-4 w-4" />
+              )}
+              <AlertTitle>{exportResult.success ? 'Success' : 'Error'}</AlertTitle>
+              <AlertDescription>{exportResult.message}</AlertDescription>
+            </Alert>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleExport} disabled={isExporting || !selectedModel}>
+            {isExporting ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Exporting...
+              </>
+            ) : (
+              <>
+                <Download className="h-4 w-4 mr-2" />
+                Export
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}