67 lines
No EOL
1.1 KiB
Vue
67 lines
No EOL
1.1 KiB
Vue
<template>
|
|
<rect
|
|
:class="classes"
|
|
:x="rectangle.left"
|
|
:y="rectangle.top"
|
|
:width="rectangle.width"
|
|
:height="rectangle.height"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Options } from "vue-class-component";
|
|
import { Rectangle } from "./rectangles";
|
|
|
|
@Options({
|
|
props: {
|
|
selected: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
highlighted: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
rectangle: Rectangle,
|
|
},
|
|
})
|
|
export default class Rect extends Vue {
|
|
private selected!: boolean;
|
|
private highlighted!: boolean;
|
|
private rectangle!: Rectangle;
|
|
|
|
private get classes(): string {
|
|
let result: string[] = [];
|
|
|
|
if (this.selected) {
|
|
result.push("select");
|
|
}
|
|
|
|
if (this.highlighted) {
|
|
result.push("highlight");
|
|
}
|
|
|
|
return result.join(" ");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
rect {
|
|
fill: lightgreen;
|
|
stroke: green;
|
|
fill-opacity: 0.2;
|
|
stroke-opacity: 0.9;
|
|
stroke-width: 1;
|
|
|
|
&.select {
|
|
fill-opacity: 0.4;
|
|
stroke-opacity: 1;
|
|
}
|
|
|
|
&.highlight {
|
|
fill: gold;
|
|
stroke: yellow;
|
|
}
|
|
}
|
|
</style> |