react-pdf-levelup 1.0.4

package/src/components/PDF/view/SettingsPanel.tsx

@@ -0,0 +1,703 @@
+"use client"
+
+import type React from "react"
+import { useState, useEffect } from "react"
+import { X } from "lucide-react"
+
+interface SettingsPanelProps {
+  isOpen: boolean
+  onClose: () => void
+  onApplySettings: (settings: LayoutSettings) => void
+  currentCode: string
+}
+
+export interface LayoutSettings {
+  pageSize: string
+  orientation: string
+  padding: number
+  paddingTop: number
+  paddingRight: number
+  paddingBottom: number
+  paddingLeft: number
+  backgroundColor: string
+  fontFamily: string
+  fontSize: number
+  lineHeight: number
+  showPageNumbers: boolean
+  customPadding: boolean
+}
+
+const defaultSettings: LayoutSettings = {
+  pageSize: "A4",
+  orientation: "portrait",
+  padding: 72,
+  paddingTop: 72,
+  paddingRight: 72,
+  paddingBottom: 86,
+  paddingLeft: 72,
+  backgroundColor: "white",
+  fontFamily: "Times New Roman",
+  fontSize: 12,
+  lineHeight: 1.5,
+  showPageNumbers: true,
+  customPadding: false,
+}
+
+// Paper size dimensions in mm
+const paperSizes = {
+  A0: "841 × 1189 mm",
+  A1: "594 × 841 mm",
+  A2: "420 × 594 mm",
+  A3: "297 × 420 mm",
+  A4: "210 × 297 mm",
+  A5: "148 × 210 mm",
+  A6: "105 × 148 mm",
+  A7: "74 × 105 mm",
+  A8: "52 × 74 mm",
+  A9: "37 × 52 mm",
+  A10: "26 × 37 mm",
+  LETTER: "216 × 279 mm",
+  LEGAL: "216 × 356 mm",
+}
+
+const SettingsPanel: React.FC<SettingsPanelProps> = ({ isOpen, onClose, onApplySettings, currentCode }) => {
+  const [settings, setSettings] = useState<LayoutSettings>(defaultSettings)
+  const [activeSection, setActiveSection] = useState<string>("page")
+  const [previewKey, setPreviewKey] = useState(0)
+
+  // Extract current settings from code
+  useEffect(() => {
+    if (currentCode && isOpen) {
+      try {
+        const pageSizeMatch = currentCode.match(/size="([^"]+)"/)
+        if (pageSizeMatch?.[1]) {
+          setSettings((prev) => ({ ...prev, pageSize: pageSizeMatch[1] }))
+        }
+
+        const orientationMatch = currentCode.match(/orientation="([^"]+)"/)
+        if (orientationMatch?.[1]) {
+          setSettings((prev) => ({ ...prev, orientation: orientationMatch[1] }))
+        }
+
+        const paddingMatch = currentCode.match(/padding:\s*(\d+)/)
+        if (paddingMatch?.[1]) {
+          setSettings((prev) => ({
+            ...prev,
+            padding: Number.parseInt(paddingMatch[1]),
+            customPadding: false,
+          }))
+        }
+
+        // Extract individual padding values
+        const paddingProps = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"]
+        const hasCustomPadding = paddingProps.some((prop) => currentCode.includes(prop))
+
+        if (hasCustomPadding) {
+          setSettings((prev) => ({ ...prev, customPadding: true }))
+          paddingProps.forEach((prop) => {
+            const match = currentCode.match(new RegExp(`${prop}:\\s*(\\d+)`))
+            if (match?.[1]) {
+              setSettings((prev) => ({ ...prev, [prop]: Number.parseInt(match[1]) }))
+            }
+          })
+        }
+
+        const backgroundColorMatch = currentCode.match(/backgroundColor:\s*"([^"]+)"/)
+        if (backgroundColorMatch?.[1]) {
+          setSettings((prev) => ({ ...prev, backgroundColor: backgroundColorMatch[1] }))
+        }
+
+        const fontFamilyMatch = currentCode.match(/fontFamily:\s*"([^"]+)"/)
+        if (fontFamilyMatch?.[1]) {
+          setSettings((prev) => ({ ...prev, fontFamily: fontFamilyMatch[1] }))
+        }
+
+        const fontSizeMatch = currentCode.match(/fontSize:\s*(\d+)/)
+        if (fontSizeMatch?.[1]) {
+          setSettings((prev) => ({ ...prev, fontSize: Number.parseInt(fontSizeMatch[1]) }))
+        }
+
+        const lineHeightMatch = currentCode.match(/lineHeight:\s*([\d.]+)/)
+        if (lineHeightMatch?.[1]) {
+          setSettings((prev) => ({ ...prev, lineHeight: Number.parseFloat(lineHeightMatch[1]) }))
+        }
+
+        const showPageNumbers = currentCode.includes("style={styles.pageNumber}")
+        setSettings((prev) => ({ ...prev, showPageNumbers }))
+      } catch (error) {
+        console.error("Error parsing code:", error)
+      }
+    }
+  }, [currentCode, isOpen])
+
+  // Actualizar la función handleChange para aplicar cambios en tiempo real
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value, type } = e.target
+    const newValue =
+      type === "checkbox" ? (e.target as HTMLInputElement).checked : type === "number" ? Number(value) : value
+
+    const updatedSettings = { ...settings, [name]: newValue }
+    setSettings(updatedSettings)
+    setPreviewKey((prev) => prev + 1)
+
+    // Apply settings in real-time for all changes
+    onApplySettings(updatedSettings)
+  }
+
+  // Actualizar la función handleApply para aplicar inmediatamente los cambios
+  const handleApply = () => {
+    // Asegurarse de que los cambios se apliquen inmediatamente
+    onApplySettings(settings)
+    onClose()
+  }
+
+  if (!isOpen) return null
+
+  const renderPagePreview = () => {
+    // Proporciones aproximadas para la vista previa
+    const pageSizeRatios: Record<string, [number, number]> = {
+      A0: [841, 1189],
+      A1: [594, 841],
+      A2: [420, 594],
+      A3: [297, 420],
+      A4: [210, 297],
+      A5: [148, 210],
+      A6: [105,148],
+      A7: [74 , 105],
+      A8: [52, 74],
+      A9: [37, 52],
+      A10: [26, 37],
+      LETTER: [216, 279],
+      LEGAL: [216, 356],
+    }
+
+    // Obtener las proporciones para el tamaño seleccionado
+    const [width, height] = pageSizeRatios[settings.pageSize] || [210, 297] // A4 por defecto
+
+    // Calcular dimensiones manteniendo la proporción pero con un tamaño máximo
+    const maxDimension = 160
+    const ratio = width / height
+
+    let previewWidth, previewHeight
+
+    if (settings.orientation === "portrait") {
+      if (height > width) {
+        previewHeight = maxDimension
+        previewWidth = previewHeight * ratio
+      } else {
+        previewWidth = maxDimension
+        previewHeight = previewWidth / ratio
+      }
+    } else {
+      // landscape
+      if (width > height) {
+        previewWidth = maxDimension
+        previewHeight = previewWidth / ratio
+      } else {
+        previewHeight = maxDimension
+        previewWidth = previewHeight * ratio
+      }
+    }
+
+    const style: React.CSSProperties = {
+      width: settings.orientation === "portrait" ? `${previewWidth}px` : `${previewHeight}px`,
+      height: settings.orientation === "portrait" ? `${previewHeight}px` : `${previewWidth}px`,
+      backgroundColor: settings.backgroundColor,
+      border: "1px solid var(--border-color)",
+      borderRadius: "4px",
+      position: "relative",
+      overflow: "hidden",
+      transition: "all 0.3s ease",
+    }
+
+    // Calcular el escalado para los márgenes en la vista previa
+    const scale = Math.min(previewWidth, previewHeight) / 595 // 595 es aproximadamente el ancho de A4 en puntos
+
+    const contentStyle: React.CSSProperties = {
+      position: "absolute",
+      top: `${(settings.customPadding ? settings.paddingTop : settings.padding) * scale}px`,
+      right: `${(settings.customPadding ? settings.paddingRight : settings.padding) * scale}px`,
+      bottom: `${(settings.customPadding ? settings.paddingBottom : settings.padding) * scale}px`,
+      left: `${(settings.customPadding ? settings.paddingLeft : settings.padding) * scale}px`,
+      border: "1px dashed var(--border-color)",
+      borderRadius: "2px",
+      fontSize: `${settings.fontSize * scale}px`,
+      fontFamily: settings.fontFamily,
+      lineHeight: settings.lineHeight,
+    }
+
+    return (
+      <div className="preview-container" key={previewKey}>
+        <div style={style} className="page-preview">
+          <div style={contentStyle} className="content-preview">
+            <div className="preview-text">Lorem ipsum</div>
+            {settings.showPageNumbers && <div className="preview-page-number">1</div>}
+          </div>
+        </div>
+        <div className="preview-size-label">
+          {settings.pageSize} - {settings.orientation}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="settings-panel-overlay">
+      <div className="settings-panel">
+        <div className="settings-panel-header">
+          <h2>Configuración del Layout</h2>
+          <button className="btn-icon" onClick={onClose}>
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="settings-panel-nav">
+          <button
+            className={`nav-button ${activeSection === "page" ? "active" : ""}`}
+            onClick={() => setActiveSection("page")}
+          >
+            Página
+          </button>
+          <button
+            className={`nav-button ${activeSection === "margins" ? "active" : ""}`}
+            onClick={() => setActiveSection("margins")}
+          >
+            Márgenes
+          </button>
+          <button
+            className={`nav-button ${activeSection === "typography" ? "active" : ""}`}
+            onClick={() => setActiveSection("typography")}
+          >
+            Tipografía
+          </button>
+          <button
+            className={`nav-button ${activeSection === "other" ? "active" : ""}`}
+            onClick={() => setActiveSection("other")}
+          >
+            Otros
+          </button>
+        </div>
+
+        <div className="settings-panel-content">
+          <div className="settings-layout">
+            <div className="settings-controls">
+              {activeSection === "page" && (
+                <div className="settings-section">
+                  <h3>Configuración de página</h3>
+                  <div className="form-group with-preview">
+                    <label htmlFor="pageSize">Tamaño de página</label>
+                    <select
+                      id="pageSize"
+                      name="pageSize"
+                      className="form-control"
+                      value={settings.pageSize}
+                      onChange={handleChange}
+                    >
+                      {Object.entries(paperSizes).map(([size, dimensions]) => (
+                        <option key={size} value={size}>
+                          {size} ({dimensions})
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="form-group with-preview">
+                    <label htmlFor="orientation">Orientación</label>
+                    <div className="orientation-buttons">
+                      <button
+                        type="button"
+                        className={`orientation-button ${settings.orientation === "portrait" ? "active" : ""}`}
+                        onClick={() => handleChange({ target: { name: "orientation", value: "portrait" } } as any)}
+                      >
+                        Vertical
+                      </button>
+                      <button
+                        type="button"
+                        className={`orientation-button ${settings.orientation === "landscape" ? "active" : ""}`}
+                        onClick={() => handleChange({ target: { name: "orientation", value: "landscape" } } as any)}
+                      >
+                        Horizontal
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="form-group">
+                    <label htmlFor="backgroundColor">Color de fondo</label>
+                    <div className="color-input-group">
+                      <input
+                        type="color"
+                        id="backgroundColor"
+                        name="backgroundColor"
+                        value={settings.backgroundColor === "white" ? "#ffffff" : settings.backgroundColor}
+                        onChange={handleChange}
+                        className="form-control color-input"
+                      />
+                      <input
+                        type="text"
+                        value={settings.backgroundColor === "white" ? "#ffffff" : settings.backgroundColor}
+                        onChange={(e) =>
+                          handleChange({ target: { name: "backgroundColor", value: e.target.value } } as any)
+                        }
+                        className="form-control color-text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {activeSection === "margins" && (
+                <div className="settings-section">
+                  <h3>Márgenes</h3>
+                  <div className="form-group">
+                    <div className="checkbox-group">
+                      <input
+                        type="checkbox"
+                        id="customPadding"
+                        name="customPadding"
+                        checked={settings.customPadding}
+                        onChange={handleChange}
+                      />
+                      <label htmlFor="customPadding">Personalizar márgenes individuales</label>
+                    </div>
+                  </div>
+
+                  {!settings.customPadding ? (
+                    <div className="form-group with-preview">
+                      <label htmlFor="padding">Margen uniforme (puntos)</label>
+                      <input
+                        type="range"
+                        id="padding"
+                        name="padding"
+                        value={settings.padding}
+                        onChange={handleChange}
+                        className="form-control range-input"
+                        min="0"
+                        max="200"
+                      />
+                      <div className="range-value">{settings.padding}pt</div>
+                    </div>
+                  ) : (
+                    <div className="padding-grid">
+                      <div className="form-group">
+                        <label htmlFor="paddingTop">Superior</label>
+                        <input
+                          type="range"
+                          id="paddingTop"
+                          name="paddingTop"
+                          value={settings.paddingTop}
+                          onChange={handleChange}
+                          className="form-control range-input"
+                          min="0"
+                          max="200"
+                        />
+                        <div className="range-value">{settings.paddingTop}pt</div>
+                      </div>
+                      <div className="form-group">
+                        <label htmlFor="paddingRight">Derecho</label>
+                        <input
+                          type="range"
+                          id="paddingRight"
+                          name="paddingRight"
+                          value={settings.paddingRight}
+                          onChange={handleChange}
+                          className="form-control range-input"
+                          min="0"
+                          max="200"
+                        />
+                        <div className="range-value">{settings.paddingRight}pt</div>
+                      </div>
+                      <div className="form-group">
+                        <label htmlFor="paddingBottom">Inferior</label>
+                        <input
+                          type="range"
+                          id="paddingBottom"
+                          name="paddingBottom"
+                          value={settings.paddingBottom}
+                          onChange={handleChange}
+                          className="form-control range-input"
+                          min="0"
+                          max="200"
+                        />
+                        <div className="range-value">{settings.paddingBottom}pt</div>
+                      </div>
+                      <div className="form-group">
+                        <label htmlFor="paddingLeft">Izquierdo</label>
+                        <input
+                          type="range"
+                          id="paddingLeft"
+                          name="paddingLeft"
+                          value={settings.paddingLeft}
+                          onChange={handleChange}
+                          className="form-control range-input"
+                          min="0"
+                          max="200"
+                        />
+                        <div className="range-value">{settings.paddingLeft}pt</div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {activeSection === "typography" && (
+                <div className="settings-section">
+                  <h3>Tipografía</h3>
+                  <div className="form-group">
+                    <label htmlFor="fontFamily">Familia de fuente</label>
+                    <select
+                      id="fontFamily"
+                      name="fontFamily"
+                      className="form-control"
+                      value={settings.fontFamily}
+                      onChange={handleChange}
+                    >
+                      <option value="Times New Roman">Times New Roman</option>
+                      <option value="Helvetica">Helvetica</option>
+                      <option value="Courier">Courier</option>
+                      <option value="Arial">Arial</option>
+                    </select>
+                  </div>
+
+                  <div className="form-group">
+                    <label htmlFor="fontSize">Tamaño de fuente (puntos)</label>
+                    <input
+                      type="range"
+                      id="fontSize"
+                      name="fontSize"
+                      value={settings.fontSize}
+                      onChange={handleChange}
+                      className="form-control range-input"
+                      min="8"
+                      max="24"
+                    />
+                    <div className="range-value">{settings.fontSize}pt</div>
+                  </div>
+
+                  <div className="form-group">
+                    <label htmlFor="lineHeight">Interlineado</label>
+                    <input
+                      type="range"
+                      id="lineHeight"
+                      name="lineHeight"
+                      value={settings.lineHeight}
+                      onChange={handleChange}
+                      className="form-control range-input"
+                      min="1"
+                      max="3"
+                      step="0.1"
+                    />
+                    <div className="range-value">{settings.lineHeight}</div>
+                  </div>
+                </div>
+              )}
+
+              {activeSection === "other" && (
+                <div className="settings-section">
+                  <h3>Otras opciones</h3>
+                  <div className="form-group">
+                    <div className="checkbox-group">
+                      <input
+                        type="checkbox"
+                        id="showPageNumbers"
+                        name="showPageNumbers"
+                        checked={settings.showPageNumbers}
+                        onChange={handleChange}
+                      />
+                      <label htmlFor="showPageNumbers">Mostrar números de página</label>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="settings-preview">
+              <div className="preview-label">Vista previa</div>
+              {renderPagePreview()}
+            </div>
+          </div>
+        </div>
+
+        <div className="settings-panel-footer">
+          <button className="btn btn-outline" onClick={onClose}>
+            Cancelar
+          </button>
+          <button className="btn btn-primary" onClick={handleApply}>
+            Aplicar cambios
+          </button>
+        </div>
+      </div>
+
+      <style>{`
+        .settings-panel-nav {
+          display: flex;
+          gap: 1px;
+          background: var(--border-color);
+          padding: 1px;
+          margin: 0 1.5rem;
+          border-radius: var(--radius);
+        }
+
+        .nav-button {
+          flex: 1;
+          padding: 0.5rem;
+          background: var(--surface-color);
+          border: none;
+          cursor: pointer;
+          font-size: 0.875rem;
+          color: var(--text-light);
+          transition: var(--transition);
+        }
+
+        .nav-button:first-child {
+          border-top-left-radius: calc(var(--radius) - 1px);
+          border-bottom-left-radius: calc(var(--radius) - 1px);
+        }
+
+        .nav-button:last-child {
+          border-top-right-radius: calc(var(--radius) - 1px);
+          border-bottom-right-radius: calc(var(--radius) - 1px);
+        }
+
+        .nav-button.active {
+          background: var(--primary-color);
+          color: white;
+        }
+
+        .settings-layout {
+          display: grid;
+          grid-template-columns: 1fr 200px;
+          gap: 2rem;
+          height: 100%;
+        }
+
+        .settings-preview {
+          position: sticky;
+          top: 1.5rem;
+          background: var(--background-color);
+          padding: 1.5rem;
+          border-radius: var(--radius);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1rem;
+        }
+
+        .preview-label {
+          font-size: 0.875rem;
+          color: var(--text-light);
+        }
+
+        .preview-container {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .page-preview {
+          box-shadow: var(--shadow-md);
+          transition: var(--transition);
+        }
+
+        .content-preview {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+
+        .preview-text {
+          font-size: inherit;
+          color: var(--text-color);
+        }
+
+        .preview-page-number {
+          font-size: 0.75em;
+          color: var(--text-light);
+          text-align: center;
+        }
+
+        .orientation-buttons {
+          display: flex;
+          gap: 1px;
+          background: var(--border-color);
+          padding: 1px;
+          border-radius: var(--radius);
+        }
+
+        .orientation-button {
+          flex: 1;
+          padding: 0.5rem;
+          background: var(--surface-color);
+          border: none;
+          cursor: pointer;
+          font-size: 0.875rem;
+          color: var(--text-light);
+          transition: var(--transition);
+        }
+
+        .orientation-button:first-child {
+          border-top-left-radius: calc(var(--radius) - 1px);
+          border-bottom-left-radius: calc(var(--radius) - 1px);
+        }
+
+        .orientation-button:last-child {
+          border-top-right-radius: calc(var(--radius) - 1px);
+          border-bottom-right-radius: calc(var(--radius) - 1px);
+        }
+
+        .orientation-button.active {
+          background: var(--primary-color);
+          color: white;
+        }
+
+        .color-input-group {
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        .color-input {
+          width: 50px !important;
+          padding: 0 !important;
+          height: 38px;
+        }
+
+        .color-text {
+          flex: 1;
+        }
+
+        .range-input {
+          margin-bottom: 0.5rem;
+        }
+
+        .range-value {
+          font-size: 0.875rem;
+          color: var(--text-light);
+          text-align: right;
+        }
+
+        .form-group.with-preview {
+          margin-bottom: 2rem;
+        }
+
+        @media (max-width: 768px) {
+          .settings-layout {
+            grid-template-columns: 1fr;
+          }
+
+          .settings-preview {
+            display: none;
+          }
+        }
+
+        .preview-size-label {
+          font-size: 0.75rem;
+          color: var(--text-light);
+          text-align: center;
+          margin-top: 0.5rem;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default SettingsPanel
+