61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
version="1.1"
|
|
viewBox="0 0 1000 1000"
|
|
preserveAspectRatio="none"
|
|
@contextmenu.prevent
|
|
@mousedown="transform_mouse_event"
|
|
@mousemove="transform_mouse_event"
|
|
@mouseup="transform_mouse_event"
|
|
@click="transform_mouse_event"
|
|
@dblclick="transform_mouse_event"
|
|
>
|
|
<slot name="default" />
|
|
</svg>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Vector2D } from "@/lib/rects/vector2d";
|
|
|
|
function get_event_thous(event: MouseEvent): Vector2D {
|
|
if (!(event.currentTarget instanceof SVGSVGElement)) {
|
|
return new Vector2D();
|
|
}
|
|
|
|
return new Vector2D(
|
|
Math.round((event.offsetX / event.currentTarget.clientWidth) * 1000),
|
|
Math.round((event.offsetY / event.currentTarget.clientHeight) * 1000),
|
|
);
|
|
}
|
|
|
|
const emit = defineEmits<{
|
|
(event: "mousedown", e: MouseEvent, point: Vector2D): void;
|
|
(event: "mouseup", e: MouseEvent, point: Vector2D): void;
|
|
(event: "mousemove", e: MouseEvent, point: Vector2D): void;
|
|
(event: "click", e: MouseEvent, point: Vector2D): void;
|
|
(event: "dblclick", e: MouseEvent, point: Vector2D): void;
|
|
}>();
|
|
|
|
function transform_mouse_event(event: MouseEvent) {
|
|
const point = get_event_thous(event);
|
|
|
|
// mute a useless typescript error
|
|
const event_type = event.type as "mousedown";
|
|
|
|
emit(event_type, event, point);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
z-index: auto;
|
|
}
|
|
</style>
|