@deckedout/visual-editor 1.0.2 → 1.0.5

package/README.md

@@ -1,5 +1,10 @@
 # @deckedout/visual-editor
 
+[![CI](https://github.com/EIP-DeckedOut-Orga/eip-visual-editor-package/actions/workflows/ci.yml/badge.svg)](https://github.com/EIP-DeckedOut-Orga/eip-visual-editor-package/actions/workflows/ci.yml)
+[![npm version](https://badge.fury.io/js/@deckedout%2Fvisual-editor.svg)](https://badge.fury.io/js/@deckedout%2Fvisual-editor)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Coverage](https://img.shields.io/badge/coverage-95%25-brightgreen)]()
+
 A flexible, drag-and-drop visual editor built with React and Konva for creating interactive canvases with customizable elements.
 
 ## Features
@@ -12,6 +17,7 @@ A flexible, drag-and-drop visual editor built with React and Konva for creating
 - 🎭 **Multiple Modes**: Edit and preview modes
 - 📸 **Export Support**: Export canvas to JSON or image formats
 - 🎨 **Asset Management**: Built-in asset picker for images
+- ✅ **Well Tested**: 95%+ code coverage with comprehensive test suite
 
 ## Installation
 
@@ -219,6 +225,52 @@ function EditorWithCustomElements() {
 }
 ```
 
+## Development
+
+### Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Generate coverage report
+npm run test:coverage
+```
+
+### Building
+
+```bash
+# Build the package
+npm run build
+
+# Type check
+npm run type-check
+
+# Lint
+npm run lint
+```
+
+### Testing Coverage
+
+This package maintains high test coverage:
+- **95.26%** statements
+- **94.2%** branches  
+- **93.05%** functions
+- **95.77%** lines
+
+See [TESTING.md](./TESTING.md) for detailed testing documentation.
+
+## Contributing
+
+Contributions are welcome! Please ensure:
+1. All tests pass (`npm test`)
+2. Code coverage remains above 90%
+3. Code is properly linted (`npm run lint`)
+4. Types are correct (`npm run type-check`)
+
 ## License
 
 MIT

package/dist/index.js

@@ -6,9 +6,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -31,178 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/utils/editorUtils.ts
-var editorUtils_exports = {};
-__export(editorUtils_exports, {
-  bringToFront: () => bringToFront,
-  checkOverlap: () => checkOverlap,
-  clamp: () => clamp,
-  cloneElement: () => cloneElement,
-  constrainToCanvas: () => constrainToCanvas,
-  createElement: () => createElement,
-  degToRad: () => degToRad,
-  distance: () => distance,
-  duplicateElement: () => duplicateElement,
-  exportToJSON: () => exportToJSON,
-  generateElementId: () => generateElementId,
-  getElementCenter: () => getElementCenter,
-  getMaxZIndex: () => getMaxZIndex,
-  getRotatedBoundingBox: () => getRotatedBoundingBox,
-  importFromJSON: () => importFromJSON,
-  isValidCanvasExport: () => isValidCanvasExport,
-  isValidElement: () => isValidElement,
-  pointInRect: () => pointInRect,
-  radToDeg: () => radToDeg,
-  sendToBack: () => sendToBack,
-  snapPositionToGrid: () => snapPositionToGrid,
-  snapToGrid: () => snapToGrid,
-  sortByZIndex: () => sortByZIndex
-});
-var import_uuid, generateElementId, createElement, cloneElement, duplicateElement, sortByZIndex, getMaxZIndex, bringToFront, sendToBack, checkOverlap, pointInRect, snapToGrid, snapPositionToGrid, clamp, constrainToCanvas, getRotatedBoundingBox, exportToJSON, importFromJSON, getElementCenter, distance, degToRad, radToDeg, isValidElement, isValidCanvasExport;
-var init_editorUtils = __esm({
-  "src/utils/editorUtils.ts"() {
-    "use strict";
-    import_uuid = require("uuid");
-    generateElementId = () => {
-      return `element-${(0, import_uuid.v4)()}`;
-    };
-    createElement = (type, props, options) => {
-      return {
-        id: generateElementId(),
-        type,
-        position: options?.position || { x: 0, y: 0 },
-        size: options?.size || { width: 100, height: 100 },
-        rotation: options?.rotation || 0,
-        opacity: options?.opacity ?? 1,
-        zIndex: options?.zIndex || 0,
-        visible: options?.visible ?? true,
-        locked: options?.locked ?? false,
-        displayName: options?.displayName,
-        props
-      };
-    };
-    cloneElement = (element) => {
-      return {
-        ...element,
-        id: generateElementId(),
-        // New ID for the clone
-        props: { ...element.props },
-        position: { ...element.position },
-        size: { ...element.size }
-      };
-    };
-    duplicateElement = (element, offset = { x: 20, y: 20 }) => {
-      const cloned = cloneElement(element);
-      return {
-        ...cloned,
-        position: {
-          x: element.position.x + offset.x,
-          y: element.position.y + offset.y
-        },
-        zIndex: element.zIndex + 1
-        // Place on top
-      };
-    };
-    sortByZIndex = (elements) => {
-      return [...elements].sort((a, b) => a.zIndex - b.zIndex);
-    };
-    getMaxZIndex = (elements) => {
-      if (elements.length === 0) return 0;
-      return Math.max(...elements.map((el) => el.zIndex));
-    };
-    bringToFront = (elements, elementId) => {
-      const maxZ = getMaxZIndex(elements);
-      return elements.map((el) => el.id === elementId ? { ...el, zIndex: maxZ + 1 } : el);
-    };
-    sendToBack = (elements, elementId) => {
-      const minZ = Math.min(...elements.map((el) => el.zIndex));
-      return elements.map((el) => el.id === elementId ? { ...el, zIndex: minZ - 1 } : el);
-    };
-    checkOverlap = (rect1, rect2) => {
-      return !(rect1.x + rect1.width < rect2.x || rect2.x + rect2.width < rect1.x || rect1.y + rect1.height < rect2.y || rect2.y + rect2.height < rect1.y);
-    };
-    pointInRect = (point, rect) => {
-      return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-    };
-    snapToGrid = (value, gridSize) => {
-      return Math.round(value / gridSize) * gridSize;
-    };
-    snapPositionToGrid = (position, gridSize) => {
-      return {
-        x: snapToGrid(position.x, gridSize),
-        y: snapToGrid(position.y, gridSize)
-      };
-    };
-    clamp = (value, min, max) => {
-      return Math.min(Math.max(value, min), max);
-    };
-    constrainToCanvas = (position, size, canvasSize) => {
-      return {
-        x: clamp(position.x, 0, canvasSize.width - size.width),
-        y: clamp(position.y, 0, canvasSize.height - size.height)
-      };
-    };
-    getRotatedBoundingBox = (x, y, width, height, rotation) => {
-      const rad = rotation * Math.PI / 180;
-      const cos = Math.abs(Math.cos(rad));
-      const sin = Math.abs(Math.sin(rad));
-      const newWidth = width * cos + height * sin;
-      const newHeight = width * sin + height * cos;
-      return {
-        x: x - (newWidth - width) / 2,
-        y: y - (newHeight - height) / 2,
-        width: newWidth,
-        height: newHeight
-      };
-    };
-    exportToJSON = (data) => {
-      return JSON.stringify(data, null, 2);
-    };
-    importFromJSON = (json) => {
-      try {
-        const data = JSON.parse(json);
-        if (!data.width || !data.height || !Array.isArray(data.elements)) {
-          throw new Error("Invalid canvas data structure");
-        }
-        const normalizedElements = data.elements.map((element) => ({
-          ...element,
-          visible: element.visible ?? true,
-          locked: element.locked ?? false
-        }));
-        return {
-          ...data,
-          elements: normalizedElements
-        };
-      } catch (error) {
-        throw new Error(`Failed to parse canvas data: ${error.message}`);
-      }
-    };
-    getElementCenter = (element) => {
-      return {
-        x: element.position.x + element.size.width / 2,
-        y: element.position.y + element.size.height / 2
-      };
-    };
-    distance = (p1, p2) => {
-      const dx = p2.x - p1.x;
-      const dy = p2.y - p1.y;
-      return Math.sqrt(dx * dx + dy * dy);
-    };
-    degToRad = (degrees) => {
-      return degrees * Math.PI / 180;
-    };
-    radToDeg = (radians) => {
-      return radians * 180 / Math.PI;
-    };
-    isValidElement = (element) => {
-      return element && typeof element.id === "string" && typeof element.type === "string" && element.position && typeof element.position.x === "number" && typeof element.position.y === "number" && element.size && typeof element.size.width === "number" && typeof element.size.height === "number" && typeof element.rotation === "number" && typeof element.zIndex === "number" && element.props !== void 0;
-    };
-    isValidCanvasExport = (data) => {
-      return data && typeof data.width === "number" && typeof data.height === "number" && Array.isArray(data.elements) && data.elements.every(isValidElement);
-    };
-  }
-});
-
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -254,6 +79,148 @@ var import_react_konva3 = require("react-konva");
 
 // src/core/useEditorState.ts
 var import_react = require("react");
+
+// src/utils/editorUtils.ts
+var import_uuid = require("uuid");
+var generateElementId = () => {
+  return `element-${(0, import_uuid.v4)()}`;
+};
+var createElement = (type, props, options) => {
+  return {
+    id: generateElementId(),
+    type,
+    position: options?.position || { x: 0, y: 0 },
+    size: options?.size || { width: 100, height: 100 },
+    rotation: options?.rotation || 0,
+    opacity: options?.opacity ?? 1,
+    zIndex: options?.zIndex || 0,
+    visible: options?.visible ?? true,
+    locked: options?.locked ?? false,
+    displayName: options?.displayName,
+    props
+  };
+};
+var cloneElement = (element) => {
+  return {
+    ...element,
+    id: generateElementId(),
+    // New ID for the clone
+    props: { ...element.props },
+    position: { ...element.position },
+    size: { ...element.size }
+  };
+};
+var duplicateElement = (element, offset = { x: 20, y: 20 }) => {
+  const cloned = cloneElement(element);
+  return {
+    ...cloned,
+    position: {
+      x: element.position.x + offset.x,
+      y: element.position.y + offset.y
+    },
+    zIndex: element.zIndex + 1
+    // Place on top
+  };
+};
+var sortByZIndex = (elements) => {
+  return [...elements].sort((a, b) => a.zIndex - b.zIndex);
+};
+var getMaxZIndex = (elements) => {
+  if (elements.length === 0) return 0;
+  return Math.max(...elements.map((el) => el.zIndex));
+};
+var bringToFront = (elements, elementId) => {
+  const maxZ = getMaxZIndex(elements);
+  return elements.map((el) => el.id === elementId ? { ...el, zIndex: maxZ + 1 } : el);
+};
+var sendToBack = (elements, elementId) => {
+  const minZ = Math.min(...elements.map((el) => el.zIndex));
+  return elements.map((el) => el.id === elementId ? { ...el, zIndex: minZ - 1 } : el);
+};
+var checkOverlap = (rect1, rect2) => {
+  return !(rect1.x + rect1.width < rect2.x || rect2.x + rect2.width < rect1.x || rect1.y + rect1.height < rect2.y || rect2.y + rect2.height < rect1.y);
+};
+var pointInRect = (point, rect) => {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+};
+var snapToGrid = (value, gridSize) => {
+  return Math.round(value / gridSize) * gridSize;
+};
+var snapPositionToGrid = (position, gridSize) => {
+  return {
+    x: snapToGrid(position.x, gridSize),
+    y: snapToGrid(position.y, gridSize)
+  };
+};
+var clamp = (value, min, max) => {
+  return Math.min(Math.max(value, min), max);
+};
+var constrainToCanvas = (position, size, canvasSize) => {
+  return {
+    x: clamp(position.x, 0, canvasSize.width - size.width),
+    y: clamp(position.y, 0, canvasSize.height - size.height)
+  };
+};
+var getRotatedBoundingBox = (x, y, width, height, rotation) => {
+  const rad = rotation * Math.PI / 180;
+  const cos = Math.abs(Math.cos(rad));
+  const sin = Math.abs(Math.sin(rad));
+  const newWidth = width * cos + height * sin;
+  const newHeight = width * sin + height * cos;
+  return {
+    x: x - (newWidth - width) / 2,
+    y: y - (newHeight - height) / 2,
+    width: newWidth,
+    height: newHeight
+  };
+};
+var exportToJSON = (data) => {
+  return JSON.stringify(data, null, 2);
+};
+var importFromJSON = (json) => {
+  try {
+    const data = JSON.parse(json);
+    if (!data.width || !data.height || !Array.isArray(data.elements)) {
+      throw new Error("Invalid canvas data structure");
+    }
+    const normalizedElements = data.elements.map((element) => ({
+      ...element,
+      visible: element.visible ?? true,
+      locked: element.locked ?? false
+    }));
+    return {
+      ...data,
+      elements: normalizedElements
+    };
+  } catch (error) {
+    throw new Error(`Failed to parse canvas data: ${error.message}`);
+  }
+};
+var getElementCenter = (element) => {
+  return {
+    x: element.position.x + element.size.width / 2,
+    y: element.position.y + element.size.height / 2
+  };
+};
+var distance = (p1, p2) => {
+  const dx = p2.x - p1.x;
+  const dy = p2.y - p1.y;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+var degToRad = (degrees) => {
+  return degrees * Math.PI / 180;
+};
+var radToDeg = (radians) => {
+  return radians * 180 / Math.PI;
+};
+var isValidElement = (element) => {
+  return element && typeof element.id === "string" && typeof element.type === "string" && element.position && typeof element.position.x === "number" && typeof element.position.y === "number" && element.size && typeof element.size.width === "number" && typeof element.size.height === "number" && typeof element.rotation === "number" && typeof element.zIndex === "number" && element.props !== void 0;
+};
+var isValidCanvasExport = (data) => {
+  return data && typeof data.width === "number" && typeof data.height === "number" && Array.isArray(data.elements) && data.elements.every(isValidElement);
+};
+
+// src/core/useEditorState.ts
 var createInitialState = (mode) => ({
   elements: [],
   selectedElementId: null,
@@ -527,8 +494,7 @@ var useEditorState = (initialMode = null) => {
     (id = null, offset = { x: 20, y: 20 }) => {
       const elementToDuplicate = id ? state.elements.find((el) => el.id === id) : getSelectedElement();
       if (!elementToDuplicate) return;
-      const { duplicateElement: duplicateUtil } = (init_editorUtils(), __toCommonJS(editorUtils_exports));
-      const duplicated = duplicateUtil(elementToDuplicate, offset);
+      const duplicated = duplicateElement(elementToDuplicate, offset);
       addElement(duplicated);
     },
     [state.elements, getSelectedElement, addElement]
@@ -536,10 +502,9 @@ var useEditorState = (initialMode = null) => {
   const pasteElement = (0, import_react.useCallback)(
     (copiedElement, offset = { x: 20, y: 20 }) => {
       if (!copiedElement) return;
-      const { generateElementId: generateElementId2 } = (init_editorUtils(), __toCommonJS(editorUtils_exports));
       const pasted = {
         ...copiedElement,
-        id: generateElementId2(),
+        id: generateElementId(),
         props: { ...copiedElement.props },
         position: {
           x: copiedElement.position.x + offset.x,
@@ -2090,7 +2055,7 @@ var Inspector = ({
 function renderField(field, props, editingValues, onChange, onColorChange, mode) {
   const value = editingValues[field.name] ?? props[field.name] ?? field.defaultValue;
   switch (field.type) {
-    case "custom":
+    case "custom": {
       if (!field.customRenderer) {
         console.error(`Custom field "${field.name}" has no customRenderer defined`);
         return null;
@@ -2106,7 +2071,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
           mode
         }
       ) }, field.name);
-    case "string":
+    }
+    case "string": {
       const isMultiline = field.name === "content" || field.name === "text";
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
@@ -2130,7 +2096,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "number":
+    }
+    case "number": {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2148,7 +2115,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "color":
+    }
+    case "color": {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2163,7 +2131,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "select":
+    }
+    case "select": {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -2179,7 +2148,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "boolean":
+    }
+    case "boolean": {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start space-x-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Checkbox,
@@ -2195,7 +2165,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
           field.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground", children: field.description })
         ] })
       ] }, field.name);
-    case "slider":
+    }
+    case "slider": {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { className: "text-xs", children: field.label }),
@@ -2214,7 +2185,8 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
-    case "image":
+    }
+    case "image": {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Label, { htmlFor: field.name, className: "text-xs", children: field.label }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2229,6 +2201,7 @@ function renderField(field, props, editingValues, onChange, onColorChange, mode)
         ),
         field.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: field.description })
       ] }, field.name);
+    }
     default:
       return null;
   }
