From eb7b58648b0fd1d58b8a6ab9f952f50a920365fd Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 22 Jul 2024 02:42:42 +0200
Subject: [PATCH] Added logics to update object frame speed, width and height
 for animated objects

---
 .../assetManager/partials/ObjectDetails.vue   | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index df25dce..1e90ab4 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -26,11 +26,23 @@
         </div>
         <div class="w-full flex flex-col mb-5">
           <label class="mb-1.5 font-titles" for="origin-x">Is animated</label>
-          <select v-model="objectIsAnimated" class="input-cyan">
-            <option value="0">No</option>
-            <option value="1">Yes</option>
+          <select :value="objectIsAnimated.toString()" @change="updateObjectIsAnimated" class="input-cyan" name="is-animated">
+            <option value="false">No</option>
+            <option value="true">Yes</option>
           </select>
         </div>
+        <div class="w-full flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="frame-speed">Frame speed</label>
+          <input v-model="objectFrameSpeed" class="input-cyan" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+        </div>
+        <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="frame-width">Frame width</label>
+          <input v-model="objectFrameWidth" class="input-cyan" type="number" step="any" name="frame-width" placeholder="Frame width" />
+        </div>
+        <div class="w-[calc(50%_-_5px)] flex flex-col mb-5">
+          <label class="mb-1.5 font-titles" for="frame-height">Frame height</label>
+          <input v-model="objectFrameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
+        </div>
         <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
       </form>
     </div>
@@ -57,6 +69,13 @@ const objectTags = ref([] as string[])
 const objectOriginX = ref(0)
 const objectOriginY = ref(0)
 const objectIsAnimated = ref(false)
+const objectFrameSpeed = ref(0)
+const objectFrameWidth = ref(0)
+const objectFrameHeight = ref(0)
+
+function updateObjectIsAnimated(event) {
+  objectIsAnimated.value = event.target.value === 'true';
+}
 
 if (!selectedObject.value) {
   console.error('No object selected')
@@ -109,7 +128,11 @@ function saveObject() {
       name: objectName.value,
       tags: objectTags.value,
       origin_x: objectOriginX.value,
-      origin_y: objectOriginY.value
+      origin_y: objectOriginY.value,
+      isAnimated: objectIsAnimated.value,
+      frameSpeed: objectFrameSpeed.value,
+      frameWidth: objectFrameWidth.value,
+      frameHeight: objectFrameHeight.value
     },
     (response: boolean) => {
       if (!response) {
@@ -127,6 +150,10 @@ watch(selectedObject, (object: Object | null) => {
   objectTags.value = object.tags
   objectOriginX.value = object.origin_x
   objectOriginY.value = object.origin_y
+  objectIsAnimated.value = object.isAnimated
+  objectFrameSpeed.value = object.frameSpeed
+  objectFrameWidth.value = object.frameWidth
+  objectFrameHeight.value = object.frameHeight
 })
 
 onMounted(() => {