@merchi/product-editor 0.1.9

package/src/components/FloatingToolbar.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Toolbar from './Toolbar';
+import '../styles/FloatingToolbar.css';
+const FloatingToolbar: React.FC = () => {
+  const [position, setPosition] = useState({ x: 15, y: 15 });
+  const [isDragging, setIsDragging] = useState(false);
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const offset = useRef({ x: 0, y: 0 });
+
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!toolbarRef.current) return;
+    // Prevent dragging if clicking on buttons inside the toolbar
+    if ((e.target as HTMLElement).closest('.toolbar-button')) {
+      return;
+    }
+    setIsDragging(true);
+    const rect = toolbarRef.current.getBoundingClientRect();
+    offset.current = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    };
+    if (toolbarRef.current) {
+      toolbarRef.current.style.cursor = 'grabbing';
+    }
+    e.preventDefault();
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging || !toolbarRef.current) return;
+    let newX = e.clientX - offset.current.x;
+    let newY = e.clientY - offset.current.y;
+
+    const parent = toolbarRef.current.parentElement;
+    if (parent) {
+      const parentRect = parent.getBoundingClientRect();
+      const toolbarRect = toolbarRef.current.getBoundingClientRect();
+
+      newX = Math.max(parentRect.left, Math.min(newX, parentRect.right - toolbarRect.width));
+      newY = Math.max(parentRect.top, Math.min(newY, parentRect.bottom - toolbarRect.height));
+      newX -= parentRect.left;
+      newY -= parentRect.top;
+    }
+    setPosition({ x: newX, y: newY });
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    if (toolbarRef.current) {
+      toolbarRef.current.style.cursor = 'grab';
+    }
+  };
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    } else {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  return (
+    <div
+      ref={toolbarRef}
+      className="floating-toolbar"
+      style={{
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+      }}
+      onMouseDown={handleMouseDown}
+    >
+      <Toolbar />
+    </div>
+  );
+};
+
+export default FloatingToolbar; 

package/src/components/FormatButtons.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useProductEditor } from '../context/ProductEditorContext';
+
+export const FormatButtons: React.FC = () => {
+  const { selectedTextObject, updateSelectedText } = useProductEditor();
+  if (!selectedTextObject || !updateSelectedText) return null;
+
+  const isBold = selectedTextObject.fontWeight === 'bold';
+  const isUnderlined = selectedTextObject.underline === true;
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`toolbar-button bold-button ${isBold ? 'active' : ''}`}
+        onClick={() => updateSelectedText({ fontWeight: isBold ? 'normal' : 'bold' })}
+        title="Bold"
+      >
+        <strong>B</strong>
+      </button>
+      <button
+        type="button"
+        className={`toolbar-button underline-button ${isUnderlined ? 'active' : ''}`}
+        onClick={() => updateSelectedText({ underline: !isUnderlined })}
+        title="Underline"
+      >
+        <strong><u>U</u></strong>
+      </button>
+    </>
+  );
+}; 

package/src/components/ImageNavButton.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FormPrevious, FormNext } from "grommet-icons";
+
+interface ImageNavButtonProps {
+  direction: 'left' | 'right';
+  onClick: () => void;
+}
+
+const ImageNavButton = ({ direction, onClick }: ImageNavButtonProps) => (
+  <button
+    onClick={onClick}
+    className={`nav-button ${direction}`}
+    aria-label={direction === 'left' ? 'Previous image' : 'Next image'}
+    type="button"
+  >
+    {direction === 'left'
+      ? <FormPrevious className="nav-button-icon" color="#6b7280" />
+      : <FormNext className="nav-button-icon" color="#6b7280" />
+    }
+  </button>
+);
+
+export default ImageNavButton; 

