MapViewer fro Camera

spx-gui/src/components/editor/preview/stage-viewer/NodeTransformer.vue → spx-gui/src/components/editor/common/viewer/NodeTransformer.vue

@@ -5,21 +5,22 @@
 <script setup lang="ts">
 import { computed, effect, nextTick, ref } from 'vue'
 import type { Node } from 'konva/lib/Node'
-import { useEditorCtx } from '../../EditorContextProvider.vue'
+import { Sprite } from '@/models/sprite'
+import type { Widget } from '@/models/widget'
 import type { CustomTransformer, CustomTransformerConfig } from './custom-transformer'
 import { getNodeId } from './common'
 
 const props = defineProps<{
+  target: Sprite | Widget | null
   nodeReadyMap: Map<string, boolean>
 }>()
 
 const transformer = ref<KonvaNodeInstance<CustomTransformer>>()
-const editorCtx = useEditorCtx()
 
 const config = computed<CustomTransformerConfig>(() => {
-  if (editorCtx.state.selectedSprite != null) {
+  if (props.target instanceof Sprite) {
     return {
-      rotationStyle: editorCtx.state.selectedSprite.rotationStyle,
+      rotationStyle: props.target.rotationStyle,
       centeredScaling: true
     }
   }
@@ -33,9 +34,8 @@ effect(async () => {
   if (transformer.value == null) return
   const transformerNode = transformer.value.getNode()
   transformerNode.nodes([])
-  const selected = editorCtx.state.selectedSprite ?? editorCtx.state.selectedWidget
-  if (selected == null) return
-  const nodeId = getNodeId(selected)
+  if (props.target == null) return
+  const nodeId = getNodeId(props.target)
   // Wait for node ready, so that Konva can get correct node size
   if (!props.nodeReadyMap.get(nodeId)) return
   const stage = transformerNode.getStage()

spx-gui/src/components/editor/preview/stage-viewer/SpriteNode.vue → spx-gui/src/components/editor/common/viewer/SpriteNode.vue

@@ -1,40 +1,34 @@
-<template>
-  <v-image
-    ref="nodeRef"
-    :config="config"
-    @dragmove="handleDragMove"
-    @dragend="handleDragEnd"
-    @transformend="handleTransformed"
-    @click="handleClick"
-  />
-</template>
 <script lang="ts" setup>
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { Image, ImageConfig } from 'konva/lib/shapes/Image'
-import type { Action } from '@/models/project'
+import type { Action, Project } from '@/models/project'
 import { LeftRight, RotationStyle, headingToLeftRight, leftRightToHeading, type Sprite } from '@/models/sprite'
 import type { Size } from '@/models/common'
 import { nomalizeDegree, round, useAsyncComputed } from '@/utils/utils'
 import { useFileImg } from '@/utils/file'
-import { useEditorCtx } from '../../EditorContextProvider.vue'
 import { cancelBubble, getNodeId } from './common'
 
 const props = defineProps<{
   sprite: Sprite
+  selected: boolean
+  project: Project
   mapSize: Size
   nodeReadyMap: Map<string, boolean>
 }>()
 
-export type CameraScrollNotifyFn = (delta: { x: number; y: number }) => void
+export type CameraScrollNotifyFn = (
+  /** Delta of camera position (in game) change */
+  delta: { x: number; y: number }
+) => void
 
 const emit = defineEmits<{
+  selected: []
   dragMove: [notifyCameraScroll: CameraScrollNotifyFn]
   dragEnd: []
 }>()
 
 const nodeRef = ref<KonvaNodeInstance<Image>>()
-const editorCtx = useEditorCtx()
 const costume = computed(() => props.sprite.defaultCostume)
 const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
 const [image] = useFileImg(() => costume.value?.img)
@@ -54,7 +48,7 @@ onMounted(() => {
   // Konva warning: Node has no parent. zIndex parameter is ignored.
   // Konva warning: Unexpected value 2 for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to 1.
   // ```
-  const zIndex = editorCtx.project.zorder.indexOf(props.sprite.id)
+  const zIndex = props.project.zorder.indexOf(props.sprite.id)
   if (zIndex >= 0) {
     nodeRef.value!.getNode().zIndex(zIndex)
   }
@@ -88,13 +82,12 @@ function handleTransformed(e: KonvaEventObject<unknown>) {
 const config = computed<ImageConfig>(() => {
   const { visible, x, y, rotationStyle, heading, size, pivot } = props.sprite
   const scale = size / bitmapResolution.value
-  const isSelected = editorCtx.state.selectedSprite?.id === props.sprite.id
   const config = {
     nodeId: nodeId.value,
     image: image.value ?? undefined,
     width: rawSize.value?.width ?? 0,
     height: rawSize.value?.height ?? 0,
-    draggable: isSelected,
+    draggable: props.selected,
     offsetX: 0,
     offsetY: 0,
     visible: visible,
@@ -129,7 +122,7 @@ function handleChange(e: KonvaEventObject<unknown>, action: Action) {
     heading = nomalizeDegree(round(e.target.rotation() + 90))
   }
   const size = round(Math.abs(e.target.scaleX()) * bitmapResolution.value, 2)
-  editorCtx.project.history.doAction(action, () => {
+  props.project.history.doAction(action, () => {
     sprite.setX(x)
     sprite.setY(y)
     sprite.setHeading(heading)
@@ -138,6 +131,17 @@ function handleChange(e: KonvaEventObject<unknown>, action: Action) {
 }
 
 function handleClick() {
-  editorCtx.state.selectSprite(props.sprite.id)
+  emit('selected')
 }
 </script>
+
+<template>
+  <v-image
+    ref="nodeRef"
+    :config="config"
+    @dragmove="handleDragMove"
+    @dragend="handleDragEnd"
+    @transformend="handleTransformed"
+    @click="handleClick"
+  />
+</template>