From f7880a3e1333fba6bef86ac089354e74fc6b35aa Mon Sep 17 00:00:00 2001
From: HayemR <Hag@gmail.com>
Date: Tue, 26 May 2026 12:55:18 +0700
Subject: [PATCH] minor fixes

---
 src/components/PhotoStrip.vue | 70 ++++++++++++++++++++++++++++++-----
 src/pages/Customize.vue       | 28 ++++++++++++--
 2 files changed, 86 insertions(+), 12 deletions(-)

diff --git a/src/components/PhotoStrip.vue b/src/components/PhotoStrip.vue
index 9c49f63..e9e7306 100644
--- a/src/components/PhotoStrip.vue
+++ b/src/components/PhotoStrip.vue
@@ -11,9 +11,7 @@ const themeConfig = computed(
   () => STRIP_THEME_MAP[props.theme] || STRIP_THEME_MAP[DEFAULT_STRIP_THEME_ID],
 )
 const borderColor = computed(() => themeConfig.value?.borderColor || '#ffffff')
-const stripShadow = computed(
-  () => themeConfig.value?.shadow || '0 24px 60px rgba(0, 0, 0, 0.18)',
-)
+const stripShadow = computed(() => themeConfig.value?.shadow || '0 24px 60px rgba(0, 0, 0, 0.18)')
 
 const stripSize = computed(() => themeConfig.value.size)
 const frames = computed(() => themeConfig.value.slots || [])
