#26 Configuration for resource path

TheOpenCloudEngine · Aug 23, 2017 · 20201e0 · 20201e0
1 parent 5ffc7a3
commit 20201e0
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 65 deletions.
diff --git a/src/main/webapp/examples/develope.html b/src/main/webapp/examples/develope.html
@@ -351,11 +351,11 @@
                 canvas.updateBackDoor(150, 0.7);
             });
 
-
         });
 
         function save() {
             opengraphJSON = canvas.toJSON();
+            console.log(JSON.stringify(opengraphJSON))
         }
     </script>
 </head>

diff --git a/src/main/webapp/opengraph/OpenGraph-0.1.3-SNAPSHOT-All.js b/src/main/webapp/opengraph/OpenGraph-0.1.3-SNAPSHOT-All.js
diff --git a/src/main/webapp/opengraph/OpenGraph-0.1.3-SNAPSHOT-min.js b/src/main/webapp/opengraph/OpenGraph-0.1.3-SNAPSHOT-min.js
diff --git a/src/main/webapp/opengraph/OpenGraph-0.1.3-SNAPSHOT.js b/src/main/webapp/opengraph/OpenGraph-0.1.3-SNAPSHOT.js
@@ -11613,7 +11613,7 @@ OG.shape.HorizontalPoolShape.prototype.createSubShape = function () {
     var loopShape;
     switch (this.LoopType) {
         case 'Standard' :
-            loopShape = new OG.ImageShape('resources/images/symbol/loop_standard.png');
+            loopShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'loop_standard.png');
             break;
         case 'MIParallel' :
             loopShape = new OG.MIParallel();
@@ -12007,7 +12007,7 @@ OG.shape.bpmn.A_Task.prototype.createSubShape = function () {
     var loopShape;
     switch (this.LoopType) {
         case 'Standard' :
-            loopShape = new OG.ImageShape('resources/images/symbol/loop_standard.png');
+            loopShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'loop_standard.png');
             break;
         case 'MIParallel' :
             loopShape = new OG.MIParallel();
@@ -12030,31 +12030,31 @@ OG.shape.bpmn.A_Task.prototype.createSubShape = function () {
     var taskTypeShape;
     switch (this.TaskType) {
         case "User":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/User.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + "User.png");
             break;
         case "Send":
-            taskTypeShape = new OG.ImageShape('resources/images/symbol/Send.png');
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'Send.png');
             break;
         case "Receive":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/Receive.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'Receive.png');
             break;
         case "Manual":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/Manual.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'Manual.png');
             break;
         case "Service":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/Service.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'Service.png');
             break;
         case "BusinessRule":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/BusinessRule.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'BusinessRule.png');
             break;
         case "Script":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/Script.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'Script.png');
             break;
         case "Mapper":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/Mapper.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'Mapper.png');
             break;
         case "WebService":
-            taskTypeShape = new OG.ImageShape("resources/images/symbol/WebService.png");
+            taskTypeShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'WebService.png');
             break;
     }
     if (taskTypeShape) {
@@ -12071,10 +12071,10 @@ OG.shape.bpmn.A_Task.prototype.createSubShape = function () {
     var statusShape, statusAnimation;
     switch (this.status) {
         case "Completed":
-            statusShape = new OG.ImageShape("resources/images/symbol/complete.png");
+            statusShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'complete.png');
             break;
         case "Running":
-            statusShape = new OG.ImageShape('resources/images/symbol/running.png');
+            statusShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'running.png');
             statusAnimation = new OG.RectangleShape();
             break;
     }
@@ -12471,7 +12471,7 @@ OG.shape.bpmn.E_End.prototype.createSubShape = function () {
 
     if (this.inclusion) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/complete.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'complete.png'),
             width: '20px',
             height: '20px',
             right: '0px',
