43 lines
731 B
Vue
43 lines
731 B
Vue
|
<template>
|
||
|
|
<rect
|
||
|
|
:class="focused ? 'focused' : ''"
|
||
|
|
: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: {
|
||
|
|
focused: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
rectangle: Rectangle,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
export default class Rect extends Vue {
|
||
|
|
private focused!: boolean;
|
||
|
|
private rectangle!: Rectangle;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
rect {
|
||
|
|
fill: lightgreen;
|
||
|
|
stroke: green;
|
||
|
|
fill-opacity: 0.2;
|
||
|
|
stroke-opacity: 0.9;
|
||
|
|
stroke-width: 1;
|
||
|
|
|
||
|
|
&.focused {
|
||
|
|
fill: gold;
|
||
|
|
stroke: yellow;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|