|
@@ -0,0 +1,70 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <canvas :id="id" width="740" height="400" tabindex="0"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+ import { Component, Prop, Vue } from "vue-property-decorator";
|
|
|
+ import { v1 as uuid } from "uuid";
|
|
|
+ import {SGraphView, SGraphScene, SGraphRectItem} from "@persagy-web/graph/lib";
|
|
|
+ import {SRect} from "@persagy-web/draw/lib";
|
|
|
+
|
|
|
+ class ResizeRect extends SGraphRectItem{
|
|
|
+ resize(oldSize: SRect, newSize: SRect):void{
|
|
|
+ this.width = newSize.width;
|
|
|
+ this.height = newSize.height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @Component
|
|
|
+ export default class SelectContainerCanvas extends Vue {
|
|
|
+ id: string = uuid();
|
|
|
+ view: SGraphView | undefined;
|
|
|
+ rectData = {
|
|
|
+ X: 0,
|
|
|
+ Y: 0,
|
|
|
+ Width: 500,
|
|
|
+ Height: 500,
|
|
|
+ Radius: 0,
|
|
|
+ Style: {
|
|
|
+ "Default":{
|
|
|
+ "Stroke": "#cccccc",
|
|
|
+ "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
|
|
|
+ "LineWidth": 2,
|
|
|
+ "Effect": {}
|
|
|
+ },
|
|
|
+ "Selected": {
|
|
|
+ "Stroke": "#66ff66",
|
|
|
+ "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
|
|
|
+ "LineWidth": 3,
|
|
|
+ "Effect": {}
|
|
|
+ },
|
|
|
+ "Disabled": {
|
|
|
+ "Stroke": "#333333",
|
|
|
+ "Fill": "#afafaf",
|
|
|
+ "LineWidth": 1,
|
|
|
+ "Effect": {}
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+ mounted():void {
|
|
|
+ this.init()
|
|
|
+ };
|
|
|
+ init():void {
|
|
|
+ this.view = new SGraphView(this.id);
|
|
|
+ const scene = new SGraphScene();
|
|
|
+ const item = new ResizeRect(null, this.rectData);
|
|
|
+ scene.addItem(item);
|
|
|
+ item.selectable = true;
|
|
|
+ item.moveable = true;
|
|
|
+ this.view.scene = scene;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ this.view.scalable = false;
|
|
|
+ };
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|