@@ -52,28 +50,82 @@ function clipStyle(rect) {
     >
       <template v-if="photos[index]">
         <template v-if="rect.radius || rect.clipPath">
-          <svg :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :viewBox="`0 0 ${Math.max(rect.width - 16, 0)} ${Math.max(rect.height - 16, 0)}`" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+          <svg
+            :width="Math.max(rect.width - 16, 0)"
+            :height="Math.max(rect.height - 16, 0)"
+            :viewBox="`0 0 ${Math.max(rect.width - 16, 0)} ${Math.max(rect.height - 16, 0)}`"
+            preserveAspectRatio="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <defs>
               <clipPath :id="`clip-${props.theme}-${index}`">
                 <template v-if="rect.clipPath">
                   <path :d="rect.clipPath" />
                 </template>
                 <template v-else>
-                  <rect x="0" y="0" :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :rx="rect.radius" :ry="rect.radius" />
+                  <rect
+                    x="0"
+                    y="0"
+                    :width="Math.max(rect.width - 16, 0)"
+                    :height="Math.max(rect.height - 16, 0)"
+                    :rx="rect.radius"
+                    :ry="rect.radius"
+                  />
                 </template>
               </clipPath>
             </defs>
-            <image :href="(photos[index].preview !== undefined) ? (photos[index].preview || photos[index].src) : ((photos[index].src !== undefined) ? photos[index].src : photos[index])" x="0" y="0" :width="Math.max(rect.width - 16, 0)" :height="Math.max(rect.height - 16, 0)" :clip-path="`url(#clip-${props.theme}-${index})`" preserveAspectRatio="xMidYMid slice" />
+            <image
+              :href="
+                photos[index].preview !== undefined
+                  ? photos[index].preview || photos[index].src
+                  : photos[index].src !== undefined
+                    ? photos[index].src
+                    : photos[index]
+              "
+              x="0"
+              y="0"
+              :width="Math.max(rect.width - 16, 0)"
+              :height="Math.max(rect.height - 16, 0)"
+              :clip-path="`url(#clip-${props.theme}-${index})`"
+              preserveAspectRatio="xMidYMid slice"
+            />
             <template v-if="rect.clipPath">
-              <path :d="rect.clipPath" fill="none" :stroke="borderColor" stroke-width="12" stroke-linejoin="round" />
+              <path
+                :d="rect.clipPath"
+                fill="none"
+                :stroke="borderColor"
+                stroke-width="12"
+                stroke-linejoin="round"
+              />
             </template>
             <template v-else>
-              <rect x="6" y="6" :width="Math.max(rect.width - 28, 0)" :height="Math.max(rect.height - 28, 0)" :rx="Math.max((rect.radius || 0) - 2, 0)" :ry="Math.max((rect.radius || 0) - 2, 0)" fill="none" :stroke="borderColor" stroke-width="10" />
+              <rect
+                x="6"
+                y="6"
+                :width="Math.max(rect.width - 28, 0)"
+                :height="Math.max(rect.height - 28, 0)"
+                :rx="Math.max((rect.radius || 0) - 2, 0)"
+                :ry="Math.max((rect.radius || 0) - 2, 0)"
+                fill="none"
+                :stroke="borderColor"
+                stroke-width="10"
+              />
             </template>
           </svg>
         </template>
         <template v-else>
-          <img :src="(photos[index].preview !== undefined) ? (photos[index].preview || photos[index].src) : ((photos[index].src !== undefined) ? photos[index].src : photos[index])" :alt="`Captured photo ${index + 1}`" class="frame-photo" :style="clipStyle(rect)" />
+          <img
+            :src="
+              photos[index].preview !== undefined
+                ? photos[index].preview || photos[index].src
+                : photos[index].src !== undefined
+                  ? photos[index].src
+                  : photos[index]
+            "
+            :alt="`Captured photo ${index + 1}`"
+            class="frame-photo"
+            :style="clipStyle(rect)"
+          />
         </template>
       </template>
     </div>
diff --git a/src/pages/Customize.vue b/src/pages/Customize.vue
index abec3fd..6f0de62 100644
--- a/src/pages/Customize.vue
+++ b/src/pages/Customize.vue
@@ -44,7 +44,12 @@ function handleApply(payload) {
   // payload: { dataUrl, transform }
   const { dataUrl, transform } = payload
   if (editorIndex.value >= 0) {
-    const original = (store.photos[editorIndex.value] && (store.photos[editorIndex.value].src || store.photos[editorIndex.value])) || (previewPhotos.value[editorIndex.value] && (previewPhotos.value[editorIndex.value].src || previewPhotos.value[editorIndex.value])) || null
+    const original =
+      (store.photos[editorIndex.value] &&
+        (store.photos[editorIndex.value].src || store.photos[editorIndex.value])) ||
+      (previewPhotos.value[editorIndex.value] &&
+        (previewPhotos.value[editorIndex.value].src || previewPhotos.value[editorIndex.value])) ||
+      null
     const obj = { src: original, preview: dataUrl, transform }
     previewPhotos.value[editorIndex.value] = obj
     // persist to store as well
@@ -84,7 +89,19 @@ function handleApply(payload) {
       <ThemeSelector />
       <RouterLink class="primary" to="/result">Generate strip</RouterLink>
     </section>
-    <ImageEditor v-if="editorIndex >= 0" :src="(store.photos[editorIndex] && (store.photos[editorIndex].src || store.photos[editorIndex])) || previewPhotos[editorIndex]" :initialTransform="(store.photos[editorIndex] && store.photos[editorIndex].transform) || null" :outputWidth="440" :outputHeight="290" @cancel="handleCancel" @apply="handleApply" />
+    <ImageEditor
+      v-if="editorIndex >= 0"
+      :src="
+        (store.photos[editorIndex] &&
+          (store.photos[editorIndex].src || store.photos[editorIndex])) ||
+        previewPhotos[editorIndex]
+      "
+      :initialTransform="(store.photos[editorIndex] && store.photos[editorIndex].transform) || null"
+      :outputWidth="440"
+      :outputHeight="290"
+      @cancel="handleCancel"
+      @apply="handleApply"
+    />
   </main>
 </template>
 
@@ -129,7 +146,12 @@ function handleApply(payload) {
   align-items: center;
   gap: 6px;
 }
-.edit-thumb img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px }
+.edit-thumb img {
+  width: 84px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 8px;
+}
 
 .options-panel {
   display: grid;