mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-12-24 13:33:00 +00:00
show drawn rectangles
This commit is contained in:
parent
9fa1498af3
commit
96de19fbbd
2 changed files with 25 additions and 6 deletions
|
@ -12,12 +12,20 @@
|
|||
>
|
||||
<rect
|
||||
v-if="preview_state.visible"
|
||||
id="preview"
|
||||
class="focus"
|
||||
:x="preview_rectangle.left"
|
||||
:y="preview_rectangle.top"
|
||||
:width="preview_rectangle.width"
|
||||
:height="preview_rectangle.height"
|
||||
/>
|
||||
<rect
|
||||
v-for="rect in rectangles"
|
||||
:key="rect.left"
|
||||
:x="rect.left"
|
||||
:y="rect.top"
|
||||
:width="rect.width"
|
||||
:height="rect.height"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -47,6 +55,8 @@ export default class CalendarImage extends Vue {
|
|||
corner1: new Vector2D(),
|
||||
corner2: new Vector2D(),
|
||||
};
|
||||
private readonly min_rect_area = 4;
|
||||
private rectangles: Rectangle[] = [];
|
||||
|
||||
private on_pointerdown(event: MouseEvent) {
|
||||
this.preview_state.visible = true;
|
||||
|
@ -60,6 +70,9 @@ export default class CalendarImage extends Vue {
|
|||
|
||||
private on_pointerup() {
|
||||
this.preview_state.visible = false;
|
||||
if (this.preview_rectangle.area >= this.min_rect_area) {
|
||||
this.rectangles.push(this.preview_rectangle);
|
||||
}
|
||||
}
|
||||
|
||||
private get preview_rectangle(): Rectangle {
|
||||
|
@ -119,13 +132,15 @@ div#container {
|
|||
width: 100%;
|
||||
|
||||
rect {
|
||||
stroke-width: 1;
|
||||
stroke-opacity: 0.9;
|
||||
fill: lightgreen;
|
||||
stroke: green;
|
||||
fill-opacity: 0.2;
|
||||
stroke-opacity: 0.9;
|
||||
stroke-width: 1;
|
||||
|
||||
&#preview {
|
||||
fill: white;
|
||||
stroke: red;
|
||||
&.focus {
|
||||
fill: gold;
|
||||
stroke: yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -56,6 +56,10 @@ export class Rectangle {
|
|||
return this.size.y;
|
||||
}
|
||||
|
||||
public get area(): number {
|
||||
return this.width * this.height;
|
||||
}
|
||||
|
||||
public normalize(): Rectangle {
|
||||
let left = this.left;
|
||||
let top = this.top;
|
||||
|
|
Loading…
Reference in a new issue