关于editor:Twaver-HTML5中的-CloudEditor-进行Angular2-重写

Twaver HTML5 中的 CloudEditor 进行 Angular2 重写

业务进度紧迫，于是破费俩天工夫对 twaver 的 CloudEditor 进行 Angular2 重写革新以实现 twaver 初始视图构造的引入；

twaver 是一个商业闭源的绘图引擎工具，相似的开源产品有 mxgraph, jointjs, raphael 等；

长处
- 不减少引入三方件，manageone 以后火车版本上曾经存在 twaver，可间接应用；
- 合乎业务场景，twaver 官网提供了以后开发的利用场景样例且官网样例丰盛；
- 性能稳定性已验证，公司有产品曾经应用其作出更简单场景的性能，沟通后首次判断二次开发问题不大；
- Angular2 框架兼容，twaver 的技术栈应用原生 js 实现与以后应用 Angular2 框架无缝集成；
毛病
- 官网 demo 中大量应用 jquery 库操作 dom，jqueryUI 库实现 UI 组件和款式，首次引入须要对这些额定的三方件性能进行剥离和剔除；
- 没有源码，不利于调试和排查问题；
- 相熟度低，以后组内没人理解 twaver；

|-- CloudEditor
    |-- CloudEditor.html
    |-- css
    |   |-- bootstrap.min.css
    |   |-- jquery-ui-1.10.4.custom.min.css
    |   |-- jquery.ui.all.css
    |   |-- images
    |       |-- animated-overlay.gif
    |-- images
    |   |-- cent32os_s.png
    |   |-- zoomReset.png
    |-- js
        |-- AccordionPane.js
        |-- category.js
        |-- editor.js
        |-- GridNetwork.js
        |-- images.js
        |-- jquery-ui-1.10.4.custom.js
        |-- jquery.js

输入文件均以 Typescript 语言实现，并减少类型申明文件；
剥离间接操作 dom 的操作，即移除 jquery 库；
改写 twaver 中过久的语法，ES6 语法革新；

CloudEditor 中左树菜单次要是一个手风琴成果的列表，其实现是应用 AccordionPanel.js 这个文件，其内容是应用动静拼接 dom 的形式动静生成右面板的内容；咱们应用 Angular 的模板个性，将其改写为 Angular 组件 menu，将原来 JS 操作 dom 的低效操作全副移除。

// 这里申明了一个 editor 命名空间下的函数变量 AccordionPane
editor.AccordionPane = function() {this.init();
};
// 外部办法根本都是为了生成左树菜单构造，如下办法
createView: function() {var rootView = $('<div id="accordion-resizer"class="ui-widget-content"></div>');
    this.mainPane = $('<div id="accordion"></div>');
    this.setCategories(categoryJson.categories);
    rootView.append(this.mainPane);
    return rootView[0];
},
  // 生成菜单题目
  initCategoryTitle: function(title) {var titleDiv = $('<h3>' + title + '</h3>');
    this.mainPane.append(titleDiv);
  },
  // 生成菜单内容
  initCategoryContent: function(datas) {var contentDiv = $('<ul class="mn-accordion"></ul>');
    for (var i = 0; i < datas.length; i++) {var data = datas[i];
      contentDiv.append(this.initItemDiv(data));
    }
    this.mainPane.append(contentDiv);
  },
  // 生成菜单项
  initItemDiv: function(data) {
    var icon = data.icon;
    var itemDiv = $('<li class="item-li"></li>');
    var img = $('<img src=' + icon + '></img>');
    img.attr('title', data.tooltip);
    var label = $('<div class="item-label">' + data.label + '</div>');
    itemDiv.append(img);
    itemDiv.append(label);

    this.setDragTarget(img[0], data);
    return itemDiv;
  },

<div id='left-tree-menu'>
  <tp-accordionlist [options]="menuData">
      <!-- 自定义面板内容 -->
      <ng-template #content let-menuGroup let-i=index>
        <div *ngFor="let item of menuGroup.contents" [id]="item.label" class="item"
            [attr.data-type]="item.type" [attr.data-width]="item.width" [attr.data-height]="item.height"
            [attr.data-os]="item.os" [attr.data-bit]="item.bit" [attr.data-version]="item.version" 
            [title]="item.tooltip"> 
          <img [src]="item.icon" (dragstart)="dragStartMenuItem($event, item)"/>
          <div class="item-label">{{item.label}}</div>
        </div>
      </ng-template>
  </tp-accordionlist>
</div>

次要是解决数据模型与 UI 组件模型的映射关系

import {Component, Input, OnInit} from '@angular/core';
import {TpAccordionlistOption} from '@cloud/tinyplus3';

@Component({
  selector: 'design-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.less']
})
export class MenuComponent implements OnInit {constructor() { }

  ngOnInit(): void {}
  @Input() set inputMenuData(v) {setTimeout(() => {this.menuData = this.b2uMenuData(v.categories);
    });
  }
  menuData:TpAccordionlistOption[] = [];
  categories: any[];

  /**
   * 设置菜单项数据
   * @param categories 菜单数据列表
   */
  setCategories(categories) {this.categories = categories;}

  /**
   * 菜单项数据转换为 UI 组件数据
   * @param bData 菜单模型数据
   * @returns 手风琴 UI 组件数据
   */
  b2uMenuData(bData: Array<any>): Array<TpAccordionlistOption>{return bData.map((item, i) => {let tpAccordionlistOption: TpAccordionlistOption = {};
      tpAccordionlistOption.disabled = false;
      tpAccordionlistOption.headLabel = item.title;
      tpAccordionlistOption.open = !Boolean(i);
      tpAccordionlistOption.headClick = () => {};
      tpAccordionlistOption.contents = [...item.contents];
      tpAccordionlistOption.actionmenu = {items: []
      };
      return tpAccordionlistOption;
    });
  }
  /**
   * 拖拽菜单项性能
   * @param event 拖拽事件
   * @param data 拖拽数据
   */
  dragStartMenuItem(event, data) {
    data.draggable = true;
    event.dataTransfer.setData("Text", JSON.stringify(data));
  }
}

CloudEditor 中舞台的实现是应用 GridNetwork.js 这个文件；舞台是通过扩大 twaver.vector.Network 来实现的

在这个文件中，次要实现了跟舞台上相干的外围性能，拖放事件，导航窗格，简略的属性面板等

这个文件的重构须要减少大量类型申明, 以确保 ts 类型推断失常应用，在这部分，我放弃最大的克服，尽量避免应用 any 类型，对于已知的类型进行了申明增加。

declare interface Window {
  twaver: any;
  GAP: number;
}
declare var GAP: number;
declare interface Document {ALLOW_KEYBOARD_INPUT: any;}
declare namespace _twaver { 
  export var html: any;
  export class math {static createMatrix(angle, x, y);
  }
}
declare namespace twaver { 
  export class Util {static registerImage(name: string, obj: object);
    static isSharedLinks(host: any, element: any);
    static moveElements(selections, xoffset, yoffset, flag: boolean);
  }
  export class Element {getLayerId();
    getImage();
    getHost();
    getLayerId();
    setClient(str, flag: boolean);
  }
  export class Node {getImage();
  }
  export class ElementBox {getLayerBox(): twaver.LayerBox;
    add(node: twaver.Follower| twaver.Link);
    getUndoManager();
    addDataBoxChangeListener(fn: Function);
    addDataPropertyChangeListener(fn: Function);
    getSelectionModel();}
  export class SerializationSettings {static getStyleType(propertyName);
    static getClientType(propertyName);
    static getPropertyType(propertyName);
  }
  export class Follower {constructor(obj: any);
    setLayerId(id: string);
    setHost(host: any);
    setSize(w: boolean, h: boolean);
    setCenterLocation(location: any);
    setVisible(visible:boolean);
  }
  export class Property { }
  export class Link {constructor(one, two);
    getClient(name: string);
    getFromNode();
    getToNode();
    setClient(attr, val);
    setStyle(attr, val);
  }
  export class Styles {static setStyle(attr: string, val: any);
  }
  export class List extends Set { }
  export class Layer{constructor(name: string);
  }
  export class LayerBox {add(box: twaver.Layer, num?: number);
  }
  export namespace controls { 
    export class PropertySheet {constructor(box: twaver.ElementBox);
      getView(): HTMLElement;
      setEditable(editable: boolean);
      getPropertyBox();}
  }
  export namespace vector { 
    export class Overview {constructor(obj: any);
      getView(): HTMLElement;}
    export class Network {invalidateElementUIs();
      setMovableFunction(fn:Function);
      getSelectionModel();
      removeSelection();
      getElementBox(): twaver.ElementBox;
      setKeyboardRemoveEnabled(keyboardRemoveEnabled: boolean);
      setToolTipEnabled(toolTipEnable: boolean);
      setTransparentSelectionEnable(transparent: boolean);
      setMinZoom(zoom:number);
      setMaxZoom(zoom:number);
      getView();
      setVisibleFunction(fn: Function);
      getLabel(data: twaver.Link | { getName();});
      setLinkPathFunction(fn:Function);
      getInnerColor(data: twaver.Link);
      adjustBounds(obj: any);
      addPropertyChangeListener(fn: Function);
      getElementAt(e: Event | any): twaver.Element;
      setInteractions(option: any);
      getLogicalPoint(e: Event | any);
      getViewRect();
      setViewRect(x,y,w,h);
      setDefaultInteractions();
      getZoom();
      // 如下页面用到的公有属性，但在 api 中为申明
      __button;
      __startPoint;
      __resizeNode;
      __originSize;
      __resize;
      __createLink;
      __fromButton;
      __dragging;
      __currentPoint;
      __focusElement;
    }
  }
}

