فهرست منبع

对齐支持 文档

haojianlong 4 سال پیش
والد
کامیت
4b166c374d

+ 184 - 0
docs/.vuepress/components/example/web/graph/scene/Align.vue

@@ -0,0 +1,184 @@
+<template>
+    <div>
+        <el-button @click="addCircle">Circle</el-button>
+        <el-button @click="addRect">Rect</el-button>
+        <el-select placeholder="请选择" @change="changeAlign" v-model="value">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+        <canvas id="align" width="740" height="400" tabindex="0"></canvas>
+    </div>
+</template>
+
+<script>
+    import {SGraphItem, SGraphScene, SGraphView, SGraphLayoutType} from "@saga-web/graph/lib";
+    import { SColor, SPainter, SRect } from "@saga-web/draw/lib";
+
+    class RectItem extends SGraphItem {
+        width = 200;
+        height = 100;
+        text = '';
+        constructor(parent) {
+            super(parent);
+            this.moveable = true;
+            this.selectable = true;
+            this.text = new Date().getMilliseconds().toString()
+        }
+
+        boundingRect() {
+            return new SRect(0, 0, this.width, this.height);
+        }
+
+        onDraw(canvas) {
+            canvas.pen.color = SColor.Transparent;
+            canvas.pen.lineWidth = canvas.toPx(1);
+            canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
+            canvas.drawRect(0, 0, this.width, this.height);
+
+            canvas.pen.lineDash = [10,10];
+            canvas.pen.color = SColor.Yellow;
+            canvas.brush.color = SColor.Transparent;
+            canvas.drawRect(this.boundingRect());
+
+            canvas.brush.color = SColor.Black;
+            canvas.drawText(`${this.x},${this.y}`,0,0);
+
+        }
+    }
+
+    class CircleItem extends SGraphItem {
+        r = 75;
+        text = '';
+
+        constructor(parent) {
+            super(parent);
+            this.moveable = true;
+            this.selectable = true;
+            this.text = new Date().getMilliseconds().toString()
+        }
+
+        boundingRect() {
+            return new SRect(0, 0, this.r * 2, this.r * 2);
+        }
+
+        onDraw(canvas) {
+            canvas.pen.color = SColor.Transparent;
+            canvas.pen.lineWidth = canvas.toPx(1);
+            canvas.brush.color = this.selected ? SColor.Red : new SColor("#00fcee");
+            canvas.drawCircle(this.r, this.r, this.r);
+
+            canvas.pen.color = SColor.Yellow;
+            canvas.brush.color = SColor.Transparent;
+            canvas.pen.lineDash = [10,10];
+            canvas.drawRect(this.boundingRect());
+
+            canvas.brush.color = SColor.Black;
+            canvas.drawText(`${this.x},${this.y}`,0,0);
+        }
+    }
+
+    class SScene extends SGraphScene {
+        /** 定义命令 */
+        cmd = 0;
+
+        constructor() {
+            super();
+        }
+
+
+        onMouseUp(event) {
+            switch(this.cmd) {
+                case 1:
+                    this.addCircle(event.x, event.y);
+                    break;
+                case 2:
+                    this.addRect(event.x, event.y);
+                    break;
+                default:
+                    super.onMouseUp(event);
+            }
+            this.cmd = 0;
+            return false
+        }
+
+        addCircle(x, y) {
+            let item = new CircleItem(null);
+            item.moveTo(x - 50, y - 50);
+            this.addItem(item);
+        }
+
+        addRect(x, y) {
+            let item = new RectItem(null);
+            item.moveTo(x - 50, y - 50);
+            this.addItem(item);
+        }
+    }
+
+    class TestView extends SGraphView {
+        constructor() {
+            super("align");
+        }
+    }
+
+    export default {
+        data() {
+            return {
+                scene: new SScene(),
+                value: -1,
+                options:[
+                    {
+                        value:SGraphLayoutType.Left,
+                        label:'左对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Right,
+                        label:'右对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Top,
+                        label:'顶对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Bottom,
+                        label:'底对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Center,
+                        label:'水平居中对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Middle,
+                        label:'垂直居中对齐'
+                    },
+                    {
+                        value:SGraphLayoutType.Vertical,
+                        label:'垂直分布'
+                    },
+                    {
+                        value:SGraphLayoutType.Horizontal,
+                        label:'水平分布'
+                    }
+                ]
+            }
+        },
+        mounted() {
+            let view = new TestView();
+            view.scene = this.scene;//new SScene(); //this.data.scene;
+        },
+        methods: {
+            addCircle() {
+                this.scene.cmd = 1;
+            },
+            addRect() {
+                this.scene.cmd = 2;
+            },
+            changeAlign(v){
+                this.scene.selectContainer.layout(v)
+                // console.log(this.scene.selectContainer.layout(SGraphLayoutType.Left))
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 1 - 0
docs/dev/saga-graphy/index.js

@@ -32,6 +32,7 @@ const content = [
                 ]
             },
             ["/dev/saga-graphy/scene-manage/undo", "Undo示例"],
+            ["/dev/saga-graphy/scene-manage/align", "对齐示例"],
         ]
     },
     {

+ 11 - 0
docs/dev/saga-graphy/scene-manage/align.md

@@ -0,0 +1,11 @@
+# 对齐示例
+
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-scene-Align />
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/example/web/graph/scene/Undo1.vue
+:::

+ 3 - 3
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.16",
-    "@saga-web/big": "1.0.33",
-    "@saga-web/draw": "2.1.89",
-    "@saga-web/graph": "2.1.76",
+    "@saga-web/big": "1.0.34",
+    "@saga-web/draw": "2.1.90",
+    "@saga-web/graph": "2.1.78",
     "@saga-web/feng-map": "1.0.6",
     "axios": "^0.18.1",
     "element-ui": "^2.12.0",