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

package/cjs/bpmn-adapter/xml2json.js

@@ -68,7 +68,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) {
@@ -88,7 +88,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;
@@ -277,6 +276,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/cjs/components/control/index.js

@@ -22,16 +22,15 @@ var __spread = (this && this.__spread) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Control = void 0;
 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);
                 },
@@ -39,8 +38,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);
                 },
@@ -48,8 +47,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();
                 },
@@ -57,8 +56,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();
                 },
@@ -66,13 +65,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();
@@ -113,14 +113,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/cjs/components/dnd-panel/index.js

@@ -44,8 +44,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) {
@@ -66,6 +69,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/cjs/components/highlight/index.js

@@ -142,7 +142,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/cjs/components/menu/index.js

@@ -26,11 +26,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) {
@@ -50,19 +50,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);
                 },
@@ -71,13 +71,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);
                 },
@@ -87,7 +87,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); });