98 lines
3 KiB
JavaScript
98 lines
3 KiB
JavaScript
import { useEffect, useCallback, useContext } from 'react';
|
|
import CanvasContext from './Context/canvasContext/CanvasContext';
|
|
import ActiveObjectContext from './Context/activeObject/ObjectContext';
|
|
import OpenContext from './Context/openContext/OpenContext';
|
|
import CanvasSetting from './CanvasSetting';
|
|
import { EditPanel } from './EditPanel';
|
|
import ObjectPanel from './ObjectPanel';
|
|
import { AspectCanvas } from './AspectCanvas';
|
|
|
|
const Canvas = () => {
|
|
const { canvas } = useContext(CanvasContext);
|
|
|
|
const { openSetting, openObjectPanel, openPanel } = useContext(OpenContext);
|
|
|
|
const { setActiveObject } = useContext(ActiveObjectContext);
|
|
|
|
useEffect(() => {
|
|
if (!canvas) return; // Ensure canvas is available
|
|
|
|
// Event handler for mouse down
|
|
const handleMouseDown = (event) => {
|
|
const target = event.target; // Get the clicked target
|
|
const activeObject = canvas.getActiveObject(); // Get the active object
|
|
|
|
if (target) {
|
|
if (target.type === 'group') {
|
|
setActiveObject(activeObject);
|
|
} else {
|
|
setActiveObject(activeObject);
|
|
}
|
|
} else {
|
|
setActiveObject(activeObject);
|
|
}
|
|
};
|
|
|
|
// Attach the event listener
|
|
canvas.on('mouse:down', handleMouseDown);
|
|
|
|
// Cleanup function to remove the event listener
|
|
return () => {
|
|
canvas.off('mouse:down', handleMouseDown); // Remove the listener on unmount
|
|
};
|
|
}, [canvas]); // Re-run only when canvas changes
|
|
|
|
|
|
const removeSelected = useCallback(() => {
|
|
const activeObject = canvas?.getActiveObject();
|
|
const allObjects = canvas?.getObjects();
|
|
|
|
const textObjects = allObjects.filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text');
|
|
|
|
if (activeObject) {
|
|
canvas.remove(activeObject);
|
|
setActiveObject(null);
|
|
}
|
|
if (activeObject && textObjects?.length === 1) {
|
|
canvas.remove(activeObject);
|
|
setActiveObject(null);
|
|
}
|
|
if (activeObject.length > 1) {
|
|
canvas.remove(...activeObject);
|
|
setActiveObject(null);
|
|
}
|
|
}, [canvas, setActiveObject]);
|
|
|
|
useEffect(() => {
|
|
const handleDeleteKey = (event) => {
|
|
if (event.key === 'Delete') {
|
|
removeSelected();
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleDeleteKey);
|
|
return () => {
|
|
window.removeEventListener('keydown', handleDeleteKey);
|
|
};
|
|
}, [removeSelected]);
|
|
|
|
return (
|
|
<div className='flex flex-col items-center relative w-full h-full overflow-hidden'>
|
|
|
|
{openSetting &&
|
|
<CanvasSetting />
|
|
}
|
|
|
|
{
|
|
openPanel &&
|
|
<EditPanel />
|
|
}
|
|
|
|
{openObjectPanel && <ObjectPanel />}
|
|
|
|
{/* Main canvas */}
|
|
<AspectCanvas />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Canvas;
|