@1urso/generic-editor 0.1.35 → 0.1.37

package/README.md

@@ -79,6 +79,20 @@ import "@radix-ui/themes/styles.css";
 
 This section describes the features available to the **end user** who will use the editor on your platform.
 
+### Grouping and Layers Panel
+
+- **Group Elements**:
+  - Select multiple elements and use the context menu option **Agrupar Seleção**.
+  - Groups act as a bounding box; moving the group moves all children.
+  - Clicking a child selects its parent group for consistent interactions.
+- **Rename Layers**:
+  - Right-click any element or group and choose **Renomear...**.
+- **Layers Panel (Left Sidebar)**:
+  - Shows a tree of Groups and their children.
+  - Drag any element in the list onto a Group to add it.
+  - Drop an element onto the “Soltar aqui para remover do grupo” area to ungroup it.
+  - Collapse/expand groups to focus on what matters.
+
 ### Basic Manipulation
 
 The editor offers an experience similar to design tools like Canva or Figma:
@@ -158,6 +172,18 @@ When right-clicking on an **Image** element:
   - _Stretch (Fill)_: The image fills the entire box, potentially being cropped or distorted depending on the aspect ratio.
 - **Bind Data**: Connects the image to a dynamic variable (e.g., Product Photo).
 
+### Export and Import
+
+- **Export**: Saves the full layout (elements, list settings, mock data, canvas height).
+- **Import**: Loads a previously exported JSON to restore the editor state.
+- Images are serialized as **Base64** inside the layout to avoid external dependencies.
+
+### Preview and Simulation
+
+- **Preview Panel**: See a live rendering of your layout.
+- **Simulation Mode (Lists)**: Visualize entry animations and list behavior for incoming items.
+- **Animations**: Configure entry animations (fade, slide, zoom, etc.) for list items.
+
 ---
 
 ## Developer Guide (Integration)

package/dist/editor/context.d.ts

@@ -25,7 +25,9 @@ export interface IElementAnimation {
 }
 export interface IElement {
     id: string;
-    type: 'text' | 'image' | 'box';
+    type: 'text' | 'image' | 'box' | 'group';
+    name?: string;
+    groupId?: string;
     content: string;
     x: number;
     y: number;
@@ -38,6 +40,7 @@ export interface IElement {
     conditions?: IElementCondition[];
     autoGrow?: boolean;
     animation?: IElementAnimation;
+    styleBindings?: Record<string, string>;
 }
 export interface IListSettings {
     sortProp?: string;
@@ -81,6 +84,12 @@ interface IEditorContext {
         id: string;
         changes: Partial<IElement>;
     }[], addToHistory?: boolean) => void;
+    groupElements: (ids: string[]) => void;
+    ungroupElements: (groupId: string) => void;
+    renameElement: (id: string, name: string) => void;
+    addToGroup: (elementId: string, groupId: string) => void;
+    removeFromGroup: (elementId: string) => void;
+    resizeGroup: (groupId: string, newWidth: number, newHeight: number) => void;
     setMockData: (data: any[], singleData: Record<string, any>) => void;
     updateListSettings: (settings: Partial<IListSettings>) => void;
     setCanvasHeight: (height: number) => void;

package/dist/editor/index.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { ILayout } from './types';
 interface EditorProps {
     layout: ILayout;
-    initialState?: any;
+    initialState?: unknown;
     onSave?: (json: string) => void;
     theme?: 'light' | 'dark';
 }

package/dist/editor/utils/layoutEngine.d.ts

@@ -0,0 +1,5 @@
+import { IElement } from '../context';
+export declare const processLayout: (elements: IElement[], dataContext: any) => {
+    elements: IElement[];
+    totalHeight: number;
+};