<template>
  <div style="margin-top: 10px">
    <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
    <canvas id="roundRect" width="740" height="400"/>
  </div>
</template>

<script>
  import {SGraphScene, SGraphShape, SGraphView} from '@persagy-web/graph/lib'
  import {SRect} from '@persagy-web/draw/lib'

  class roundRect extends SGraphShape {
    constructor(parent, data) {
      super(parent, data.Style);
      this.leftTopX = data.X;
      this.leftTopY = data.Y;
      this.width = data.Width;
      this.height = data.Height;
      this.radius = data.Radius;
    }

    boundingRect() {
      return new SRect(this.leftTopX, this.leftTopY, this.width, this.height)
    }

    onDraw(painter) {
      super.onDraw(painter);
      painter.drawRoundRect(this.leftTopX, this.leftTopY, this.width, this.height, this.radius)
    }
  }

  export default {
    name: "roundRect",
    data() {
      return {
        view: '',
        item: '',
        item2: '',
        rectData: {
          X: 0,
          Y: 0,
          Width: 500,
          Height: 500,
          Radius: 50,
          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": {}
            },
          }
        },
        rectData2: {
          X: 1000,
          Y: 0,
          Width: 500,
          Height: 500,
          Radius: 50,
          Style: {
            "Default": {
              "Stroke": "#cccccc",
              "Fill": "#ffccee",
              "LineWidth": 2,
              "Effect": {}
            },
            "Selected": {
              "Stroke": "#66ff66",
              "Fill": "#ff33ee",
              "LineWidth": 3,
              "Effect": {}
            },
            "Disabled": {
              "Stroke": "#333333",
              "Fill": "#afafaf",
              "LineWidth": 1,
              "Effect": {}
            },
          }
        }
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.view = new SGraphView('roundRect');
        const scene = new SGraphScene();

        this.item = new roundRect(null, this.rectData);
        this.item.selectable = true;
        scene.addItem(this.item);

        this.item2 = new roundRect(null, this.rectData2);
        this.item2.selectable = true;
        scene.addItem(this.item2);

        this.view.scene = scene;
        this.view.fitSceneToView();
        this.view.scalable = false
      },
      changeEnable() {
        if (this.item) {
          this.item.enabled = !this.item.enabled
        }
      },

    }
  }
</script>

<style scoped>

</style>