@merchi/product-editor 0.1.9

package/src/components/ProductImageGallery.tsx

@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from "framer-motion";
+import ImageNavButton from "./ImageNavButton";
+import ImageZoomModal from "./ImageZoomModal";
+import { ZoomIn } from 'grommet-icons';
+import { useProductEditor } from '../context/ProductEditorContext';
+import { useSwipeNavigate } from '../hooks/useSwipeNavigate';
+
+interface ImageGalleryProps {
+  fallbackImageUrl?: string;
+}
+
+const ProductImageGallery: React.FC<ImageGalleryProps> = ({ fallbackImageUrl = '' }) => {
+  const { product } = useProductEditor();
+  const { featureImage = null, images = [], name: productName = 'Loading...' } = product;
+  const _images = featureImage ? [featureImage, ...images] : images;
+  const allImages = _images.map(image => {
+    if (!image) return { viewUrl: '/blueman_white.png' };
+    return { viewUrl: image.viewUrl };
+  });
+  const totalImages = allImages.length;
+  // image browser related states
+  const [slideDirection, setSlideDirection] = useState<'left' | 'right'>('right');
+  const [isZoomModalOpen, setIsZoomModalOpen] = useState(false);
+  const [isImageLoading, setIsImageLoading] = useState(true);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentImageUrl, setCurrentImageUrl] = useState(
+    allImages[currentIndex]?.viewUrl || fallbackImageUrl || '/blueman_white.png'
+  );
+
+  useEffect(() => {
+    // set current image URL (for normal image mode)
+    if (allImages && allImages.length > 0) {
+      setCurrentImageUrl(allImages[currentIndex]?.viewUrl || '/blueman_white.png');
+    }
+  }, [allImages, currentIndex, fallbackImageUrl]);
+
+  const handleNavigation = (newDirection: 'left' | 'right') => {
+    if (!allImages || allImages.length <= 1) return;
+
+    setSlideDirection(newDirection === 'left' ? 'left' : 'right');
+
+    let newIndex;
+    const actualTotalImages = Math.min(totalImages, allImages.length);
+
+    if (newDirection === 'left') {
+      newIndex = currentIndex === 0 ? actualTotalImages - 1 : currentIndex - 1;
+    } else {
+      newIndex = currentIndex === actualTotalImages - 1 ? 0 : currentIndex + 1;
+    }
+
+    setCurrentIndex(newIndex);
+    setCurrentImageUrl(allImages[newIndex]?.viewUrl || '/blueman_white.png');
+  };
+
+  const handleThumbnailClick = (index: number) => {
+    setCurrentIndex(index);
+    setCurrentImageUrl(allImages[index]?.viewUrl || '/blueman_white.png');
+  };
+
+  // Use the swipe hook
+  const swipeHandlers = useSwipeNavigate({
+    onSwipeLeft: () => handleNavigation('right'),
+    onSwipeRight: () => handleNavigation('left'),
+  });
+
+  const slideVariants = {
+    enter: (direction: 'left' | 'right') => ({
+      x: direction === 'left' ? -1000 : 1000,
+      opacity: 0
+    }),
+    center: {
+      zIndex: 1,
+      x: 0,
+      opacity: 1
+    },
+    exit: (direction: 'left' | 'right') => ({
+      zIndex: 0,
+      x: direction === 'left' ? 1000 : -1000,
+      opacity: 0
+    })
+  };
+
+  return (
+    <>
+      <div className="image-gallery-container relative">
+        <div
+          className="image-container overflow-hidden"
+        >
+          <AnimatePresence initial={false} custom={slideDirection}>
+            <motion.div
+              key={currentIndex}
+              custom={slideDirection}
+              variants={slideVariants}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              transition={{
+                x: { type: "spring", stiffness: 300, damping: 30 },
+                opacity: { duration: 0.2 }
+              }}
+              className="image-slide"
+              {...swipeHandlers}
+            >
+              <img
+                src={currentImageUrl}
+                alt={productName || "Product Image"}
+                className={`gallery-image ${isImageLoading ? '' : 'image-loaded'}`}
+                onLoad={() => setIsImageLoading(false)}
+              />
+              {isImageLoading && (
+                <div className="loading-indicator">
+                  <div className="loading-spinner"></div>
+                </div>
+              )}
+            </motion.div>
+          </AnimatePresence>
+
+          <button
+            onClick={() => setIsZoomModalOpen(true)}
+            className="zoom-button"
+            type="button"
+          >
+            <ZoomIn className="zoom-icon" />
+          </button>
+        </div>
+        {allImages.length > 1 && (
+          <div className="nav-buttons-container">
+            <ImageNavButton
+              direction="left"
+              onClick={() => handleNavigation('left')}
+            />
+            <ImageNavButton
+              direction="right"
+              onClick={() => handleNavigation('right')}
+            />
+          </div>
+        )}
+      </div>
+
+      {allImages.length > 1 && (
+        <div className="thumbnails-container">
+          <div className="thumbnails-row">
+            {allImages.slice(0, 5).map((image, index) => {
+              const imageSrc = image.viewUrl || "/blueman_white.png";
+              const isSelected = index === currentIndex;
+
+              return (
+                <button
+                  key={index}
+                  onClick={() => handleThumbnailClick(index)}
+                  className={`thumbnail-button ${isSelected ? 'selected' : ''}`}
+                  type="button"
+                >
+                  <img
+                    src={imageSrc}
+                    loading="lazy"
+                    alt={`Product Image ${index + 1}`}
+                    className="thumbnail-image"
+                  />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+      <ImageZoomModal
+        isOpen={isZoomModalOpen}
+        onClose={() => setIsZoomModalOpen(false)}
+        imageUrl={currentImageUrl}
+        productName={productName}
+        totalImages={allImages.length}
+        currentIndex={currentIndex}
+        allImages={allImages}
+      />
+    </>
+  );
+};
+
+export default ProductImageGallery;

package/src/components/ProductPreviews.tsx

@@ -0,0 +1,243 @@
+import React, { useEffect, useState, useRef } from 'react';
+import ImageZoomModal from './ImageZoomModal';
+import '../styles/ProductEditor.css';
+import '../styles/BottomPreviewDisplay.css';
+import { useProductEditor } from '../context/ProductEditorContext';
+import { mapPreviewsWithRendered } from '../utils/draftTemplateUtils';
+import { renderDraftPreviewsWithLayers } from '../utils/psdRenderUtils';
+
+interface BottomPreviewDisplayProps { }
+
+const ProductPreviews: React.FC<BottomPreviewDisplayProps> = () => {
+  const {
+    draftTemplates,
+    draftPreviews,
+    loadingPreviews,
+    renderedDraftPreviews,
+  } = useProductEditor();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedPreviewIndex, setSelectedPreviewIndex] = useState<number>(0);
+  const [renderedPreviews, setRenderedPreviews] = useState<{ draftPreviewId: number | undefined; pngDataUrl: string }[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  // Use refs instead of state to track processed data without causing re-renders
+  const processedPreviewIdsRef = useRef<Set<number | undefined>>(new Set());
+  // Track which template versions we've already processed
+  const processedTemplateVersionsRef = useRef<Map<number, string>>(new Map());
+
+  // For debugging
+  const renderCountRef = useRef(0);
+  // Track if this is first mount
+  const isFirstMountRef = useRef(true);
+
+  // When mappedPreviews or renderedDraftPreviews changes, update our rendered PNGs
+  useEffect(() => {
+    // Skip first render to avoid processing before renderedDraftPreviews are available
+    if (isFirstMountRef.current) {
+      isFirstMountRef.current = false;
+      return;
+    }
+
+    renderCountRef.current++;
+
+    const processPreviewsWithLayers = async () => {
+
+      // Skip if we're already processing or if we don't have previews
+      if (isProcessing || !draftPreviews || draftPreviews.length === 0) {
+        return;
+      }
+
+      // Map previews with their rendered layers
+      const mappedPreviews = mapPreviewsWithRendered(draftTemplates, draftPreviews, renderedDraftPreviews);
+
+      // Skip if there are no mappedPreviews to process
+      if (!mappedPreviews || mappedPreviews.length === 0) {
+        return;
+      }
+
+      // Check if renderedDraftPreviews have changed compared to what we've processed before
+      let changedTemplateIds = new Set<number>();
+      renderedDraftPreviews.forEach(rdp => {
+        const templateId = rdp.templateId;
+        const templateVersion = rdp.draft; // Use the image data URL as a version identifier
+        const previousVersion = processedTemplateVersionsRef.current.get(templateId);
+
+        if (previousVersion !== templateVersion) {
+          changedTemplateIds.add(templateId);
+          // Update the stored version
+          processedTemplateVersionsRef.current.set(templateId, templateVersion);
+        }
+      });
+
+      // Only process previews that haven't been processed yet or have changed
+      const previewsToProcess = mappedPreviews.filter(mp => {
+        const previewId = mp.draftPreview.id;
+
+        // Always process if we haven't processed this preview yet
+        if (!processedPreviewIdsRef.current.has(previewId)) {
+          return true;
+        }
+
+        // If no templates have changed, skip reprocessing
+        if (changedTemplateIds.size === 0) {
+          return false;
+        }
+
+        // Check if this preview uses any templates that have changed
+        const shouldProcess = mp.draftPreviewLayers.some(layer =>
+          layer.renderedLayer && changedTemplateIds.has(layer.renderedLayer.templateId));
+
+        return shouldProcess;
+      });
+
+      // Skip if there's nothing new to process
+      if (previewsToProcess.length === 0) {
+        return;
+      }
+
+      setIsProcessing(true);
+
+      try {
+        // Process previews with our new function
+        const processedResults = await renderDraftPreviewsWithLayers(previewsToProcess);
+
+        // Update our rendered previews state
+        setRenderedPreviews(prevRendered => {
+          const newRendered = [...prevRendered];
+
+          processedResults.forEach(result => {
+            const existingIndex = newRendered.findIndex(
+              r => r.draftPreviewId === result.draftPreviewId
+            );
+
+            if (existingIndex !== -1) {
+              // Update existing preview
+              newRendered[existingIndex] = result;
+            } else {
+              // Add new preview
+              newRendered.push(result);
+            }
+          });
+
+          return newRendered;
+        });
+
+        // Update our processed IDs ref (not state)
+        processedResults.forEach(result => {
+          if (result.draftPreviewId !== undefined) {
+            processedPreviewIdsRef.current.add(result.draftPreviewId);
+          }
+        });
+      } catch (error) {
+        console.error('Failed to process previews with layers:', error);
+      } finally {
+        setIsProcessing(false);
+      }
+    };
+
+    processPreviewsWithLayers();
+  }, [draftTemplates, draftPreviews, renderedDraftPreviews, isProcessing]);
+
+  // One-time initialization to handle initial rendering of previews 
+  // when component mounts and renderedDraftPreviews are available
+  useEffect(() => {
+    if (draftPreviews?.length > 0 && renderedDraftPreviews?.length > 0 && renderedPreviews.length === 0) {
+      const mappedPreviews = mapPreviewsWithRendered(draftTemplates, draftPreviews, renderedDraftPreviews);
+
+      if (mappedPreviews?.length > 0) {
+        (async () => {
+          setIsProcessing(true);
+          try {
+            const processedResults = await renderDraftPreviewsWithLayers(mappedPreviews);
+
+            // Store initial results
+            setRenderedPreviews(processedResults);
+
+            // Mark these previews as processed
+            processedResults.forEach(result => {
+              if (result.draftPreviewId !== undefined) {
+                processedPreviewIdsRef.current.add(result.draftPreviewId);
+              }
+            });
+
+            // Store initial template versions
+            renderedDraftPreviews.forEach(rdp => {
+              processedTemplateVersionsRef.current.set(rdp.templateId, rdp.draft);
+            });
+
+          } catch (error) {
+            console.error('[Initialization] Error processing previews:', error);
+          } finally {
+            setIsProcessing(false);
+          }
+        })();
+      }
+    }
+  }, [draftPreviews, renderedDraftPreviews, draftTemplates, renderedPreviews.length]);
+
+  const openModal = (index: number) => {
+    setSelectedPreviewIndex(index);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  // Determine the URL to display for each preview
+  const previewUrlsForDisplay = draftPreviews.length > 0
+    ? draftPreviews.map(preview => {
+      // If we have a rendered PNG for this preview, use it
+      const renderedPreview = renderedPreviews.find(rp => rp.draftPreviewId === preview.id);
+      return renderedPreview?.pngDataUrl || '';
+    })
+    : renderedDraftPreviews.map(preview => {
+      // If we have a rendered PNG for this preview, use it
+      return preview.canvasPreview;
+    });
+
+  const previews = draftPreviews?.length > 0 ? draftPreviews : renderedDraftPreviews;
+  return (
+    <>
+      {!isModalOpen && (
+        <div className="bottom-preview-section">
+          <div className="preview-images">
+            {previews.map((preview: any, index) => loadingPreviews || isProcessing ? (
+              <div key={`loading-${preview.id || index}`} className='preview-image-box'>
+                <div className="preview-image-box-loading-spinner" />
+              </div>
+            ) : (
+              <div
+                key={preview.id || `preview-${index}`}
+                className="preview-image-box"
+                onClick={() => openModal(index)}
+                style={{
+                  backgroundImage: `url(${previewUrlsForDisplay[index] || preview.file?.viewUrl || ''})`,
+                  backgroundSize: 'contain',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundPosition: 'center center'
+                }}
+                title={`Preview ${index + 1}`}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      <ImageZoomModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        imageUrl={previewUrlsForDisplay[selectedPreviewIndex] || (previews[selectedPreviewIndex] as any)?.file?.viewUrl || ''}
+        productName="Preview"
+        totalImages={previews.length}
+        currentIndex={selectedPreviewIndex}
+        allImages={previews.map((preview: any, index) => ({
+          ...preview,
+          key: preview.id || `modal-preview-${index}`
+        }))}
+      />
+    </>
+  );
+};
+
+export default ProductPreviews; 

package/src/components/TextToolbar.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Select from 'react-select';
+import { ChromePicker, ColorResult } from 'react-color';
+import { useProductEditor } from '../context/ProductEditorContext';
+import { FontOption } from '../config/fontConfig';
+import { customStyles } from '../styles/textToolbarSelectStyles';
+import '../styles/TextToolbar.css';
+import { FormatButtons } from './FormatButtons';
+import { AlignMenu } from './AlignMenu';
+
+const TextToolbar: React.FC = () => {
+  const {
+    selectedTextObject,
+    updateSelectedText,
+    fontOptions,
+    colorPalette,
+  } = useProductEditor();
+  const [displayColorPicker, setDisplayColorPicker] = useState(false);
+  const [pickerMode, setPickerMode] = useState<'palette' | 'custom'>('palette');
+  const colorPickerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target as Node)) {
+        setDisplayColorPicker(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  if (!selectedTextObject || !updateSelectedText) {
+    return null;
+  }
+
+  const currentFontValue = selectedTextObject.fontFamily || 'Nunito';
+  const currentColor = typeof selectedTextObject.fill === 'string' ? selectedTextObject.fill : '#000000';
+
+  const handleFontChange = (selectedOption: FontOption | null) => {
+    if (selectedOption) {
+      updateSelectedText({ fontFamily: selectedOption.value });
+    }
+  };
+
+  const handlePaletteColorClick = (color: string) => {
+    updateSelectedText({ fill: color });
+    setDisplayColorPicker(false);
+    setPickerMode('palette');
+  };
+
+  const handleCustomColorChange = (color: ColorResult) => {
+    updateSelectedText({ fill: color.hex });
+  };
+
+  const handleSwatchClick = () => {
+    const currentlyVisible = displayColorPicker;
+    setDisplayColorPicker(!currentlyVisible);
+    if (!currentlyVisible) {
+      setPickerMode('palette');
+    }
+  };
+
+  const handleCustomTriggerClick = () => {
+    setPickerMode('custom');
+    setDisplayColorPicker(true);
+  };
+
+  const currentFontOption = fontOptions.find(option => option.value === currentFontValue) || fontOptions[0];
+
+  return (
+    <div className="text-toolbar">
+      <Select<FontOption>
+        options={fontOptions}
+        styles={customStyles}
+        value={currentFontOption}
+        onChange={handleFontChange}
+        isSearchable={true}
+        placeholder="Select or search font..."
+        className="react-select-container"
+        classNamePrefix="react-select"
+      />
+
+      <div className="color-picker-trigger" onClick={handleSwatchClick} title="Change text color">
+        <div
+          className="color-picker-swatch"
+          style={{
+            backgroundColor: currentColor,
+            borderRadius: '50%',
+            width: '28px',
+            height: '28px',
+            minWidth: '28px',
+            minHeight: '28px',
+            flexShrink: 0
+          }}
+        />
+        <span className="color-picker-label">Color</span>
+      </div>
+
+      {displayColorPicker && (
+        <div className="color-picker-container" ref={colorPickerRef}>
+          <div className="color-picker-popover">
+            {pickerMode === 'palette' ? (
+              <div className="palette-grid">
+                {colorPalette.flat().map((color, index) => {
+                  if (color === null) {
+                    return (
+                      <button
+                        key="custom-trigger"
+                        className="palette-trigger-swatch"
+                        onClick={handleCustomTriggerClick}
+                        title="Choose custom color"
+                      >
+                        +
+                      </button>
+                    );
+                  } else {
+                    return (
+                      <button
+                        key={`${color}-${index}`}
+                        className="palette-swatch"
+                        style={{ backgroundColor: color }}
+                        onClick={() => handlePaletteColorClick(color)}
+                        title={color}
+                      />
+                    );
+                  }
+                })}
+              </div>
+            ) : (
+              <>
+                <ChromePicker
+                  color={currentColor}
+                  onChange={handleCustomColorChange}
+                  disableAlpha={true}
+                  styles={{
+                    default: {
+                      picker: {
+                        boxShadow: 'none',
+                        width: '250px'
+                      }
+                    }
+                  }}
+                />
+                <button
+                  className="color-picker-back-btn"
+                  onClick={() => setPickerMode('palette')}
+                >
+                  Back to Palette
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      <FormatButtons />
+      <AlignMenu />
+    </div>
+  );
+};
+
+export default TextToolbar;

package/src/components/Toolbar.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Apps, View, Trash, Layer } from 'grommet-icons';
+import { useProductEditor } from '../context/ProductEditorContext';
+import { addTextToCanvas } from '../utils/canvasUtils';
+import '../styles/Toolbar.css';
+
+export default function Toolbar() {
+  const {
+    canvas,
+    width,
+    setShowGrid,
+    showGrid,
+    height,
+    showPreview,
+    togglePreview,
+    showLayerPanel,
+    toggleLayerPanel,
+    deleteObject,
+    selectedObjectId,
+    renderedDraftPreviews
+  } = useProductEditor();
+
+  // Add handleAddText function before the return statement
+  const handleAddText = () => {
+    if (!canvas) return;
+    addTextToCanvas(canvas, width, height);
+  };
+
+  const toggleGrid = () => setShowGrid(!showGrid);
+
+  // Handle delete button click
+  const handleDelete = () => {
+    if (!canvas) return;
+    const activeObject = canvas.getActiveObject();
+    if (activeObject) {
+      deleteObject(activeObject);
+    }
+  };
+
+  // Check if previews are available
+  const hasPreview = renderedDraftPreviews && renderedDraftPreviews.length > 0;
+
+  return (
+    <>
+      {/* Grid toggle button */}
+      <div className="grid-toggle">
+        <div
+          className={`toolbar-button ${showGrid ? 'active' : ''}`}
+          onClick={toggleGrid}
+        >
+          <Apps width={24} height={24} />
+          <span>{showGrid ? 'Hide Grid' : 'Show Grid'}</span>
+        </div>
+      </div>
+
+      {/* Preview toggle button */}
+      <div className="preview-toggle">
+        <div
+          className={`toolbar-button ${showPreview && hasPreview ? 'active' : ''} ${!hasPreview ? 'disabled' : ''}`}
+          onClick={hasPreview ? togglePreview : undefined}
+        >
+          <View width={24} height={24} />
+          <span>{hasPreview && showPreview ? 'Hide Preview' : 'Show Preview'}</span>
+        </div>
+      </div>
+
+      {/* Layer button */}
+      <div
+        className={`toolbar-button ${showLayerPanel ? 'active' : ''}`}
+        onClick={toggleLayerPanel}
+      >
+        <Layer width={24} height={24} />
+        <span>Layer</span>
+      </div>
+
+      {/* Delete button */}
+      <div
+        className={`toolbar-button ${!selectedObjectId ? 'disabled' : ''}`}
+        onClick={handleDelete}
+      >
+        <Trash width={24} height={24} />
+        <span>Delete</span>
+      </div>
+    </>
+  );
+}

package/src/config/colorConfig.ts

@@ -0,0 +1,7 @@
+export const defaultPalette: (string | null)[][] = [
+  [null, '#000000', '#434343', '#666666', '#999999', '#CCCCCC', '#D9D9D9', '#EFEFEF'],
+  ['#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF'],
+  ['#AEA1FF', '#FDA1FF', '#CF329A', '#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC'],
+  ['#0693E3', '#EB144C', '#F78DA7', '#9900EF', '#B80000', '#DB3E00', '#FCC400', '#27724D'],
+  ['#607D8B', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548']
+];