forked from noxious/client
Added logics to update object frame speed, width and height for animated objects
This commit is contained in:
parent
43f0b73309
commit
eb7b58648b
@ -26,11 +26,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="w-full flex flex-col mb-5">
|
<div class="w-full flex flex-col mb-5">
|
||||||
<label class="mb-1.5 font-titles" for="origin-x">Is animated</label>
|
<label class="mb-1.5 font-titles" for="origin-x">Is animated</label>
|
||||||
<select v-model="objectIsAnimated" class="input-cyan">
|
<select :value="objectIsAnimated.toString()" @change="updateObjectIsAnimated" class="input-cyan" name="is-animated">
|
||||||
<option value="0">No</option>
|
<option value="false">No</option>
|
||||||
<option value="1">Yes</option>
|
<option value="true">Yes</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</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>
|
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@ -57,6 +69,13 @@ const objectTags = ref([] as string[])
|
|||||||
const objectOriginX = ref(0)
|
const objectOriginX = ref(0)
|
||||||
const objectOriginY = ref(0)
|
const objectOriginY = ref(0)
|
||||||
const objectIsAnimated = ref(false)
|
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) {
|
if (!selectedObject.value) {
|
||||||
console.error('No object selected')
|
console.error('No object selected')
|
||||||
@ -109,7 +128,11 @@ function saveObject() {
|
|||||||
name: objectName.value,
|
name: objectName.value,
|
||||||
tags: objectTags.value,
|
tags: objectTags.value,
|
||||||
origin_x: objectOriginX.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) => {
|
(response: boolean) => {
|
||||||
if (!response) {
|
if (!response) {
|
||||||
@ -127,6 +150,10 @@ watch(selectedObject, (object: Object | null) => {
|
|||||||
objectTags.value = object.tags
|
objectTags.value = object.tags
|
||||||
objectOriginX.value = object.origin_x
|
objectOriginX.value = object.origin_x
|
||||||
objectOriginY.value = object.origin_y
|
objectOriginY.value = object.origin_y
|
||||||
|
objectIsAnimated.value = object.isAnimated
|
||||||
|
objectFrameSpeed.value = object.frameSpeed
|
||||||
|
objectFrameWidth.value = object.frameWidth
|
||||||
|
objectFrameHeight.value = object.frameHeight
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user