+
+
+
+
+
-
-
- )}
-
diff --git a/src/components/loadCanvas.js b/src/components/loadCanvas.js
deleted file mode 100644
index 2f8e762..0000000
--- a/src/components/loadCanvas.js
+++ /dev/null
@@ -1,107 +0,0 @@
-const loadCanvasState = (state) => {
- if (!canvas2) {
- console.error('Canvas2 is not initialized!');
- return;
- }
- try {
- const canvasData = typeof state === 'string' ? JSON.parse(state) : state;
-
- // Clear the existing canvas
- canvas2.clear();
-
- // Set the background color if it exists
- if (canvasData.backgroundColor) {
- canvas2.set({ backgroundColor: canvasData.backgroundColor });
- }
-
- // Function to load background image
- const loadBackgroundImage = () => {
- return new Promise((resolve) => {
- if (!canvasData.background) {
- resolve();
- return;
- }
-
- const imgElement = new Image();
- imgElement.crossOrigin = 'anonymous'; // Handle CORS if needed
-
- imgElement.onload = () => {
- const imgInstance = new fabric.Image(imgElement, {
- originX: canvasData.background.originX || 'left',
- originY: canvasData.background.originY || 'top',
- scaleX: canvasData.background.scaleX || canvas2.width / imgElement.width,
- scaleY: canvasData.background.scaleY || canvas2.height / imgElement.height,
- opacity: canvasData.background.opacity || 1,
- });
-
- // Set background image using the set method
- canvas2.set({ backgroundImage: imgInstance });
- resolve();
- };
-
- imgElement.onerror = () => {
- console.error("Failed to load the background image");
- resolve(); // Resolve anyway to continue loading objects
- };
-
- imgElement.src = canvasData.background.src;
- });
- };
-
- // Function to load objects
- const loadObjects = () => {
- return new Promise((resolve) => {
- canvas2.loadFromJSON({ objects: canvasData.objects }, () => {
- resolve();
- }, (obj, element) => {
- return obj;
- });
- });
- };
-
- // Load background image and objects if they exist
- const loadTasks = [];
- if (canvasData.background || canvasData.objects?.length) {
- if (canvasData.background) {
- loadTasks.push(loadBackgroundImage());
- }
- if (canvasData.objects?.length) {
- loadTasks.push(loadObjects());
- }
-
- Promise.all(loadTasks)
- .then(() => {
- canvas2.requestRenderAll(); // Ensure re-rendering
- })
- .catch((error) => {
- console.error('Error during canvas loading:', error);
- });
- } else {
- // If only background color exists
- if (canvasData.backgroundColor) {
- canvas2.requestRenderAll(); // Apply background color and render
- }
- }
-
- } catch (error) {
- console.error('Error loading canvas state:', error);
- }
-};
-
-
-// for download image/canvas
-const exportScaledCanvasImage = (scale = 2) => {
- if (canvas) {
- const imageBase64 = canvas.toDataURL({
- format: 'png', // or 'jpeg'
- quality: 1, // (0 to 1) for JPEG compression, ignored for PNG
- multiplier: scale, // Scale the canvas size
- });
-
- // Download the scaled image
- const link = document.createElement('a');
- link.href = imageBase64;
- link.download = `canvas-image-${scale}x.png`;
- link.click();
- }
-};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index e456a86..13c4249 100644
--- a/src/index.css
+++ b/src/index.css
@@ -152,4 +152,24 @@
body {
@apply bg-[#f5f0ff] text-foreground;
}
+}
+
+::-webkit-scrollbar {
+ width: 0px;
+ height: 5px;
+ border-radius: 5px;
+ cursor: pointer;
+ /* background-color: var(--primary-600); */
+ @apply bg-red-50
+}
+
+::-webkit-scrollbar-track {
+ background-color: var(--primary-500);
+}
+
+::-webkit-scrollbar-thumb {
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+ width: 5px;
+ background-color: red;
+ border-radius: 5px;
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index f5edc3a..e187998 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,71 +3,71 @@ import scrollbarHide from "tailwind-scrollbar-hide";
/** @type {import('tailwindcss').Config} */
export default {
- darkMode: ["class"],
- content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
- theme: {
- extend: {
- textColor: {
- primary: {
- DEFAULT: 'hsl(var(--primary-text))',
- foreground: 'hsl(var(--primary-foreground))'
- }
- },
- screens: {
- mdxl: '1100px'
- },
- colors: {
- border: 'hsl(var(--border))',
- input: 'hsl(var(--input))',
- ring: 'hsl(var(--ring))',
- background: 'hsl(var(--background))',
- foreground: 'hsl(var(--foreground))',
- selection: {
- DEFAULT: 'hsl(var(--selection))',
- foreground: 'hsl(var(--selection-foreground))'
- },
- primary: {
- DEFAULT: 'hsl(var(--primary))',
- foreground: 'hsl(var(--primary-foreground))'
- },
- secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))'
- },
- destructive: {
- DEFAULT: 'hsl(var(--destructive))',
- foreground: 'hsl(var(--destructive-foreground))'
- },
- muted: {
- DEFAULT: 'hsl(var(--muted))',
- foreground: 'hsl(var(--muted-foreground))'
- },
- accent: {
- DEFAULT: 'hsl(var(--accent))',
- foreground: 'hsl(var(--accent-foreground))'
- },
- popover: {
- DEFAULT: 'hsl(var(--popover))',
- foreground: 'hsl(var(--popover-foreground))'
- },
- card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))'
- },
- chart: {
- '1': 'hsl(var(--chart-1))',
- '2': 'hsl(var(--chart-2))',
- '3': 'hsl(var(--chart-3))',
- '4': 'hsl(var(--chart-4))',
- '5': 'hsl(var(--chart-5))'
- }
- },
- borderRadius: {
- lg: 'var(--radius)',
- md: 'calc(var(--radius) - 2px)',
- sm: 'calc(var(--radius) - 4px)'
- }
- }
- },
- plugins: [scrollbar, scrollbarHide, require("tailwindcss-animate")],
+ darkMode: ["class"],
+ content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
+ theme: {
+ extend: {
+ textColor: {
+ primary: {
+ DEFAULT: 'hsl(var(--primary-text))',
+ foreground: 'hsl(var(--primary-foreground))'
+ }
+ },
+ screens: {
+ mdxl: '1100px'
+ },
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ selection: {
+ DEFAULT: 'hsl(var(--selection))',
+ foreground: 'hsl(var(--selection-foreground))'
+ },
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))'
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))'
+ },
+ chart: {
+ '1': 'hsl(var(--chart-1))',
+ '2': 'hsl(var(--chart-2))',
+ '3': 'hsl(var(--chart-3))',
+ '4': 'hsl(var(--chart-4))',
+ '5': 'hsl(var(--chart-5))'
+ }
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)'
+ }
+ }
+ },
+ plugins: [scrollbar, scrollbarHide, require("tailwindcss-animate")],
};