forked from noxious/client
npm update, npm run format
This commit is contained in:
parent
fc34a488d9
commit
0d5acd48ce
6
package-lock.json
generated
6
package-lock.json
generated
@ -1998,9 +1998,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.17.24",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.24.tgz",
|
||||
"integrity": "sha512-d7fGCyB96w9BnWQrOsJtpyiSaBcAYYr75bnK6ZRjDbql2cGLj/3GsL5OYmLPNq76l7Gf2q4Rv9J2o6h5CrD9sA==",
|
||||
"version": "20.17.25",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.25.tgz",
|
||||
"integrity": "sha512-bT+r2haIlplJUYtlZrEanFHdPIZTeiMeh/fSOEbOOfWf9uTn+lg8g0KU6Q3iMgjd9FLuuMAgfCNSkjUbxL6E3Q==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
@ -56,23 +56,21 @@ onPreUpdate(() => {
|
||||
orderedImages.forEach((child, index) => {
|
||||
const image = child as Phaser.GameObjects.Image
|
||||
if (image && props.obj) {
|
||||
image.flipX = props.obj.isRotated;
|
||||
image.flipX = props.obj.isRotated
|
||||
|
||||
if (props.obj.isRotated) {
|
||||
var offsetNum = props.mapObj!.depthOffsets.length
|
||||
|
||||
//Could break in case of images with odd partion number
|
||||
//Shifts image over so that it becomes aligned again after flipping
|
||||
if (index < offsetNum/2) {
|
||||
image.x = props.x! - (props.mapObj!.frameWidth/offsetNum)
|
||||
}
|
||||
else {
|
||||
image.x = props.x! + (props.mapObj!.frameWidth/offsetNum)
|
||||
if (index < offsetNum / 2) {
|
||||
image.x = props.x! - props.mapObj!.frameWidth / offsetNum
|
||||
} else {
|
||||
image.x = props.x! + props.mapObj!.frameWidth / offsetNum
|
||||
}
|
||||
|
||||
image.setDepth(baseDepth - props.mapObj!.depthOffsets[index])
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
image.x = props.x!
|
||||
image.setDepth(baseDepth + props.mapObj!.depthOffsets[index])
|
||||
}
|
||||
@ -80,7 +78,6 @@ onPreUpdate(() => {
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// Initial setup
|
||||
if (props.mapObj && props.x && props.y) {
|
||||
baseDepth = calculateIsometricDepth(props.obj!.positionX, props.obj!.positionY)
|
||||
@ -88,13 +85,13 @@ if (props.mapObj && props.x && props.y) {
|
||||
group.setXY(props.x, props.y)
|
||||
group.setOrigin(props.mapObj.originX, props.mapObj.originY)
|
||||
|
||||
let sliceCount = props.mapObj.depthOffsets.length;
|
||||
let sliceCount = props.mapObj.depthOffsets.length
|
||||
for (let j = 1; j <= sliceCount; j++) {
|
||||
partitionPoints.push(j * (props.mapObj.frameWidth/sliceCount))
|
||||
partitionPoints.push(j * (props.mapObj.frameWidth / sliceCount))
|
||||
}
|
||||
|
||||
for (let i = 0; i < partitionPoints.length - 1; i++) {
|
||||
createImagePartition(partitionPoints[i], partitionPoints[i+1], props.mapObj.depthOffsets[i])
|
||||
createImagePartition(partitionPoints[i], partitionPoints[i + 1], props.mapObj.depthOffsets[i])
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -3,26 +3,22 @@
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<div class="grid grid-cols-[160px_auto_max-content] gap-12">
|
||||
<div>
|
||||
<input type="checkbox" checked v-model="showOrigin"><label>Show Origin</label>
|
||||
<br>
|
||||
<input type="checkbox" checked v-model="showPartitionOverlay"><label>Show Partitions</label>
|
||||
<input type="checkbox" checked v-model="showOrigin" /><label>Show Origin</label>
|
||||
<br />
|
||||
<input type="checkbox" checked v-model="showPartitionOverlay" /><label>Show Partitions</label>
|
||||
</div>
|
||||
<div class="relative w-fit h-fit">
|
||||
<img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" ref="imageRef" />
|
||||
<svg ref="svg" class="absolute top-0 left-0 w-full h-full inline-block pointer-events-none">
|
||||
<circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX*width" :cy="mapObjectOriginY*height" stroke="white" stroke-width="2" />
|
||||
<rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity:0.5" stroke="red"
|
||||
:x="index*(width/mapObjectDepthOffsets.length)"
|
||||
:width="width/mapObjectDepthOffsets.length"
|
||||
:y="0"
|
||||
:height="height"/>
|
||||
<circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX * width" :cy="mapObjectOriginY * height" stroke="white" stroke-width="2" />
|
||||
<rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity: 0.5" stroke="red" :x="index * (width / mapObjectDepthOffsets.length)" :width="width / mapObjectDepthOffsets.length" :y="0" :height="height" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" @click="mapObjectDepthOffsets.push(0)">Add Partition</button>
|
||||
<p>Depth Offset</p>
|
||||
<div class="text-white grid grid-cols-[120px_80px_auto] items-baseline gap-2" v-for="(offset, index) in mapObjectDepthOffsets">
|
||||
<input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)">
|
||||
<input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)" />
|
||||
<button @click="mapObjectDepthOffsets.splice(index, 1)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -77,15 +73,15 @@ import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
import { socketManager } from '@/managers/SocketManager'
|
||||
import { MapObjectStorage } from '@/storage/storages'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
|
||||
import { Rectangle } from 'phavuer'
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
import { Rectangle } from 'phavuer'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
|
||||
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
|
||||
const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
|
||||
const svg = useTemplateRef('svg')
|
||||
const {width, height} = useElementSize(svg)
|
||||
const { width, height } = useElementSize(svg)
|
||||
|
||||
const mapObjectName = ref('')
|
||||
const mapObjectTags = ref<string[]>([])
|
||||
@ -96,8 +92,8 @@ const mapObjectFrameRate = ref(0)
|
||||
const mapObjectFrameWidth = ref(0)
|
||||
const mapObjectFrameHeight = ref(0)
|
||||
const imageRef = ref<HTMLImageElement | null>(null)
|
||||
const showOrigin = ref(true);
|
||||
const showPartitionOverlay = ref(true);
|
||||
const showOrigin = ref(true)
|
||||
const showPartitionOverlay = ref(true)
|
||||
|
||||
if (!selectedMapObject.value) {
|
||||
console.error('No map mapObject selected')
|
||||
@ -114,7 +110,7 @@ if (selectedMapObject.value) {
|
||||
mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
|
||||
}
|
||||
|
||||
const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value)
|
||||
const setPartitionDepth = (event: any, idx: number) => (mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value))
|
||||
|
||||
async function removeObject() {
|
||||
if (!selectedMapObject.value) return
|
||||
|
@ -24,16 +24,16 @@
|
||||
<div v-if="imageDimensions[index]" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ imageDimensions[index].width }}x{{ imageDimensions[index].height }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="mr-3 space-x-2">
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24 text-left" type="button" @click.stop.prevent="openEditorModal(action)">
|
||||
Editor
|
||||
<div class="flex">
|
||||
<small class="text-xs font-default">{{ action.action }}</small>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="mr-3 space-x-2">
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24 text-left" type="button" @click.stop.prevent="openEditorModal(action)">
|
||||
Editor
|
||||
<div class="flex">
|
||||
<small class="text-xs font-default">{{ action.action }}</small>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SpriteEditor
|
||||
v-for="[actionId, editorData] in Array.from(openEditors.entries())"
|
||||
|
@ -235,7 +235,7 @@ onUnmounted(() => {
|
||||
mapEditor.reset()
|
||||
})
|
||||
|
||||
setInterval( () => {
|
||||
setInterval(() => {
|
||||
scene.children.queueDepthSort()
|
||||
}, 0.2)
|
||||
|
||||
|
@ -1,20 +1,13 @@
|
||||
<template>
|
||||
<PlacedMapObject
|
||||
v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object' && mapEditor.isPlacedMapObjectPreviewEnabled.value && mapEditor.selectedMapObject.value && previewPlacedMapObject"
|
||||
:tileMap
|
||||
:tileMapLayer
|
||||
:key="previewPlacedMapObject?.id"
|
||||
:placedMapObject="previewPlacedMapObject as PlacedMapObjectT"
|
||||
v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object' && mapEditor.isPlacedMapObjectPreviewEnabled.value && mapEditor.selectedMapObject.value && previewPlacedMapObject"
|
||||
:tileMap
|
||||
:tileMapLayer
|
||||
:key="previewPlacedMapObject?.id"
|
||||
:placedMapObject="previewPlacedMapObject as PlacedMapObjectT"
|
||||
/>
|
||||
<SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :key="mapEditor.selectedPlacedObject.value.id" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
|
||||
<PlacedMapObject
|
||||
v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects"
|
||||
:tileMap
|
||||
:tileMapLayer
|
||||
:placedMapObject
|
||||
@pointerdown="clickPlacedMapObject(placedMapObject)"
|
||||
:key="`${placedMapObject.id}-${placedMapObjectKey}`"
|
||||
/>
|
||||
<PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" :key="`${placedMapObject.id}-${placedMapObjectKey}`" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
Loading…
x
Reference in New Issue
Block a user