Skip to content

Commit ed684c8

Browse files
author
SeungpilPark
committed
#3 fastLoadingON and fastLoadingOFF
1 parent fbf78ec commit ed684c8

17 files changed

Lines changed: 458 additions & 589 deletions

‎src/main/webapp/examples/develope.html‎

Lines changed: 74 additions & 247 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<script type="text/javascript" src="./layout/js/jquery.layout-latest.js"></script>
2424

2525
<!-- Opengraph -->
26-
<script type="text/javascript" src="../opengraph/OpenGraph-0.1.2-SNAPSHOT.js"></script>
26+
<!--<script type="text/javascript" src="../opengraph/OpenGraph-0.1.2-SNAPSHOT.js"></script>-->
2727

2828
<script type="text/javascript" src="../src/raphael-2.1.0-custom.js"></script>
2929
<script type="text/javascript" src="../src/common/Constants.js"></script>
@@ -165,6 +165,8 @@
165165
<script type="text/javascript" src="../src/shape/elec/Location.js"></script>
166166
<script type="text/javascript" src="../src/shape/elec/Manhole.js"></script>
167167

168+
<!--<script type="text/javascript" src="../src/worker/og-worker.js"></script>-->
169+
168170
<style type="text/css">
169171
.ui-layout-center {
170172
padding: 0;
@@ -285,7 +287,7 @@
285287

286288
// Shape 이 처음 Draw 되었을 때의 이벤트 리스너
287289
canvas.onDrawShape(function (event, shapeElement) {
288-
console.log('onDrawShape');
290+
289291
});
290292

291293
// Undo 되었을 때의 이벤트 리스너
@@ -319,254 +321,79 @@
319321
// Shape 이 Disconnect 되었을 때의 이벤트 리스너
320322
canvas.onDisconnectShape(function (event, edgeElement, fromElement, toElement) {
321323
});
322-
323-
324-
OG.shape.SampleShape = function (label) {
325-
OG.shape.SampleShape.superclass.call(this);
326-
327-
this.SHAPE_ID = 'OG.shape.SampleShape';
328-
this.label = label;
329-
330-
};
331-
OG.shape.SampleShape.prototype = new OG.shape.GeomShape();
332-
OG.shape.SampleShape.superclass = OG.shape.GeomShape;
333-
OG.shape.SampleShape.prototype.constructor = OG.shape.SampleShape;
334-
OG.SampleShape = OG.shape.SampleShape;
335-
336-
/**
337-
* 드로잉할 Shape 을 생성하여 반환한다.
338-
*
339-
* @return {OG.geometry.Geometry} Shape 정보
340-
* @override
341-
*/
342-
OG.shape.SampleShape.prototype.createShape = function () {
343-
if (this.geom) {
344-
return this.geom;
345-
}
346-
347-
this.geom = new OG.geometry.Rectangle([0, 0], 100, 100);
348-
this.geom.style = new OG.geometry.Style({
349-
'fill-r': 1,
350-
'fill-cx': .1,
351-
'fill-cy': .1,
352-
"stroke-width": 1.2,
353-
fill: 'r(.1, .1)#FFFFFF-#FFFFCC',
354-
'fill-opacity': 1,
355-
r: '10'
356-
});
357-
return this.geom;
358-
};
359-
360-
OG.shape.SampleShape.prototype.createSubShape = function () {
361-
this.sub = [];
362-
363-
var loopShape;
364-
switch (this.data.LoopType) {
365-
case 'Standard' :
366-
loopShape = new OG.ImageShape('resources/images/symbol/loop_standard.png');
367-
break;
368-
case 'MIParallel' :
369-
loopShape = new OG.MIParallel();
370-
break;
371-
case 'MISequential' :
372-
loopShape = new OG.MISequential();
373-
break;
374-
}
375-
if (loopShape) {
376-
this.sub.push({
377-
shape: loopShape,
378-
width: '15px',
379-
height: '15px',
380-
bottom: '5px',
381-
align: 'center',
382-
style: {}
383-
})
384-
}
385-
386-
var taskTypeShape;
387-
switch (this.data.TaskType) {
388-
case "User":
389-
taskTypeShape = new OG.ImageShape("resources/images/symbol/User.png");
390-
break;
391-
case "Send":
392-
taskTypeShape = new OG.ImageShape('resources/images/symbol/Send.png');
393-
break;
394-
case "Receive":
395-
taskTypeShape = new OG.ImageShape("resources/images/symbol/Receive.png");
396-
break;
397-
case "Manual":
398-
taskTypeShape = new OG.ImageShape("resources/images/symbol/Manual.png");
399-
break;
400-
case "Service":
401-
taskTypeShape = new OG.ImageShape("resources/images/symbol/Service.png");
402-
break;
403-
case "BusinessRule":
404-
taskTypeShape = new OG.ImageShape("resources/images/symbol/BusinessRule.png");
405-
break;
406-
case "Script":
407-
taskTypeShape = new OG.ImageShape("resources/images/symbol/Script.png");
408-
break;
409-
case "Mapper":
410-
taskTypeShape = new OG.ImageShape("resources/images/symbol/Mapper.png");
411-
break;
412-
case "WebService":
413-
taskTypeShape = new OG.ImageShape("resources/images/symbol/WebService.png");
414-
break;
415-
}
416-
if (taskTypeShape) {
417-
this.sub.push({
418-
shape: taskTypeShape,
419-
width: '20px',
420-
height: '20px',
421-
top: '5px',
422-
left: '5px',
423-
style: {}
424-
})
425-
}
426-
427-
var statusShape, statusAnimation;
428-
switch (this.data.status) {
429-
case "Completed":
430-
statusShape = new OG.ImageShape("resources/images/symbol/complete.png");
431-
break;
432-
case "Running":
433-
statusShape = new OG.ImageShape('resources/images/symbol/running.png');
434-
statusAnimation = new OG.RectangleShape();
435-
break;
436-
}
437-
if (statusShape) {
438-
this.sub.push({
439-
shape: statusShape,
440-
width: '20px',
441-
height: '20px',
442-
right: '25px',
443-
top: '5px',
444-
style: {}
445-
})
446-
}
447-
if (statusAnimation) {
448-
this.sub.push({
449-
shape: statusAnimation,
450-
'z-index': -1,
451-
width: '120%',
452-
height: '120%',
453-
left: '-10%',
454-
top: '-10%',
455-
style: {
456-
'fill-opacity': 1,
457-
animation: [
458-
{
459-
start: {
460-
fill: 'white'
461-
},
462-
to: {
463-
fill: '#C9E2FC'
464-
},
465-
ms: 1000
466-
},
467-
{
468-
start: {
469-
fill: '#C9E2FC'
470-
},
471-
to: {
472-
fill: 'white'
473-
},
474-
ms: 1000,
475-
delay: 1000
476-
}
477-
],
478-
'animation-repeat': true,
479-
"fill": "#C9E2FC",
480-
"stroke-width": "0.2",
481-
"r": "10",
482-
'stroke-dasharray': '--'
483-
}
484-
})
485-
}
486-
487-
return this.sub;
488-
};
489-
490-
var sampleShape1 = new OG.A_HumanTask('[Act] Ensure Stakeholder Satisfaction');
491-
sampleShape1.data = {
492-
LoopType: 'Standard',
493-
TaskType: 'User',
494-
status: 'Completed'
495-
};
496-
canvas.drawShape([300, 300], sampleShape1, [100, 100]);
497-
498-
var sampleShape2 = new OG.A_HumanTask('[Act] Understand the Requirements');
499-
sampleShape2.data = {
500-
LoopType: 'MIParallel',
501-
TaskType: 'Send',
502-
status: 'Running'
503-
};
504-
canvas.drawShape([500, 300], sampleShape2, [100, 100]);
505-
506-
var sampleShape3 = new OG.A_HumanTask();
507-
sampleShape3.data = {
508-
LoopType: 'MISequential',
509-
TaskType: 'Manual',
510-
status: 'Completed'
511-
};
512-
513-
var contextMenu = {
514-
'delete': true,
515-
'copy': true,
516-
'format': true,
517-
'alert': {
518-
name: 'alert',
519-
callback: function () {
520-
console.log(123123);
521-
}
522-
},
523-
'text': true,
524-
'bringToFront': true,
525-
'sendToBack': true
526-
};
527-
//sampleShape3.customContextMenu = contextMenu;
528-
529-
// var element = canvas.drawShape([700, 300], sampleShape3, [100, 100]);
530-
//
531-
// canvas.setCustomContextMenu(element,contextMenu);
532-
//
533-
// var loadData = {
534-
// LO_TYPE : 'EH'
535-
// };
536-
// var loadShape = new OG.PKGLoad();
537-
// loadShape.data = loadData;
538-
//
539-
// canvas.drawShape([300, 100], loadShape, [100, 100]);
540-
541-
// var location = canvas.drawShape([300, 100], new OG.Location(), [100, 100]);
542-
// var location2 = canvas.drawShape([600, 200], new OG.Location(), [100, 100]);
543-
// var raceway = new OG.RacewayShape();
544-
// raceway.setData({
545-
// selected: true
546-
// });
324+
// window.canvas = canvas;
547325
//
548-
// canvas.connect(location,location2,null, null, null, null, null, null, raceway);
326+
// var worker = new Worker('../src/worker/og-worker.js');
549327
//
550-
// $(canvas.getRootElement()).bind('showProperty', function (event, shapeElement) {
551-
// console.log(shapeElement);
552-
// });
328+
// worker.addEventListener('message', function(e) {
329+
// console.log('Worker said: ', e.data);
330+
// }, false);
553331
//
554-
// console.log(canvas.getRelatedEdgeFromShapes([location,location2]));
555-
556-
var location = canvas.drawShape([300, 100], new OG.HierarchyFeeder(), [100, 100]);
557-
558-
var location2 = canvas.drawShape([600, 200], new OG.HierarchyFeeder(), [100, 100]);
559-
var raceway = new OG.CableShape();
560-
561-
562-
canvas.connect(location,location2,null, null, null, null, null, null, raceway);
563-
564-
$(canvas.getRootElement()).bind('showProperty', function (event, shapeElement) {
565-
console.log(shapeElement);
566-
});
567-
568-
console.log(canvas.getRelatedEdgeFromShapes([location,location2]));
569-
332+
// worker.postMessage('Hello');
333+
334+
// for(var i = 0; i < 3000; i++){
335+
// canvas.getRenderer()._PAPER.path("M40,65L40,35L60,35L60,40L45,40L45,45L60,45L60,50L45,50L45,65L40,65")
336+
// }
337+
338+
canvas.fastLoadingON();
339+
340+
var date1 = new Date();
341+
for (var i = 0; i < 100; i++) {
342+
var p1 = [i * 10, i * 10];
343+
var p2 = [i * 10 + 50, i * 10 + 50];
344+
var location = canvas.drawShape(p1, new OG.MILoad(), [50, 50]);
345+
var location2 = canvas.drawShape(p2, new OG.MILoad(), [50, 50]);
346+
// var raceway = new OG.CableShape();
347+
// canvas.connect(location, location2, null, null, null, null, null, null, raceway);
348+
}
349+
var date2 = new Date();
350+
console.log(date2 - date1);
351+
352+
var date1 = new Date();
353+
for (var i = 0; i < 40; i++) {
354+
var p1 = [i * 10, i * 10];
355+
var p2 = [i * 10 + 50, i * 10 + 50];
356+
var location = canvas.drawShape(p1, new OG.MILoad(), [50, 50]);
357+
var location2 = canvas.drawShape(p2, new OG.MILoad(), [50, 50]);
358+
// var raceway = new OG.CableShape();
359+
// canvas.connect(location, location2, null, null, null, null, null, null, raceway);
360+
}
361+
var date2 = new Date();
362+
console.log(date2 - date1);
363+
364+
var date1 = new Date();
365+
for (var i = 0; i < 1; i++) {
366+
var p1 = [i * 10, i * 10];
367+
var p2 = [i * 10 + 50, i * 10 + 50];
368+
var location = canvas.drawShape(p1, new OG.MILoad(), [50, 50]);
369+
var location2 = canvas.drawShape(p2, new OG.MILoad(), [50, 50]);
370+
// var raceway = new OG.CableShape();
371+
// canvas.connect(location, location2, null, null, null, null, null, null, raceway);
372+
}
373+
var date2 = new Date();
374+
console.log(date2 - date1);
375+
376+
canvas.fastLoadingOFF();
377+
// setTimeout(function(){
378+
// for (var i = 20; i < 40; i++) {
379+
// var p1 = [i * 10, i * 10];
380+
// var p2 = [i * 10 + 50, i * 10 + 50];
381+
// var location = canvas.drawShape(p1, new OG.HierarchyFeeder(), [50, 50]);
382+
// var location2 = canvas.drawShape(p2, new OG.HierarchyFeeder(), [50, 50]);
383+
// var raceway = new OG.CableShape();
384+
// canvas.connect(location, location2, null, null, null, null, null, null, raceway);
385+
// }
386+
// },100);
387+
// setTimeout(function(){
388+
// for (var i = 40; i < 60; i++) {
389+
// var p1 = [i * 10, i * 10];
390+
// var p2 = [i * 10 + 50, i * 10 + 50];
391+
// var location = canvas.drawShape(p1, new OG.HierarchyFeeder(), [50, 50]);
392+
// var location2 = canvas.drawShape(p2, new OG.HierarchyFeeder(), [50, 50]);
393+
// var raceway = new OG.CableShape();
394+
// canvas.connect(location, location2, null, null, null, null, null, null, raceway);
395+
// }
396+
// },100);
570397
});
571398

572399
function save() {

‎src/main/webapp/opengraph/OpenGraph-0.1.2-SNAPSHOT-All.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/main/webapp/opengraph/OpenGraph-0.1.2-SNAPSHOT-min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)