package/src/components/ImageZoomModal.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Close, FormPrevious, FormNext } from "grommet-icons";
+import { motion, AnimatePresence, type Variants } from "framer-motion";
+import { useSwipeNavigate } from "../hooks/useSwipeNavigate";
+
+const MODAL_BODY_CLASS = 'has-preview-modal-open';
+
+interface ImageZoomModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  imageUrl: string;
+  productName: string;
+  totalImages: number;
+  currentIndex: number;
+  allImages: any[];
+}
+
+const ImageZoomModal = ({
+  isOpen,
+  onClose,
+  imageUrl,
+  productName,
+  totalImages,
+  currentIndex,
+  allImages
+}: ImageZoomModalProps) => {
+  const [modalImageIndex, setModalImageIndex] = useState(currentIndex);
+  const [currentImageUrl, setCurrentImageUrl] = useState(imageUrl);
+  const [slideDirection, setSlideDirection] = useState<'left' | 'right'>('right');
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      document.body.classList.add(MODAL_BODY_CLASS);
+      document.documentElement.classList.add(MODAL_BODY_CLASS);
+    } else {
+      document.body.style.overflow = '';
+      document.body.classList.remove(MODAL_BODY_CLASS);
+      document.documentElement.classList.remove(MODAL_BODY_CLASS);
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+      document.body.classList.remove(MODAL_BODY_CLASS);
+      document.documentElement.classList.remove(MODAL_BODY_CLASS);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    setModalImageIndex(currentIndex);
+    setCurrentImageUrl(imageUrl);
+    setSlideDirection('right');
+  }, [currentIndex, imageUrl, isOpen]);
+
+  const handlePrevious = () => {
+    setSlideDirection('left');
+    setModalImageIndex((prev) => {
+      const newIndex = (prev - 1 + totalImages) % totalImages;
+      setCurrentImageUrl(allImages[newIndex].viewUrl);
+      return newIndex;
+    });
+  };
+
+  const handleNext = () => {
+    setSlideDirection('right');
+    setModalImageIndex((prev) => {
+      const newIndex = (prev + 1) % totalImages;
+      setCurrentImageUrl(allImages[newIndex].viewUrl);
+      return newIndex;
+    });
+  };
+
+  const swipeHandlers = useSwipeNavigate({
+    onSwipeLeft: handleNext,
+    onSwipeRight: handlePrevious,
+  });
+
+  const slideVariants: Variants = {
+    enter: (direction: 'left' | 'right') => ({
+      x: direction === 'right' ? 1000 : -1000,
+      opacity: 0
+    }),
+    center: {
+      zIndex: 1,
+      x: 0,
+      opacity: 1,
+      transition: {
+        x: { type: "spring", stiffness: 300, damping: 30 },
+        opacity: { duration: 0.2 }
+      }
+    },
+    exit: (direction: 'left' | 'right') => ({
+      zIndex: 0,
+      x: direction === 'left' ? 1000 : -1000,
+      opacity: 0,
+      transition: {
+        x: { type: "spring", stiffness: 300, damping: 30 },
+        opacity: { duration: 0.05 }
+      }
+    })
+  };
+
+  if (!isOpen) return null;
+
+  // Render the modal directly at the document body level
+  return createPortal(
+    <div className="zoom-modal">
+      <div className="zoom-modal-container">
+        <button
+          onClick={onClose}
+          className="close-button"
+          type="button"
+        >
+          <Close width={36} height={36} color="white" />
+        </button>
+
+        {totalImages > 1 && (
+          <button
+            onClick={handlePrevious}
+            className="nav-button-zoom left"
+            type="button"
+          >
+            <FormPrevious width={42} height={42} color="white" />
+          </button>
+        )}
+
+        <div
+          className="zoom-image-container"
+          {...swipeHandlers}
+        >
+          <AnimatePresence initial={false} custom={slideDirection}>
+            <motion.img
+              key={modalImageIndex}
+              src={currentImageUrl}
+              alt={productName}
+              className="zoom-image"
+              loading="lazy"
+              custom={slideDirection}
+              variants={slideVariants}
+              initial="enter"
+              animate="center"
+              exit="exit"
+            />
+          </AnimatePresence>
+        </div>
+
+        {totalImages > 1 && (
+          <button
+            onClick={handleNext}
+            className="nav-button-zoom right"
+            type="button"
+          >
+            <FormNext width={42} height={42} color="white" />
+          </button>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default ImageZoomModal; 

package/src/components/LayerPanel.tsx

@@ -0,0 +1,256 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { fabric } from 'fabric';
+import { useProductEditor } from '../context/ProductEditorContext';
+import { Close, Drag, TextAlignCenter, Image as ImageIcon, Up, Down } from 'grommet-icons';
+import '../styles/LayerPanel.css';
+
+const reorder = (list: any[], startIndex: number, endIndex: number) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+const LAYER_ITEM_HEIGHT_PX = 45;
+
+const LayerPanel: React.FC = () => {
+  const { canvas, toggleLayerPanel, selectedObjectId, selectObject, isMobileView } = useProductEditor();
+  const [layers, setLayers] = useState<fabric.Object[]>([]);
+  const dragItemIndex = useRef<number | null>(null);
+  const dragOverItemIndex = useRef<number | null>(null);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const [dragOverIndexVisual, setDragOverIndexVisual] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (canvas) {
+      const updateLayers = () => {
+        const filteredObjects = canvas.getObjects().filter(obj =>
+          (obj.type === 'i-text' || obj.type === 'image') && obj.selectable
+        );
+        setLayers([...filteredObjects].reverse());
+      };
+      updateLayers();
+
+      const handleCanvasChange = () => updateLayers();
+      canvas.on('object:added', handleCanvasChange);
+      canvas.on('object:removed', handleCanvasChange);
+      canvas.on('stack:changed', handleCanvasChange);
+      canvas.on('selection:created', handleCanvasChange);
+      canvas.on('selection:updated', handleCanvasChange);
+      canvas.on('selection:cleared', handleCanvasChange);
+
+      return () => {
+        canvas.off('object:added', handleCanvasChange);
+        canvas.off('object:removed', handleCanvasChange);
+        canvas.off('stack:changed', handleCanvasChange);
+        canvas.off('selection:created', handleCanvasChange);
+        canvas.off('selection:updated', handleCanvasChange);
+        canvas.off('selection:cleared', handleCanvasChange);
+      };
+    }
+  }, [canvas]);
+
+  const getLayerInfo = (object: fabric.Object): { name: string; icon: React.ReactElement } => {
+    if (object.type === 'i-text') {
+      return {
+        name: (object as fabric.IText).text?.substring(0, 20) || 'Text',
+        icon: <TextAlignCenter size="medium" />
+      };
+    }
+    if (object.type === 'image') {
+      const imageObject = object as fabric.Image;
+      const src = imageObject.getSrc();
+      return {
+        name: (object as any).name || (src ? src.split('/').pop()?.substring(0, 20) : undefined) || 'Image',
+        icon: <img src={src} alt="layer thumb" className="layer-thumbnail" />
+      };
+    }
+    return { name: 'Unknown Layer', icon: <></> };
+  };
+
+  const handleDragStart = (e: React.DragEvent<HTMLLIElement>, index: number) => {
+    if (isMobileView) return;
+    dragItemIndex.current = index;
+    e.dataTransfer.effectAllowed = 'move';
+    setTimeout(() => setIsDraggingOver(true), 0);
+  };
+
+  const handleDragEnterItem = (e: React.DragEvent<HTMLLIElement>, index: number) => {
+    if (isMobileView) return;
+    e.preventDefault();
+    dragOverItemIndex.current = index;
+    setDragOverIndexVisual(index);
+  };
+
+  const handleDragLeaveList = (e: React.DragEvent<HTMLUListElement>) => {
+    if (isMobileView) return;
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      dragOverItemIndex.current = null;
+      setDragOverIndexVisual(null);
+    }
+  };
+
+  const handleDragOverList = (e: React.DragEvent<HTMLUListElement>) => {
+    if (isMobileView) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLUListElement>) => {
+    if (isMobileView) return;
+    e.preventDefault();
+    const sourceIndex = dragItemIndex.current;
+    const destinationIndex = dragOverItemIndex.current;
+
+    setIsDraggingOver(false);
+    setDragOverIndexVisual(null);
+    dragItemIndex.current = null;
+    dragOverItemIndex.current = null;
+
+    if (sourceIndex === null || destinationIndex === null || sourceIndex === destinationIndex) {
+      return;
+    }
+
+    const reorderedLayers = reorder(layers, sourceIndex, destinationIndex);
+
+    const objectToMove = layers[sourceIndex];
+
+    setLayers(reorderedLayers);
+
+    if (canvas && objectToMove) {
+      const totalObjects = canvas.getObjects().length;
+      const fabricTargetIndex = totalObjects - 1 - destinationIndex;
+      canvas.moveTo(objectToMove, fabricTargetIndex);
+      canvas.requestRenderAll();
+    }
+  };
+
+  const handleDragEnd = (e: React.DragEvent<HTMLLIElement>) => {
+    if (isMobileView) return;
+    setIsDraggingOver(false);
+    setDragOverIndexVisual(null);
+    dragItemIndex.current = null;
+    dragOverItemIndex.current = null;
+  };
+
+  const moveLayerUp = (index: number) => {
+    if (index <= 0 || !canvas) return;
+
+    const objectToMove = layers[index];
+    const objectAbove = layers[index - 1];
+
+    const fabricIndexOfAbove = canvas.getObjects().indexOf(objectAbove);
+    if (fabricIndexOfAbove < 0) {
+      console.error("Could not find objectAbove in canvas stack for moveLayerUp");
+      return;
+    }
+
+    const targetFabricIndex = fabricIndexOfAbove;
+    canvas.moveTo(objectToMove, targetFabricIndex);
+    setLayers(prevLayers => reorder(prevLayers, index, index - 1));
+    canvas.requestRenderAll();
+  };
+
+  const moveLayerDown = (index: number) => {
+    if (index >= layers.length - 1 || !canvas) return;
+
+    const objectToMove = layers[index];
+    const objectBelow = layers[index + 1];
+
+    const fabricIndexOfBelow = canvas.getObjects().indexOf(objectBelow);
+    if (fabricIndexOfBelow < 0) {
+      console.error("Could not find objectBelow in canvas stack for moveLayerDown");
+      return;
+    }
+
+    const targetFabricIndex = fabricIndexOfBelow;
+    canvas.moveTo(objectToMove, targetFabricIndex);
+    setLayers(prevLayers => reorder(prevLayers, index, index + 1));
+    canvas.requestRenderAll();
+  };
+
+  const handleLayerClick = (layer: fabric.Object) => {
+    selectObject(layer);
+  };
+
+  return (
+    <div className={`layer-panel`}>
+      <div className="layer-panel-header">
+        <h3>Layers</h3>
+        <button onClick={toggleLayerPanel} className="close-button" title="Close Panel">
+          <Close size="small" />
+        </button>
+      </div>
+      <ul
+        className={`layer-list ${isDraggingOver ? 'is-dragging-active' : ''}`}
+        onDragOver={handleDragOverList}
+        onDrop={handleDrop}
+        onDragLeave={handleDragLeaveList}
+      >
+        {layers.map((layer, index) => {
+          const layerInfo = getLayerInfo(layer);
+          const layerId = (layer as any).id;
+          const isSelected = layerId && layerId === selectedObjectId;
+          const isDraggingThisItem = !isMobileView && isDraggingOver && dragItemIndex.current === index;
+
+          let transformStyle = 'translateY(0px)';
+          if (!isMobileView && isDraggingOver && dragItemIndex.current !== null && dragOverIndexVisual !== null && !isDraggingThisItem) {
+            const draggingFromIndex = dragItemIndex.current;
+            const hoveringOverIndex = dragOverIndexVisual;
+
+            if (index > draggingFromIndex && index <= hoveringOverIndex) {
+              transformStyle = `translateY(-${LAYER_ITEM_HEIGHT_PX}px)`;
+            }
+            else if (index < draggingFromIndex && index >= hoveringOverIndex) {
+              transformStyle = `translateY(${LAYER_ITEM_HEIGHT_PX}px)`;
+            }
+          }
+
+          return (
+            <li
+              key={`layer-${layerId || index}`}
+              draggable={!isMobileView}
+              onDragStart={(e) => handleDragStart(e, index)}
+              onDragEnter={(e) => handleDragEnterItem(e, index)}
+              onDragEnd={handleDragEnd}
+              onClick={() => handleLayerClick(layer)}
+              className={`layer-item ${isSelected ? 'selected' : ''} ${isDraggingThisItem ? 'is-dragging-item' : ''}`}
+              style={{ transform: transformStyle }}
+            >
+              <span className="layer-icon">{layerInfo.icon}</span>
+              <span className="layer-name">{layerInfo.name}</span>
+
+              {isMobileView ? (
+                <div className="layer-mobile-controls">
+                  <button
+                    className="layer-move-button"
+                    onClick={(e) => { e.stopPropagation(); moveLayerUp(index); }}
+                    disabled={index === 0}
+                    title="Move Up"
+                  >
+                    <Up size="small" />
+                  </button>
+                  <button
+                    className="layer-move-button"
+                    onClick={(e) => { e.stopPropagation(); moveLayerDown(index); }}
+                    disabled={index === layers.length - 1}
+                    title="Move Down"
+                  >
+                    <Down size="small" />
+                  </button>
+                </div>
+              ) : (
+                <span className="layer-drag-indicator">
+                  <Drag size="small" />
+                </span>
+              )}
+            </li>
+          );
+        })}
+        {layers.length === 0 && <li className="no-layers">No layers found</li>}
+      </ul>
+    </div>
+  );
+};
+
+export default LayerPanel;

