mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-11-23 08:13:01 +00:00
VSCode: "octref.vetur" -> "Vue.volar"
This commit is contained in:
parent
17b6950491
commit
391f3e8fba
13 changed files with 72 additions and 130 deletions
|
@ -23,8 +23,8 @@
|
||||||
"extensions": [
|
"extensions": [
|
||||||
"dbaeumer.vscode-eslint",
|
"dbaeumer.vscode-eslint",
|
||||||
"mhutchie.git-graph",
|
"mhutchie.git-graph",
|
||||||
"octref.vetur",
|
"Syler.sass-indented",
|
||||||
"Syler.sass-indented"
|
"Vue.volar"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,12 +11,7 @@
|
||||||
|
|
||||||
<DoorMapEditor />
|
<DoorMapEditor />
|
||||||
|
|
||||||
<CalendarDoor
|
<CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" @openDoor="open_calendar_door" />
|
||||||
v-for="(_, index) in 24"
|
|
||||||
:key="index"
|
|
||||||
:day="index"
|
|
||||||
@openDoor="open_calendar_door"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
@ -65,7 +60,7 @@ export default class extends Vue {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private open_calendar_door(image_src: string) {
|
public open_calendar_door(image_src: string) {
|
||||||
this.$refs.image_modal.show_src(image_src);
|
this.$refs.image_modal.show_src(image_src);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<nav class="breadcrumb has-succeeds-separator">
|
<nav class="breadcrumb has-succeeds-separator">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li v-for="(step, index) in steps" :key="`step-${index}`" :class="modelValue === index ? 'is-active' : ''"
|
||||||
v-for="(step, index) in steps"
|
@click="change_step(index)">
|
||||||
:key="`step-${index}`"
|
|
||||||
:class="modelValue === index ? 'is-active' : ''"
|
|
||||||
@click="change_step(index)"
|
|
||||||
>
|
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small">
|
<span class="icon is-small">
|
||||||
<font-awesome-icon :icon="step.icon" />
|
<font-awesome-icon :icon="step.icon" />
|
||||||
|
@ -34,10 +30,10 @@ export interface Step {
|
||||||
emits: ["update:modelValue"],
|
emits: ["update:modelValue"],
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private steps!: Step[];
|
public steps!: Step[];
|
||||||
private modelValue!: number;
|
public modelValue!: number;
|
||||||
|
|
||||||
private change_step(next_step: number) {
|
public change_step(next_step: number) {
|
||||||
if (next_step === this.modelValue) {
|
if (next_step === this.modelValue) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Options } from "vue-class-component";
|
import { Options, Vue } from "vue-class-component";
|
||||||
|
|
||||||
@Options({
|
@Options({
|
||||||
props: {
|
props: {
|
||||||
|
@ -13,7 +13,7 @@ import { Vue, Options } from "vue-class-component";
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
day!: number;
|
day!: number;
|
||||||
|
|
||||||
private on_click() {
|
public on_click() {
|
||||||
this.$advent22.api_get_blob(`days/image/${this.day}`, (data) => {
|
this.$advent22.api_get_blob(`days/image/${this.day}`, (data) => {
|
||||||
this.$emit("openDoor", data);
|
this.$emit("openDoor", data);
|
||||||
});
|
});
|
||||||
|
|
|
@ -11,12 +11,12 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Options } from "vue-class-component";
|
import { Options, Vue } from "vue-class-component";
|
||||||
import { Door } from "./door_map/calendar";
|
import { Door } from "./door_map/calendar";
|
||||||
|
|
||||||
import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
|
import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
|
||||||
import DoorPlacer from "./door_map/DoorPlacer.vue";
|
|
||||||
import DoorChooser from "./door_map/DoorChooser.vue";
|
import DoorChooser from "./door_map/DoorChooser.vue";
|
||||||
|
import DoorPlacer from "./door_map/DoorPlacer.vue";
|
||||||
|
|
||||||
@Options({
|
@Options({
|
||||||
components: {
|
components: {
|
||||||
|
@ -26,12 +26,12 @@ import DoorChooser from "./door_map/DoorChooser.vue";
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private readonly steps: Step[] = [
|
public readonly steps: Step[] = [
|
||||||
{ label: "Platzieren", icon: "fa-solid fa-crosshairs" },
|
{ label: "Platzieren", icon: "fa-solid fa-crosshairs" },
|
||||||
{ label: "Ordnen", icon: "fa-solid fa-list-ol" },
|
{ label: "Ordnen", icon: "fa-solid fa-list-ol" },
|
||||||
{ label: "Überprüfen", icon: "fa-solid fa-check" },
|
{ label: "Überprüfen", icon: "fa-solid fa-check" },
|
||||||
];
|
];
|
||||||
private current_step = 0;
|
public current_step = 0;
|
||||||
private doors: Door[] = [];
|
public doors: Door[] = [];
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
import { Vue } from "vue-class-component";
|
import { Vue } from "vue-class-component";
|
||||||
|
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private active = false;
|
public active = false;
|
||||||
public image_src = "";
|
public image_src = "";
|
||||||
|
|
||||||
public created() {
|
public created() {
|
||||||
|
|
|
@ -40,9 +40,9 @@
|
||||||
import { Vue } from "vue-class-component";
|
import { Vue } from "vue-class-component";
|
||||||
|
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private active = false;
|
public active = false;
|
||||||
private username = "";
|
public username = "";
|
||||||
private password = "";
|
public password = "";
|
||||||
|
|
||||||
public created() {
|
public created() {
|
||||||
window.addEventListener("keydown", (e) => {
|
window.addEventListener("keydown", (e) => {
|
||||||
|
@ -57,7 +57,7 @@ export default class extends Vue {
|
||||||
this.password = "";
|
this.password = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
private submit() {
|
public submit() {
|
||||||
this.$advent22.set_api_auth(this.username, this.password);
|
this.$advent22.set_api_auth(this.username, this.password);
|
||||||
this.set_active(false);
|
this.set_active(false);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,11 +13,7 @@
|
||||||
<figure class="image">
|
<figure class="image">
|
||||||
<img :src="$advent22.api_url('general/background')" />
|
<img :src="$advent22.api_url('general/background')" />
|
||||||
<ThouCanvas>
|
<ThouCanvas>
|
||||||
<PreviewDoor
|
<PreviewDoor v-for="(_, index) in doors" :key="`door-${index}`" v-model:door="doors[index]" />
|
||||||
v-for="(_, index) in doors"
|
|
||||||
:key="`door-${index}`"
|
|
||||||
v-model:door="doors[index]"
|
|
||||||
/>
|
|
||||||
</ThouCanvas>
|
</ThouCanvas>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
|
@ -41,7 +37,7 @@ import PreviewDoor from "./PreviewDoor.vue";
|
||||||
emits: ["update:doors"],
|
emits: ["update:doors"],
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private doors!: Door[];
|
public doors!: Door[];
|
||||||
|
|
||||||
public beforeUnmount() {
|
public beforeUnmount() {
|
||||||
this.$emit("update:doors", this.doors);
|
this.$emit("update:doors", this.doors);
|
||||||
|
@ -50,7 +46,7 @@ export default class extends Vue {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
section > figure {
|
section>figure {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -10,21 +10,16 @@
|
||||||
</div>
|
</div>
|
||||||
<figure class="image">
|
<figure class="image">
|
||||||
<img :src="$advent22.api_url('general/background')" />
|
<img :src="$advent22.api_url('general/background')" />
|
||||||
<RectangleCanvas
|
<RectangleCanvas :rectangles="rectangles" @draw="on_draw" @drag="on_drag" @remove="on_remove" />
|
||||||
:rectangles="rectangles"
|
|
||||||
@draw="on_draw"
|
|
||||||
@drag="on_drag"
|
|
||||||
@remove="on_remove"
|
|
||||||
/>
|
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Options } from "vue-class-component";
|
import { Options, Vue } from "vue-class-component";
|
||||||
import { Rectangle } from "../rects/rectangles";
|
import { Rectangle } from "../rects/rectangles";
|
||||||
import { Door } from "./calendar";
|
|
||||||
import RectangleCanvas from "./RectangleCanvas.vue";
|
import RectangleCanvas from "./RectangleCanvas.vue";
|
||||||
|
import { Door } from "./calendar";
|
||||||
|
|
||||||
@Options({
|
@Options({
|
||||||
components: {
|
components: {
|
||||||
|
@ -38,19 +33,19 @@ import RectangleCanvas from "./RectangleCanvas.vue";
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private doors!: Door[];
|
private doors!: Door[];
|
||||||
|
|
||||||
private get rectangles() {
|
public get rectangles() {
|
||||||
return this.doors.map((door) => door.position);
|
return this.doors.map((door) => door.position);
|
||||||
}
|
}
|
||||||
|
|
||||||
private on_draw(position: Rectangle) {
|
public on_draw(position: Rectangle) {
|
||||||
this.doors.push(new Door(position));
|
this.doors.push(new Door(position));
|
||||||
}
|
}
|
||||||
|
|
||||||
private find_door_index(position: Rectangle): number {
|
public find_door_index(position: Rectangle): number {
|
||||||
return this.doors.findIndex((door) => door.position.equals(position));
|
return this.doors.findIndex((door) => door.position.equals(position));
|
||||||
}
|
}
|
||||||
|
|
||||||
private on_drag(old_pos: Rectangle, new_pos: Rectangle) {
|
public on_drag(old_pos: Rectangle, new_pos: Rectangle) {
|
||||||
const idx = this.find_door_index(old_pos);
|
const idx = this.find_door_index(old_pos);
|
||||||
|
|
||||||
if (idx === -1) {
|
if (idx === -1) {
|
||||||
|
@ -60,7 +55,7 @@ export default class extends Vue {
|
||||||
this.doors[idx].position = new_pos;
|
this.doors[idx].position = new_pos;
|
||||||
}
|
}
|
||||||
|
|
||||||
private on_remove(position: Rectangle) {
|
public on_remove(position: Rectangle) {
|
||||||
const idx = this.find_door_index(position);
|
const idx = this.find_door_index(position);
|
||||||
|
|
||||||
if (idx === -1) {
|
if (idx === -1) {
|
||||||
|
@ -77,7 +72,7 @@ export default class extends Vue {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
section > figure {
|
section>figure {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,27 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<SVGRect :rectangle="door.position" :focused="editing" />
|
<SVGRect :rectangle="door.position" :focused="editing" />
|
||||||
<foreignObject
|
<foreignObject :x="Math.round(parent_aspect_ratio * door.position.left)" :y="door.position.top"
|
||||||
:x="Math.round(parent_aspect_ratio * door.position.left)"
|
:width="Math.round(parent_aspect_ratio * door.position.width)" :height="door.position.height"
|
||||||
:y="door.position.top"
|
:style="`transform: scaleX(${1 / parent_aspect_ratio})`">
|
||||||
:width="Math.round(parent_aspect_ratio * door.position.width)"
|
<div xmlns="http://www.w3.org/1999/xhtml" class="is-flex is-align-items-center is-justify-content-center"
|
||||||
:height="door.position.height"
|
@click.left="on_click">
|
||||||
:style="`transform: scaleX(${1 / parent_aspect_ratio})`"
|
<input v-if="editing" v-model="day_str" ref="day_input" class="input is-large" type="number" min="-1"
|
||||||
>
|
placeholder="Tag" @keydown="on_keydown" />
|
||||||
<div
|
|
||||||
xmlns="http://www.w3.org/1999/xhtml"
|
|
||||||
class="is-flex is-align-items-center is-justify-content-center"
|
|
||||||
@click.left="on_click"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-if="editing"
|
|
||||||
v-model="day_str"
|
|
||||||
ref="day_input"
|
|
||||||
class="input is-large"
|
|
||||||
type="number"
|
|
||||||
min="-1"
|
|
||||||
placeholder="Tag"
|
|
||||||
@keydown="on_keydown"
|
|
||||||
/>
|
|
||||||
<div v-else class="is-size-1 has-text-weight-bold">
|
<div v-else class="is-size-1 has-text-weight-bold">
|
||||||
<template v-if="door.day >= 0">{{ door.day }}</template>
|
<template v-if="door.day >= 0">{{ door.day }}</template>
|
||||||
</div>
|
</div>
|
||||||
|
@ -49,11 +34,11 @@ import SVGRect from "../rects/SVGRect.vue";
|
||||||
emits: ["update:door"],
|
emits: ["update:door"],
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private door!: Door;
|
public door!: Door;
|
||||||
private editable!: boolean;
|
private editable!: boolean;
|
||||||
|
|
||||||
private day_str = "";
|
public day_str = "";
|
||||||
private editing = false;
|
public editing = false;
|
||||||
private refreshKey = 0;
|
private refreshKey = 0;
|
||||||
|
|
||||||
declare $refs: {
|
declare $refs: {
|
||||||
|
@ -69,7 +54,7 @@ export default class extends Vue {
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
private get parent_aspect_ratio(): number {
|
public get parent_aspect_ratio(): number {
|
||||||
this.refreshKey; // read it just to force recompute on change
|
this.refreshKey; // read it just to force recompute on change
|
||||||
|
|
||||||
if (!(this.$el instanceof Text) || this.$el.parentElement === null) {
|
if (!(this.$el instanceof Text) || this.$el.parentElement === null) {
|
||||||
|
@ -99,7 +84,7 @@ export default class extends Vue {
|
||||||
this.editing = this.editable && !this.editing;
|
this.editing = this.editable && !this.editing;
|
||||||
}
|
}
|
||||||
|
|
||||||
private on_click(event: MouseEvent) {
|
public on_click(event: MouseEvent) {
|
||||||
if (event.target === null || !(event.target instanceof HTMLDivElement)) {
|
if (event.target === null || !(event.target instanceof HTMLDivElement)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -121,7 +106,7 @@ export default class extends Vue {
|
||||||
this.toggle_editing();
|
this.toggle_editing();
|
||||||
}
|
}
|
||||||
|
|
||||||
private on_keydown(event: KeyboardEvent) {
|
public on_keydown(event: KeyboardEvent) {
|
||||||
if (!this.editing) {
|
if (!this.editing) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -147,7 +132,7 @@ export default class extends Vue {
|
||||||
foreignObject {
|
foreignObject {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
> div {
|
>div {
|
||||||
color: red;
|
color: red;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,27 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<ThouCanvas
|
<ThouCanvas @mousedown.left="draw_start" @mouseup.left="draw_finish" @mousedown.right="drag_start"
|
||||||
@mousedown.left="draw_start"
|
@mouseup.right="drag_finish" @mousemove="on_mousemove" @click.middle="remove_rect" @dblclick.left="remove_rect">
|
||||||
@mouseup.left="draw_finish"
|
<SVGRect v-for="(rect, index) in rectangles" :key="`rect-${index}`" :rectangle="rect" />
|
||||||
@mousedown.right="drag_start"
|
|
||||||
@mouseup.right="drag_finish"
|
|
||||||
@mousemove="on_mousemove"
|
|
||||||
@click.middle="remove_rect"
|
|
||||||
@dblclick.left="remove_rect"
|
|
||||||
>
|
|
||||||
<SVGRect
|
|
||||||
v-for="(rect, index) in rectangles"
|
|
||||||
:key="`rect-${index}`"
|
|
||||||
:rectangle="rect"
|
|
||||||
/>
|
|
||||||
<SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
|
<SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
|
||||||
</ThouCanvas>
|
</ThouCanvas>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Options } from "vue-class-component";
|
import { Options, Vue } from "vue-class-component";
|
||||||
import { Vector2D, Rectangle } from "../rects/rectangles";
|
|
||||||
import ThouCanvas from "../rects/ThouCanvas.vue";
|
|
||||||
import SVGRect from "../rects/SVGRect.vue";
|
import SVGRect from "../rects/SVGRect.vue";
|
||||||
|
import ThouCanvas from "../rects/ThouCanvas.vue";
|
||||||
|
import { Rectangle, Vector2D } from "../rects/rectangles";
|
||||||
|
|
||||||
enum CanvasState {
|
enum CanvasState {
|
||||||
Idle,
|
Idle,
|
||||||
|
@ -42,12 +31,12 @@ enum CanvasState {
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private readonly min_rect_area = 300;
|
private readonly min_rect_area = 300;
|
||||||
private state = CanvasState.Idle;
|
private state = CanvasState.Idle;
|
||||||
private preview_rect = new Rectangle();
|
public preview_rect = new Rectangle();
|
||||||
private drag_rect?: Rectangle;
|
private drag_rect?: Rectangle;
|
||||||
private drag_origin = new Vector2D();
|
private drag_origin = new Vector2D();
|
||||||
private rectangles!: Rectangle[];
|
public rectangles!: Rectangle[];
|
||||||
|
|
||||||
private get preview_visible(): boolean {
|
public get preview_visible(): boolean {
|
||||||
return this.state !== CanvasState.Idle;
|
return this.state !== CanvasState.Idle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -61,7 +50,7 @@ export default class extends Vue {
|
||||||
return this.rectangles.splice(idx, 1)[0];
|
return this.rectangles.splice(idx, 1)[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
private draw_start(event: MouseEvent, point: Vector2D) {
|
public draw_start(event: MouseEvent, point: Vector2D) {
|
||||||
if (this.preview_visible) {
|
if (this.preview_visible) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -70,7 +59,7 @@ export default class extends Vue {
|
||||||
this.preview_rect = new Rectangle(point, point);
|
this.preview_rect = new Rectangle(point, point);
|
||||||
}
|
}
|
||||||
|
|
||||||
private draw_finish() {
|
public draw_finish() {
|
||||||
if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
|
if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -85,7 +74,7 @@ export default class extends Vue {
|
||||||
this.$emit("draw", this.preview_rect);
|
this.$emit("draw", this.preview_rect);
|
||||||
}
|
}
|
||||||
|
|
||||||
private drag_start(event: MouseEvent, point: Vector2D) {
|
public drag_start(event: MouseEvent, point: Vector2D) {
|
||||||
if (this.preview_visible) {
|
if (this.preview_visible) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -102,7 +91,7 @@ export default class extends Vue {
|
||||||
this.preview_rect = this.drag_rect;
|
this.preview_rect = this.drag_rect;
|
||||||
}
|
}
|
||||||
|
|
||||||
private drag_finish() {
|
public drag_finish() {
|
||||||
if (
|
if (
|
||||||
this.state !== CanvasState.Dragging ||
|
this.state !== CanvasState.Dragging ||
|
||||||
this.preview_rect === undefined
|
this.preview_rect === undefined
|
||||||
|
@ -115,7 +104,7 @@ export default class extends Vue {
|
||||||
this.$emit("drag", this.drag_rect, this.preview_rect);
|
this.$emit("drag", this.drag_rect, this.preview_rect);
|
||||||
}
|
}
|
||||||
|
|
||||||
private on_mousemove(event: MouseEvent, point: Vector2D) {
|
public on_mousemove(event: MouseEvent, point: Vector2D) {
|
||||||
if (this.preview_rect === undefined) {
|
if (this.preview_rect === undefined) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -128,7 +117,7 @@ export default class extends Vue {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private remove_rect(event: MouseEvent, point: Vector2D) {
|
public remove_rect(event: MouseEvent, point: Vector2D) {
|
||||||
if (this.preview_visible) {
|
if (this.preview_visible) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<rect
|
<rect :class="focused ? 'focus' : ''" :x="rectangle.left" :y="rectangle.top" :width="rectangle.width"
|
||||||
:class="focused ? 'focus' : ''"
|
:height="rectangle.height" />
|
||||||
:x="rectangle.left"
|
|
||||||
:y="rectangle.top"
|
|
||||||
:width="rectangle.width"
|
|
||||||
:height="rectangle.height"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Options } from "vue-class-component";
|
import { Options, Vue } from "vue-class-component";
|
||||||
import { Rectangle } from "./rectangles";
|
import { Rectangle } from "./rectangles";
|
||||||
|
|
||||||
@Options({
|
@Options({
|
||||||
|
@ -22,8 +17,8 @@ import { Rectangle } from "./rectangles";
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private focused!: boolean;
|
public focused!: boolean;
|
||||||
private rectangle!: Rectangle;
|
public rectangle!: Rectangle;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,22 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<svg
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
@contextmenu.prevent @mousedown="transform_mouse_event" @mousemove="transform_mouse_event"
|
||||||
version="1.1"
|
@mouseup="transform_mouse_event" @click="transform_mouse_event" @dblclick="transform_mouse_event">
|
||||||
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" />
|
<slot name="default" />
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Vue, Options } from "vue-class-component";
|
import { Options, Vue } from "vue-class-component";
|
||||||
import { Vector2D } from "./rectangles";
|
import { Vector2D } from "./rectangles";
|
||||||
|
|
||||||
function get_event_thous(event: MouseEvent): Vector2D {
|
function get_event_thous(event: MouseEvent): Vector2D {
|
||||||
|
@ -56,7 +47,7 @@ function mouse_event_validator(event: object, point: object): boolean {
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private transform_mouse_event(event: MouseEvent) {
|
public transform_mouse_event(event: MouseEvent) {
|
||||||
const point = get_event_thous(event);
|
const point = get_event_thous(event);
|
||||||
this.$emit(event.type, event, point);
|
this.$emit(event.type, event, point);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue