初步架构完成

src/Common/util.ts

@@ -36,6 +36,14 @@ export const Util = {
         zrender.util.merge(origin, dest, true);
     },
 
+    /**
+     * 拷贝对象
+     * @param object 
+     */
+    clone(object) {
+        return zrender.util.clone(object);
+    },
+
     /**
      * 从列表中移除元素
      * @param list 移除列表

src/Model/element.ts

@@ -44,16 +44,16 @@ export interface ElementStatus {
 
 
 export class Element {
-    id: any;
+    id: number;
     elementId: string = null;
     elementLabel: string = null;
 
     elementStatus: ElementStatus = null;
-    zrShape: zrShape[] = [];
+    shapes: Shape[] | Shape = null;
     relativeLinks: Link[] = [];
     relativePointers: Pointer[] = [];
 
-    isDirty: boolean=  false;
+    isDirty: boolean = false;
 
     // 给sourceElement的部分    
     [key: string]: any;

src/Model/elementScheduler.ts

@@ -1,7 +1,7 @@
 import { Engine } from "../engine";
 import { SourceElement, Sources } from "../sources";
 import { Shape, ShapeStatus } from "../View/shape";
-import { ZrShapeConstructor } from "../View/shapeScheduler";
+import { ShapeScheduler, ZrShapeConstructor } from "../View/shapeScheduler";
 import { Element } from "./element";
 
 
@@ -12,6 +12,8 @@ export type ElementConstructor = { new(elementLabel: string, sourceElement: Sour
 
 export class ElementScheduler {
     private engine: Engine;
+
+    private shapeScheduler: ShapeScheduler;
     // 元素队列
     private elementList: Element[] = [];
     // 元素容器，即源数据经element包装后的结构
@@ -25,8 +27,9 @@ export class ElementScheduler {
         } 
     };
 
-    constructor(engine: Engine) {
+    constructor(engine: Engine, shapeScheduler: ShapeScheduler) {
         this.engine = engine;
+        this.shapeScheduler = shapeScheduler;
     }
 
     /**
@@ -103,24 +106,31 @@ export class ElementScheduler {
         element.applyShapeOptions(shapeOptions);
 
         if(Array.isArray(zrShapeConstructors)) {
-            shapes = zrShapeConstructors.map((item, index) => new Shape(`${elementId}(${index})`, item, element));
+            shapes = zrShapeConstructors.map(function(item, index) {
+                return this.shapeScheduler.createShape(`${elementId}(${index})`, item, element)
+            });
+
+            this.shapeScheduler.packShapes(shapes);
         }
         else {
-            shapes = new Shape(`elementId`, zrShapeConstructors, element);
+            shapes = this.shapeScheduler.createShape(`elementId`, zrShapeConstructors, element);
         }
 
-        element.defineShape(shapes, element.elementStatus);
+        element.shapes = shapes;
+        element.renderShape(shapes, element.elementStatus);
 
         return element;
     }
 
-
+    /**
+     * 更新element对应的图形
+     */
     public updateShapes() {
         for(let i = 0; i < this.elementList.length; i++) {
             let ele = this.elementList[i];
 
             if(ele.isDirty) {
-                ele.renderShape();
+                ele.renderShape(ele.zrShapes, ele.elementStatus);
             }
         }
     }
@@ -150,6 +160,6 @@ export class ElementScheduler {
      */
     public reset() {
         this.elementList.length = 0;
-        this.elementContainer = {};
+        this.elementContainer = { };
     }
 };

src/Model/link.ts

@@ -1,37 +1,36 @@
 import { LinkTarget } from "../sources";
+import { Shape } from "../View/shape";
 import { zrShape } from "../View/shapeScheduler";
-import { Element, Style } from "./element";
+import { Element, ElementStatus, Style } from "./element";
 import { LabelStyle } from "./pointer";
 
 
+
 export interface LinkOptions {
     style: Style;
     labelStyle: LabelStyle;                  
 };
 
 
