43 lines
No EOL
727 B
Vue
43 lines
No EOL
727 B
Vue
<template>
|
|
<rect
|
|
:class="focused ? 'focus' : ''"
|
|
: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;
|
|
|
|
&.focus {
|
|
fill: gold;
|
|
stroke: yellow;
|
|
}
|
|
}
|
|
</style> |