export default class Stage extends twaver.vector.Network {constructor(editor) {super();
    this.editor = editor;
    this.element = this.editor.element;
    twaver.Styles.setStyle('select.style', 'none');
    twaver.Styles.setStyle('link.type', 'orthogonal');
    twaver.Styles.setStyle('link.corner', 'none');
    twaver.Styles.setStyle('link.pattern', [8, 8]);
    this.init();}
  editor;
  element: HTMLElement;
  box: twaver.ElementBox;
  init() {this.initListener();
  }
  initOverview () {}
  sheet;
  sheetBox;
  initPropertySheet () {}
  getSheetBox() {return this.sheetBox;}
  infoNode;
  optionNode;
  linkNode;
  fourthNode;
  initListener() {_twaver.html.addEventListener('keydown', 'handle_keydown', this.getView(), this);
    _twaver.html.addEventListener('dragover', 'handle_dragover', this.getView(), this);
    _twaver.html.addEventListener('drop', 'handle_drop', this.getView(), this);
    _twaver.html.addEventListener('mousedown', 'handle_mousedown', this.getView(), this);
    _twaver.html.addEventListener('mousemove', 'handle_mousemove', this.getView(), this);
    _twaver.html.addEventListener('mouseup', 'handle_mouseup', this.getView(), this);
    //...
  }
  refreshButtonNodeLocation (node) {var rect = node.getRect();
    this.infoNode.setCenterLocation({x: rect.x, y: rect.y});
    this.optionNode.setCenterLocation({x: rect.x, y: rect.y + rect.height});
    this.linkNode.setCenterLocation({x: rect.x + rect.width, y: rect.y});
    this.fourthNode.setCenterLocation({x: rect.x + rect.width, y: rect.y + rect.height});
  }
  handle_mousedown(e) { }
  handle_mousemove(e) { }
  handle_mouseup(e) { }
  handle_keydown(e) { }
  //get element by mouse event, set lastElement as ImageShapeNode
  handle_dragover(e) { }
  handle_drop(e) { }
  _moveSelectionElements(type) { }
  isCurveLine () {return this._curveLine;}
  setCurveLine (value) {
    this._curveLine = value;
    this.invalidateElementUIs();}
  isShowLine () {return this._showLine;}
  setShowLine (value) {
    this._showLine = value;
    this.invalidateElementUIs();}
  isLineTip () {return this._lineTip;}
  setLineTip (value) {
    this._lineTip = value;
    this.invalidateElementUIs();}
  paintTop (g) { }
  paintBottom(g) {}}

CloudEditor 中入口控制器应用 editor.js 实现，我这里为了集成到 angular 我的项目中减少了 twaver.component.ts 组件，用来疏导 editor 的引入和实例化。

<div id="toolbar">
  <button *ngFor="let toolItem of toolbarData" [id]="toolItem.id" [title]="toolItem.title">
    <img [src]="toolItem.src"/>
  </button>
</div>
<div class="main">
  <div class="editor-container">
    <design-menu [inputMenuData]="menuData"></design-menu>
    <div class="stage" id="stage">
    </div>
  </div>
</div>