+export interface LinkStatus extends ElementStatus {
+    points: [number, number][];
+};
+
 
 export class Link { 
-    // 连线 id
     id: string;
-    // 连线起始 element
+    element: Element = null;
-    element: Element;
+    target: Element = null;
-    // 连线目标 element
+    linkLabel: string = null;
-    target: Element;
+    linkStatus: LinkStatus;
-    // 连线类型名称
+
-    linkName: string;
+    shapes: Shape[] | Shape = [];
-    // 连线图形实例
+    index: number = -1;
-    zrShapes: zrShape[];
+    sourceLinkTarget: LinkTarget = null;
-    // 连线序号
-    index: number;
-    // 连线在源数据的声明
-    sourceLinkTarget: LinkTarget;
 
     isDirty: boolean = false;
 
-    constructor() {
+    constructor() { }
-
-    }
 
     /**
      * 元素是否为脏
@@ -40,4 +39,12 @@ export class Link {
     setDirty(isDirty: boolean) {
         this.isDirty = isDirty;
     }
+
+    /**
+     * 定义该element映射的图形
+     * @param shapes 
+     * @param elementStatus
+     * @override
+     */
+    renderShape(shapes: Shape[] | Shape, elementStatus: ElementStatus) { }
 };

src/Model/linkScheduler.ts

@@ -1,19 +1,15 @@
 import { ShapeStatus } from "../View/shape";
 import { ZrShapeConstructor } from "../View/shapeScheduler";
-import { Element, Style } from "./element";
+import { Element } from "./element";
 import { Link } from "./link";
 
 
 
