khalidadil/apparel-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown

Browse Source
This commit is contained in:
khalid@traclabs.com
2026-04-23 08:48:11 -05:00
parent 4d19363d58
commit 628a6765f4
32 changed files with 11663 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/hooks/useDesignEditor.js
View File

@@ -6,11 +6,18 @@ const DEBOUNCE_DELAY_MS = 300;
export function useDesignEditor() {
const [elements, setElements] = useState([]);
const [selectedId, setSelectedId] = useState(null);
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
const historyRef = useRef([]);
const historyIndexRef = useRef(-1);
const historyTimerRef = useRef(null);
const pendingChangesRef = useRef(null);
const syncUndoRedo = useCallback(() => {
setCanUndo(historyIndexRef.current > 0);
setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
}, []);
const saveToHistory = useCallback((newElements) => {
if (historyIndexRef.current < historyRef.current.length - 1) {
historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
@@ -18,7 +25,8 @@ export function useDesignEditor() {
historyRef.current.push(JSON.stringify(newElements));
if (historyRef.current.length > MAX_HISTORY) { historyRef.current.shift(); }
else { historyIndexRef.current++; }
}, []);
syncUndoRedo();
}, [syncUndoRedo]);
const flushPendingChanges = useCallback(() => {
if (pendingChangesRef.current) { saveToHistory(pendingChangesRef.current); pendingChangesRef.current = null; }
@@ -27,9 +35,6 @@ export function useDesignEditor() {
useEffect(() => { return () => { if (historyTimerRef.current) clearTimeout(historyTimerRef.current); }; }, []);
const canUndo = historyIndexRef.current > 0;
const canRedo = historyIndexRef.current < historyRef.current.length - 1;
const addElement = useCallback((element) => {
flushPendingChanges();
const newElement = { ...element, id: `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` };
@@ -59,14 +64,28 @@ export function useDesignEditor() {
const commitHistory = useCallback(() => flushPendingChanges(), [flushPendingChanges]);
const undo = useCallback(() => {
if (historyIndexRef.current > 0) { historyIndexRef.current--; setElements(JSON.parse(historyRef.current[historyIndexRef.current])); setSelectedId(null); }
}, []);
if (historyIndexRef.current > 0) {
historyIndexRef.current--;
setElements(JSON.parse(historyRef.current[historyIndexRef.current]));
setSelectedId(null);
syncUndoRedo();
}
}, [syncUndoRedo]);
const redo = useCallback(() => {
if (historyIndexRef.current < historyRef.current.length - 1) { historyIndexRef.current++; setElements(JSON.parse(historyRef.current[historyIndexRef.current])); setSelectedId(null); }
}, []);
if (historyIndexRef.current < historyRef.current.length - 1) {
historyIndexRef.current++;
setElements(JSON.parse(historyRef.current[historyIndexRef.current]));
setSelectedId(null);
syncUndoRedo();
}
}, [syncUndoRedo]);
const initializeHistory = useCallback(() => { historyRef.current = [JSON.stringify([])]; historyIndexRef.current = 0; }, []);
const initializeHistory = useCallback(() => {
historyRef.current = [JSON.stringify([])];
historyIndexRef.current = 0;
syncUndoRedo();
}, [syncUndoRedo]);
return { elements, selectedId, addElement, updateElement, deleteElement, selectElement, deselectAll, commitHistory, undo, redo, canUndo, canRedo, initializeHistory };
}