@@ -3571,12 +3544,8 @@ var Canvas = ({
   );
 };
 
-// src/components/VisualEditorWorkspace.tsx
-init_editorUtils();
-
 // src/components/Toolbar.tsx
 var import_lucide_react8 = require("lucide-react");
-init_editorUtils();
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Toolbar = ({
   api,
@@ -3876,7 +3845,7 @@ var VisualEditorWorkspace = ({
           readonly,
           enableSnapGuides: snapGuidesEnabled,
           enablePanZoom,
-          backgroundImageUrl: backgroundImage && mode?.context?.imageUrls ? mode.context.imageUrls.get(backgroundImage) : void 0,
+          backgroundImageUrl: backgroundImage && mode?.context?.imageUrls ? mode.context.imageUrls.get(backgroundImage) : backgroundImageUrl,
           hideElements,
           onSelectElement: (id) => api.selectElement(id),
           onTransformElement: (id, updates) => api.updateElement(id, updates)
@@ -3989,9 +3958,6 @@ var AssetPicker = ({
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ScrollArea, { className: "flex-1", children: filteredAssets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-3 gap-2 p-3", children: filteredAssets.map((asset) => assetRenderer(asset)) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-center h-32 text-sm text-muted-foreground", children: searchQuery ? "No assets found" : "No assets available" }) })
   ] });
 };
-
-// src/index.ts
-init_editorUtils();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AssetPicker,