From 64ad792686c9bc1ad323f5f8bafa86fa9ec91772 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Sun, 3 Nov 2024 04:10:45 +0530
Subject: [PATCH 1/2] feat: add slider width in setting

---
 playgrounds/app/src/components/Editor.tsx | 22 ++++++++++++++++++++++
 playgrounds/app/src/types.ts              |  1 +
 2 files changed, 23 insertions(+)

diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
index bc0ed52..510f45a 100644
--- a/playgrounds/app/src/components/Editor.tsx
+++ b/playgrounds/app/src/components/Editor.tsx
@@ -229,6 +229,7 @@ export default function Editor(props: EditorProps) {
           maxContainerDimensions()?.height || 100,
           {
             layout: {
+              width: props.snippetWidth,
               yPadding: props.yPadding,
               xPadding: props.xPadding,
             },
@@ -434,6 +435,27 @@ export default function Editor(props: EditorProps) {
               <AccordionTrigger>Layout</AccordionTrigger>
               <AccordionContent>
                 <div class="flex flex-col gap-4">
+                  <Slider
+                    value={[props.snippetWidth]}
+                    minValue={0}
+                    maxValue={1500}
+                    onChange={e => {
+                      props.setSnippetWidth(e[0])
+                    }}
+                  >
+                    <div class="flex w-full justify-between mb-2">
+                      <SliderLabel>Width</SliderLabel>
+                      <div class="flex flex-row">
+                        <SliderValueLabel />
+                        <span class="text-xs">px</span>
+                      </div>
+                    </div>
+                    <SliderTrack>
+                      <SliderFill />
+                      <SliderThumb />
+                    </SliderTrack>
+                  </Slider>
+
                   <Slider
                     value={[props.yPadding]}
                     minValue={0}
diff --git a/playgrounds/app/src/types.ts b/playgrounds/app/src/types.ts
index e674e8c..b1c8ebf 100644
--- a/playgrounds/app/src/types.ts
+++ b/playgrounds/app/src/types.ts
@@ -34,6 +34,7 @@ export interface Snippet {
 }
 
 export interface AnimationFrameLayout {
+  width: number
   yPadding: number
   xPadding: number
 }

From 9976d85f71bd24a5e14ee5a3ec8622c2e46d047f Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Sun, 3 Nov 2024 04:20:49 +0530
Subject: [PATCH 2/2] fix: remove width passing to canvas

---
 playgrounds/app/src/components/Editor.tsx | 1 -
 playgrounds/app/src/types.ts              | 1 -
 2 files changed, 2 deletions(-)

diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx
index 510f45a..360ae6d 100644
--- a/playgrounds/app/src/components/Editor.tsx
+++ b/playgrounds/app/src/components/Editor.tsx
@@ -229,7 +229,6 @@ export default function Editor(props: EditorProps) {
           maxContainerDimensions()?.height || 100,
           {
             layout: {
-              width: props.snippetWidth,
               yPadding: props.yPadding,
               xPadding: props.xPadding,
             },
diff --git a/playgrounds/app/src/types.ts b/playgrounds/app/src/types.ts
index b1c8ebf..e674e8c 100644
--- a/playgrounds/app/src/types.ts
+++ b/playgrounds/app/src/types.ts
@@ -34,7 +34,6 @@ export interface Snippet {
 }
 
 export interface AnimationFrameLayout {
-  width: number
   yPadding: number
   xPadding: number
 }