-export interface LinkOptions {
-    style: Style;
-};
-
-
 
 export class LinkScheduler {
     private links: Link[] = [];
     private prevLinks: Link[] = [];
+
     private linkMap: { 
         [key: string]: {
             linkConstructor: { new(): Link },
@@ -30,11 +26,18 @@ export class LinkScheduler {
      * 构建链接模型
      * @param elementList 
      */
-    constructLinks(elementList: Element[]) {
+    public constructLinks(elementList: Element[]) {
 
     }
 
-    setLinkMap(
+    /**
+     * 
+     * @param linkLabel 
+     * @param linkConstructor 
+     * @param zrShapeConstructors 
+     * @param shapeOptions 
+     */
+    public setLinkMap(
         linkLabel: string, 
         linkConstructor: { new(): Link }, 
         zrShapeConstructors: ZrShapeConstructor[] | ZrShapeConstructor,
@@ -47,7 +50,20 @@ export class LinkScheduler {
         };
     }
 
-    reset() {
+    /**
+     * 更新element对应的图形
+     */
+    public updateShapes() {
+        for(let i = 0; i < this.links.length; i++) {
+            let link = this.links[i];
+
+            if(link.isDirty) {
+                link.renderShape(link.shapes, link.linkStatus);
+            }
+        }
+    }
+
+    public reset() {
         this.links.length = 0;
     }
 }

src/Model/pointer.ts

@@ -1,5 +1,6 @@
+import { Shape } from "../View/shape";
 import { zrShape } from "../View/shapeScheduler";
-import { Style } from "./element";
+import { ElementStatus, Style } from "./element";
 
 
 export interface LabelStyle extends Style {
@@ -19,7 +20,7 @@ export class Pointer {
     // 指针 id
     id: string;
     // 指针图形实例
-    zrShapes: zrShape[];
+    shape: Shape;
     // 指针类型名称
     pointerLabel: string;
     // 被该指针合并的其他指针
@@ -30,9 +31,9 @@ export class Pointer {
     // 指针标签内容
     text: string;
     //  指针标签图形实例
-    textZrShapes: Text[];
+    textZrShapes: Shape[];
     // 逗号图形实例
-    commaShapes: Text[];
+    commaShapes: Shape[];
     // 目标 element
     target: Element;
 
@@ -50,4 +51,12 @@ export class Pointer {
     setDirty(isDirty: boolean) {
         this.isDirty = isDirty;
     }
+
+    /**
+     * 定义该element映射的图形
+     * @param shapes 
+     * @param elementStatus
+     * @override
+     */
+    renderShape(shapes: Shape[] | Shape, elementStatus: ElementStatus) { }
 };

src/View/reconciler.ts

@@ -0,0 +1,225 @@
+import { Util } from "../Common/util";
+import { Style } from "../Model/element";
+import { Shape } from "./shape";
+import { ShapeScheduler } from "./shapeScheduler";
+
+
+
+export enum patchType {
+    ADD,
+    REMOVE,
+    POSITION,
+    PATH,
+    ROTATION,
+    SIZE,
+    STYLE
+}
+
+
+export interface patchInfo {
+    type: number;
+    shape: Shape;
+}
+
+
+export class Reconciler {
+    private shapeScheduler: ShapeScheduler;
+
+    constructor(shapeScheduler: ShapeScheduler) {
+        this.shapeScheduler = shapeScheduler;
+    }
+
+    /**
+     * 进行图形样式对象的比较
+     * @param oldStyle 
+     * @param newStyle 
+     */
+    reconcileStyle(oldStyle: Style, newStyle: Style): {name: string, old: any, new: any }[] {
+        let styleName: {name: string, old: any, new: any }[] = [];
+        
+        Object.keys(newStyle).map(prop => {
+            if(newStyle[prop] !== oldStyle[prop]) {
+                styleName.push({
+                    name: prop,
+                    old: oldStyle[prop],
+                    new: newStyle[prop]
+                });
+            }
+        });
+
+        return styleName;
+    }
+
+    /**
+     * 图形间的 differ
+     * @param shape 
+     */
+    reconcileShape(shape: Shape) {
+        let patchList: patchInfo[] = [];
+
+        if(shape.isDirty === false) return;
+
+        // 比较图形路径
+        if(JSON.stringify(shape.prevShapeStatus) !== JSON.stringify(shape.shapeStatus.points)) {
+            patchList.push({
+                type: patchType.PATH,
+                shape
+            });
+        }
+        
+        // 比较图形坐标位置
+        if(shape.prevShapeStatus.x !== shape.shapeStatus.x || shape.prevShapeStatus.y !== shape.shapeStatus.y) {
+            patchList.push({
+                type: patchType.POSITION,
+                shape
+            });
+        }
+        
+        // 比较旋转角度
+        if(shape.prevShapeStatus.rotation !== shape.shapeStatus.rotation) {
+            patchList.push({
+                type: patchType.ROTATION,
+                shape
+            });
+        }
+
+        // 比较尺寸
+        if(shape.prevShapeStatus.width !== shape.shapeStatus.width || shape.prevShapeStatus.height !== shape.shapeStatus.height) {
+            patchList.push({
+                type: patchType.SIZE,
+                shape
+            });
+        }
+
+        // 比较样式
+        let style = this.reconcileStyle(shape.prevShapeStatus.style, shape.shapeStatus.style);
+        if(style.length) {
+            patchList.push({
+                type: patchType.STYLE,
+                shape
+            });
+        }
+
+        // 对变化进行更新
+        this.patch(patchList);
+    }
+
+    /**
+     * 
+     * @param container 
+     * @param shapeList 
+     */
+    reconcileShapeList(container: { [key: string]: Shape[] }, shapeList: Shape[]) {
+        let patchList: patchInfo[] = [];
+
+        for(let i = 0; i < shapeList.length; i++) {
+            let shape = shapeList[i],
+                name = shape.type;
+
+            // 若发现存在于新视图模型而不存在于旧视图模型的图形，则该图形都标记为 ADD
+            if(container[name] === undefined) {
+                patchList.push({
+                    type: patchType.ADD,
+                    shape
+                });
+            }
+            else {
+                let oldShape = container[name].find(item => item.id === shape.id);
+
+                // 若旧图形列表存在对应的图形，进行 shape 间 differ
+                if(oldShape) {
+                    oldShape.isReconcilerVisited = true;
+                    this.reconcileShape(shape);
+                }
+                // 若发现存在于新视图模型而不存在于旧视图模型的图形，则该图形都标记为 ADD
+                else {
+                    patchList.push({
+                        type: patchType.ADD,
+                        shape
+                    });
+                }
+            }
+        }
+
+        // 在旧视图容器中寻找未访问过的图形，表明该图形该图形需要移除
+        Object.keys(container).forEach(key => {
+            container[key].forEach(shape => {
+                if(shape.isReconcilerVisited === false) {
+                    patchList.push({
+                        type: patchType.REMOVE,
+                        shape,
+                    });
+                }
+
+                shape.isReconcilerVisited = false;
+            });
+        });
+
+        this.patch(patchList);
+    }
+
+
+    /**
+     * 对修改的视图进行补丁更新
+     * @param patchList 
+     */
+    patch(patchList: patchInfo[]) {
+        let patch: patchInfo, 
+            shape: Shape,
+            i;
+
+        for(i = 0; i < patchList.length; i++) {
+            patch = patchList[i];
+            shape = patch.shape;
+
+            switch(patch.type) {
+                case patchType.ADD: {
+                    this.shapeScheduler.appendShape(shape);
+                    this.shapeScheduler.emitAnimation(shape, 'append');
+                    break;
+                }
+
+                case patchType.REMOVE: {
+                    this.shapeScheduler.removeShape(shape);
+                    this.shapeScheduler.emitAnimation(shape, 'remove');
+                    break;
+                }
+
+                case patchType.PATH: {
+                    shape.prevShapeStatus.points = shape.shapeStatus.points;
+                    this.shapeScheduler.emitAnimation(shape, 'path');
+                }
+
+                case patchType.POSITION: {
+                    shape.prevShapeStatus.x = shape.shapeStatus.x;
+                    shape.prevShapeStatus.y = shape.shapeStatus.y;
+                    this.shapeScheduler.emitAnimation(shape, 'position');
+                    break;
+                }
+
+                case patchType.ROTATION: {
+                    shape.prevShapeStatus.rotation = shape.shapeStatus.rotation;
+                    this.shapeScheduler.emitAnimation(shape, 'rotation');
+                    break;
+                }
+
+                case patchType.SIZE: {
+                    shape.prevShapeStatus.width = shape.shapeStatus.width;
+                    shape.prevShapeStatus.height = shape.shapeStatus.height;
+                    this.shapeScheduler.emitAnimation(shape, 'size');
+                    break;
+                }
+
+                case patchType.STYLE: {
+                    shape.prevShapeStatus.style = Util.clone(shape.shapeStatus.style);
+                    this.shapeScheduler.emitAnimation(shape, 'style');
+                    break;
+                }
+
+                default: {
+                    break;
+                }
+            }
+        }
+    }
+}

src/View/renderer.ts

@@ -0,0 +1,14 @@
+
+
+
+
+
+export class Renderer {
+    constructor() {
+        
+    }
+
+    applyAnimation() {
+        
+    }
+}

src/View/shape.ts

@@ -1,6 +1,6 @@
 import { Util } from "../Common/util";
 import { Element, Style } from "../Model/element";
-import { zrShape, ZrShapeConstructor } from "./shapeScheduler";
+import { Group, zrShape, ZrShapeConstructor } from "./shapeScheduler";
 
 
 export interface ShapeStatus {
@@ -11,6 +11,7 @@ export interface ShapeStatus {
     width: number;
     height: number;
     content: string;
+    points: [number, number][];
     style: Style;
 };
 
@@ -22,7 +23,8 @@ export class Shape {
     zrConstructor: ZrShapeConstructor = null;
     zrShape: zrShape = null;
     targetElement: Element = null;
-    
+    parentGroup: Group = null;
+
     shapeStatus: ShapeStatus = {
         x: 0, y: 0,
         rotation: 0,
@@ -30,6 +32,7 @@ export class Shape {
         height: 0,
         zIndex: 1,
         content: '',
+        points: [],
         style: {
             fill: '#000',
             text: '',
@@ -43,12 +46,17 @@ export class Shape {
         }
     };
 
+    prevShapeStatus: ShapeStatus = null;
+    isDirty: boolean = false;
+    isReconcilerVisited: boolean = false;
+
     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();
+        this.prevShapeStatus = Util.clone(this.shapeStatus);
     }
 
     /**

src/View/shapeScheduler.ts

@@ -6,6 +6,7 @@ import { Element } from "../Model/element";
 
 
 export type zrShape = any;
+export type Group = any;
 export type ZrShapeConstructor = { new(): zrShape };
 
 
@@ -14,6 +15,7 @@ export class ShapeScheduler {
     private shapeList: Shape[] = [];
     private shapeTable: { [key: string]: Shape[] } = {};
 
+    private parentGroupList: Group[] = [];
     private appendList: Shape[] = [];
     private removeList: Shape[] = [];
 
@@ -27,7 +29,7 @@ export class ShapeScheduler {
      * @param zrShapeConstructors 
      * @param element 
      */
-    createShape(id: string, zrShapeConstructors: ZrShapeConstructor, element: Element): Shape {
+    public createShape(id: string, zrShapeConstructors: ZrShapeConstructor, element: Element): Shape {
         let shapeType = Util.getClassName(zrShapeConstructors),
             shape = this.getReuseShape(id, shapeType);
 
@@ -38,11 +40,28 @@ export class ShapeScheduler {
         return shape;
     }
 
+    /**
+     * 
+     * @param shapes 
+     */
+    public packShapes(shapes: Shape[]){
+        let group: Group = new zrender.Group(),
+            shape: Shape;
+
+        for(let i = 0; i < shapes.length; i++) {
+            shape = shapes[i];
+            group.add(shape.zrShape);
+            shape.parentGroup = group;
+        }
+
+        this.parentGroupList.push(group);
+    }
+
     /**
      * 添加一个图形
      * @param shape 
      */
-    private appendShape(shape: Shape) {
+    public appendShape(shape: Shape) {
         let shapeType = shape.type;
 
         if(this.shapeTable[shapeType] === undefined) {
@@ -58,7 +77,7 @@ export class ShapeScheduler {
      * 移除一个图形
      * @param shape 
      */
-    private removeShape(shape: Shape) {
+    public removeShape(shape: Shape) {
         let shapeType = shape.type;
 
         Util.removeFromList(this.shapeTable[shapeType], item => item.id === shape.id); 
@@ -71,6 +90,15 @@ export class ShapeScheduler {
         this.removeList.push(shape);
     }
 
+    /**
+     * 发起一个动画请求
+     * @param shape 
+     * @param animationType 
+     */
+    public emitAnimation(shape: Shape, animationType: string) {
+        
+    }
+
     /**
      * 查找可复用的图形
      * @param id 

src/engine.ts

@@ -37,15 +37,19 @@ export class Engine {
     constructor(DOMContainer: HTMLElement, engineName: string) {
         this.engineName = engineName;
         this.DOMContainer = DOMContainer;
-        this.elementScheduler = new ElementScheduler(this);
+        this.shapeScheduler = new ShapeScheduler(this);
+        this.elementScheduler = new ElementScheduler(this, this.shapeScheduler);
         this.linkScheduler = new LinkScheduler();
         this.pointerScheduler = new PointerScheduler();
-        this.shapeScheduler = new ShapeScheduler(this);
 
         this.containerWidth = this.DOMContainer.offsetWidth;
         this.containerHeight = this.DOMContainer.offsetHeight;
     }
 
+    /**
+     * 
+     * @param sourceData 
+     */
     public render(sourceData: Sources) {
   
         if(sourceData === undefined || sourceData === null) {
@@ -58,9 +62,7 @@ export class Engine {
         this.sources = sourceData;
         this.stringifySources = stringifySources;
 
-        this.elementScheduler.constructElements(sourceData);
+        this.constructModel(sourceData);
-        this.linkScheduler.constructLinks([]);
-        this.pointerScheduler.constructPointers([]);
         this.layoutFunction(this.elementScheduler.getElementContainer(), this.containerWidth, this.containerHeight);
     }
 
@@ -80,7 +82,13 @@ export class Engine {
         this.elementScheduler.setElementMap(elementLabel, elementConstructor, zrShapeConstructors, shapeOptions);
     }
 
-
+    /**
+     * 应用一个Link模型
+     * @param linkLabel 
+     * @param linkConstructor 
+     * @param zrShapeConstructors 
+     * @param shapeOptions 
+     */
     public applyLink(
         linkLabel: string, linkConstructor: { new(): Link }, 
         zrShapeConstructors: ZrShapeConstructor[] | ZrShapeConstructor,
@@ -89,6 +97,13 @@ export class Engine {
         this.linkScheduler.setLinkMap(linkLabel, linkConstructor, zrShapeConstructors, shapeOptions);
     }
 
+    /**
+     * 应用一个Pointer模型
+     * @param pointerLabel 
+     * @param pointerConstructor 
+     * @param zrShapeConstructors 
+     * @param shapeOptions 
+     */
     public applyPointer( 
         pointerLabel: string, pointerConstructor: { new(): Pointer }, 
         zrShapeConstructors: ZrShapeConstructor[] | ZrShapeConstructor,
@@ -105,6 +120,20 @@ export class Engine {
         this.layoutFunction = layoutFunction;
     }
 
+    /**
+     * 构建模型
+     * @param sourceData 
+     */
+    private constructModel(sourceData: Sources) {
+        this.elementScheduler.constructElements(sourceData);
+        this.linkScheduler.constructLinks([]);
+        this.pointerScheduler.constructPointers([]);
+    }
+
+    private updateShapes() {
+
+    }
+
     /**
      * 重置引擎数据
      */