@@ -12576,7 +12576,7 @@ OG.shape.bpmn.E_Start.prototype.createSubShape = function () {
 
 	if (this.inclusion) {
 		this.sub.push({
-			shape: new OG.ImageShape('resources/images/symbol/complete.png'),
+			shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'complete.png'),
 			width: '20px',
 			height: '20px',
 			right: '0px',
@@ -12877,10 +12877,10 @@ OG.shape.bpmn.A_Subprocess.prototype.createSubShape = function () {
     var statusShape, statusAnimation;
     switch (this.status) {
         case "Completed":
-            statusShape = new OG.ImageShape("resources/images/symbol/complete.png");
+            statusShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + "complete.png");
             break;
         case "Running":
-            statusShape = new OG.ImageShape('resources/images/symbol/running.png');
+            statusShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'running.png');
             statusAnimation = new OG.RectangleShape();
             break;
     }
@@ -12936,7 +12936,7 @@ OG.shape.bpmn.A_Subprocess.prototype.createSubShape = function () {
 
     if (this.inclusion) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/complete.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'complete.png'),
             width: '20px',
             height: '20px',
             right: '0px',
@@ -12947,7 +12947,7 @@ OG.shape.bpmn.A_Subprocess.prototype.createSubShape = function () {
 
     if (this.HaveButton) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/subprocess.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'subprocess.png'),
             width: '20px',
             height: '20px',
             align: 'center',
@@ -15450,7 +15450,7 @@ OG.shape.bpmn.Value_Chain.prototype.createSubShape = function () {
 
     if (this.inclusion) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/complete.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'complete.png'),
             width: '20px',
             height: '20px',
             right: '0px',
@@ -15461,7 +15461,7 @@ OG.shape.bpmn.Value_Chain.prototype.createSubShape = function () {
 
     if (this.HaveButton) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/subprocess.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'subprocess.png'),
             width: '20px',
             height: '20px',
             align: 'center',
@@ -15543,7 +15543,7 @@ OG.shape.bpmn.Value_Chain.prototype.createSubShape = function () {
 
     if (this.inclusion) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/complete.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'complete.png'),
             width: '20px',
             height: '20px',
             right: '0px',
@@ -15554,7 +15554,7 @@ OG.shape.bpmn.Value_Chain.prototype.createSubShape = function () {
 
     if (this.HaveButton) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/subprocess.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'subprocess.png'),
             width: '20px',
             height: '20px',
             align: 'center',
@@ -21995,6 +21995,9 @@ OG.renderer.RaphaelRenderer.prototype.drawShape = function (position, shape, siz
         groupNode, geometry, text, image, html, xml,
         me = this;
 
+    //현재 캔버스 등록
+    shape.currentCanvas = this._CANVAS;
+
     if (shape instanceof OG.shape.GeomShape) {
         geometry = shape.createShape();
 
@@ -22136,9 +22139,8 @@ OG.renderer.RaphaelRenderer.prototype.drawShape = function (position, shape, siz
     //     me.putInnerShapeToPool(groupNode);
     // }
 
-    //shape 에 현재 캔버스,엘리먼트 등록
+    //shape 에 현재 엘리먼트 등록
     shape.currentElement = groupNode;
-    shape.currentCanvas = this._CANVAS;
 
     // drawShape event fire
     if (!preventEvent) {
@@ -23858,7 +23860,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
         if (!_isDeletable) {
             return;
         }
-        _trash = me._PAPER.image("resources/images/symbol/trash.png", 0, 0, _ctrlSize, _ctrlSize);
+        _trash = me._PAPER.image(me._CONFIG.IMAGE_BASE + 'trash.png', 0, 0, _ctrlSize, _ctrlSize);
         _trash.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_trash);
         me._add(_trash, rElement.id + OG.Constants.GUIDE_SUFFIX.TRASH);
@@ -24032,7 +24034,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
     }
 
     function _drawLaneQuarter(divideCount) {
-        _qUpper = me._PAPER.image("resources/images/symbol/quarter-upper.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qUpper = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-upper.png", 0, 0, _ctrlSize, _ctrlSize);
         _qUpper.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qUpper);
         me._add(_qUpper, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_UPPER);
@@ -24041,7 +24043,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
             me.divideLane(element, OG.Constants.GUIDE_SUFFIX.QUARTER_UPPER);
         });
 
-        _qBisector = me._PAPER.image("resources/images/symbol/quarter-bisector.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qBisector = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-bisector.png", 0, 0, _ctrlSize, _ctrlSize);
         _qBisector.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qBisector);
         me._add(_qBisector, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_BISECTOR);
@@ -24050,7 +24052,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
             me.divideLane(element, OG.Constants.GUIDE_SUFFIX.QUARTER_BISECTOR);
         });
 
