@logicflow/extension 1.2.0-next.1 → 1.2.0-next.2

package/es/bpmn-adapter/xml2json.js

@@ -65,7 +65,7 @@ XML.ObjTree.prototype.parseHTTP = function (url, options, callback) {
         };
     }
     else {
-        myOpt.asynchronous = false;
+        myOpt.asynchronous = false; // sync-mode  
     }
     var trans;
     if (typeof (HTTP) != "undefined" && HTTP.Request) {
@@ -85,7 +85,6 @@ XML.ObjTree.prototype.parseHTTP = function (url, options, callback) {
         return this.parseDOM(trans.responseXML.documentElement);
     }
 };
-//  method: parseDOM( document root )  
 XML.ObjTree.prototype.parseDOM = function (root) {
     if (!root)
         return;
@@ -274,6 +273,252 @@ XML.ObjTree.prototype.scalar_to_xml = function (name, text) {
 XML.ObjTree.prototype.xml_escape = function (text) {
     return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
 };
+/*
+// ========================================================================
+
+=head1 NAME
+
+XML.ObjTree -- XML source code from/to JavaScript object like E4X
+
+=head1 SYNOPSIS
+
+var xotree = new XML.ObjTree();
+var tree1 = {
+root: {
+node: "Hello, World!"
+}
+};
+var xml1 = xotree.writeXML( tree1 );        // object tree to XML source
+alert( "xml1: "+xml1 );
+
+var xml2 = '<?xml version="1.0"?><response><error>0</error></response>';
+var tree2 = xotree.parseXML( xml2 );        // XML source to object tree
+alert( "error: "+tree2.response.error );
+
+=head1 DESCRIPTION
+
+XML.ObjTree class is a parser/generator between XML source code
+and JavaScript object like E4X, ECMAScript for XML.
+This is a JavaScript version of the XML::TreePP module for Perl.
+This also works as a wrapper for XMLHTTPRequest and successor to JKL.ParseXML class
+when this is used with prototype.js or JSAN's HTTP.Request class.
+
+=head2 JavaScript object tree format
+
+A sample XML source:
+
+<?xml version="1.0" encoding="UTF-8"?>
+<family name="Kawasaki">
+<father>Yasuhisa</father>
+<mother>Chizuko</mother>
+<children>
+<girl>Shiori</girl>
+<boy>Yusuke</boy>
+<boy>Kairi</boy>
+</children>
+</family>
+
+Its JavaScript object tree like JSON/E4X:
+
+{
+'family': {
+'-name':    'Kawasaki',
+'father':   'Yasuhisa',
+'mother':   'Chizuko',
+'children': {
+'girl': 'Shiori'
+'boy': [
+'Yusuke',
+'Kairi'
+]
+}
+}
+};
+
+Each elements are parsed into objects:
+
+tree.family.father;             # the father's given name.
+
+Prefix '-' is inserted before every attributes' name.
+
+tree.family["-name"];           # this family's family name
+
+A array is used because this family has two boys.
+
+tree.family.children.boy[0];    # first boy's name
+tree.family.children.boy[1];    # second boy's name
+tree.family.children.girl;      # (girl has no other sisters)
+
+=head1 METHODS
+
+=head2 xotree = new XML.ObjTree()
+
+This constructor method returns a new XML.ObjTree object.
+
+=head2 xotree.force_array = [ "rdf:li", "item", "-xmlns" ];
+
+This property allows you to specify a list of element names
+which should always be forced into an array representation.
+The default value is null, it means that context of the elements
+will determine to make array or to keep it scalar.
+
+=head2 xotree.attr_prefix = '@';
+
+This property allows you to specify a prefix character which is
+inserted before each attribute names.
+Instead of default prefix '-', E4X-style prefix '@' is also available.
+The default character is '-'.
+Or set '@' to access attribute values like E4X, ECMAScript for XML.
+The length of attr_prefix must be just one character and not be empty.
+
+=head2 tree = xotree.parseXML( xmlSrc );
+
+This method loads an XML document using the supplied string
+and returns its JavaScript object converted.
+
+=head2 tree = xotree.parseDOM( domNode );
+
+This method parses a DOM tree (ex. responseXML.documentElement)
+and returns its JavaScript object converted.
+
+=head2 tree = xotree.parseHTTP( url, options );
+
+This method loads a XML file from remote web server
+and returns its JavaScript object converted.
+XMLHTTPRequest's synchronous mode is always used.
+This mode blocks the process until the response is completed.
+
+First argument is a XML file's URL
+which must exist in the same domain as parent HTML file's.
+Cross-domain loading is not available for security reasons.
+
+Second argument is options' object which can contains some parameters:
+method, postBody, parameters, onLoading, etc.
+
+This method requires JSAN's L<HTTP.Request> class or prototype.js's Ajax.Request class.
+
+=head2 xotree.parseHTTP( url, options, callback );
+
+If a callback function is set as third argument,
+XMLHTTPRequest's asynchronous mode is used.
+
+This mode calls a callback function with XML file's JavaScript object converted
+after the response is completed.
+
+=head2 xmlSrc = xotree.writeXML( tree );
+
+This method parses a JavaScript object tree
+and returns its XML source generated.
+
+=head1 EXAMPLES
+
+=head2 Text node and attributes
+
+If a element has both of a text node and attributes
+or both of a text node and other child nodes,
+text node's value is moved to a special node named "#text".
+
+var xotree = new XML.ObjTree();
+var xmlSrc = '<span class="author">Kawasaki Yusuke</span>';
+var tree = xotree.parseXML( xmlSrc );
+var class = tree.span["-class"];        # attribute
+var name  = tree.span["#text"];         # text node
+
+=head2 parseHTTP() method with HTTP-GET and sync-mode
+
+HTTP/Request.js or prototype.js must be loaded before calling this method.
+
+var xotree = new XML.ObjTree();
+var url = "http://example.com/index.html";
+var tree = xotree.parseHTTP( url );
+xotree.attr_prefix = '@';                   // E4X-style
+alert( tree.html["@lang"] );
+
+This code shows C<lang=""> attribute from a X-HTML source code.
+
+=head2 parseHTTP() method with HTTP-POST and async-mode
+
+Third argument is a callback function which is called on onComplete.
+
+var xotree = new XML.ObjTree();
+var url = "http://example.com/mt-tb.cgi";
+var opts = {
+postBody:   "title=...&excerpt=...&url=...&blog_name=..."
+};
+var func = function ( tree ) {
+alert( tree.response.error );
+};
+xotree.parseHTTP( url, opts, func );
+
+This code send a track back ping and shows its response code.
+
+=head2 Simple RSS reader
+
+This is a RSS reader which loads RDF file and displays all items.
+
+var xotree = new XML.ObjTree();
+xotree.force_array = [ "rdf:li", "item" ];
+var url = "http://example.com/news-rdf.xml";
+var func = function( tree ) {
+var elem = document.getElementById("rss_here");
+for( var i=0; i<tree["rdf:RDF"].item.length; i++ ) {
+var divTag = document.createElement( "div" );
+var aTag = document.createElement( "a" );
+aTag.href = tree["rdf:RDF"].item[i].link;
+var title = tree["rdf:RDF"].item[i].title;
+var tNode = document.createTextNode( title );
+aTag.appendChild( tNode );
+divTag.appendChild( aTag );
+elem.appendChild( divTag );
+}
+};
+xotree.parseHTTP( url, {}, func );
+
+=head2  XML-RPC using writeXML, prototype.js and parseDOM
+
+If you wish to use prototype.js's Ajax.Request class by yourself:
+
+var xotree = new XML.ObjTree();
+var reqTree = {
+methodCall: {
+methodName: "weblogUpdates.ping",
+params: {
+param: [
+{ value: "Kawa.net xp top page" },  // 1st param
+{ value: "http://www.kawa.net/" }   // 2nd param
+]
+}
+}
+};
+var reqxml = xotree.writeXML( reqTree );       // JS-Object to XML code
+var url = "http://example.com/xmlrpc";
+var func = function( req ) {
+var resDom = req.responseXML.documentElement;
+xotree.force_array = [ "member" ];
+var resTree = xotree.parseDOM( resDom );   // XML-DOM to JS-Object
+alert( resTree.methodResponse.params.param.value.struct.member[0].value.string );
+};
+var opt = {
+method:         "post",
+postBody:       reqxml,
+asynchronous:   true,
+onComplete:     func
+};
+new Ajax.Request( url, opt );
+
+=head1 AUTHOR
+
+Yusuke Kawasaki http://www.kawa.net/
+=head1 COPYRIGHT AND LICENSE
+
+Copyright (c) 2005-2006 Yusuke Kawasaki. All rights reserved.
+This program is free software; you can redistribute it and/or
+modify it under the Artistic license. Or whatever license I choose,
+which I will do instead of keeping this documentation like it is.
+
+=cut
+// ========================================================================
+*/
 var lfXml2Json = function (xmlData) {
     return new XML.ObjTree().parseXML(xmlData);
 };

package/es/components/control/index.d.ts

@@ -9,12 +9,13 @@ declare type ControlItem = {
 };
 declare class Control {
     private lf;
-    private LogicFlow;
     static pluginName: string;
     private controlItems;
     private domContainer;
     private toolEl;
-    constructor(args: any);
+    constructor({ lf }: {
+        lf: any;
+    });
     render(lf: any, domContainer: any): void;
     destroy(): void;
     addItem(item: any): void;

package/es/components/control/index.js

@@ -19,16 +19,15 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 var Control = /** @class */ (function () {
-    function Control(args) {
+    function Control(_a) {
         var _this = this;
-        this.lf = args.lf;
-        this.LogicFlow = args.LogicFlow;
+        var lf = _a.lf;
         this.controlItems = [
             {
                 key: 'zoom-out',
                 iconClass: 'lf-control-zoomOut',
-                title: this.LogicFlow.t('缩小流程图'),
-                text: this.LogicFlow.t('缩小'),
+                title: '缩小流程图',
+                text: '缩小',
                 onClick: function () {
                     _this.lf.zoom(false);
                 },
@@ -36,8 +35,8 @@ var Control = /** @class */ (function () {
             {
                 key: 'zoom-in',
                 iconClass: 'lf-control-zoomIn',
-                title: this.LogicFlow.t('放大流程图'),
-                text: this.LogicFlow.t('放大'),
+                title: '放大流程图',
+                text: '放大',
                 onClick: function () {
                     _this.lf.zoom(true);
                 },
@@ -45,8 +44,8 @@ var Control = /** @class */ (function () {
             {
                 key: 'reset',
                 iconClass: 'lf-control-fit',
-                title: this.LogicFlow.t('恢复流程原有尺寸'),
-                text: this.LogicFlow.t('适应'),
+                title: '恢复流程原有尺寸',
+                text: '适应',
                 onClick: function () {
                     _this.lf.resetZoom();
                 },
@@ -54,8 +53,8 @@ var Control = /** @class */ (function () {
             {
                 key: 'undo',
                 iconClass: 'lf-control-undo',
-                title: this.LogicFlow.t('回到上一步'),
-                text: this.LogicFlow.t('上一步'),
+                title: '回到上一步',
+                text: '上一步',
                 onClick: function () {
                     _this.lf.undo();
                 },
@@ -63,13 +62,14 @@ var Control = /** @class */ (function () {
             {
                 key: 'redo',
                 iconClass: 'lf-control-redo',
-                title: this.LogicFlow.t('移到下一步'),
-                text: this.LogicFlow.t('下一步'),
+                title: '移到下一步',
+                text: '下一步',
                 onClick: function () {
                     _this.lf.redo();
                 },
             },
         ];
+        this.lf = lf;
     }
     Control.prototype.render = function (lf, domContainer) {
         this.destroy();
@@ -110,14 +110,14 @@ var Control = /** @class */ (function () {
             text.title = item.title;
             text.innerText = item.text;
             itemContainer.append(icon, text);
-            switch (item.key) {
-                case 'undo':
+            switch (item.text) {
+                case '上一步':
                     _this.lf.on('history:change', function (_a) {
                         var undoAble = _a.data.undoAble;
                         itemContainer.className = undoAble ? NORMAL : DISABLED;
                     });
                     break;
-                case 'redo':
+                case '下一步':
                     _this.lf.on('history:change', function (_a) {
                         var redoAble = _a.data.redoAble;
                         itemContainer.className = redoAble ? NORMAL : DISABLED;

package/es/components/dnd-panel/index.js

@@ -41,8 +41,11 @@ var DndPanel = /** @class */ (function () {
         el.className = shapeItem.className ? "lf-dnd-item " + shapeItem.className : 'lf-dnd-item';
         var shape = document.createElement('div');
         shape.className = 'lf-dnd-shape';
+        // if (typeof shapeItem.icon === 'string') {
         if (shapeItem.icon) {
             shape.style.backgroundImage = "url(" + shapeItem.icon + ")";
+            // } else {
+            //   shape.appendChild(shapeItem.icon);
         }
         el.appendChild(shape);
         if (shapeItem.label) {
@@ -63,6 +66,24 @@ var DndPanel = /** @class */ (function () {
                 shapeItem.callback(_this.lf, _this.domContainer);
             }
         };
+        el.ondblclick = function (e) {
+            _this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {
+                e: e,
+                data: shapeItem,
+            });
+        };
+        el.onclick = function (e) {
+            _this.lf.graphModel.eventCenter.emit('dnd:panel-click', {
+                e: e,
+                data: shapeItem,
+            });
+        };
+        el.oncontextmenu = function (e) {
+            _this.lf.graphModel.eventCenter.emit('dnd:panel-contextmenu', {
+                e: e,
+                data: shapeItem,
+            });
+        };
         return el;
     };
     DndPanel.pluginName = 'dndPanel';

package/es/components/highlight/index.js

@@ -139,7 +139,6 @@ var Highlight = /** @class */ (function () {
         }
         Object.values(this.lf.graphModel.modelsMap).forEach(function (item) {
             //  所有节点样式都进行备份
-            // eslint-disable-next-line operator-linebreak
             var oStyle = item.BaseType === 'node' ? item.getNodeStyle() : item.getEdgeStyle();
             _this.tempStyles[item.id] = __assign({}, oStyle);
             //  所有节点都设置透明度为0.1

package/es/components/menu/index.d.ts

@@ -13,13 +13,14 @@ export declare type MenuConfig = {
 };
 declare class Menu {
     lf: LogicFlow;
-    LogicFlow: any;
     private __container;
     private __menuDOM;
     private menuTypeMap;
     private __currentData;
     static pluginName: string;
-    constructor(args: any);
+    constructor({ lf }: {
+        lf: any;
+    });
     /**
      * 初始化设置默认内置菜单栏
      */

package/es/components/menu/index.js

@@ -23,11 +23,11 @@ var DefaultEdgeMenuKey = 'lf:defaultEdgeMenu';
 var DefaultGraphMenuKey = 'lf:defaultGraphMenu';
 var DefaultSelectionMenuKey = 'lf:defaultSelectionMenu';
 var Menu = /** @class */ (function () {
-    function Menu(args) {
+    function Menu(_a) {
         var _this = this;
+        var lf = _a.lf;
         this.__menuDOM = document.createElement('ul');
-        this.lf = args.lf;
-        this.LogicFlow = args.LogicFlow;
+        this.lf = lf;
         this.menuTypeMap = new Map();
         this.init();
         this.lf.setMenuConfig = function (config) {
@@ -47,19 +47,19 @@ var Menu = /** @class */ (function () {
         var _this = this;
         var defaultNodeMenu = [
             {
-                text: this.LogicFlow.t('删除'),
+                text: '删除',
                 callback: function (node) {
                     _this.lf.deleteNode(node.id);
                 },
             },
             {
-                text: this.LogicFlow.t('编辑文本'),
+                text: '编辑文本',
                 callback: function (node) {
                     _this.lf.graphModel.editText(node.id);
                 },
             },
             {
-                text: this.LogicFlow.t('复制'),
+                text: '复制',
                 callback: function (node) {
                     _this.lf.cloneNode(node.id);
                 },
@@ -68,13 +68,13 @@ var Menu = /** @class */ (function () {
         this.menuTypeMap.set(DefaultNodeMenuKey, defaultNodeMenu);
         var defaultEdgeMenu = [
             {
-                text: this.LogicFlow.t('删除'),
+                text: '删除',
                 callback: function (edge) {
                     _this.lf.deleteEdge(edge.id);
                 },
             },
             {
-                text: this.LogicFlow.t('编辑文本'),
+                text: '编辑文本',
                 callback: function (edge) {
                     _this.lf.graphModel.editText(edge.id);
                 },
@@ -84,7 +84,7 @@ var Menu = /** @class */ (function () {
         this.menuTypeMap.set(DefaultGraphMenuKey, []);
         var DefaultSelectionMenu = [
             {
-                text: this.LogicFlow.t('删除'),
+                text: '删除',
                 callback: function (elements) {
                     _this.lf.clearSelectElements();
                     elements.edges.forEach(function (edge) { return _this.lf.deleteEdge(edge.id); });

package/es/components/mini-map/index.d.ts

@@ -1,76 +1,88 @@
 declare class MiniMap {
     static pluginName: string;
-    __lf: any;
-    __container: any;
-    __miniMapWrap: any;
-    __miniMapContainer: any;
-    __lfMap: any;
-    __viewport: any;
-    __width: number;
-    __height: number;
-    __miniMapWidth: number;
-    __miniMapHeight: number;
-    __viewPortTop: number;
-    __viewPortLeft: number;
-    __startPosition: any;
-    __viewPortScale: number;
-    __viewPortWidth: number;
-    __viewPortHeight: number;
-    __resetDataX: number;
-    __resetDataY: number;
-    __LogicFlow: any;
-    __isShow: boolean;
-    __disabledPlugins: string[];
-    constructor({ lf, LogicFlow }: {
+    static width: number;
+    static height: number;
+    static viewPortWidth: number;
+    static viewPortHeight: number;
+    static isShowHeader: boolean;
+    static isShowCloseIcon: boolean;
+    static leftPosition: number;
+    static topPosition: number;
+    static rightPosition: any;
+    static bottomPosition: any;
+    static headerTitle: string;
+    private lf;
+    private container;
+    private miniMapWrap;
+    private miniMapContainer;
+    private lfMap;
+    private viewport;
+    private width;
+    private height;
+    private leftPosition;
+    private topPosition;
+    private rightPosition;
+    private bottomPosition;
+    private miniMapWidth;
+    private miniMapHeight;
+    private viewPortTop;
+    private viewPortLeft;
+    private startPosition;
+    private viewPortScale;
+    private viewPortWidth;
+    private viewPortHeight;
+    private resetDataX;
+    private resetDataY;
+    private LogicFlow;
+    private isShow;
+    private isShowHeader;
+    private isShowCloseIcon;
+    private dragging;
+    private disabledPlugins;
+    constructor({ lf, LogicFlow, options }: {
         lf: any;
         LogicFlow: any;
+        options: any;
     });
     render(lf: any, container: any): void;
     init(option: any): void;
     /**
      * 显示mini map
-     */
+    */
     show: (leftPosition?: number, topPosition?: number) => void;
     /**
      * 隐藏mini map
      */
     hide: () => void;
-    __init(): void;
-    __createMiniMap(left: any, top: any): void;
-    __removeMiniMap(): void;
+    reset: () => void;
+    private setOption;
+    private initMiniMap;
+    private createMiniMap;
+    private removeMiniMap;
     /**
      * 计算所有图形一起，占领的区域范围。
      * @param data
      */
-    __getBounds(data: any): {
-        left: number;
-        top: number;
-        bottom: number;
-        right: number;
-    };
+    private getBounds;
     /**
      * 将负值的平移转换为正值。
      * 保证渲染的时候，minimap能完全展示。
      * 获取将画布所有元素平移到0，0开始时，所有节点数据
      */
-    __resetData(data: any): any;
+    private resetData;
     /**
      * 显示导航
      * 显示视口范围
      * 1. 基于画布的范围比例，设置视口范围比例。宽度默认为导航宽度。
      */
-    __setView(): void;
-    __setViewPort(scale: any, { left, right, top, bottom }: {
-        left: any;
-        right: any;
-        top: any;
-        bottom: any;
-    }): void;
-    __createViewPort(): void;
-    __startDrag: (e: any) => void;
-    moveViewport: (top: any, left: any) => void;
-    __drag: (e: any) => void;
-    __drop: () => void;
+    private setView;
+    private setViewPort;
+    private createViewPort;
+    private startDrag;
+    private moveViewport;
+    private drag;
+    private drop;
+    private mapClick;
 }
 export default MiniMap;
 export { MiniMap };