From f2d45f3e13f094c8587afabef63d19c7c58b4662 Mon Sep 17 00:00:00 2001
From: sanskar srivastava <112918830+dhawalcoder42@users.noreply.github.com>
Date: Fri, 19 Jul 2024 21:52:07 +0530
Subject: [PATCH 01/17] 70% of work done
made a side bar where options are there to select shape , add custom colours and download svg shape design . also added shape previewer where we can see and edit shapes and can drag them.
---
package.json | 2 +-
.../(tools)/svg-shape-generator/+page.svelte | 187 ++++++++++++++-
.../(tools)/svg-shape-generator/meta.json | 6 +-
src/routes/tools.json | 216 ++++++++++++++++++
4 files changed, 397 insertions(+), 14 deletions(-)
diff --git a/package.json b/package.json
index 24d9001e6..c637234af 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
},
"dependencies": {
"@faker-js/faker": "^8.4.1",
- "@sveltejs/adapter-node": "^1.3.1",
"axios": "^1.7.2",
"cheerio": "^1.0.0-rc.12",
"cors": "^2.8.5",
@@ -35,6 +34,7 @@
"jspdf": "^2.5.1",
"pdf-lib": "^1.17.1",
"svelte-awesome-color-picker": "^3.1.0",
+ "svelte-svg": "^0.0.7",
"svelte-tags-input": "^6.0.0",
"tailwindcss": "^3.3.5",
"tesseract.js": "^5.0.2",
diff --git a/src/routes/(tools)/svg-shape-generator/+page.svelte b/src/routes/(tools)/svg-shape-generator/+page.svelte
index 55b5a5ecf..ea92cd8ed 100644
--- a/src/routes/(tools)/svg-shape-generator/+page.svelte
+++ b/src/routes/(tools)/svg-shape-generator/+page.svelte
@@ -1,11 +1,178 @@
-
-
-
-
-
-
\ No newline at end of file
+ import { writable } from 'svelte/store';
+
+ let color = '#FF0066';
+ let svgShape = 'M150 0 L75 200 L225 200 Z';
+ const shapes = writable([]);
+
+ let dragState = {
+ isDragging: false,
+ isResizing: false,
+ startX: 0,
+ startY: 0,
+ shapeIndex: null
+ };
+
+ function addShape() {
+ shapes.update(items => [
+ ...items,
+ { id: items.length, path: svgShape, color, x: 0, y: 0, width: 100, height: 100 }
+ ]);
+ }
+
+ function downloadSVG() {
+ const svgContent = `
+
+ `;
+ const blob = new Blob([svgContent], { type: 'image/svg+xml' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'shape.svg';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+
+ function startDrag(event, index) {
+ dragState.isDragging = true;
+ dragState.startX = event.clientX;
+ dragState.startY = event.clientY;
+ dragState.shapeIndex = index;
+ }
+
+ function startResize(event, index) {
+ dragState.isResizing = true;
+ dragState.startX = event.clientX;
+ dragState.startY = event.clientY;
+ dragState.shapeIndex = index;
+ }
+
+ function onMouseMove(event) {
+ if (dragState.isDragging && dragState.shapeIndex !== null) {
+ const dx = event.clientX - dragState.startX;
+ const dy = event.clientY - dragState.startY;
+ shapes.update(items => {
+ const updatedItems = [...items];
+ const shape = updatedItems[dragState.shapeIndex];
+ shape.x += dx;
+ shape.y += dy;
+ dragState.startX = event.clientX;
+ dragState.startY = event.clientY;
+ return updatedItems;
+ });
+ } else if (dragState.isResizing && dragState.shapeIndex !== null) {
+ const dx = event.clientX - dragState.startX;
+ const dy = event.clientY - dragState.startY;
+ shapes.update(items => {
+ const updatedItems = [...items];
+ const shape = updatedItems[dragState.shapeIndex];
+ shape.width += dx;
+ shape.height += dy;
+ dragState.startX = event.clientX;
+ dragState.startY = event.clientY;
+ return updatedItems;
+ });
+ }
+ }
+
+ function onMouseUp() {
+ dragState.isDragging = false;
+ dragState.isResizing = false;
+ dragState.shapeIndex = null;
+ }
+
+
+ window.addEventListener('mousemove', onMouseMove);
+ window.addEventListener('mouseup', onMouseUp);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -209,8 +203,7 @@
Resize Shape
-
-
+
diff --git a/meta.json b/meta.json
index d85c6166e..1df342477 100644
--- a/meta.json
+++ b/meta.json
@@ -3,14 +3,14 @@
"description":"The SVG Shape Generator is a user-friendly web application designed to create and customize SVG shapes. Users can select from various predefined shapes, adjust their colors, and manipulate them through dragging and resizing. The tool supports adding multiple shapes, allowing for complex designs. Once satisfied, users can download the final SVG file, making it an ideal solution for graphic designers and web developers looking to create scalable vector graphics efficiently. ",
"contributors": [{
"name": "Sanskar Srivastava",
- "githubId": "https://github.com/dhawalcoder42"
+ "githubId": "dhawalcoder42"
}, {
"name": "Ayush Fating",
- "githubId": "https://github.com/Ayush202201070127"
+ "githubId": "Ayush202201070127"
},
{
- "name": "",
- "githubId": ""
+ "name": "Sayali Jadhav",
+ "githubId": "sayali-jadhav21"
},
{
"name": "",
From 9c3db3df8bb2277515c316d0152b5d37d379f7e1 Mon Sep 17 00:00:00 2001
From: Sai Srinivas <115944966+SaiSrinivas13@users.noreply.github.com>
Date: Tue, 23 Jul 2024 21:18:48 +0530
Subject: [PATCH 12/17] Update meta.json
---
meta.json | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/meta.json b/meta.json
index 1df342477..770866055 100644
--- a/meta.json
+++ b/meta.json
@@ -13,11 +13,11 @@
"githubId": "sayali-jadhav21"
},
{
- "name": "",
- "githubId": ""
+ "name": "Chintaluri Sai Srinivas",
+ "githubId": "SaiSrinivas13"
},
{
"name": "",
"githubId": ""
}]
-}
\ No newline at end of file
+}
From 427c93809c3c5ee41d8889ce3141f35e01436c7a Mon Sep 17 00:00:00 2001
From: prachitig123 <123113029+prachitig123@users.noreply.github.com>
Date: Wed, 24 Jul 2024 00:18:31 +0530
Subject: [PATCH 13/17] download img as png or svg
---
+page.svelte | 503 +++++++++++++++++----------------------------------
1 file changed, 166 insertions(+), 337 deletions(-)
diff --git a/+page.svelte b/+page.svelte
index d3e1edf78..9764877b4 100644
--- a/+page.svelte
+++ b/+page.svelte
@@ -1,149 +1,80 @@
+ function toggleDropdown() {
+ showDropdown = !showDropdown;
+ }
-
-
-