-        _qThirds = me._PAPER.image("resources/images/symbol/quarter-thirds.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qThirds = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-thirds.png", 0, 0, _ctrlSize, _ctrlSize);
         _qThirds.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qThirds);
         me._add(_qThirds, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_THIRDS);
@@ -24059,7 +24061,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
             me.divideLane(element, OG.Constants.GUIDE_SUFFIX.QUARTER_THIRDS);
         });
 
-        _qLow = me._PAPER.image("resources/images/symbol/quarter-low.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qLow = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-low.png", 0, 0, _ctrlSize, _ctrlSize);
         _qLow.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qLow);
         me._add(_qLow, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_LOW);
@@ -32248,6 +32250,8 @@ OG.handler.EventHandler.prototype = {
 
         $(me._RENDERER.getRootElement()).find("[_selected=true]").each(function (index, item) {
             shape = eval('new ' + value + '()');
+
+            shape.currentCanvas = me._RENDERER._CANVAS
             if (label) {
                 shape.label = label;
             } else {
@@ -35089,6 +35093,11 @@ OG.graph.Canvas = function (container, containerSize, backgroundColor, backgroun
          */
         CANVAS_BACKGROUND: "#f9f9f9",
 
+        /**
+         * 이미지 베이스 패스
+         */
+        IMAGE_BASE: 'resources/images/symbol/',
+
         /**
          * 이미지 url 정보
          */

diff --git a/src/main/webapp/src/graph/Canvas.js b/src/main/webapp/src/graph/Canvas.js
@@ -398,6 +398,11 @@ OG.graph.Canvas = function (container, containerSize, backgroundColor, backgroun
          */
         CANVAS_BACKGROUND: "#f9f9f9",
 
+        /**
+         * 이미지 베이스 패스
+         */
+        IMAGE_BASE: 'resources/images/symbol/',
+
         /**
          * 이미지 url 정보
          */

diff --git a/src/main/webapp/src/handler/EventHandler.js b/src/main/webapp/src/handler/EventHandler.js
@@ -3961,6 +3961,8 @@ OG.handler.EventHandler.prototype = {
 
         $(me._RENDERER.getRootElement()).find("[_selected=true]").each(function (index, item) {
             shape = eval('new ' + value + '()');
+
+            shape.currentCanvas = me._RENDERER._CANVAS
             if (label) {
                 shape.label = label;
             } else {

diff --git a/src/main/webapp/src/renderer/RaphaelRenderer.js b/src/main/webapp/src/renderer/RaphaelRenderer.js
@@ -1278,6 +1278,9 @@ OG.renderer.RaphaelRenderer.prototype.drawShape = function (position, shape, siz
         groupNode, geometry, text, image, html, xml,
         me = this;
 
+    //현재 캔버스 등록
+    shape.currentCanvas = this._CANVAS;
+
     if (shape instanceof OG.shape.GeomShape) {
         geometry = shape.createShape();
 
@@ -1419,16 +1422,23 @@ OG.renderer.RaphaelRenderer.prototype.drawShape = function (position, shape, siz
     //     me.putInnerShapeToPool(groupNode);
     // }
 
-    //shape 에 현재 캔버스,엘리먼트 등록
+    //shape 에 현재 엘리먼트 등록
     shape.currentElement = groupNode;
-    shape.currentCanvas = this._CANVAS;
 
     // drawShape event fire
     if (!preventEvent) {
         shape.onDrawShape();
         $(this._PAPER.canvas).trigger('drawShape', [groupNode]);
     }
 
+    if (!id && (me.isLane(groupNode) || me.isPool(groupNode))) {
+        if(me.isTopGroup(groupNode)){
+            console.log('top');
+            me.setDropablePool(groupNode);
+        }
+        //me.isTopGroup(element)
+    }
+
     return groupNode;
 };
 
@@ -3141,7 +3151,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
         if (!_isDeletable) {
             return;
         }
-        _trash = me._PAPER.image("resources/images/symbol/trash.png", 0, 0, _ctrlSize, _ctrlSize);
+        _trash = me._PAPER.image(me._CONFIG.IMAGE_BASE + 'trash.png', 0, 0, _ctrlSize, _ctrlSize);
         _trash.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_trash);
         me._add(_trash, rElement.id + OG.Constants.GUIDE_SUFFIX.TRASH);
@@ -3315,7 +3325,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
     }
 
     function _drawLaneQuarter(divideCount) {
-        _qUpper = me._PAPER.image("resources/images/symbol/quarter-upper.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qUpper = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-upper.png", 0, 0, _ctrlSize, _ctrlSize);
         _qUpper.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qUpper);
         me._add(_qUpper, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_UPPER);
@@ -3324,7 +3334,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
             me.divideLane(element, OG.Constants.GUIDE_SUFFIX.QUARTER_UPPER);
         });
 
-        _qBisector = me._PAPER.image("resources/images/symbol/quarter-bisector.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qBisector = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-bisector.png", 0, 0, _ctrlSize, _ctrlSize);
         _qBisector.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qBisector);
         me._add(_qBisector, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_BISECTOR);
@@ -3333,7 +3343,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
             me.divideLane(element, OG.Constants.GUIDE_SUFFIX.QUARTER_BISECTOR);
         });
 
-        _qThirds = me._PAPER.image("resources/images/symbol/quarter-thirds.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qThirds = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-thirds.png", 0, 0, _ctrlSize, _ctrlSize);
         _qThirds.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qThirds);
         me._add(_qThirds, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_THIRDS);
@@ -3342,7 +3352,7 @@ OG.renderer.RaphaelRenderer.prototype.drawGuide = function (element) {
             me.divideLane(element, OG.Constants.GUIDE_SUFFIX.QUARTER_THIRDS);
         });
 
-        _qLow = me._PAPER.image("resources/images/symbol/quarter-low.png", 0, 0, _ctrlSize, _ctrlSize);
+        _qLow = me._PAPER.image(me._CONFIG.IMAGE_BASE + "quarter-low.png", 0, 0, _ctrlSize, _ctrlSize);
         _qLow.attr(me._CONFIG.DEFAULT_STYLE.GUIDE_LINE_AREA);
         group.appendChild(_qLow);
         me._add(_qLow, rElement.id + OG.Constants.GUIDE_SUFFIX.QUARTER_LOW);

diff --git a/src/main/webapp/src/shape/HorizontalPoolShape.js b/src/main/webapp/src/shape/HorizontalPoolShape.js
@@ -53,7 +53,7 @@ OG.shape.HorizontalPoolShape.prototype.createSubShape = function () {
     var loopShape;
     switch (this.LoopType) {
         case 'Standard' :
-            loopShape = new OG.ImageShape('resources/images/symbol/loop_standard.png');
+            loopShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'loop_standard.png');
             break;
         case 'MIParallel' :
             loopShape = new OG.MIParallel();

diff --git a/src/main/webapp/src/shape/bpmn/A_Subprocess.js b/src/main/webapp/src/shape/bpmn/A_Subprocess.js
@@ -55,10 +55,10 @@ OG.shape.bpmn.A_Subprocess.prototype.createSubShape = function () {
     var statusShape, statusAnimation;
     switch (this.status) {
         case "Completed":
-            statusShape = new OG.ImageShape("resources/images/symbol/complete.png");
+            statusShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + "complete.png");
             break;
         case "Running":
-            statusShape = new OG.ImageShape('resources/images/symbol/running.png');
+            statusShape = new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'running.png');
             statusAnimation = new OG.RectangleShape();
             break;
     }
@@ -114,7 +114,7 @@ OG.shape.bpmn.A_Subprocess.prototype.createSubShape = function () {
 
     if (this.inclusion) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/complete.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'complete.png'),
             width: '20px',
             height: '20px',
             right: '0px',
@@ -125,7 +125,7 @@ OG.shape.bpmn.A_Subprocess.prototype.createSubShape = function () {
 
     if (this.HaveButton) {
         this.sub.push({
-            shape: new OG.ImageShape('resources/images/symbol/subprocess.png'),
+            shape: new OG.ImageShape(this.currentCanvas._CONFIG.IMAGE_BASE + 'subprocess.png'),
             width: '20px',
             height: '20px',
             align: 'center',