@ifc-lite/viewer 1.1.6 → 1.5.0

package/src/components/viewer/TitleBlockEditor.tsx

@@ -0,0 +1,437 @@
+/* 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/. */
+
+/**
+ * TitleBlockEditor - Modal dialog for editing title block fields
+ *
+ * Allows users to:
+ * - Edit field values (project name, drawing number, etc.)
+ * - Add/remove custom fields
+ * - Configure field properties (label, auto-populate)
+ * - Add revision entries
+ */
+
+import React, { useCallback, useState, useMemo } from 'react';
+import { Plus, Trash2, Upload, Calendar, Hash, FileText, User } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { useViewerStore } from '@/store';
+import type { TitleBlockField, RevisionEntry } from '@ifc-lite/drawing-2d';
+
+interface TitleBlockEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+// Icon mapping for common field types
+const FIELD_ICONS: Record<string, React.ReactNode> = {
+  'project-name': <FileText className="h-4 w-4" />,
+  'drawing-title': <FileText className="h-4 w-4" />,
+  'drawing-number': <Hash className="h-4 w-4" />,
+  revision: <Hash className="h-4 w-4" />,
+  scale: <Hash className="h-4 w-4" />,
+  date: <Calendar className="h-4 w-4" />,
+  'drawn-by': <User className="h-4 w-4" />,
+  'checked-by': <User className="h-4 w-4" />,
+  'sheet-number': <Hash className="h-4 w-4" />,
+};
+
+// Standard field IDs
+const STANDARD_FIELD_IDS = [
+  'project-name',
+  'drawing-title',
+  'drawing-number',
+  'revision',
+  'scale',
+  'date',
+  'drawn-by',
+  'checked-by',
+  'sheet-number',
+];
+
+export function TitleBlockEditor({ open, onOpenChange }: TitleBlockEditorProps): React.ReactElement {
+  const activeSheet = useViewerStore((s) => s.activeSheet);
+  const updateTitleBlockField = useViewerStore((s) => s.updateTitleBlockField);
+  const addTitleBlockField = useViewerStore((s) => s.addTitleBlockField);
+  const removeTitleBlockField = useViewerStore((s) => s.removeTitleBlockField);
+  const setTitleBlockLogo = useViewerStore((s) => s.setTitleBlockLogo);
+  const addRevision = useViewerStore((s) => s.addRevision);
+  const removeRevision = useViewerStore((s) => s.removeRevision);
+
+  // Local state for new field form
+  const [newFieldLabel, setNewFieldLabel] = useState('');
+  const [showNewFieldForm, setShowNewFieldForm] = useState(false);
+
+  // Local state for new revision form
+  const [newRevision, setNewRevision] = useState({
+    revision: '',
+    date: new Date().toLocaleDateString(),
+    description: '',
+    author: '',
+  });
+  const [showRevisionForm, setShowRevisionForm] = useState(false);
+
+  // Group fields by category
+  const fieldGroups = useMemo(() => {
+    if (!activeSheet) return { standard: [], custom: [] };
+
+    const standard: TitleBlockField[] = [];
+    const custom: TitleBlockField[] = [];
+
+    for (const field of activeSheet.titleBlock.fields) {
+      if (STANDARD_FIELD_IDS.includes(field.id)) {
+        standard.push(field);
+      } else {
+        custom.push(field);
+      }
+    }
+
+    return { standard, custom };
+  }, [activeSheet]);
+
+  // Handle field value change
+  const handleFieldChange = useCallback((fieldId: string, value: string) => {
+    updateTitleBlockField(fieldId, value);
+  }, [updateTitleBlockField]);
+
+  // Add new custom field
+  const handleAddField = useCallback(() => {
+    if (!newFieldLabel.trim()) return;
+
+    // Find max row from existing fields
+    const maxRow = activeSheet?.titleBlock.fields.reduce(
+      (max, f) => Math.max(max, f.row ?? 0),
+      0
+    ) ?? 0;
+
+    const newField: TitleBlockField = {
+      id: `custom-${Date.now()}`,
+      label: newFieldLabel.trim(),
+      value: '',
+      editable: true,
+      autoPopulate: false,
+      fontSize: 3,
+      fontWeight: 'normal',
+      row: maxRow + 1,
+      col: 0,
+      colSpan: 2,
+    };
+
+    addTitleBlockField(newField);
+    setNewFieldLabel('');
+    setShowNewFieldForm(false);
+  }, [newFieldLabel, activeSheet, addTitleBlockField]);
+
+  // Handle logo upload
+  const handleLogoUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const dataUrl = event.target?.result as string;
+      setTitleBlockLogo({
+        source: dataUrl,
+        widthMm: 30,
+        heightMm: 15,
+        position: 'top-left',
+      });
+    };
+    reader.readAsDataURL(file);
+  }, [setTitleBlockLogo]);
+
+  // Add revision entry
+  const handleAddRevision = useCallback(() => {
+    if (!newRevision.revision || !newRevision.description) return;
+
+    addRevision({
+      revision: newRevision.revision,
+      date: newRevision.date || new Date().toLocaleDateString(),
+      description: newRevision.description,
+      author: newRevision.author,
+    });
+
+    setNewRevision({
+      revision: '',
+      date: new Date().toLocaleDateString(),
+      description: '',
+      author: '',
+    });
+    setShowRevisionForm(false);
+  }, [newRevision, addRevision]);
+
+  if (!activeSheet) return <></>;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Edit Title Block</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Standard Fields */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+              Standard Fields
+            </h3>
+            <div className="grid gap-3">
+              {fieldGroups.standard.map((field) => (
+                <div key={field.id} className="grid grid-cols-[120px_1fr] items-center gap-3">
+                  <div className="flex items-center gap-2 text-sm">
+                    {FIELD_ICONS[field.id] || <FileText className="h-4 w-4" />}
+                    <span className="truncate">{field.label}</span>
+                  </div>
+                  <Input
+                    value={field.value}
+                    onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                    placeholder={`Enter ${field.label.toLowerCase()}...`}
+                    className="h-8"
+                    disabled={!field.editable}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Custom Fields */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+                Custom Fields
+              </h3>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowNewFieldForm(true)}
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Add Field
+              </Button>
+            </div>
+
+            {showNewFieldForm && (
+              <div className="flex gap-2 p-3 bg-muted/30 rounded-lg">
+                <Input
+                  value={newFieldLabel}
+                  onChange={(e) => setNewFieldLabel(e.target.value)}
+                  placeholder="Field label..."
+                  className="h-8 flex-1"
+                  autoFocus
+                />
+                <Button size="sm" onClick={handleAddField} disabled={!newFieldLabel.trim()}>
+                  Add
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setShowNewFieldForm(false);
+                    setNewFieldLabel('');
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+
+            {fieldGroups.custom.length === 0 && !showNewFieldForm ? (
+              <div className="text-sm text-muted-foreground text-center py-4">
+                No custom fields yet
+              </div>
+            ) : (
+              <div className="grid gap-2">
+                {fieldGroups.custom.map((field) => (
+                  <div key={field.id} className="flex items-center gap-2">
+                    <div className="grid grid-cols-[120px_1fr] items-center gap-3 flex-1">
+                      <span className="text-sm truncate">{field.label}</span>
+                      <Input
+                        value={field.value}
+                        onChange={(e) => handleFieldChange(field.id, e.target.value)}
+                        placeholder={`Enter ${field.label.toLowerCase()}...`}
+                        className="h-8"
+                      />
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      className="text-destructive hover:text-destructive"
+                      onClick={() => removeTitleBlockField(field.id)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Logo */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+              Company Logo
+            </h3>
+            <div className="flex items-center gap-4">
+              {activeSheet.titleBlock.logo ? (
+                <div className="flex items-center gap-3">
+                  <div className="w-16 h-10 bg-muted rounded flex items-center justify-center overflow-hidden">
+                    <img
+                      src={activeSheet.titleBlock.logo.source}
+                      alt="Logo"
+                      className="max-w-full max-h-full object-contain"
+                    />
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setTitleBlockLogo(null)}
+                  >
+                    Remove
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <label className="cursor-pointer">
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleLogoUpload}
+                    />
+                    <div className="flex items-center gap-2 px-3 py-2 border rounded-md text-sm hover:bg-muted/50 transition-colors">
+                      <Upload className="h-4 w-4" />
+                      Upload Logo
+                    </div>
+                  </label>
+                  <span className="text-xs text-muted-foreground">
+                    PNG, JPG, or SVG
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Revisions */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+                Revision History
+              </h3>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowRevisionForm(true)}
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Add Revision
+              </Button>
+            </div>
+
+            {showRevisionForm && (
+              <div className="p-3 bg-muted/30 rounded-lg space-y-3">
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs">Rev #</Label>
+                    <Input
+                      value={newRevision.revision}
+                      onChange={(e) => setNewRevision(prev => ({ ...prev, revision: e.target.value }))}
+                      placeholder="A, B, 01..."
+                      className="h-8 mt-1"
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">Date</Label>
+                    <Input
+                      value={newRevision.date}
+                      onChange={(e) => setNewRevision(prev => ({ ...prev, date: e.target.value }))}
+                      placeholder="2024-01-15"
+                      className="h-8 mt-1"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <Label className="text-xs">Description</Label>
+                  <Input
+                    value={newRevision.description}
+                    onChange={(e) => setNewRevision(prev => ({ ...prev, description: e.target.value }))}
+                    placeholder="Description of changes..."
+                    className="h-8 mt-1"
+                  />
+                </div>
+                <div>
+                  <Label className="text-xs">Author</Label>
+                  <Input
+                    value={newRevision.author}
+                    onChange={(e) => setNewRevision(prev => ({ ...prev, author: e.target.value }))}
+                    placeholder="Initials..."
+                    className="h-8 mt-1"
+                  />
+                </div>
+                <div className="flex gap-2 pt-2">
+                  <Button size="sm" onClick={handleAddRevision} disabled={!newRevision.revision || !newRevision.description}>
+                    Add Revision
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      setShowRevisionForm(false);
+                      setNewRevision({ revision: '', date: new Date().toLocaleDateString(), description: '', author: '' });
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {activeSheet.revisions.length === 0 && !showRevisionForm ? (
+              <div className="text-sm text-muted-foreground text-center py-4">
+                No revisions yet
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {activeSheet.revisions.map((rev, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between px-3 py-2 bg-muted/30 rounded text-xs"
+                  >
+                    <div className="flex gap-4">
+                      <span className="font-mono font-bold">{rev.revision}</span>
+                      <span className="text-muted-foreground">{rev.date}</span>
+                      <span className="truncate">{rev.description}</span>
+                      {rev.author && <span className="text-muted-foreground">by {rev.author}</span>}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      className="h-6 w-6 text-destructive hover:text-destructive"
+                      onClick={() => removeRevision(index)}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Done
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}