Initial commit

src/View/shape.ts

@@ -0,0 +1,81 @@
+import { Util } from "../Common/util";
+import { Element, Style } from "../Model/element";
+import { zrShape, ZrShapeConstructor } from "./shapeScheduler";
+
+
+export interface ShapeStatus {
+    x: number;
+    y: number;
+    rotation: number;
+    zIndex: number;
+    width: number;
+    height: number;
+    content: string;
+    style: Style;
+};
+
+
+
+export class Shape {
+    id: string = '';
+    type: string = '';
+    zrConstructor: ZrShapeConstructor = null;
+    zrShape: zrShape = null;
+    targetElement: Element = null;
+    
+    shapeStatus: ShapeStatus = {
+        x: 0, y: 0,
+        rotation: 0,
+        width: 0, 
+        height: 0,
+        zIndex: 1,
+        content: '',
+        style: {
+            fill: '#000',
+            text: '',
+            textFill: '#000',
+            fontSize: 15,
+            fontWeight: null,
+            stroke: null,
+            opacity: 1,
+            transformText: true,
+            lineWidth: 1
+        }
+    };
+
+    constructor(id: string, zrConstructor: ZrShapeConstructor, element: Element) {
+        this.id = id;
+        this.type = Util.getClassName(zrConstructor);
+        this.targetElement = element;
+        this.zrConstructor = zrConstructor;
+        this.zrShape = new zrConstructor();
+    }
+
+    /**
+     * 设置属性
+     * @param propName 
+     * @param props 
+     * @param sync
+     */
+    attr(propName: string, props: any, sync: boolean = false) {
+        if(this.shapeStatus[propName] === undefined) return;
+
+        if(propName === 'style') {
+            Util.merge(this.shapeStatus.style, props);
+        }
+        else {
+            this.shapeStatus[propName] = props;
+        }
+
+        if(sync) {
+            this.zrShape.attr(propName, props);
+        }
+    }
+
+
+    updateShape() {
+
+    }
+};
+
+

src/View/shapeScheduler.ts

@@ -0,0 +1,96 @@
+import { Util } from "../Common/util";
+import { Engine } from "../engine";
+import { Shape } from "./shape";
+import * as zrender from "zrender";
+import { Element } from "../Model/element";
+
+
+export type zrShape = any;
+export type ZrShapeConstructor = { new(): zrShape };
+
+
+export class ShapeScheduler {
+    private engine: Engine;
+    private shapeList: Shape[] = [];
+    private shapeTable: { [key: string]: Shape[] } = {};
+
+    private appendList: Shape[] = [];
+    private removeList: Shape[] = [];
+
+    constructor(engine: Engine) {
+        this.engine = engine;
+    }
+
+    /**
+     * 创建图形元素
+     * @param id 
+     * @param zrShapeConstructors 
+     * @param element 
+     */
+    createShape(id: string, zrShapeConstructors: ZrShapeConstructor, element: Element): Shape {
+        let shapeType = Util.getClassName(zrShapeConstructors),
+            shape = this.getReuseShape(id, shapeType);
+
+        if(shape === null) {
+            shape = new Shape(id, zrShapeConstructors, element);
+        }
+
+        return shape;
+    }
+
+    /**
+     * 添加一个图形
+     * @param shape 
+     */
+    private appendShape(shape: Shape) {
+        let shapeType = shape.type;
+
+        if(this.shapeTable[shapeType] === undefined) {
+            this.shapeTable[shapeType] = [];
+        }
+
+        this.shapeTable[shapeType].push(shape);
+        this.shapeList.push(shape);
+        this.appendList.push(shape);
+    }
+
+    /**
+     * 移除一个图形
+     * @param shape 
+     */
+    private removeShape(shape: Shape) {
+        let shapeType = shape.type;
+
+        Util.removeFromList(this.shapeTable[shapeType], item => item.id === shape.id); 
+
+        if(this.shapeTable[shapeType].length === 0) {
+            delete this.shapeTable[shapeType];
+        }
+
+        Util.removeFromList(this.shapeList, item => item.id === shape.id); 
+        this.removeList.push(shape);
+    }
+
+    /**
+     * 查找可复用的图形
+     * @param id 
+     * @param shapeType 
+     */
+    private getReuseShape(id: string, shapeType: string): Shape {
+        if(this.shapeTable[shapeType] !== undefined) {
+            let reuseShape = this.shapeTable[shapeType].find(item => item.id === id);
+
+            if(reuseShape) return reuseShape;
+        }
+
+        return null;
+    }
+
+    /**
+     * 重置数据
+     */
+    public reset() {
+        this.appendList.length = 0;
+        this.removeList.length = 0;
+    }
+};