import {Component, OnInit, ElementRef, NgZone, AfterViewInit} from '@angular/core';
import * as twaver from "../../../lib/twaver.js";
import "./shapeDefined";
import TwaverEditor from "./twaver-editor";
import {menuData, toolbarData} from './editorData';
window.GAP = 10;
@Component({
  selector: 'design-twaver',
  templateUrl: './twaver.component.html',
  styleUrls: ['./twaver.component.less']
})
export class TwaverComponent implements OnInit, AfterViewInit {constructor(private element: ElementRef, private zone: NgZone) { }
  twaverEditor: TwaverEditor;
  menuData = {categories: []
  };
  toolbarData = toolbarData;
  ngOnInit(): void {}
  ngAfterViewInit() {this.twaverEditor = new TwaverEditor(this.element.nativeElement);
    this.menuData = menuData;
  }
}

这个文件是 editor.js 的主体局部重写后的文件 (省略未改变内容，只保留构造)。

import Stage from './stage';
export default class TwaverEditor {constructor(element) { 
    this.element = element;
    this.init()}
  element;
  stage: Stage;
  init() {this.stage = new Stage(this);
    let stageDom = this.element.querySelector('#stage');
    stageDom.append(this.stage.getView());


    this.stage.initOverview();
    this.stage.initPropertySheet();
        
    this.adjustBounds();
    this.initProperties();
    // this.toolbar = new Toolbar();
    window.onresize = (e)  => {this.adjustBounds();
    };
  }
  adjustBounds() {let stageDom = this.element.querySelector('#stage');
    this.stage.adjustBounds({
      x: 0,
      y: 0,
      width: stageDom.clientWidth,
      height: stageDom.clientHeight
    });
  }
  initProperties() {}
  isFullScreenSupported () {}
  toggleFullscreen() {}
  getAngle (p1, p2) { }
  fixNodeLocation (node) { }
  layerIndex = 0;
  addNode (box, obj, centerLocation, host) { }
  GAP = 10;
  fixLocation (location, viewRect?) { }
  fixSize (size) { }
  addStyleProperty (box, propertyName, category, name) {return this._addProperty(box, propertyName, category, name, 'style');
  }
  addClientProperty (box, propertyName, category, name) {return this._addProperty(box, propertyName, category, name, 'client');
  }
  addAccessorProperty (box, propertyName, category, name) {return this._addProperty(box, propertyName, category, name, 'accessor');
  }
  _addProperty (box, propertyName, category, name, proprtyType) {}}

实现 Typescript 须要的类型申明文件，即 twaver.d.ts 文件
实现左树菜单的性能，即 menu 组件文件；
实现绘制操作舞台性能，即 stage.ts 文件；
实现编辑器主控制器，即 TwaverEditor.ts 文件

|-- twaver
    |-- editorData.ts                  # 数据文件，蕴含左树列表数据
    |-- shapeDefined.ts                   # 图形绘制定义
    |-- stage.ts                       # 舞台类
    |-- twaver-editor.ts               # twaver 主入口控制器
    |-- twaver.component.html        
    |-- twaver.component.less
    |-- twaver.component.ts               # twaver Angular 组件
    |-- twaver.module.ts               # twaver Module
    |-- menu                           # meun 组件
        |-- menu.component.html
        |-- menu.component.less
        |-- menu.component.ts

重写 CloudEditor 只是一段旅途的开始，心愿此文能帮忙小伙伴们开个好头，大家能够顺利了解 twaver 中的一些 api 和语法。

关于editor:Twaver-HTML5中的-CloudEditor-进行Angular2-重写

背景

初识 twaver

重写起因

CloudEditor 主体内容：

重写的次要准则：

左树菜单

AccorditonPanel 剖析

应用 tiny 组件重写构造

重写后组件逻辑

绘制舞台

GridNetwork 剖析

缺失的类型申明

重写后的 stage.ts 文件 (本文省略了未改变代码)

主入口控制器

第一局部 twaver 组件文件

模板局部

逻辑局部

第二局部 TwaverEditor 文件

输入清单

实现次要输入内容：

总结

Just My Socks（注册教程内含优惠码）

关于editor:Twaver-HTML5中的-CloudEditor-进行Angular2-重写

背景

初识 twaver

重写起因

CloudEditor 主体内容：

重写的次要准则：

左树菜单

AccorditonPanel 剖析

应用 tiny 组件重写构造

重写后组件逻辑

绘制舞台

GridNetwork 剖析

缺失的类型申明

重写后的 stage.ts 文件 (本文省略了未改变代码)

主入口控制器

第一局部 twaver 组件文件

模板局部

逻辑局部

第二局部 TwaverEditor 文件

输入清单

实现次要输入内容：

总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）