package/src/components/LoadingOverlay.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import '../styles/LoadingOverlay.css';
+
+interface LoadingOverlayProps {
+  isLoading: boolean;
+  message?: string;
+  className?: string;
+}
+
+const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
+  isLoading,
+  message = "Loading Canvas...",
+  className = ""
+}) => {
+  if (!isLoading) {
+    return null;
+  }
+
+  return (
+    <div className={`loading-overlay ${className}`}>
+      <div className="loading-spinner"></div>
+      <p>{message}</p>
+    </div>
+  );
+};
+
+export default LoadingOverlay; 

package/src/components/ProductEditor.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { useProductEditor } from '../context/ProductEditorContext';
+import FloatingToolbar from './FloatingToolbar';
+import ProductPreviews from './ProductPreviews';
+import Toolbar from './Toolbar';
+import LoadingOverlay from './LoadingOverlay';
+import TextToolbar from './TextToolbar';
+import LayerPanel from './LayerPanel';
+import '../styles/ProductEditor.css';
+
+const ProductEditor: React.FC = () => {
+  const {
+    canvasRef,
+    draftTemplates,
+    groupIndex,
+    handleTemplateChange,
+    isMobileView,
+    selectedTemplate,
+    showPreview,
+    inputName,
+    isCanvasLoading,
+    hookForm,
+    selectedTextObject,
+    showLayerPanel,
+    renderedDraftPreviews,
+  } = useProductEditor();
+
+  const disableCanvasEvents = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('.floating-toolbar') ||
+      (e.target as HTMLElement).closest('.bottom-preview-section') ||
+      (e.target as HTMLElement).closest('.mobile-bottom-toolbar')) {
+      return;
+    }
+    e.stopPropagation();
+  };
+
+  const getTemplatePreviewImage = (templateId?: number) => {
+    if (!templateId) return null;
+
+    const renderedPreview = renderedDraftPreviews?.find(preview => preview.templateId === templateId);
+    if (renderedPreview?.canvasPreview) {
+      return renderedPreview.canvasPreview;
+    }
+
+    return null;
+  };
+
+  const register = hookForm?.register;
+  return (
+    <div className="product-editor">
+      {register && (
+        <input
+          {...register(inputName)}
+          type='hidden'
+        />
+      )}
+      {!isCanvasLoading && draftTemplates.length > 0 && (
+        <div className="template-buttons">
+          {draftTemplates.map(({ template }) => (
+            <div
+              key={template.id}
+              className={`template-button ${selectedTemplate === template.id ? 'selected' : ''}`}
+              onClick={() => handleTemplateChange(template)}
+            >
+              {!isMobileView && (getTemplatePreviewImage(template.id) || (template.file && template.file.viewUrl)) && (
+                <img
+                  src={getTemplatePreviewImage(template.id) || (template.file?.viewUrl || '')}
+                  alt={template.name || `Template ${template.id}`}
+                  className="template-thumbnail"
+                />
+              )}
+              <span className="template-name">
+                {template.name || `Template ${template.id}`}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="main-editor-layout" style={{ position: 'relative' }}>
+        <LoadingOverlay isLoading={isCanvasLoading} className="canvas-loading" />
+        <div
+          className={`editor-container ${isMobileView && showPreview ? 'has-bottom-padding' : ''}`}
+        >
+          {selectedTextObject && <TextToolbar />}
+          <div className="canvas-area" onClick={disableCanvasEvents}>
+            <canvas ref={canvasRef} />
+          </div>
+          {!isMobileView && !isCanvasLoading && <FloatingToolbar />}
+          {showLayerPanel && <LayerPanel />}
+        </div>
+
+        {showPreview && <ProductPreviews />}
+      </div>
+
+      {isMobileView && !isCanvasLoading && (
+        <div className="mobile-bottom-toolbar">
+          <Toolbar />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductEditor;