, , ");
+ labelEditor = $("#" + editorId);
+
+ // text-align 스타일 적용
+ switch (element.shape.geom.style.get("text-anchor")) {
+ case "start":
+ textAlign = "left";
+ break;
+ case "middle":
+ textAlign = "center";
+ break;
+ case "end":
+ textAlign = "right";
+ break;
+ default:
+ textAlign = "center";
+ break;
+ }
+
+ if ($(element).attr("_shape") === OG.Constants.SHAPE_TYPE.HTML) {
+ // Html Shape
+ $(labelEditor).css(OG.Util.apply(me._CONFIG.DEFAULT_STYLE.LABEL_EDITOR, {
+ left: left,
+ top: top,
+ width: width,
+ height: height,
+ "text-align": 'left',
+ overflow: "hidden",
+ resize: "none"
+ }));
+ $(labelEditor).focus();
+ $(labelEditor).val(element.shape.html);
+ beforeLabel = element.shape.html;
+
+ $(labelEditor).bind({
+ focusout: function () {
+ element.shape.html = this.value;
+ afterLabel = this.value;
+ if (element.shape.html) {
+ renderer.redrawShape(element);
+ this.parentNode.removeChild(this);
+ } else {
+ renderer.removeShape(element);
+ this.parentNode.removeChild(this);
+ }
+ if (beforeLabel !== afterLabel) {
+ renderer.addHistory();
+ }
+ }
+ });
+ } else if ($(element).attr("_shape") === OG.Constants.SHAPE_TYPE.TEXT) {
+ // Text Shape
+ $(labelEditor).css(OG.Util.apply(me._CONFIG.DEFAULT_STYLE.LABEL_EDITOR, {
+ left: left,
+ top: top,
+ width: width,
+ height: height,
+ "text-align": textAlign,
+ overflow: "hidden",
+ resize: "none"
+ }));
+ $(labelEditor).focus();
+ $(labelEditor).val(element.shape.text);
+ beforeLabel = element.shape.text;
+
+ $(labelEditor).bind({
+ focusout: function () {
+ element.shape.text = this.value;
+ afterLabel = this.value;
+ if (element.shape.text) {
+ renderer.redrawShape(element);
+ this.parentNode.removeChild(this);
+ } else {
+ renderer.removeShape(element);
+ this.parentNode.removeChild(this);
+ }
+ if (beforeLabel !== afterLabel) {
+ renderer.addHistory();
+ }
+ }
+ });
+ } else if ($(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE) {
+ // Edge Shape
+ if (element.shape.label && renderer.isSVG()) {
+ $(element).children('[id$=_LABEL]').each(function (idx, item) {
+ $(item).find("text").each(function (idx2, item2) {
+ bBox = renderer.getBBox(item2);
+ left = bBox.x - 10;
+ top = bBox.y;
+ width = bBox.width + 20;
+ height = bBox.height;
+ });
+ });
+ } else {
+ centerOfEdge = getCenterOfEdge(element);
+ left = centerOfEdge.x - me._CONFIG.LABEL_EDITOR_WIDTH / 2;
+ top = centerOfEdge.y - me._CONFIG.LABEL_EDITOR_HEIGHT / 2;
+ width = me._CONFIG.LABEL_EDITOR_WIDTH;
+ height = me._CONFIG.LABEL_EDITOR_HEIGHT;
+ }
+
+ // 시작점 라벨인 경우
+ $(event.srcElement).parents('[id$=_FROMLABEL]').each(function (idx, item) {
+ $(item).find("text").each(function (idx2, item2) {
+ bBox = renderer.getBBox(item2);
+ left = bBox.x - 10;
+ top = bBox.y;
+ width = bBox.width + 20;
+ height = bBox.height;
+ fromLabel = element.shape.fromLabel;
+ });
+ });
+
+ // 끝점 라벨인 경우
+ $(event.srcElement).parents('[id$=_TOLABEL]').each(function (idx, item) {
+ $(item).find("text").each(function (idx2, item2) {
+ bBox = renderer.getBBox(item2);
+ left = bBox.x - 10;
+ top = bBox.y;
+ width = bBox.width + 20;
+ height = bBox.height;
+ toLabel = element.shape.toLabel;
+ });
+ });
+
+ $(labelEditor).css(OG.Util.apply(me._CONFIG.DEFAULT_STYLE.LABEL_EDITOR, {
+ left: left * me._CONFIG.SCALE,
+ top: top * me._CONFIG.SCALE,
+ width: width * me._CONFIG.SCALE,
+ height: height * me._CONFIG.SCALE,
+ overflow: "hidden",
+ resize: "none"
+ }));
+ $(labelEditor).focus();
+
+ if (fromLabel || toLabel) {
+ $(labelEditor).val(fromLabel ? element.shape.fromLabel : element.shape.toLabel);
+ } else {
+ $(labelEditor).val(element.shape.label);
+ beforeLabel = element.shape.label;
+ }
+
+ $(labelEditor).bind({
+ focusout: function () {
+ if (fromLabel) {
+ renderer.drawEdgeLabel(element, this.value, 'FROM');
+ } else if (toLabel) {
+ renderer.drawEdgeLabel(element, this.value, 'TO');
+ } else {
+ renderer.drawLabel(element, this.value);
+ afterLabel = this.value;
+ if (beforeLabel !== afterLabel) {
+ renderer.addHistory();
+ }
+ }
+
+ this.parentNode.removeChild(this);
+ }
+ });
+ } else {
+ $(labelEditor).css(OG.Util.apply(me._CONFIG.DEFAULT_STYLE.LABEL_EDITOR, {
+ left: left,
+ top: top,
+ width: width,
+ height: height,
+ "text-align": textAlign,
+ overflow: "hidden",
+ resize: "none"
+ }));
+ $(labelEditor).focus();
+ $(labelEditor).val(element.shape.label);
+ beforeLabel = element.shape.label;
+
+ $(labelEditor).bind({
+ focusout: function () {
+ renderer.drawLabel(element, this.value);
+ this.parentNode.removeChild(this);
+ afterLabel = this.value;
+ if (beforeLabel !== afterLabel) {
+ renderer.addHistory();
+ }
+ }
+ });
+ }
+ }
+ }
+ });
+ },
+
+ /**
+ * Shape 엘리먼트의 이동 가능여부를 설정한다.
+ *
+ * @param {Element} element Shape 엘리먼트
+ * @param {Boolean} isMovable 가능여부
+ */
+ setMovable: function (element, isMovable) {
+ var me = this, guide;
+ var renderer = me._RENDERER;
+ var root = renderer.getRootGroup();
+ if (!element) {
+ return;
+ }
+
+ var isEdge = $(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE;
+ var isLane = renderer.isLane(element);
+
+ if (isEdge) {
+ return;
+ }
+
+ var calculateMoveCorrectionConditions = function (bBoxArray) {
+ //이동 딜레이
+ var delay = me._CONFIG.EDGE_MOVE_DELAY_SIZE;
+ //조건집합
+ var correctionConditions = [];
+
+ if (!me._CONFIG.AUTOMATIC_GUIDANCE) {
+ return correctionConditions;
+ }
+
+ //이동 타켓이 다수인 경우 해당되지 않는다.
+ if (!bBoxArray) {
+ return correctionConditions;
+ }
+ if (bBoxArray.length !== 1) {
+ return correctionConditions;
+ }
+
+ //모든 Shape 의 중심점,상하좌우 끝을 조건에 포함한다.
+ var moveBoundary = renderer.getBoundary(element);
+ var moveCenter = moveBoundary.getCentroid();
+ var moveHeight = moveBoundary.getHeight();
+ var moveWidth = moveBoundary.getWidth();
+ var allShapes = renderer.getAllShapes();
+ $.each(allShapes, function (idx, shape) {
+ if (renderer.isEdge(shape)) {
+ return;
+ }
+ if (shape.id === element.id) {
+ return;
+ }
+ var boundary = renderer.getBoundary(shape);
+ var center = boundary.getCentroid();
+ var upperLeft = boundary.getUpperLeft();
+ var lowerRight = boundary.getLowerRight();
+
+
+ //top boundary range
+ correctionConditions.push({
+ condition: {
+ minY: (upperLeft.y - moveHeight / 2) - delay,
+ maxY: (upperLeft.y - moveHeight / 2) + delay
+ },
+ fixedPosition: {
+ y: (upperLeft.y - moveHeight / 2)
+ },
+ guidePosition: {
+ y: upperLeft.y
+ },
+ id: idx
+ });
+ correctionConditions.push({
+ condition: {
+ minY: (upperLeft.y + moveHeight / 2) - delay,
+ maxY: (upperLeft.y + moveHeight / 2) + delay
+ },
+ fixedPosition: {
+ y: (upperLeft.y + moveHeight / 2)
+ },
+ guidePosition: {
+ y: upperLeft.y
+ },
+ id: idx
+ });
+
+ //low boundary range
+ correctionConditions.push({
+ condition: {
+ minY: (lowerRight.y + moveHeight / 2) - delay,
+ maxY: (lowerRight.y + moveHeight / 2) + delay
+ },
+ fixedPosition: {
+ y: (lowerRight.y + moveHeight / 2)
+ },
+ guidePosition: {
+ y: lowerRight.y
+ },
+ id: idx
+ });
+ correctionConditions.push({
+ condition: {
+ minY: (lowerRight.y - moveHeight / 2) - delay,
+ maxY: (lowerRight.y - moveHeight / 2) + delay
+ },
+ fixedPosition: {
+ y: (lowerRight.y - moveHeight / 2)
+ },
+ guidePosition: {
+ y: lowerRight.y
+ },
+ id: idx
+ });
+
+ //left boundary range
+ correctionConditions.push({
+ condition: {
+ minX: (upperLeft.x - moveWidth / 2) - delay,
+ maxX: (upperLeft.x - moveWidth / 2) + delay
+ },
+ fixedPosition: {
+ x: (upperLeft.x - moveWidth / 2)
+ },
+ guidePosition: {
+ x: upperLeft.x
+ },
+ id: idx
+ });
+ correctionConditions.push({
+ condition: {
+ minX: (upperLeft.x + moveWidth / 2) - delay,
+ maxX: (upperLeft.x + moveWidth / 2) + delay
+ },
+ fixedPosition: {
+ x: (upperLeft.x + moveWidth / 2)
+ },
+ guidePosition: {
+ x: upperLeft.x
+ },
+ id: idx
+ });
+
+ //right boundary range
+ correctionConditions.push({
+ condition: {
+ minX: (lowerRight.x + moveWidth / 2) - delay,
+ maxX: (lowerRight.x + moveWidth / 2) + delay
+ },
+ fixedPosition: {
+ x: (lowerRight.x + moveWidth / 2)
+ },
+ guidePosition: {
+ x: lowerRight.x
+ },
+ id: idx
+ });
+ correctionConditions.push({
+ condition: {
+ minX: (lowerRight.x - moveWidth / 2) - delay,
+ maxX: (lowerRight.x - moveWidth / 2) + delay
+ },
+ fixedPosition: {
+ x: (lowerRight.x - moveWidth / 2)
+ },
+ guidePosition: {
+ x: lowerRight.x
+ },
+ id: idx
+ });
+
+ //center vertical boundary range
+ correctionConditions.push({
+ condition: {
+ minX: center.x - delay,
+ maxX: center.x + delay
+ },
+ fixedPosition: {
+ x: center.x
+ },
+ guidePosition: {
+ x: center.x
+ },
+ id: idx
+ });
+
+ //center horizontal boundary range
+ correctionConditions.push({
+ condition: {
+ minY: center.y - delay,
+ maxY: center.y + delay,
+ },
+ fixedPosition: {
+ y: center.y
+ },
+ guidePosition: {
+ y: center.y
+ },
+ id: idx
+ });
+ });
+
+ //연결된 Shape 들의 터미널이 수평,수직으로 교차하는 순간을 조건에 포함한다.
+ var edges = [];
+ var prevEdges = renderer.getPrevEdges(element);
+ var nextEdges = renderer.getNextEdges(element);
+ $.each(prevEdges, function (idx, edge) {
+ edges.push({
+ edge: edge,
+ type: 'prev'
+ });
+ });
+ $.each(nextEdges, function (idx, edge) {
+ edges.push({
+ edge: edge,
+ type: 'next'
+ });
+ });
+ $.each(edges, function (idx, edgeObj) {
+ var edge = edgeObj.edge;
+ var type = edgeObj.type;
+ var from = $(edge).attr("_from");
+ var to = $(edge).attr("_to");
+ if (!from || !to) {
+ return;
+ }
+ var moveTerminal;
+ var conditionTermianl;
+ if (type === 'prev') {
+ moveTerminal = to;
+ conditionTermianl = from;
+ } else {
+ moveTerminal = from;
+ conditionTermianl = to;
+ }
+ var movePosition = renderer._getPositionFromTerminal(moveTerminal);
+ var conditionPosition = renderer._getPositionFromTerminal(conditionTermianl);
+ var incrementX = moveCenter.x - movePosition.x;
+ var incrementY = moveCenter.y - movePosition.y;
+
+ //vertical boundary range
+ correctionConditions.push({
+ condition: {
+ minX: conditionPosition.x + incrementX - delay,
+ maxX: conditionPosition.x + incrementX + delay
+ },
+ fixedPosition: {
+ x: conditionPosition.x + incrementX
+ },
+ guidePosition: {
+ x: conditionPosition.x
+ },
+ id: idx
+ });
+
+ //horizontal boundary range
+ correctionConditions.push({
+ condition: {
+ minY: conditionPosition.y + incrementY - delay,
+ maxY: conditionPosition.y + incrementY + delay
+ },
+ fixedPosition: {
+ y: conditionPosition.y + incrementY
+ },
+ guidePosition: {
+ y: conditionPosition.y
+ },
+ id: idx
+ });
+ });
+ return correctionConditions;
+ };
+
+ //엘리먼트 이동시 범위조건에 따라 새로운 포지션을 계산한다.
+ //조건이 일치할 시 스틱가이드를 생선한다.
+ var correctionConditionAnalysis = function (dx, dy) {
+ var fixedPosition = {
+ dx: dx,
+ dy: dy
+ };
+ if (!me._CONFIG.AUTOMATIC_GUIDANCE) {
+ return fixedPosition;
+ }
+ var boundary = renderer.getBoundary(element);
+ var centroid = boundary.getCentroid();
+ var center = {
+ x: centroid.x + dx,
+ y: centroid.y + dy
+ };
+
+ var calculateFixedPosition = function (expectedPosition) {
+ if (!expectedPosition) {
+ return fixedPosition;
+ }
+ if (expectedPosition.x && !expectedPosition.y) {
+ return {
+ dx: expectedPosition.x - centroid.x,
+ dy: fixedPosition.dy
+ }
+ }
+ if (expectedPosition.y && !expectedPosition.x) {
+ return {
+ dx: fixedPosition.dx,
+ dy: expectedPosition.y - centroid.y
+ }
+ }
+ if (expectedPosition.x && expectedPosition.y) {
+ return {
+ dx: expectedPosition.x - centroid.x,
+ dy: expectedPosition.y - centroid.y
+ }
+ }
+ return fixedPosition;
+ };
+ var correctionConditions = $(element).data('correctionConditions');
+ if (!correctionConditions) {
+ return fixedPosition;
+ }
+
+ var conditionsPassCandidates = [];
+ $.each(correctionConditions, function (index, correctionCondition) {
+ var condition = correctionCondition.condition;
+
+ var conditionsPass = true;
+ if (condition.minX) {
+ if (center.x < condition.minX) {
+ conditionsPass = false;
+ }
+ }
+ if (condition.maxX) {
+ if (center.x > condition.maxX) {
+ conditionsPass = false;
+ }
+ }
+ if (condition.minY) {
+ if (center.y < condition.minY) {
+ conditionsPass = false;
+ }
+ }
+ if (condition.maxY) {
+ if (center.y > condition.maxY) {
+ conditionsPass = false;
+ }
+ }
+
+ if (conditionsPass) {
+ conditionsPassCandidates.push(correctionCondition);
+ }
+ });
+ $.each(conditionsPassCandidates, function (index, conditionsPassCandidate) {
+ fixedPosition = calculateFixedPosition(conditionsPassCandidate.fixedPosition);
+ var guidePosition = conditionsPassCandidate.guidePosition;
+ renderer.drawStickGuide(guidePosition);
+ });
+ if (!conditionsPassCandidates.length) {
+ renderer.removeAllStickGuide();
+ }
+
+ return fixedPosition;
+ };
+
+ var removeDropOverBox = function () {
+ var dropOverBoxes = $('[id$=' + OG.Constants.DROP_OVER_BBOX_SUFFIX + ']');
+ $.each(dropOverBoxes, function (index, dropOverBox) {
+ renderer.remove(dropOverBox.id);
+ });
+ $(root).removeData("groupTarget");
+ };
+
+ var setGroupTarget = function () {
+ removeDropOverBox();
+
+ var bBoxArray = $(root).data("bBoxArray");
+ if (!bBoxArray) {
+ return;
+ }
+
+ var moveElements = [];
+ var transform = [];
+ $.each(bBoxArray, function (idx, item) {
+ transform = renderer.getAttr(item.box, 'transform')[0];
+ moveElements.push(renderer.getElementById(item.id));
+ });
+ if (!transform.length) {
+ return;
+ }
+ var moveBoundary = renderer.getBoundaryOfElements(moveElements);
+ var moveTop = moveBoundary.getUpperCenter().y + transform[2];
+ var moveLeft = moveBoundary.getLeftCenter().x + transform[1];
+ var bBoxBoundary = new OG.geometry.Envelope(
+ [moveLeft, moveTop], moveBoundary.getWidth(), moveBoundary.getHeight());
+
+ var frontGroup = renderer.getFrontForBoundary(bBoxBoundary);
+ if (!frontGroup) {
+ return;
+ }
+
+ if (!me._CONFIG.GROUP_DROPABLE || !frontGroup.shape.GROUP_DROPABLE) {
+ return;
+ }
+
+ //Lane 도형에 접근할 경우 최상위 Lane 으로 타겟변경한다.
+ if (renderer.isLane(frontGroup)) {
+ frontGroup = renderer.getRootLane(frontGroup);
+ }
+
+ //A_Task 일 경우 반응하지 않는다.
+ if (frontGroup.shape instanceof OG.shape.bpmn.A_Task) {
+ return;
+ }
+
+ //접혀진 상태면 반응하지 않는다.
+ if (frontGroup.shape.isCollapsed === true) {
+ return;
+ }
+
+ //이동중인 도형들 속에 타겟이 겹친 경우 반응하지 않는다.
+ var isSelf = false;
+ $.each(bBoxArray, function (idx, item) {
+ if (frontGroup.id === item.id) {
+ isSelf = true;
+ }
+ });
+ if (isSelf) {
+ return;
+ }
+
+ //이동중인 도형 중 Lane 이 있다면 반응하지 않는다.
+ var blackList = false;
+ $.each(bBoxArray, function (idx, item) {
+ if (renderer.isLane(item.id)) {
+ blackList = true;
+ }
+ });
+ if (blackList) {
+ return;
+ }
+ $(root).data("groupTarget", frontGroup);
+ renderer.drawDropOverGuide(frontGroup);
+ };
+
+ if (isMovable === true) {
+ $(element).draggable({
+ start: function (event) {
+ var eventOffset = me._getOffset(event), guide;
+
+ // 선택되지 않은 Shape 을 drag 시 다른 모든 Shape 은 deselect 처리
+ if (!me._isSelectedElement(element)) {
+ $.each(me._getSelectedElement(), function (idx, selected) {
+ if (OG.Util.isElement(selected) && selected.id) {
+ renderer.removeGuide(selected);
+ }
+ })
+ }
+
+ //Edge 의 가이드는 모두 제거
+ renderer.removeAllEdgeGuide();
+
+ //가이드 생성
+ renderer.removeGuide(element);
+ guide = renderer.drawGuide(element);
+
+ //드래그 대상이 Lane 일 경우는 RootLane에 드래그를 생성한다.
+ if (isLane) {
+ renderer.drawGuide(renderer.getRootLane(element));
+ }
+
+ //그룹 이동처리 시작
+ var moveTargets = [];
+ $(me._RENDERER.getRootElement()).find("[id$=" + OG.Constants.GUIDE_SUFFIX.BBOX + "]").each(function (index, item) {
+ if (item.id && item.id.indexOf(OG.Constants.CONNECT_GUIDE_SUFFIX.BBOX) == -1) {
+ var elementId = item.id.replace(OG.Constants.GUIDE_SUFFIX.BBOX, "");
+ moveTargets.push({
+ id: elementId
+ });
+ }
+ });
+ var dragTargetGuideLost = false;
+ var newTargetElement;
+
+ var removeGroupInnerGuides = function (group) {
+ if (group.id === element.id) {
+ dragTargetGuideLost = true;
+ }
+ var childs = renderer.getChilds(group);
+ $.each(childs, function (index, child) {
+ renderer.removeGuide(child);
+ if (group.id === element.id) {
+ dragTargetGuideLost = true;
+ }
+ if (renderer.isGroup(child)) {
+ removeGroupInnerGuides(child);
+ }
+ })
+ };
+
+ var findParentGuideTarget = function (target) {
+ //부모가 루트일때는 루프를 중단.
+ if (!target) {
+ return;
+ }
+ $.each(moveTargets, function (index, moveTarget) {
+ if (moveTarget.id === target.id) {
+ newTargetElement = target;
+ }
+ });
+ findParentGuideTarget(renderer.getParent(target));
+ };
+
+ $.each(moveTargets, function (index, moveTarget) {
+ var moveElm = renderer.getElementById(moveTarget.id);
+ if (renderer.isGroup(moveElm)) {
+ removeGroupInnerGuides(moveElm);
+ }
+ });
+
+ if (dragTargetGuideLost) {
+ findParentGuideTarget(element);
+ if (newTargetElement) {
+ renderer.removeGuide(newTargetElement);
+ guide = renderer.drawGuide(newTargetElement);
+ }
+ }
+ //그룹 이동처리 종료.
+
+
+ $(this).data("start", {x: eventOffset.x, y: eventOffset.y});
+ $(this).data("offset", {
+ x: eventOffset.x - me._num(renderer.getAttr(guide.bBox, "x")),
+ y: eventOffset.y - me._num(renderer.getAttr(guide.bBox, "y"))
+ });
+
+ var bBoxArray = me._getMoveTargets();
+ $(root).data("bBoxArray", bBoxArray);
+ $(element).data('correctionConditions', calculateMoveCorrectionConditions(bBoxArray));
+ renderer.removeRubberBand(renderer.getRootElement());
+ },
+ drag: function (event) {
+ var eventOffset = me._getOffset(event),
+ start = $(this).data("start"),
+ bBoxArray = $(root).data("bBoxArray"),
+ dx = eventOffset.x - start.x,
+ dy = eventOffset.y - start.y,
+ offset = $(this).data("offset");
+
+ var conditionAnalysis = correctionConditionAnalysis(dx, dy);
+ if ('Y' == element.shape.AXIS) {
+ conditionAnalysis.dx = 0;
+ } else if ('X' == element.shape.AXIS) {
+ conditionAnalysis.dy = 0;
+ }
+ dx = me._grid(conditionAnalysis.dx, 'move');
+ dy = me._grid(conditionAnalysis.dy, 'move');
+
+ // Canvas 영역을 벗어나서 드래그되는 경우 Canvas 확장
+ me._autoExtend(eventOffset.x, eventOffset.y, element);
+
+ $(this).css({"position": "", "left": "", "top": ""});
+ $.each(bBoxArray, function (k, item) {
+ renderer.setAttr(item.box, {
+ transform: "t" + dx + "," + dy,
+ 'stroke-width': 1
+ });
+ });
+
+ setGroupTarget();
+
+ renderer.removeAllConnectGuide();
+ },
+ stop: function (event) {
+ var eventOffset = me._getOffset(event),
+ start = $(this).data("start"),
+ bBoxArray = $(root).data("bBoxArray"),
+ dx = eventOffset.x - start.x,
+ dy = eventOffset.y - start.y,
+ groupTarget = $(root).data("groupTarget"),
+ offset = $(this).data("offset"),
+ eleArray;
+
+ // 자동 붙기 보정
+ var conditionAnalysis = correctionConditionAnalysis(dx, dy);
+ if ('Y' == element.shape.AXIS) {
+ conditionAnalysis.dx = 0;
+ } else if ('X' == element.shape.AXIS) {
+ conditionAnalysis.dy = 0;
+ }
+ dx = me._grid(conditionAnalysis.dx, 'move');
+ dy = me._grid(conditionAnalysis.dy, 'move');
+
+ // 이동 처리
+ $(this).css({"position": "", "left": "", "top": ""});
+ eleArray = me._moveElements(bBoxArray, dx, dy);
+
+ $(root).removeData("bBoxArray");
+ renderer.removeAllGuide();
+
+ // group target 이 있는 경우 grouping 처리
+ if (groupTarget && OG.Util.isElement(groupTarget)) {
+ // grouping
+ renderer.addToGroup(groupTarget, eleArray, eventOffset);
+ renderer.remove(groupTarget.id + OG.Constants.DROP_OVER_BBOX_SUFFIX);
+ $(root).removeData("groupTarget");
+ } else {
+ // ungrouping
+ var addToGroupArray = [];
+ $.each(eleArray, function (idx, ele) {
+ /**
+ * IE 10,11 use parentNode instead parentElement
+ */
+ var parentNode = ele.parentElement;
+ if (!parentNode) {
+ parentNode = ele.parentNode;
+ }
+ if (parentNode && parentNode.id !== root.id) {
+ addToGroupArray.push(ele);
+ }
+ });
+ renderer.addToGroup(root, addToGroupArray, eventOffset);
+ }
+
+ $.each(me._getSelectedElement(), function (idx, selected) {
+ guide = renderer.drawGuide(selected);
+ if (guide) {
+ me.setResizable(selected, guide, me._isResizable(selected.shape));
+ me.setConnectable(selected, guide, me._isConnectable(selected.shape));
+ renderer.toFront(guide.group);
+ }
+ });
+
+ renderer.removeAllConnectGuide();
+ renderer.toFrontEdges();
+ renderer.checkAllBridgeEdge();
+ renderer.addHistory();
+ }
+ });
+ renderer.setAttr(element, {cursor: 'move'});
+ OG.Util.apply(element.shape.geom.style.map, {cursor: 'move'});
+ } else {
+ renderer.setAttr(element, {cursor: me._isSelectable(element.shape) ? 'pointer' : me._CONFIG.DEFAULT_STYLE.SHAPE.cursor});
+ OG.Util.apply(element.shape.geom.style.map, {cursor: me._isSelectable(element.shape) ? 'pointer' : me._CONFIG.DEFAULT_STYLE.SHAPE.cursor});
+
+ if (me._CONFIG.DRAG_PAGE_MOVABLE) {
+ var container = me._RENDERER._CANVAS._CONTAINER;
+ $(element).bind("mousedown", function (event) {
+ if (event.button != 0) {
+ return;
+ }
+ root = renderer.getRootGroup();
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active') {
+ return;
+ }
+ $(root).data("dragPageMove", {x: event.pageX, y: event.pageY});
+ $(root).data("dragPageScroll", {x: container.scrollLeft, y: container.scrollTop});
+ });
+ }
+ }
+ },
+
+ /**
+ * Shape 엘리먼트의 라인모양을 클릭하여 Shape 끼리 커넥트가 가능하게 한다.
+ *
+ * @param {Element} element Shape 엘리먼트
+ * @param {Object} guide JSON 포맷 가이드 정보
+ * @param {Boolean} isConnectable 가능여부
+ */
+ setConnectable: function (element, guide, isConnectable) {
+ var me = this, root = me._RENDERER.getRootGroup(),
+ virtualEdge, eventOffset;
+ var isEdge = $(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE ? true : false;
+ if (!element || !guide) {
+ return;
+ }
+
+ if (isConnectable) {
+ if (!isEdge) {
+ $.each(guide.line, function (i, line) {
+ $(line.node).bind({
+ click: function (event) {
+ eventOffset = me._getOffset(event);
+ virtualEdge = me._RENDERER.createVirtualEdge(eventOffset.x, eventOffset.y, element);
+ if (virtualEdge) {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE, 'created');
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_TEXT, line.text);
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_LABEL, line.label);
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_SHAPE, line.shape);
+ }
+ }
+ });
+
+ $(line.node).draggable({
+ start: function (event) {
+ me.deselectAll();
+ me._RENDERER.removeAllConnectGuide();
+ me._RENDERER.removeAllVirtualEdge();
+ eventOffset = me._getOffset(event);
+ virtualEdge = me._RENDERER.createVirtualEdge(eventOffset.x, eventOffset.y, element);
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE, 'active');
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_TEXT, line.text);
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_LABEL, line.label);
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_SHAPE, line.shape);
+ }
+ });
+ });
+
+ if (guide.rect && guide.rect.length) {
+ $.each(guide.rect, function (i, rect) {
+ $(rect.node).bind({
+ click: function (event) {
+ eventOffset = me._getOffset(event);
+ virtualEdge = me._RENDERER.createVirtualEdge(eventOffset.x, eventOffset.y, element);
+ if (virtualEdge) {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE, 'created');
+ if (rect.shape) {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_TO_DRAW, rect);
+ } else {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_TO_DRAW, false);
+ }
+ }
+ }
+ });
+
+ $(rect.node).draggable({
+ start: function (event) {
+ me.deselectAll();
+ me._RENDERER.removeAllConnectGuide();
+ me._RENDERER.removeAllVirtualEdge();
+ eventOffset = me._getOffset(event);
+ virtualEdge = me._RENDERER.createVirtualEdge(eventOffset.x, eventOffset.y, element);
+ $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE, 'active');
+ if (rect.shape) {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_TO_DRAW, rect);
+ } else {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_TO_DRAW, false);
+ }
+ }
+ });
+ });
+ }
+ }
+ }
+ },
+
+ /**
+ * Shape 엘리먼트의 리사이즈 가능여부를 설정한다.
+ *
+ * @param {Element} element Shape 엘리먼트
+ * @param {Object} guide JSON 포맷 가이드 정보
+ * @param {Boolean} isResizable 가능여부
+ */
+ setResizable: function (element, guide, isResizable) {
+ var me = this;
+ var root = me._RENDERER.getRootGroup();
+ if (!element || !guide) {
+ return;
+ }
+
+ var isEdge = $(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE ? true : false;
+ var renderer = me._RENDERER;
+
+ var boundary = me._RENDERER.getBoundary(element);
+ var uP = boundary.getUpperCenter().y;
+ var lwP = boundary.getLowerCenter().y;
+ var lP = boundary.getLeftCenter().x;
+ var rP = boundary.getRightCenter().x;
+ var bWidth = boundary.getWidth();
+ var bHeight = boundary.getHeight();
+
+ var calculateResizeCorrectionConditions = function (direction) {
+ //조건집합
+ var correctionConditions = [];
+ var minSize = me._CONFIG.GUIDE_MIN_SIZE;
+ var laneMinSize = me._CONFIG.LANE_MIN_SIZE;
+ var groupInnerSapce = me._CONFIG.GROUP_INNER_SAPCE;
+
+ if (!me._CONFIG.AUTOMATIC_GUIDANCE) {
+ return correctionConditions;
+ }
+
+ //모든 Shape 의 중심점,상하좌우 끝을 조건에 포함한다.
+ //이 조건은 다른 조건과 달리 리사이즈 최소 보정치 계산과 함께 하기 때문에 min,max 가 반대이다.
+ var delay = me._CONFIG.EDGE_MOVE_DELAY_SIZE;
+ var allShapes = renderer.getAllShapes();
+ $.each(allShapes, function (idx, shape) {
+ if (renderer.isEdge(shape)) {
+ return;
+ }
+ if (shape.id === element.id) {
+ return;
+ }
+ var boundary = renderer.getBoundary(shape);
+ var center = boundary.getCentroid();
+ var upperLeft = boundary.getUpperLeft();
+ var lowerRight = boundary.getLowerRight();
+
+ //top boundary range
+ correctionConditions.push({
+ condition: {
+ maxY: upperLeft.y - delay,
+ minY: upperLeft.y + delay
+ },
+ fixedPosition: {
+ y: upperLeft.y
+ },
+ guidePosition: {
+ y: upperLeft.y
+ },
+ id: idx
+ });
+
+ //low boundary range
+ correctionConditions.push({
+ condition: {
+ maxY: lowerRight.y - delay,
+ minY: lowerRight.y + delay
+ },
+ fixedPosition: {
+ y: lowerRight.y
+ },
+ guidePosition: {
+ y: lowerRight.y
+ },
+ id: idx
+ });
+
+ //left boundary range
+ correctionConditions.push({
+ condition: {
+ maxX: upperLeft.x - delay,
+ minX: upperLeft.x + delay
+ },
+ fixedPosition: {
+ x: upperLeft.x
+ },
+ guidePosition: {
+ x: upperLeft.x
+ },
+ id: idx
+ });
+
+ //right boundary range
+ correctionConditions.push({
+ condition: {
+ maxX: lowerRight.x - delay,
+ minX: lowerRight.x + delay
+ },
+ fixedPosition: {
+ x: lowerRight.x
+ },
+ guidePosition: {
+ x: lowerRight.x
+ },
+ id: idx
+ });
+
+ //center vertical boundary range
+ correctionConditions.push({
+ condition: {
+ maxX: center.x - delay,
+ minX: center.x + delay
+ },
+ fixedPosition: {
+ x: center.x
+ },
+ guidePosition: {
+ x: center.x
+ },
+ id: idx
+ });
+
+ //center horizontal boundary range
+ correctionConditions.push({
+ condition: {
+ maxY: center.y - delay,
+ minY: center.y + delay,
+ },
+ fixedPosition: {
+ y: center.y
+ },
+ guidePosition: {
+ y: center.y
+ },
+ id: idx
+ });
+ });
+
+ function addRightCtrlCondition() {
+ correctionConditions.push({
+ condition: {
+ minX: lP + minSize
+ },
+ fixedPosition: {
+ x: lP + minSize
+ }
+ });
+ }
+
+ function addLeftCtrlCondition() {
+ correctionConditions.push({
+ condition: {
+ maxX: rP - minSize
+ },
+ fixedPosition: {
+ x: rP - minSize
+ }
+ });
+ }
+
+ function addUpperCtrlCondition() {
+ correctionConditions.push({
+ condition: {
+ maxY: lwP - minSize
+ },
+ fixedPosition: {
+ y: lwP - minSize
+ }
+ });
+ }
+
+ function addLowCtrlCondition() {
+ correctionConditions.push({
+ condition: {
+ minY: uP + minSize
+ },
+ fixedPosition: {
+ y: uP + minSize
+ }
+ });
+ }
+
+ //상단 컨트롤러를 위쪽으로 드래그할 경우
+ function laneUpHandleMoveup() {
+ if (renderer.isHorizontalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'upper');
+ if (indexAsDirection > 0) {
+ var compareLane = baseLanes[indexAsDirection - 1];
+ var resizableSpace = renderer.getBoundary(compareLane).getHeight() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ minY: uP - resizableSpace
+ },
+ fixedPosition: {
+ y: uP - resizableSpace
+ }
+ });
+ }
+ }
+ }
+
+ //상단 컨트롤러를 아래쪽으로 드래그할 경우
+ function laneUpHandleMovedown() {
+ if (renderer.isHorizontalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'upper');
+ var compareLane = baseLanes[indexAsDirection];
+ var resizableSpace = renderer.getBoundary(compareLane).getHeight() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ maxY: uP + resizableSpace
+ },
+ fixedPosition: {
+ y: uP + resizableSpace
+ }
+ });
+ if (indexAsDirection === 0) {
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ correctionConditions.push({
+ condition: {
+ maxY: boundaryOfInnerShapes.getUpperCenter().y - groupInnerSapce
+ },
+ fixedPosition: {
+ y: boundaryOfInnerShapes.getUpperCenter().y - groupInnerSapce
+ }
+ });
+ }
+ }
+ }
+ if (renderer.isVerticalLane(element)) {
+ var smallestBaseLane = renderer.getSmallestBaseLane(element);
+ var resizableSpace = renderer.getExceptTitleLaneArea(smallestBaseLane).getHeight() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ maxY: uP + resizableSpace
+ },
+ fixedPosition: {
+ y: uP + resizableSpace
+ }
+ });
+
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ var rootLane = renderer.getRootLane(element);
+ var rootTitleSpace = renderer.getBoundary(rootLane).getHeight() - renderer.getExceptTitleLaneArea(rootLane).getHeight();
+ correctionConditions.push({
+ condition: {
+ maxY: boundaryOfInnerShapes.getUpperCenter().y - groupInnerSapce - rootTitleSpace
+ },
+ fixedPosition: {
+ y: boundaryOfInnerShapes.getUpperCenter().y - groupInnerSapce - rootTitleSpace
+ }
+ });
+ }
+ }
+ }
+
+ //하단 컨트롤러를 위쪽으로 드래그할 경우
+ function laneLowHandleMoveup() {
+ if (renderer.isHorizontalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'low');
+ var compareLane = baseLanes[indexAsDirection];
+ var resizableSpace = renderer.getBoundary(compareLane).getHeight() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ minY: lwP - resizableSpace
+ },
+ fixedPosition: {
+ y: lwP - resizableSpace
+ }
+ });
+
+ if (indexAsDirection === baseLanes.length - 1) {
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ correctionConditions.push({
+ condition: {
+ minY: boundaryOfInnerShapes.getLowerCenter().y + groupInnerSapce
+ },
+ fixedPosition: {
+ y: boundaryOfInnerShapes.getLowerCenter().y + groupInnerSapce
+ }
+ });
+ }
+ }
+ }
+ if (renderer.isVerticalLane(element)) {
+ var smallestBaseLane = renderer.getSmallestBaseLane(element);
+ var resizableSpace = renderer.getExceptTitleLaneArea(smallestBaseLane).getHeight() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ minY: lwP - resizableSpace
+ },
+ fixedPosition: {
+ y: lwP - resizableSpace
+ }
+ });
+
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ correctionConditions.push({
+ condition: {
+ minY: boundaryOfInnerShapes.getLowerCenter().y + groupInnerSapce
+ },
+ fixedPosition: {
+ y: boundaryOfInnerShapes.getLowerCenter().y + groupInnerSapce
+ }
+ });
+ }
+ }
+ }
+
+ //하단 컨트롤러를 아래쪽으로 드래그할 경우
+ function laneLowHandleMovedown() {
+ if (renderer.isHorizontalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'low');
+ if (indexAsDirection < baseLanes.length - 1) {
+ var compareLane = baseLanes[indexAsDirection + 1];
+ var resizableSpace = renderer.getBoundary(compareLane).getHeight() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ maxY: lwP + resizableSpace
+ },
+ fixedPosition: {
+ y: lwP + resizableSpace
+ }
+ });
+ }
+ }
+ }
+
+ //좌측 컨트롤러를 우측으로 드래그할 경우
+ function laneLeftHandleMoveright() {
+ if (renderer.isHorizontalLane(element)) {
+ var smallestBaseLane = renderer.getSmallestBaseLane(element);
+ var resizableSpace = renderer.getExceptTitleLaneArea(smallestBaseLane).getWidth() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ maxX: lP + resizableSpace
+ },
+ fixedPosition: {
+ x: lP + resizableSpace
+ }
+ });
+
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ var rootLane = renderer.getRootLane(element);
+ var rootTitleSpace = renderer.getBoundary(rootLane).getWidth() - renderer.getExceptTitleLaneArea(rootLane).getWidth();
+ correctionConditions.push({
+ condition: {
+ maxX: boundaryOfInnerShapes.getLeftCenter().x - groupInnerSapce - rootTitleSpace
+ },
+ fixedPosition: {
+ x: boundaryOfInnerShapes.getLeftCenter().x - groupInnerSapce - rootTitleSpace
+ }
+ });
+ }
+ }
+ if (renderer.isVerticalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'left');
+ var compareLane = baseLanes[indexAsDirection];
+ var resizableSpace = renderer.getBoundary(compareLane).getWidth() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ maxX: lP + resizableSpace
+ },
+ fixedPosition: {
+ x: lP + resizableSpace
+ }
+ });
+
+ if (indexAsDirection === baseLanes.length - 1) {
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ correctionConditions.push({
+ condition: {
+ maxX: boundaryOfInnerShapes.getLeftCenter().x - groupInnerSapce
+ },
+ fixedPosition: {
+ x: boundaryOfInnerShapes.getLeftCenter().x - groupInnerSapce
+ }
+ });
+ }
+ }
+ }
+ }
+
+ //좌측 컨트롤러를 좌측으로 드래그할 경우
+ function laneLeftHandleMoveleft() {
+ if (renderer.isVerticalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'left');
+ if (indexAsDirection < baseLanes.length - 1) {
+ var compareLane = baseLanes[indexAsDirection + 1];
+ var resizableSpace = renderer.getBoundary(compareLane).getWidth() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ minX: lP - resizableSpace
+ },
+ fixedPosition: {
+ x: lP - resizableSpace
+ }
+ });
+ }
+ }
+ }
+
+ //우측 컨트롤러를 좌측으로 드래그할 경우
+ function laneRightHandleMoveleft() {
+ if (renderer.isHorizontalLane(element)) {
+ var smallestBaseLane = renderer.getSmallestBaseLane(element);
+ var resizableSpace = renderer.getExceptTitleLaneArea(smallestBaseLane).getWidth() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ minX: rP - resizableSpace
+ },
+ fixedPosition: {
+ x: rP - resizableSpace
+ }
+ });
+
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ correctionConditions.push({
+ condition: {
+ minX: boundaryOfInnerShapes.getRightCenter().x + groupInnerSapce
+ },
+ fixedPosition: {
+ x: boundaryOfInnerShapes.getRightCenter().x + groupInnerSapce
+ }
+ });
+ }
+ }
+ if (renderer.isVerticalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'right');
+ var compareLane = baseLanes[indexAsDirection];
+ var resizableSpace = renderer.getBoundary(compareLane).getWidth() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ minX: rP - resizableSpace
+ },
+ fixedPosition: {
+ x: rP - resizableSpace
+ }
+ });
+ if (indexAsDirection === 0) {
+ var boundaryOfInnerShapes = renderer.getBoundaryOfInnerShapesGroup(element);
+ if (boundaryOfInnerShapes) {
+ correctionConditions.push({
+ condition: {
+ minX: boundaryOfInnerShapes.getRightCenter().x + groupInnerSapce
+ },
+ fixedPosition: {
+ x: boundaryOfInnerShapes.getRightCenter().x + groupInnerSapce
+ }
+ });
+ }
+ }
+ }
+ }
+
+ //우측 컨트롤러를 우측으로 드래그할 경우
+ function laneRightHandleMoveright() {
+ if (renderer.isVerticalLane(element)) {
+ var baseLanes = renderer.getBaseLanes(element);
+ var indexAsDirection = renderer.getNearestBaseLaneIndexAsDirection(element, 'right');
+ if (indexAsDirection > 0) {
+ var compareLane = baseLanes[indexAsDirection - 1];
+ var resizableSpace = renderer.getBoundary(compareLane).getWidth() - laneMinSize;
+ correctionConditions.push({
+ condition: {
+ maxX: rP + resizableSpace
+ },
+ fixedPosition: {
+ x: rP + resizableSpace
+ }
+ });
+ }
+ }
+ }
+
+ if (upHandle(direction)) {
+ addUpperCtrlCondition();
+ }
+ if (lowHandle(direction)) {
+ addLowCtrlCondition();
+ }
+ if (leftHandle(direction)) {
+ addLeftCtrlCondition();
+ }
+ if (rightHandle(direction)) {
+ addRightCtrlCondition();
+ }
+
+ if (renderer.isLane(element)) {
+ if (upHandle(direction)) {
+ laneUpHandleMoveup();
+ laneUpHandleMovedown();
+ }
+ if (lowHandle(direction)) {
+ laneLowHandleMoveup();
+ laneLowHandleMovedown();
+ }
+ if (leftHandle(direction)) {
+ laneLeftHandleMoveright();
+ laneLeftHandleMoveleft();
+ }
+ if (rightHandle(direction)) {
+ laneRightHandleMoveleft();
+ laneRightHandleMoveright();
+ }
+ }
+ return correctionConditions;
+ };
+ //element가 가지고있는 범위조건에 따라 새로운 포지션을 계산한다.
+ var correctionConditionAnalysis = function (controller, offset) {
+ var fixedPosition = {
+ x: offset.x,
+ y: offset.y
+ };
+ if (!me._CONFIG.AUTOMATIC_GUIDANCE) {
+ return fixedPosition;
+ }
+ var calculateFixedPosition = function (expectedPosition) {
+ if (!expectedPosition) {
+ return fixedPosition;
+ }
+ if (expectedPosition.x && !expectedPosition.y) {
+ return {
+ x: expectedPosition.x,
+ y: fixedPosition.y
+ }
+ }
+ if (expectedPosition.y && !expectedPosition.x) {
+ return {
+ x: fixedPosition.x,
+ y: expectedPosition.y
+ }
+ }
+ if (expectedPosition.x && expectedPosition.y) {
+ return expectedPosition;
+ }
+ return fixedPosition;
+ };
+ var correctionConditions = $(controller).data('correctionConditions');
+ if (!correctionConditions) {
+ return fixedPosition;
+ }
+
+ var conditionsPassCandidates = [];
+ $.each(correctionConditions, function (index, correctionCondition) {
+ var condition = correctionCondition.condition;
+
+ var conditionsPassToFix = true;
+ if (condition.minX) {
+ if (offset.x > condition.minX) {
+ conditionsPassToFix = false;
+ }
+ }
+ if (condition.maxX) {
+ if (offset.x < condition.maxX) {
+ conditionsPassToFix = false;
+ }
+ }
+ if (condition.minY) {
+ if (offset.y > condition.minY) {
+ conditionsPassToFix = false;
+ }
+ }
+ if (condition.maxY) {
+ if (offset.y < condition.maxY) {
+ conditionsPassToFix = false;
+ }
+ }
+ if (conditionsPassToFix) {
+ conditionsPassCandidates.push(correctionCondition);
+ }
+ });
+
+ $.each(conditionsPassCandidates, function (index, conditionsPassCandidate) {
+ fixedPosition = calculateFixedPosition(conditionsPassCandidate.fixedPosition);
+ var guidePosition = conditionsPassCandidate.guidePosition;
+ if (guidePosition) {
+ renderer.drawStickGuide(guidePosition);
+ }
+ });
+ if (!conditionsPassCandidates.length) {
+ renderer.removeAllStickGuide();
+ }
+
+ return fixedPosition;
+
+ };
+
+ var upHandle = function (handleName) {
+ if (handleName === 'ul' || handleName === 'uc' || handleName === 'ur') {
+ return true;
+ }
+ return false;
+ };
+
+ var lowHandle = function (handleName) {
+ if (handleName === 'lwl' || handleName === 'lwc' || handleName === 'lwr') {
+ return true;
+ }
+ return false;
+ };
+
+ var rightHandle = function (handleName) {
+ if (handleName === 'ur' || handleName === 'rc' || handleName === 'lwr') {
+ return true;
+ }
+ return false;
+ };
+
+ var leftHandle = function (handleName) {
+ if (handleName === 'ul' || handleName === 'lc' || handleName === 'lwl') {
+ return true;
+ }
+ return false;
+ };
+
+ if (isResizable === true) {
+ if (!isEdge) {
+ for (var _handleName in guide) {
+ var handles = ['ul', 'uc', 'ur', 'rc', 'lwr', 'lwc', 'lwl', 'lc'];
+ var indexOfHandle = handles.indexOf(_handleName);
+ var canvasSize;
+ if (indexOfHandle === -1) {
+ continue;
+ }
+
+ $(guide[_handleName]).data('handleName', _handleName);
+ $(guide[_handleName]).draggable({
+ start: function (event) {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.ONRESIZE, 'active');
+ var handleName = $(this).data('handleName');
+ var eventOffset = me._getOffset(event);
+ var hx = renderer.getAttr(guide[handleName], "x");
+ var hy = renderer.getAttr(guide[handleName], "y");
+ var hWidth = renderer.getAttr(guide[handleName], "width");
+ var hHeight = renderer.getAttr(guide[handleName], "height");
+ $(this).data("start", {x: eventOffset.x, y: eventOffset.y});
+ $(this).data("offset", {
+ x: eventOffset.x - me._num(hx + hWidth / 2),
+ y: eventOffset.y - me._num(hy + hHeight / 2)
+ });
+
+ $(this).data('correctionConditions', calculateResizeCorrectionConditions(handleName));
+ renderer.removeRubberBand(renderer.getRootElement());
+ },
+ drag: function (event) {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.ONRESIZE, 'active');
+ var handleName = $(this).data('handleName');
+ var eventOffset = me._getOffset(event),
+ start = $(this).data("start"),
+ offset = $(this).data("offset");
+ var hWidth = renderer.getAttr(guide[handleName], "width");
+ var hHeight = renderer.getAttr(guide[handleName], "height");
+ var newXY = correctionConditionAnalysis($(this), {
+ x: eventOffset.x - offset.x,
+ y: eventOffset.y - offset.y
+ });
+ var newX = me._grid(newXY.x);
+ var newY = me._grid(newXY.y);
+ var newWidth, newHeight
+ var newUp = uP;
+ var newLwp = lwP;
+ var newLp = lP;
+ var newRp = rP;
+ $(this).css({"position": "", "left": "", "top": ""});
+ if (upHandle(handleName)) {
+ newUp = newY;
+ }
+ if (lowHandle(handleName)) {
+ newLwp = newY;
+ }
+ if (rightHandle(handleName)) {
+ newRp = newX;
+ }
+ if (leftHandle(handleName)) {
+ newLp = newX;
+ }
+ newWidth = Math.abs(newRp - newLp);
+ newHeight = Math.abs(newLwp - newUp);
+
+ renderer.setAttr(guide.ul, {
+ x: newLp - hWidth / 2,
+ y: newUp - hHeight / 2
+ });
+ renderer.setAttr(guide.uc, {
+ x: (newLp + newRp) / 2 - hWidth / 2,
+ y: newUp - hHeight / 2
+ });
+ renderer.setAttr(guide.ur, {
+ x: newRp - hWidth / 2,
+ y: newUp - hHeight / 2
+ });
+ renderer.setAttr(guide.lc, {
+ x: newLp - hWidth / 2,
+ y: (newUp + newLwp) / 2 - hHeight / 2
+ });
+ renderer.setAttr(guide.rc, {
+ x: newRp - hWidth / 2,
+ y: (newUp + newLwp) / 2 - hHeight / 2
+ });
+ renderer.setAttr(guide.lwl, {
+ x: newLp - hWidth / 2,
+ y: newLwp - hHeight / 2
+ });
+ renderer.setAttr(guide.lwc, {
+ x: (newLp + newRp) / 2 - hWidth / 2,
+ y: newLwp - hHeight / 2
+ });
+ renderer.setAttr(guide.lwr, {
+ x: newRp - hWidth / 2,
+ y: newLwp - hHeight / 2
+ });
+ renderer.setAttr(guide.bBox, {
+ x: newLp,
+ y: newUp,
+ width: newWidth,
+ height: newHeight
+ });
+ renderer.removeAllConnectGuide();
+
+ canvasSize = renderer.getCanvasSize();
+ if (canvasSize[0] < newRp + me._CONFIG.RESIZE_CANVAS_MARGIN || canvasSize[1] < newLwp + me._CONFIG.RESIZE_CANVAS_MARGIN) {
+ if (canvasSize[0] < newRp + me._CONFIG.RESIZE_CANVAS_MARGIN) {
+ canvasSize[0] = newRp + me._CONFIG.RESIZE_CANVAS_MARGIN;
+ }
+ if (canvasSize[1] < newLwp + me._CONFIG.RESIZE_CANVAS_MARGIN) {
+ canvasSize[1] = newLwp + me._CONFIG.RESIZE_CANVAS_MARGIN;
+ }
+ renderer.setCanvasSize(canvasSize);
+ }
+
+ },
+ stop: function (event) {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.ONRESIZE, false);
+ var handleName = $(this).data('handleName');
+ var eventOffset = me._getOffset(event),
+ start = $(this).data("start"),
+ offset = $(this).data("offset");
+ var newXY = correctionConditionAnalysis($(this), {
+ x: eventOffset.x - offset.x,
+ y: eventOffset.y - offset.y
+ });
+ var newX = me._grid(newXY.x);
+ var newY = me._grid(newXY.y);
+ var newUp = uP;
+ var newLwp = lwP;
+ var newLp = lP;
+ var newRp = rP;
+ if (upHandle(handleName)) {
+ newUp = newY;
+ }
+ if (lowHandle(handleName)) {
+ newLwp = newY;
+ }
+ if (rightHandle(handleName)) {
+ newRp = newX;
+ }
+ if (leftHandle(handleName)) {
+ newLp = newX;
+ }
+ var newWidth = Math.abs(newRp - newLp);
+ var newHeight = Math.abs(newLwp - newUp);
+ var du = uP - newUp;
+ var dlw = newLwp - lwP;
+ var dl = lP - newLp;
+ var dr = newRp - rP;
+
+ //다른 selected 엘리먼트 리사이즈용 변수
+ var stBoundary, stUp, stLwp, stLp, stRp,
+ newStUp, newStLwp, newStLp, newStRp,
+ stDu, stDlw, stDl, stDr;
+
+ $(this).css({"position": "absolute", "left": "0px", "top": "0px"});
+ if (element && element.shape.geom) {
+ if (renderer.isLane(element)) {
+ renderer.resizeLane(element, [du, dlw, dl, dr]);
+ } else {
+ renderer.resize(element, [du, dlw, dl, dr]);
+ }
+ renderer.removeGuide(element);
+ var _guide = renderer.drawGuide(element);
+ if (_guide) {
+ me.setResizable(element, _guide, me._isResizable(element.shape));
+ me.setConnectable(element, _guide, me._isConnectable(element.shape));
+ }
+
+ //선택된 다른 엘리먼트들의 리사이즈 처리
+ $.each(me._getSelectedElement(), function (idx, selected) {
+ if (selected.id === element.id) {
+ return;
+ }
+ if (renderer.isShape(selected) && !renderer.isEdge(selected)) {
+ stBoundary = renderer.getBoundary(selected);
+ stUp = stBoundary.getUpperCenter().y;
+ stLwp = stBoundary.getLowerCenter().y;
+ stLp = stBoundary.getLeftCenter().x;
+ stRp = stBoundary.getRightCenter().x;
+ newStUp = stUp;
+ newStLwp = stLwp;
+ newStLp = stLp;
+ newStRp = stRp;
+ if (upHandle(handleName)) {
+ newStUp = stLwp - newHeight;
+ }
+ if (lowHandle(handleName)) {
+ newStLwp = stUp + newHeight;
+ }
+ if (rightHandle(handleName)) {
+ newStRp = stLp + newWidth;
+ }
+ if (leftHandle(handleName)) {
+ newStLp = stRp - newWidth;
+ }
+ stDu = stUp - newStUp;
+ stDlw = newStLwp - stLwp;
+ stDl = stLp - newStLp;
+ stDr = newStRp - stRp;
+
+ if (renderer.isLane(selected)) {
+ renderer.resizeLane(selected, [stDu, stDlw, stDl, stDr]);
+ } else {
+ renderer.resize(selected, [stDu, stDlw, stDl, stDr]);
+ }
+ renderer.removeGuide(selected);
+ var _stGuide = renderer.drawGuide(selected);
+ if (_stGuide) {
+ me.setResizable(selected, _stGuide, me._isResizable(selected.shape));
+ me.setConnectable(selected, _stGuide, me._isConnectable(selected.shape));
+ }
+ }
+ });
+ }
+ renderer.removeAllConnectGuide();
+ renderer.addHistory();
+ }
+ });
+ }
+ // add tooltip for guide activity icon
+ for (var item in guide) {
+ if ($(guide[item]).attr('tooltip') == 'enable')
+ if ($(guide[item]).tooltip)
+ $(guide[item]).tooltip();
+ }
+ }
+ } else {
+ if ($(element).attr("_shape") !== OG.Constants.SHAPE_TYPE.EDGE) {
+ renderer.setAttr(guide.ul, {cursor: 'default'});
+ renderer.setAttr(guide.ur, {cursor: 'default'});
+ renderer.setAttr(guide.lwl, {cursor: 'default'});
+ renderer.setAttr(guide.lwr, {cursor: 'default'});
+ renderer.setAttr(guide.lc, {cursor: 'default'});
+ renderer.setAttr(guide.uc, {cursor: 'default'});
+ renderer.setAttr(guide.rc, {cursor: 'default'});
+ renderer.setAttr(guide.lwc, {cursor: 'default'});
+ }
+ }
+ },
+
+ /**
+ * 주어진 Shape Element 를 마우스 클릭하여 선택가능하도록 한다.
+ * 선택가능해야 리사이즈가 가능하다.
+ * 선택시 커넥트 모드일 경우 connect 가능하게 한다.
+ *
+ * @param {Element} element Shape Element
+ * @param {Boolean} isSelectable 선택가능여부
+ */
+ setClickSelectable: function (element, isSelectable) {
+ var me = this;
+ var renderer = me._RENDERER;
+ var root = me._RENDERER.getRootGroup();
+ if (isSelectable === true) {
+ // 마우스 클릭하여 선택 처리
+ $(element).bind({
+ click: function (event, param) {
+ root = me._RENDERER.getRootGroup();
+ if (me._CONFIG.FOCUS_CANVAS_ONSELECT) {
+ $(me._RENDERER.getContainer()).focus();
+ }
+ if (element.shape) {
+ me._RENDERER.removeAllVirtualEdge();
+
+ if ($(element).attr("_selected") === "true") {
+ me.deselectShape(element);
+ if (param) {
+ if (!param.shiftKey && !param.ctrlKey) {
+ me.selectShape(element, event, param);
+ }
+ } else {
+ if (!event.shiftKey && !event.ctrlKey) {
+ me.selectShape(element);
+ }
+ }
+ } else {
+ me.selectShape(element, event, param);
+ }
+ return false;
+ }
+ },
+ mousedown: function (event) {
+ event.stopPropagation();
+ },
+ mouseup: function (event) {
+ root = me._RENDERER.getRootGroup();
+ if (element.shape) {
+ var isConnectable = me._isConnectable(element.shape);
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var connectText = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_TEXT);
+ var connectLabel = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_LABEL);
+ var connectShape = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_SHAPE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ var isEdge = $(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE;
+ if (isConnectMode) {
+
+ if (isConnectable && !isEdge) {
+ var target = me._RENDERER.getTargetfromVirtualEdge();
+ if (target.id === element.id) {
+ return;
+ }
+ me._RENDERER.removeAllVirtualEdge();
+ //From,To 가능여부 확인
+ if (!me._isConnectableFrom(target.shape)) {
+ isConnectable = false;
+ }
+ if (!me._isConnectableTo(element.shape)) {
+ isConnectable = false;
+ }
+ if (isConnectable) {
+ if (connectShape) {
+ eval('connectShape = new ' + connectShape + '()');
+ }
+ me._RENDERER._CANVAS.connect(target, element, null, connectLabel, null, null, null, null, connectShape);
+ $(root).removeData(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_SHAPE);
+ $(root).removeData(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_TEXT);
+ $(root).removeData(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_LABEL);
+ renderer.addHistory();
+ }
+ } else {
+ me._RENDERER.removeAllVirtualEdge();
+ }
+ }
+
+ if (isRectMode === 'active') {
+ me.cloneElementControll();
+ }
+ }
+ }
+ });
+
+ // 마우스 우클릭하여 선택 처리
+ if (me._CONFIG.ENABLE_CONTEXTMENU) {
+ $(element).bind("contextmenu", function (event) {
+
+ //중복된 콘텍스트를 방지
+ var eventOffset = me._getOffset(event);
+ var frontElement = renderer.getFrontForCoordinate([eventOffset.x, eventOffset.y]);
+ if (!frontElement) {
+ return;
+ }
+ if (frontElement.id !== element.id) {
+ return;
+ }
+
+ if (element.shape) {
+ if ($(element).attr("_selected") !== "true") {
+ me.selectShape(element, event);
+ }
+ }
+ });
+ }
+
+ me._RENDERER.setAttr(element, {cursor: 'pointer'});
+ OG.Util.apply(element.shape.geom.style.map, {cursor: 'pointer'});
+
+ } else {
+ $(element).unbind('click');
+ me._RENDERER.setAttr(element, {cursor: me._CONFIG.DEFAULT_STYLE.SHAPE.cursor});
+ OG.Util.apply(element.shape.geom.style.map, {cursor: me._CONFIG.DEFAULT_STYLE.SHAPE.cursor});
+ }
+ },
+
+ /**
+ * Lane,Pool 엘리먼트가 새로 생성될 시 그룹을 맺도록 한다.
+ *
+ * @param {Element} element Shape 엘리먼트
+ */
+ setGroupDropable: function (element) {
+ var me = this;
+ var renderer = me._RENDERER;
+ var root = renderer.getRootGroup();
+
+ $(element).bind("mousedown", function () {
+ var newPool = $(root).data('newPool');
+ var poolInnderShape = $(root).data('poolInnderShape');
+ if (!renderer.isLane(element) && !renderer.isPool(element)) {
+ return;
+ }
+ if (!newPool) {
+ return;
+ }
+
+ $.each(poolInnderShape, function (index, innderShape) {
+ newPool.appendChild(innderShape);
+ });
+
+ if ($(newPool).data('originalStyle')) {
+ newPool.shape.geom.style.map = $(newPool).data('originalStyle');
+ }
+ renderer.redrawShape(newPool);
+ renderer.offDropablePool();
+ });
+ },
+
+ /**
+ * 드래그하여 페이지 이동이 가능하게 한다.
+ * @param {Boolean} dragPageMovable 드래그 페이지 이동 가능 여부
+ */
+ setDragPageMovable: function () {
+ var renderer = this._RENDERER;
+ var me = this, rootEle = renderer.getRootElement();
+ var root = renderer.getRootGroup();
+ var container = renderer._CANVAS._CONTAINER;
+ $(rootEle).bind("mousedown", function (event) {
+ if (!me._CONFIG.DRAG_PAGE_MOVABLE || event.button != 0) {
+ return;
+ }
+ root = renderer.getRootGroup();
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active') {
+ return;
+ }
+ $(root).data("dragPageMove", {x: event.pageX, y: event.pageY});
+ $(root).data("dragPageScroll", {x: container.scrollLeft, y: container.scrollTop});
+ });
+ $(rootEle).bind("mousemove", function (event) {
+ if (!me._CONFIG.DRAG_PAGE_MOVABLE) {
+ return;
+ }
+ root = renderer.getRootGroup();
+ var isResizing = $(root).data(OG.Constants.GUIDE_SUFFIX.ONRESIZE);
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active' || isResizing === 'active') {
+ return;
+ }
+ var pageMove = $(root).data("dragPageMove");
+ var pageScroll = $(root).data("dragPageScroll");
+
+ if (pageMove) {
+ var moveX = event.pageX - pageMove.x;
+ var moveY = event.pageY - pageMove.y;
+ $(container).scrollLeft(pageScroll.x - moveX);
+ $(container).scrollTop(pageScroll.y - moveY);
+ }
+ });
+ $(rootEle).bind("mouseup", function (event) {
+ if (!me._CONFIG.DRAG_PAGE_MOVABLE) {
+ return;
+ }
+ root = renderer.getRootGroup();
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active') {
+ return;
+ }
+ $(root).removeData('dragPageMove');
+ $(root).removeData('dragPageScroll');
+ });
+ },
+
+ /**
+ * 휠 스케일을 가능하게 한다.
+ */
+ setWheelScale: function () {
+ var renderer = this._RENDERER;
+ var me = this, rootEle = renderer.getRootElement();
+ var updateScale = function (event, isUp) {
+ var eventOffset = me._getOffset(event);
+ // var scrollLeft = rootEle.scrollLeft;
+ // var scrollTop = rootEle.scrollTop;
+ var cuScale;
+ var preScale = renderer.getScale();
+ if (isUp) {
+ cuScale = preScale + 0.02;
+ } else {
+ cuScale = preScale - 0.02;
+ }
+ if (cuScale < 0.25) {
+ cuScale = 0.25;
+ }
+ if (cuScale > 4) {
+ cuScale = 4;
+ }
+ var container = renderer._CANVAS._CONTAINER;
+ var preCenterX = eventOffset.x;
+ var preCenterY = eventOffset.y;
+
+ renderer.setScale(cuScale);
+
+ eventOffset = me._getOffset(event);
+ var cuCenterX = eventOffset.x;
+ var cuCenterY = eventOffset.y;
+
+ var moveX = (preCenterX - cuCenterX) * cuScale;
+ var moveY = (preCenterY - cuCenterY) * cuScale;
+
+ var cuScrollLeft = container.scrollLeft;
+ var cuScrollTop = container.scrollTop;
+ $(container).scrollLeft(cuScrollLeft + moveX);
+ $(container).scrollTop(cuScrollTop + moveY);
+ renderer._CANVAS.updateNavigatior();
+
+ };
+
+ $(rootEle).bind('mousewheel DOMMouseScroll', function (event) {
+ if (me._CONFIG.WHEEL_SCALABLE) {
+
+ //터치패드 이벤트와 마우스 휠 스피드의 차이는 매우 크다.
+ //터치패드 0~10, 마우스 휠 400 이상.
+
+ if (!event.shiftKey) return;
+
+ var deltaX = 0;
+ var deltaY = 0;
+ deltaX = event.originalEvent.wheelDeltaX || event.deltaX || 0;
+ deltaY = event.originalEvent.wheelDeltaY || event.deltaY || 0;
+ var isTrackPad = false;
+ if (Math.abs(deltaX) < 120 && Math.abs(deltaY) < 120) {
+ isTrackPad = true;
+ }
+ if (!me._CONFIG.ENABLE_TRACKPAD) {
+ isTrackPad = false;
+ }
+ if (isTrackPad) {
+ //chrome pinch-to-zoom
+ if (event.ctrlKey) {
+ event.preventDefault();
+ event.stopPropagation();
+ if (event.originalEvent.wheelDelta > 0 || event.deltaY > 0) {
+ // scroll up
+ updateScale(event, true);
+ }
+ else {
+ updateScale(event, false);
+ }
+ }
+ } else {
+ event.preventDefault();
+ event.stopPropagation();
+ if (event.originalEvent.wheelDelta > 0 || event.deltaY > 0) {
+ // scroll up
+ updateScale(event, true);
+ }
+ else {
+ updateScale(event, false);
+ }
+ }
+ }
+ });
+ },
+
+ cloneElementControll: function () {
+ var renderer = this._RENDERER;
+ var me = this,
+ root = renderer.getRootGroup();
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+
+ if (isRectMode === 'created') {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE, 'active');
+ }
+ if (isRectMode === 'active') {
+ //새로운 것 만드는 과정
+ var toDraw = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_TO_DRAW);
+ if (!toDraw) {
+ var eventOffset = me._getOffset(event);
+
+ var target = me._RENDERER.getTargetfromVirtualEdge();
+ renderer.removeAllVirtualEdge();
+ var shapeId = $(target).attr('_shape_id');
+ var newShape;
+ eval('newShape = new ' + shapeId + '()');
+
+ var style = target.shape.geom.style;
+ var boundary = renderer.getBoundary(target);
+ var width = boundary.getWidth();
+ var height = boundary.getHeight();
+
+ //From,To 가능여부 확인
+ var isConnectable = me._isConnectable(target.shape);
+ if (!me._isConnectableFrom(target.shape)) {
+ isConnectable = false;
+ }
+ if (!me._isConnectableTo(target.shape)) {
+ isConnectable = false;
+ }
+ if (isConnectable) {
+ newShape.setData(JSON.parse(JSON.stringify(target.shape.getData())));
+ var rectShape = renderer._CANVAS.drawShape([eventOffset.x, eventOffset.y], newShape, [width, height], style);
+ var edge = renderer._CANVAS.connect(target, rectShape, null, null, null, null, true);
+ $(renderer._PAPER.canvas).trigger('duplicated', [edge, target, rectShape]);
+ }
+ } else {
+ var eventOffset = me._getOffset(event);
+
+ var target = me._RENDERER.getTargetfromVirtualEdge();
+ renderer.removeAllVirtualEdge();
+ var shapeId = toDraw.shape;
+ var newShape;
+ if (shapeId instanceof OG.IShape) {
+ newShape = shapeId;
+ } else {
+ eval('newShape = new ' + shapeId + '()');
+ }
+
+ var style = toDraw.style;
+ var width = toDraw.width;
+ var height = toDraw.height;
+
+ //From 가능여부 확인
+ var isConnectable = me._isConnectable(target.shape);
+ if (!me._isConnectableFrom(target.shape)) {
+ isConnectable = false;
+ }
+ if (isConnectable) {
+ var rectShape = renderer._CANVAS.drawShape([eventOffset.x, eventOffset.y], newShape, [width, height], style);
+ var edge = rende
+ rer._CANVAS.connect(target, rectShape, null, null, null, null, true);
+ if (target.shape.onDuplicated) {
+ target.shape.onDuplicated(edge, target, rectShape);
+ }
+ if (rectShape.shape.onDuplicated) {
+ rectShape.shape.onDuplicated(edge, target, rectShape);
+ }
+ $(renderer._PAPER.canvas).trigger('duplicated', [edge, target, rectShape]);
+ }
+ }
+ }
+ },
+
+ /**
+ * 마우스 드래그 영역지정 선택가능여부를 설정한다.
+ * 선택가능해야 리사이즈가 가능하다.
+ *
+ * @param {Boolean} isSelectable 선택가능여부
+ */
+ setDragSelectable: function (isSelectable) {
+ var renderer = this._RENDERER;
+ var me = this, rootEle = renderer.getRootElement(),
+ root = renderer.getRootGroup();
+
+ var correctionConditionAnalysis = function (correctionConditions, offset) {
+ var fixedPosition = {
+ x: offset.x,
+ y: offset.y
+ };
+ var calculateFixedPosition = function (expectedPosition) {
+ if (!expectedPosition) {
+ return fixedPosition;
+ }
+ if (expectedPosition.x && !expectedPosition.y) {
+ return {
+ x: expectedPosition.x,
+ y: fixedPosition.y
+ }
+ }
+ if (expectedPosition.y && !expectedPosition.x) {
+ return {
+ x: fixedPosition.x,
+ y: expectedPosition.y
+ }
+ }
+ if (expectedPosition.x && expectedPosition.y) {
+ return expectedPosition;
+ }
+ return fixedPosition;
+ };
+ if (!correctionConditions || !correctionConditions.length) {
+ return fixedPosition;
+ }
+
+ var conditionsPassCandidates = [];
+ $.each(correctionConditions, function (index, correctionCondition) {
+ var condition = correctionCondition.condition;
+
+ var conditionsPassToFix = true;
+ if (condition.minX) {
+ if (offset.x > condition.minX) {
+ conditionsPassToFix = false;
+ }
+ }
+ if (condition.maxX) {
+ if (offset.x < condition.maxX) {
+ conditionsPassToFix = false;
+ }
+ }
+ if (condition.minY) {
+ if (offset.y > condition.minY) {
+ conditionsPassToFix = false;
+ }
+ }
+ if (condition.maxY) {
+ if (offset.y < condition.maxY) {
+ conditionsPassToFix = false;
+ }
+ }
+
+ if (conditionsPassToFix) {
+ conditionsPassCandidates.push(correctionCondition);
+ }
+ });
+ $.each(conditionsPassCandidates, function (index, conditionsPassCandidate) {
+ fixedPosition = calculateFixedPosition(conditionsPassCandidate.fixedPosition);
+ });
+
+ return fixedPosition;
+ };
+
+ // 배경클릭한 경우 deselect 하도록
+ $(rootEle).bind("click", function (event) {
+ root = me._RENDERER.getRootGroup();
+ if (!$(this).data("dragBox")) {
+ me.deselectAll();
+ renderer.removeRubberBand(rootEle);
+ renderer.removeAllConnectGuide();
+ }
+ //가상선 생성된 경우 액티브로 등록
+ //가상선 액티브인 경우 삭제
+ root = renderer.getRootGroup();
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode) {
+ if (isConnectMode === 'created') {
+ $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE, 'active');
+ }
+ if (isConnectMode === 'active') {
+ renderer.removeAllVirtualEdge();
+ }
+ }
+ me.cloneElementControll();
+ });
+
+ $(rootEle).bind("mousemove", function (event) {
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active') {
+ eventOffset = me._getOffset(event);
+ renderer.updateVirtualEdge(eventOffset.x, eventOffset.y);
+ }
+
+ //Lane,Pool 이 새로 그려졌을 경우 위치조정
+ var newPool = $(root).data('newPool');
+ var correctionConditions = $(root).data('correctionConditions');
+ if (newPool) {
+
+ var geometry = newPool.shape.geom;
+ var eventOffset = me._getOffset(event);
+ var newX = eventOffset.x;
+ var newY = eventOffset.y;
+
+ var conditionAnalysis = correctionConditionAnalysis(correctionConditions, {x: newX, y: newY});
+ newX = me._grid(conditionAnalysis.x, 'move');
+ newY = me._grid(conditionAnalysis.y, 'move');
+
+ geometry.moveCentroid([newX, newY]);
+ renderer.redrawShape(newPool);
+ }
+ });
+
+ $(rootEle).bind("contextmenu", function (event) {
+ if (event.target.nodeName == 'svg') {
+ me.deselectAll();
+ renderer.removeRubberBand(rootEle);
+
+ }
+ });
+
+ if (isSelectable === true) {
+ // 마우스 영역 드래그하여 선택 처리
+ $(rootEle).bind("mousedown", function (event) {
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active') {
+ return;
+ }
+ if (!me._CONFIG.DRAG_PAGE_MOVABLE) {
+ var eventOffset = me._getOffset(event);
+ $(this).data("dragBox_first", {x: eventOffset.x, y: eventOffset.y});
+ $(this).removeData("dragBox");
+ }
+ });
+ $(rootEle).bind("mousemove", function (event) {
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active') {
+ $(this).removeData("dragBox_first");
+ return;
+ }
+ var first = $(this).data("dragBox_first"),
+ eventOffset, width, height, x, y;
+
+ if (first && !me._CONFIG.DRAG_PAGE_MOVABLE) {
+ eventOffset = me._getOffset(event);
+ width = eventOffset.x - first.x;
+ height = eventOffset.y - first.y;
+
+ if (Math.abs(width) > OG.Constants.RUBBER_BAND_TOLERANCE
+ && Math.abs(height) > OG.Constants.RUBBER_BAND_TOLERANCE) {
+ $(this).data("rubber_band_status", "start");
+
+ x = width <= 0 ? first.x + width : first.x;
+ y = height <= 0 ? first.y + height : first.y;
+ renderer.drawRubberBand([x, y], [Math.abs(width), Math.abs(height)]);
+ }
+ }
+ });
+ $(rootEle).bind("mouseup", function (event) {
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ var isRectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.RECT_CONNECT_MODE);
+ if (isConnectMode === 'active' || isRectMode === 'active') {
+ return;
+ }
+ if ("start" == $(this).data("rubber_band_status") && !me._CONFIG.DRAG_PAGE_MOVABLE) {
+ var first = $(this).data("dragBox_first"),
+ eventOffset, width, height, x, y, envelope, guide, elements = [];
+ renderer.removeRubberBand(rootEle);
+ if (first) {
+ eventOffset = me._getOffset(event);
+ width = eventOffset.x - first.x;
+ height = eventOffset.y - first.y;
+ x = width <= 0 ? first.x + width : first.x;
+ y = height <= 0 ? first.y + height : first.y;
+ envelope = new OG.Envelope([x, y], Math.abs(width), Math.abs(height));
+
+ $.each(renderer.getAllShapes(), function (index, element) {
+ if (!element.shape.geom) {
+ return;
+ }
+ if (!envelope.isContainsAll(element.shape.geom.getVertices())) {
+ return;
+ }
+ if (renderer.isEdge(element)) {
+ return;
+ }
+ elements.push(element);
+ });
+ me.selectShapes(elements);
+ $(this).data("dragBox", {"width": width, "height": height, "x": x, "y": y});
+ }
+ $(this).data("rubber_band_status", "none");
+ }
+ });
+
+ $(rootEle).bind("contextmenu", function (event) {
+ renderer.removeRubberBand(rootEle);
+ });
+ } else {
+ $(rootEle).unbind("mousedown");
+ $(rootEle).unbind("mousemove");
+ $(rootEle).unbind("mouseup");
+ $(rootEle).unbind("contextmenu");
+ }
+ },
+
+ /**
+ * HotKey 사용 가능여부를 설정한다. (Delete, Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+G, Ctrl+U)
+ *
+ * @param {Boolean} isEnableHotKey 핫키가능여부
+ */
+ setEnableHotKey: function (isEnableHotKey) {
+ var me = this;
+ var renderer = me._RENDERER;
+ if (isEnableHotKey === true) {
+ // delete, ctrl+A
+ var _container;
+ if (me._CONFIG.FOCUS_CANVAS_ONSELECT) {
+ _container = $(renderer.getContainer());
+ } else {
+ _container = $(document);
+ }
+ _container.bind("keydown", function (event) {
+ // 라벨수정중엔 keydown 이벤트무시
+ if (!/^textarea$/i.test(event.target.tagName) && !/^input$/i.test(event.target.tagName)) {
+ // Undo Redo
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_Z && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_Z) {
+ if (event.shiftKey) {
+ event.preventDefault();
+ renderer.redo();
+ } else {
+ event.preventDefault();
+ renderer.undo();
+ }
+ }
+
+ // Delete : 삭제
+ //if (me._CONFIG.ENABLE_HOTKEY_DELETE && (event.keyCode === KeyEvent.DOM_VK_DELETE || event.keyCode === KeyEvent.DOM_VK_BACK_SPACE)) {
+ // event.preventDefault();
+ // me.deleteSelectedShape();
+ //}
+
+ // Ctrl+A : 전체선택
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_A && me._CONFIG.SELECTABLE && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_A) {
+ event.preventDefault();
+ me.selectAll();
+ }
+
+ // Ctrl+C : 복사
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_C && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_C) {
+ event.preventDefault();
+ me.copySelectedShape();
+ }
+
+ // Ctrl+X : 잘라내기
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_C && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_X) {
+ event.preventDefault();
+ me.cutSelectedShape();
+ }
+
+ // Ctrl+V: 붙여넣기
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_V && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_V) {
+ event.preventDefault();
+ me.pasteSelectedShape();
+ }
+
+ // Ctrl+D: 복제하기
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_D && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_D) {
+ event.preventDefault();
+ me.duplicateSelectedShape();
+ }
+
+ // Ctrl+G : 그룹
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_G && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_G) {
+ event.preventDefault();
+ me.groupSelectedShape();
+ }
+
+ // Ctrl+U : 언그룹
+ if (me._CONFIG.ENABLE_HOTKEY_CTRL_U && (event.ctrlKey || event.metaKey) && event.keyCode === KeyEvent.DOM_VK_U) {
+ event.preventDefault();
+ me.ungroupSelectedShape();
+ }
+
+ if (me._CONFIG.ENABLE_HOTKEY_SHIFT_ARROW) {
+ // Shift+화살표 : 이동
+ if (event.shiftKey && event.keyCode === KeyEvent.DOM_VK_LEFT) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), -1 * (me._CONFIG.DRAG_GRIDABLE ? (me._CONFIG.MOVE_SNAP_SIZE / 2) : 1), 0);
+ renderer.addHistory();
+ }
+ if (event.shiftKey && event.keyCode === KeyEvent.DOM_VK_RIGHT) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), (me._CONFIG.DRAG_GRIDABLE ? (me._CONFIG.MOVE_SNAP_SIZE / 2) : 1), 0);
+ renderer.addHistory();
+ }
+ if (event.shiftKey && event.keyCode === KeyEvent.DOM_VK_UP) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), 0, -1 * (me._CONFIG.DRAG_GRIDABLE ? (me._CONFIG.MOVE_SNAP_SIZE / 2) : 1));
+ renderer.addHistory();
+ }
+ if (event.shiftKey && event.keyCode === KeyEvent.DOM_VK_DOWN) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), 0, (me._CONFIG.DRAG_GRIDABLE ? (me._CONFIG.MOVE_SNAP_SIZE / 2) : 1));
+ renderer.addHistory();
+ }
+ }
+ if (me._CONFIG.ENABLE_HOTKEY_ARROW) {
+ // 화살표 : 이동
+ if (!event.shiftKey && event.keyCode === KeyEvent.DOM_VK_LEFT) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), -1 * (me._CONFIG.MOVE_SNAP_SIZE / 2), 0);
+ me.selectShapes(me._getSelectedElement());
+ renderer.addHistory();
+ }
+ if (!event.shiftKey && event.keyCode === KeyEvent.DOM_VK_RIGHT) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), (me._CONFIG.MOVE_SNAP_SIZE / 2), 0);
+ me.selectShapes(me._getSelectedElement());
+ renderer.addHistory();
+ }
+ if (!event.shiftKey && event.keyCode === KeyEvent.DOM_VK_UP) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), 0, -1 * (me._CONFIG.MOVE_SNAP_SIZE / 2));
+ me.selectShapes(me._getSelectedElement());
+ renderer.addHistory();
+ }
+ if (!event.shiftKey && event.keyCode === KeyEvent.DOM_VK_DOWN) {
+ event.preventDefault();
+ me._moveElements(me._getMoveTargets(), 0, (me._CONFIG.MOVE_SNAP_SIZE / 2));
+ me.selectShapes(me._getSelectedElement());
+ renderer.addHistory();
+ }
+ }
+ }
+ });
+ } else {
+ $(renderer.getContainer()).unbind("keydown");
+ }
+ },
+
+ /**
+ * 캔버스에 마우스 우클릭 메뉴를 가능하게 한다.
+ */
+ enableRootContextMenu: function () {
+ var me = this;
+ var renderer = me._RENDERER;
+
+ $.contextMenu({
+ position: function (opt, x, y) {
+ opt.$menu.css({top: y + 10, left: x + 10});
+ },
+ selector: '#' + me._RENDERER.getRootElement().id,
+ build: function ($trigger, e) {
+ var root = me._RENDERER.getRootGroup(), copiedElement = $(root).data("copied");
+ if (me._CONFIG.FOCUS_CANVAS_ONSELECT) {
+ $(me._RENDERER.getContainer()).focus();
+ }
+ return {
+ items: {
+ 'selectAll': {
+ name: '모두 선택', callback: function () {
+ me.selectAll();
+ }
+ },
+ 'sep1': '---------',
+ 'paste': {
+ name: '붙여넣기', callback: function () {
+ me.pasteSelectedShape(e);
+ },
+ disabled: (copiedElement ? false : true)
+ },
+ 'sep2': '---------',
+ 'view': {
+ name: '스케일',
+ items: {
+ 'view_actualSize': {
+ name: '실제 사이즈', callback: function () {
+ me._RENDERER.setScale(1);
+ renderer.addHistory();
+ }
+ },
+ 'sep2_1': '---------',
+ 'view_fitWindow': {
+ name: '윈도우에 맞추기', callback: function () {
+ me.fitWindow();
+ }
+ },
+ 'sep2_2': '---------',
+ 'view_25': {
+ name: '25%', callback: function () {
+ me._RENDERER.setScale(0.25);
+ renderer.addHistory();
+ }
+ },
+ 'view_50': {
+ name: '50%', callback: function () {
+ me._RENDERER.setScale(0.5);
+ renderer.addHistory();
+ }
+ },
+ 'view_75': {
+ name: '75%', callback: function () {
+ me._RENDERER.setScale(0.75);
+ renderer.addHistory();
+ }
+ },
+ 'view_100': {
+ name: '100%', callback: function () {
+ me._RENDERER.setScale(1);
+ renderer.addHistory();
+ }
+ },
+ 'view_150': {
+ name: '150%', callback: function () {
+ me._RENDERER.setScale(1.5);
+ renderer.addHistory();
+ }
+ },
+ 'view_200': {
+ name: '200%', callback: function () {
+ me._RENDERER.setScale(2);
+ renderer.addHistory();
+ }
+ },
+ 'view_300': {
+ name: '300%', callback: function () {
+ me._RENDERER.setScale(3);
+ renderer.addHistory();
+ }
+ },
+ 'view_400': {
+ name: '400%', callback: function () {
+ me._RENDERER.setScale(4);
+ renderer.addHistory();
+ }
+ },
+ 'sep2_3': '---------',
+ 'view_zoomin': {
+ name: '확대', callback: function () {
+ me.zoomIn();
+ }
+ },
+ 'view_zoomout': {
+ name: '축소', callback: function () {
+ me.zoomOut();
+ }
+ }
+ }
+ }
+ }
+ };
+ }
+ });
+ },
+
+ makeRotate: function () {
+ var me = this;
+
+ return {
+ 'rotate': {
+ name: '회전',
+ items: {
+ 'rotate_select': {
+ name: '선택',
+ type: 'select',
+ options: {
+ '0': '0',
+ '45': '45',
+ '90': '90',
+ '135': '135',
+ '180': '180',
+ '-45': '-45',
+ '-90': '-90',
+ '-135': '-135',
+ '-180': '-180'
+ },
+ selected: '0',
+ events: {
+ change: function (e) {
+ me.rotateSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'sep8_8_1': '---------',
+ 'rotate_custom': {
+ name: '직접입력',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.rotateSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeFillColor: function () {
+ var me = this;
+
+ return {
+ 'fillColor': {
+ name: '색상',
+ items: {
+ 'fillColor_select': {
+ name: '선택',
+ type: 'select',
+ options: {
+ '': '',
+ 'white': '하양',
+ 'gray': '회색',
+ 'blue': '파랑',
+ 'red': '빨강',
+ 'yellow': '노랑',
+ 'orange': '오렌지',
+ 'green': '녹색',
+ 'black': '검정'
+ },
+ selected: '',
+ events: {
+ change: function (e) {
+ if (e.target.value !== '') {
+ me.setFillColorSelectedShape(e.target.value);
+ }
+ }
+ }
+ },
+ 'sep5_1_1': '---------',
+ 'fillColor_custom': {
+ name: '직접입력',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.setFillColorSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeFillOpacity: function () {
+ var me = this;
+
+ return {
+ 'fillOpacity': {
+ name: '투명도',
+ items: {
+ 'fillOpacity_select': {
+ name: '선택',
+ type: 'select',
+ options: {
+ '': '',
+ '0.0': '0%',
+ '0.1': '10%',
+ '0.2': '20%',
+ '0.3': '30%',
+ '0.4': '40%',
+ '0.5': '50%',
+ '0.6': '60%',
+ '0.7': '70%',
+ '0.8': '80%',
+ '0.9': '90%',
+ '1.0': '100%'
+ },
+ selected: '',
+ events: {
+ change: function (e) {
+ if (e.target.value !== '') {
+ me.setFillOpacitySelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeLineStyle: function () {
+ var me = this;
+
+ return {
+ 'lineStyle': {
+ name: '선 스타일',
+ items: {
+ 'lineStyle_1': {
+ name: '──────',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_2': {
+ name: '---------',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '-',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_3': {
+ name: '············',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '.',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_4': {
+ name: '-·-·-·-·-·',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '-.',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_5': {
+ name: '-··-··-··-',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '-..',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_6': {
+ name: '· · · · · ·',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '. ',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_7': {
+ name: '- - - - -',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '- ',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_8': {
+ name: '─ ─ ─ ─',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '--',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_9': {
+ name: '- ·- ·- ·-',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '- .',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_10': {
+ name: '--·--·--·-',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '--.',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'lineStyle_11': {
+ name: '--··--··--',
+ type: 'radio',
+ radio: 'lineStyle',
+ value: '--..',
+ events: {
+ change: function (e) {
+ me.setLineStyleSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeLineColor: function () {
+ var me = this;
+
+ return {
+ 'lineColor': {
+ name: '선 색상',
+ items: {
+ 'lineColor_select': {
+ name: '석택',
+ type: 'select',
+ options: {
+ '': '',
+ 'white': '하양',
+ 'gray': '회색',
+ 'blue': '파랑',
+ 'red': '빨강',
+ 'yellow': '노랑',
+ 'orange': '오렌지',
+ 'green': '녹색',
+ 'black': '검정'
+ },
+ selected: '',
+ events: {
+ change: function (e) {
+ if (e.target.value !== '') {
+ me.setLineColorSelectedShape(e.target.value);
+ }
+ }
+ }
+ },
+ 'sep5_4_1': '---------',
+ 'lineColor_custom': {
+ name: '직접입력',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.setLineColorSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeLineWidth: function () {
+ var me = this;
+
+ return {
+ 'lineWidth': {
+ name: '선 두께',
+ items: {
+ 'lineWidth_select': {
+ name: '선택',
+ type: 'select',
+ options: {
+ 0: '',
+ 1: '1px',
+ 2: '2px',
+ 3: '3px',
+ 4: '4px',
+ 5: '5px',
+ 6: '6px',
+ 8: '8px',
+ 10: '10px',
+ 12: '12px',
+ 16: '16px',
+ 24: '24px'
+ },
+ selected: 0,
+ events: {
+ change: function (e) {
+ if (e.target.value !== 0) {
+ me.setLineWidthSelectedShape(e.target.value);
+ }
+ }
+ }
+ },
+ 'sep5_5_1': '---------',
+ 'lineWidth_custom': {
+ name: '직접입력',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.setLineWidthSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeFont: function () {
+ var me = this;
+
+ return {
+ 'text': {
+ name: '글꼴',
+ items: {
+ 'fontFamily': {
+ name: '폰트',
+ items: {
+ 'fontFamily_1': {
+ name: 'Arial',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Arial',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_2': {
+ name: 'Comic Sans MS',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Comic Sans MS',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_3': {
+ name: 'Courier New',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Courier New',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_4': {
+ name: 'Garamond',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Garamond',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_5': {
+ name: 'Georgia',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Georgia',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_6': {
+ name: 'Lucida Console',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Lucida Console',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_7': {
+ name: 'MS Gothic',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'MS Gothic',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_8': {
+ name: 'MS Sans Serif',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'MS Sans Serif',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_9': {
+ name: 'Verdana',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Verdana',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'fontFamily_10': {
+ name: 'Times New Roman',
+ type: 'radio',
+ radio: 'fontFamily',
+ value: 'Times New Roman',
+ events: {
+ change: function (e) {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ },
+ 'sep6_1_1': '---------',
+ 'fontFamily_custom': {
+ name: 'Custom',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.setFontFamilySelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ },
+ 'fontColor': {
+ name: '글 색상',
+ items: {
+ 'fontColor_select': {
+ name: '선택',
+ type: 'select',
+ options: {
+ '': '',
+ 'white': '하양',
+ 'gray': '회색',
+ 'blue': '파랑',
+ 'red': '빨강',
+ 'yellow': '노랑',
+ 'orange': '오렌지',
+ 'green': '녹색',
+ 'black': '검정'
+ },
+ selected: '',
+ events: {
+ change: function (e) {
+ if (e.target.value !== '') {
+ me.setFontColorSelectedShape(e.target.value);
+ }
+ }
+ }
+ },
+ 'sep6_1_2': '---------',
+ 'fontColor_custom': {
+ name: '직접입력',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.setFontColorSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ },
+ 'fontSize': {
+ name: '글 크기',
+ items: {
+ 'fontSize_select': {
+ name: '선택',
+ type: 'select',
+ options: {
+ '': '',
+ '6': '6',
+ '8': '8',
+ '9': '9',
+ '10': '10',
+ '11': '11',
+ '12': '12',
+ '14': '14',
+ '18': '18',
+ '24': '24',
+ '36': '36',
+ '48': '48',
+ '72': '72'
+ },
+ selected: '',
+ events: {
+ change: function (e) {
+ if (e.target.value !== '') {
+ me.setFontSizeSelectedShape(e.target.value);
+ }
+ }
+ }
+ },
+ 'sep6_1_3': '---------',
+ 'fontSize_custom': {
+ name: '직접입력',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.setFontSizeSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ },
+ 'sep6_1': '---------',
+ 'fontWeight_bold': {
+ name: '굵게',
+ type: 'checkbox',
+ events: {
+ change: function (e) {
+ if (e.target.checked) {
+ me.setFontWeightSelectedShape('bold');
+ } else {
+ me.setFontWeightSelectedShape('normal');
+ }
+ }
+ }
+ },
+ 'fontWeight_italic': {
+ name: '이탤릭',
+ type: 'checkbox',
+ events: {
+ change: function (e) {
+ if (e.target.checked) {
+ me.setFontStyleSelectedShape('italic');
+ } else {
+ me.setFontStyleSelectedShape('normal');
+ }
+ }
+ }
+ },
+ 'sep6_2': '---------',
+ 'position': {
+ name: '글 위치',
+ items: {
+ 'position_left': {
+ name: '왼쪽',
+ type: 'radio',
+ radio: 'position',
+ value: 'left',
+ events: {
+ change: function (e) {
+ me.setLabelPositionSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'position_center': {
+ name: '가운데',
+ type: 'radio',
+ radio: 'position',
+ value: 'center',
+ events: {
+ change: function (e) {
+ me.setLabelPositionSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'position_right': {
+ name: '오른쪽',
+ type: 'radio',
+ radio: 'position',
+ value: 'right',
+ events: {
+ change: function (e) {
+ me.setLabelPositionSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'position_top': {
+ name: '위',
+ type: 'radio',
+ radio: 'position',
+ value: 'top',
+ events: {
+ change: function (e) {
+ me.setLabelPositionSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'position_bottom': {
+ name: '아래',
+ type: 'radio',
+ radio: 'position',
+ value: 'bottom',
+ events: {
+ change: function (e) {
+ me.setLabelPositionSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ },
+ 'vertical': {
+ name: '수직 정렬',
+ items: {
+ 'vertical_top': {
+ name: '위',
+ type: 'radio',
+ radio: 'vertical',
+ value: 'top',
+ events: {
+ change: function (e) {
+ me.setLabelVerticalSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'vertical_middle': {
+ name: '가운데',
+ type: 'radio',
+ radio: 'vertical',
+ value: 'middle',
+ events: {
+ change: function (e) {
+ me.setLabelVerticalSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'vertical_bottom': {
+ name: '아래',
+ type: 'radio',
+ radio: 'vertical',
+ value: 'bottom',
+ events: {
+ change: function (e) {
+ me.setLabelVerticalSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ },
+ 'horizontal': {
+ name: '수평 정렬',
+ items: {
+ 'vertical_start': {
+ name: '왼쪽',
+ type: 'radio',
+ radio: 'horizontal',
+ value: 'start',
+ events: {
+ change: function (e) {
+ me.setLabelHorizontalSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'horizontal_middle': {
+ name: '가운데',
+ type: 'radio',
+ radio: 'horizontal',
+ value: 'middle',
+ events: {
+ change: function (e) {
+ me.setLabelHorizontalSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'horizontal_end': {
+ name: '오른쪽',
+ type: 'radio',
+ radio: 'horizontal',
+ value: 'end',
+ events: {
+ change: function (e) {
+ me.setLabelHorizontalSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ },
+ 'sep6_5': '---------',
+ 'textRotate': {
+ name: '글 회전각',
+ items: {
+ 'textRotate_select': {
+ name: '선택',
+ type: 'select',
+ options: {
+ '0': '0',
+ '45': '45',
+ '90': '90',
+ '135': '135',
+ '180': '180',
+ '-45': '-45',
+ '-90': '-90',
+ '-135': '-135',
+ '-180': '-180'
+ },
+ selected: '0',
+ events: {
+ change: function (e) {
+ me.setLabelAngleSelectedShape(e.target.value);
+ }
+ }
+ },
+ 'sep6_6_1': '---------',
+ 'textRotate_custom': {
+ name: '직접입력',
+ type: 'text',
+ events: {
+ keyup: function (e) {
+ if (e.target.value !== '') {
+ me.setLabelAngleSelectedShape(e.target.value);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeBring: function () {
+ var me = this;
+
+ return {
+ 'bringToFront': {
+ name: '맨 앞으로 가져오기',
+ items: {
+ 'bringToFront': {
+ name: '맨 앞으로 가져오기', callback: function () {
+ me.bringToFront();
+ }
+ },
+ 'bringForward': {
+ name: '앞으로 가져오기', callback: function () {
+ me.bringForward();
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeSend: function () {
+ var me = this;
+
+ return {
+ 'sendToBack': {
+ name: '맨 뒤로 보내기',
+ items: {
+ 'sendToBack': {
+ name: '맨 뒤로 보내기', callback: function () {
+ me.sendToBack();
+ }
+ },
+ 'sendBackward': {
+ name: '뒤로 보내기', callback: function () {
+ me.sendBackward();
+ }
+ }
+ }
+ }
+ }
+ },
+
+
+ makeDelete: function () {
+ var me = this;
+
+ return {
+ 'delete': {
+ name: '삭제', callback: function () {
+ me.deleteSelectedShape();
+ }
+ }
+ }
+ },
+
+ makeCopy: function () {
+ var me = this;
+
+ return {
+ 'copy': {
+ name: '복사', callback: function () {
+ me.copySelectedShape();
+ }
+ }
+ }
+ },
+
+ makeAlign: function () {
+ var me = this;
+
+ return {
+ 'align': {
+ name: '도형 정렬',
+ items: {
+ 'Top': {
+ name: '위로정렬',
+ type: 'radio',
+ radio: 'align',
+ value: 'Top',
+ events: {
+ change: function (e) {
+ me._RENDERER.alignTop();
+ me._RENDERER.addHistory();
+ }
+ }
+ },
+ 'Left': {
+ name: '왼쪽정렬',
+ type: 'radio',
+ radio: 'align',
+ value: 'Left',
+ events: {
+ change: function (e) {
+ me._RENDERER.alignLeft();
+ me._RENDERER.addHistory();
+ }
+ }
+ },
+ 'Right': {
+ name: '오른쪽정렬',
+ type: 'radio',
+ radio: 'align',
+ value: 'Right',
+ events: {
+ change: function (e) {
+ me._RENDERER.alignRight();
+ me._RENDERER.addHistory();
+ }
+ }
+ },
+ 'Bottom': {
+ name: '아래로정렬',
+ type: 'radio',
+ radio: 'align',
+ value: "Bottom",
+ events: {
+ change: function (e) {
+ me._RENDERER.alignBottom();
+ me._RENDERER.addHistory();
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+
+ makeFormat: function () {
+ return {
+ format: {
+ name: '형식',
+ items: this.mergeContextMenu(
+ this.makeFillColor(),
+ this.makeFillOpacity(),
+ this.makeRotate(),
+ this.makeLineStyle(),
+ this.makeLineColor(),
+ this.makeLineWidth()
+ )
+ }
+ }
+ },
+
+ makeMultiContextMenu: function () {
+ return this.mergeContextMenu(
+ this.makeDelete(),
+ this.makeCopy(),
+ this.makeAlign()
+ );
+ },
+
+ mergeContextMenu: function () {
+ var menu = {};
+ for (var i = 0, leni = arguments.length; i < leni; i++) {
+ for (var key in arguments[i]) {
+ menu[key] = arguments[i][key];
+ }
+ }
+
+ return menu;
+ },
+
+ makeDefaultContextMenu: function (key) {
+ if (key) {
+ if (key == 'delete') {
+ return this.makeDelete();
+ }
+ else if (key == 'copy') {
+ return this.makeCopy();
+ }
+ else if (key == 'format') {
+ return this.makeFormat();
+ }
+ else if (key == 'text') {
+ return this.makeFont();
+ }
+ else if (key == 'bringToFront') {
+ return this.makeBring();
+ }
+ else if (key == 'sendToBack') {
+ return this.makeSend();
+ }
+ } else {
+ return this.mergeContextMenu(
+ this.makeDelete(),
+ this.makeCopy(),
+ this.makeFormat(),
+ this.makeFont(),
+ this.makeBring(),
+ this.makeSend()
+ );
+ }
+ },
+
+ /**
+ * Shape 에 마우스 우클릭 메뉴를 가능하게 한다.
+ */
+ enableShapeContextMenu: function () {
+ var me = this;
+ $.contextMenu({
+ position: function (opt, x, y) {
+ opt.$menu.css({top: y + 10, left: x + 10});
+ opt.canvas = me._CANVAS;
+ },
+ selector: '#' + me._RENDERER.getRootElement().id + ' [_type=SHAPE]',
+ build: function ($trigger, event) {
+ //1. shape 에 contextMenu 를 정의시 실행된다.
+
+ //2. canvas.setContextMenu 실행시 shape 의 콘텍스트에 오버라이드 된다.
+
+ //$trigger 실행시 shape 에 커스텀 컨텍스트 메뉴가 있을 경우, 그에 맞는 컨텍스트 메뉴를 빌드한다.
+
+ //default 컨텍스트 메뉴를 설정한다.
+
+ if (me._CONFIG.FOCUS_CANVAS_ONSELECT) {
+ $(me._RENDERER.getContainer()).focus();
+ }
+ var items = {};
+
+ if (me._getSelectedElement().length == 1) {
+ var defaultList = ['delete', 'copy', 'format', 'text', 'bringToFront', 'sendToBack'];
+ var eventShape = $trigger.get(0).shape;
+ //사용자가 지정한 customContextMenu 가 있다면 기본 createContextMenu 보다 우선한다.
+ var customMenu = eventShape.customContextMenu;
+ if (!customMenu) {
+ if (eventShape.createContextMenu) {
+ var eventOffset = me._getOffset(event);
+ customMenu = eventShape.createContextMenu();
+ }
+ }
+
+ //커스텀 콘텍스트 메뉴가 있을경우 처리
+ if (customMenu) {
+ if (customMenu == null || $.isEmptyObject(customMenu)) {
+ return false;
+ }
+ for (var key in customMenu) {
+ if (!customMenu[key]) {
+ continue;
+ }
+ //기본 메뉴인경우
+ if (defaultList.indexOf(key) != -1) {
+ items[key] = me.makeDefaultContextMenu()[key];
+ }
+ //기본 메뉴가 아닌경우
+ else {
+ items[key] = customMenu[key];
+ }
+ }
+ }
+ //커스텀 콘텍스트 메뉴가 없을경우 처리
+ else {
+ items = me.makeDefaultContextMenu();
+ }
+
+ } else {
+ items = me.makeMultiContextMenu();
+ }
+ return {
+ items: items
+ };
+ }
+ });
+ },
+
+ /**
+ * 주어진 Shape Element 를 선택된 상태로 되게 한다.
+ *
+ * @param {Element} element Shape 엘리먼트
+ */
+ selectShape: function (element, event, param) {
+ var me = this, guide, root = me._RENDERER.getRootGroup();
+
+ //단일 선택 다중 선택 여부 판단
+ if (event) {
+ if (param) {
+ if (!param.shiftKey && !param.ctrlKey) {
+ me.deselectAll();
+ me._RENDERER.removeAllGuide();
+ } else {
+ //no operation
+ }
+ } else {
+ if (!event.shiftKey && !event.ctrlKey) {
+ me.deselectAll();
+ me._RENDERER.removeAllGuide();
+ } else {
+ //no operation
+ }
+ }
+ } else {
+ //기본 단일 선택
+ me.deselectAll();
+ me._RENDERER.removeAllGuide();
+ }
+
+ if (me._isSelectable(element.shape)) {
+ //BUG : remove guide를 반드시 해주어야만 새로운 가이드가 null로 나오지 않는다.
+ me._RENDERER.removeGuide(element);
+ guide = me._RENDERER.drawGuide(element);
+ // enable event
+ me.setResizable(element, guide, me._isResizable(element.shape));
+ me.setConnectable(element, guide, me._isConnectable(element.shape));
+
+ //선택상태 설정
+ $(element).attr("_selected", "true");
+
+ //Edge 일 경우 상단으로
+ if (element.shape && element.shape instanceof OG.EdgeShape) {
+ me._RENDERER._CANVAS.toFront(element);
+ }
+
+ //선택요소배열 추가
+ me._addSelectedElement(element);
+ }
+ },
+
+ /**
+ * 주어진 다수의 Shape Element 를 선택된 상태로 되게 한다.
+ *
+ * @param {Element} element Shape 엘리먼트
+ */
+ selectShapes: function (elementArray) {
+ var me = this, guide, _element;
+
+ if (!elementArray) {
+ return;
+ } else {
+ //route selectShape
+ if (elementArray.length == 1) {
+ me.selectShape(elementArray[0]);
+ return;
+ }
+ }
+ me.deselectAll();
+ me._RENDERER.removeAllGuide();
+
+ $.each(elementArray, function (index, element) {
+ $(element).attr("_selected", "true");
+ guide = me._RENDERER.drawGuide(element);
+ if (guide) {
+ // enable event
+ me.setResizable(element, guide, me._isResizable(element.shape));
+ me.setConnectable(element, guide, me._isConnectable(element.shape));
+ }
+ me._addSelectedElement(element);
+ })
+ },
+
+ //TODO : 선택된 모든 Shape를 선택 해제
+ deselectShape: function (element) {
+ var me = this;
+ if (OG.Util.isElement(element) && element.id) {
+ $(element).attr("_selected", "");
+ me._RENDERER.removeGuide(element);
+
+ //선택요소배열 삭제
+ me._delSelectedElement(element);
+ }
+ },
+
+
+ deselectAll: function () {
+ var me = this;
+
+ var dragBox = $(this).data("dragBox");
+ if (me._CONFIG.FOCUS_CANVAS_ONSELECT) {
+ $(me._RENDERER.getContainer()).focus();
+ }
+ if (!dragBox || (dragBox && dragBox.width < 1 && dragBox.height < 1)) {
+ $(me._RENDERER.getRootElement())
+ .find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(
+ function (index, item) {
+ if (OG.Util.isElement(item) && item.id) {
+ $(item).attr("_selected", "");
+ me._RENDERER.removeGuide(item);
+ }
+ }
+ );
+
+ //선택요소배열 모두삭제 (초기화)
+ me._removeAllSelectedElement();
+ }
+ },
+
+ /**
+ * 메뉴 : 맨 앞으로 가져오기
+ */
+ bringToFront: function () {
+ var me = this, root = $(me._RENDERER.getRootGroup());
+ $(me._RENDERER.getRootElement()).find("[_selected=true]").each(function (index, item) {
+ var moveTarget = item;
+ if (me._RENDERER.isLane(item)) {
+ moveTarget = me._RENDERER.getRootLane(item);
+ }
+ root[0].appendChild(moveTarget);
+ me.selectShape(item);
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 맨 뒤로 보내기
+ */
+ sendToBack: function () {
+ var me = this, root = $(me._RENDERER.getRootGroup());
+ $(me._RENDERER.getRootElement()).find("[_selected=true]").each(function (index, item) {
+ var moveTarget = item;
+ if (me._RENDERER.isLane(item)) {
+ moveTarget = me._RENDERER.getRootLane(item);
+ }
+ root[0].insertBefore(moveTarget, OG.Util.isIE() ? root[0].childNodes[0] : root[0].children[0]);
+ me.selectShape(item);
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 앞으로 가져오기
+ */
+ bringForward: function () {
+ var me = this, root = $(me._RENDERER.getRootGroup());
+ $(me._RENDERER.getRootElement()).find("[_selected=true]").each(function (index, item) {
+ var moveTarget = item;
+ if (me._RENDERER.isLane(item)) {
+ moveTarget = me._RENDERER.getRootLane(item);
+ }
+ var length = $(moveTarget).prevAll().length;
+ root[0].insertBefore(moveTarget, OG.Util.isIE() ? root[0].childNodes[length + 1] : root[0].children[length + 1]);
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 뒤로 보내기
+ */
+ sendBackward: function () {
+ var me = this, root = $(me._RENDERER.getRootGroup());
+ $(me._RENDERER.getRootElement()).find("[_selected=true]").each(function (index, item) {
+ var moveTarget = item;
+ if (me._RENDERER.isLane(item)) {
+ moveTarget = me._RENDERER.getRootLane(item);
+ }
+ var length = $(moveTarget).prevAll().length;
+ root[0].insertBefore(moveTarget, OG.Util.isIE() ? root[0].childNodes[length - 2] : root[0].children[length - 2]);
+ me.selectShape(item);
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 삭제한다.
+ */
+ deleteSelectedShape: function (event) {
+
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_shape=EDGE][_selected=true]").each(function (index, item) {
+ if (item.id) {
+ me._RENDERER.removeShape(item);
+ }
+ });
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (index, item) {
+ if (item.id) {
+ if (me._RENDERER.isLane(item)) {
+ me._RENDERER.removeLaneShape(item);
+ } else {
+ me._RENDERER.removeShape(item);
+ }
+
+ }
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : Shape를 선택한 모양으로 변경한다.
+ */
+ changeShape: function (value, label) {
+ var me = this, geometry, position, width, height, shape;
+
+ $(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 {
+ shape.label = undefined;
+ }
+
+ if (shape instanceof OG.EdgeShape) {
+ geometry = shape.createShape();
+ geometry.vertices = item.shape.geom.vertices;
+ shape.geom = geometry;
+ } else {
+ position = [item.shape.geom.boundary.getCentroid().x, item.shape.geom.boundary.getCentroid().y];
+ width = item.shape.geom.boundary.getWidth();
+ height = item.shape.geom.boundary.getHeight();
+ geometry = shape.createShape();
+
+ // 좌상단으로 이동 및 크기 조정
+ geometry.moveCentroid(position);
+ geometry.resizeBox(width, height);
+ shape.geom = geometry;
+ }
+
+ //데이터 복제
+ shape.setData(JSON.parse(JSON.stringify(item.shape.getData())));
+
+ //shape 등록
+ item.shape = shape;
+
+ me._RENDERER.redrawShape(item);
+
+ var type;
+ if (value == 'OG.shape.bpmn.A_Task') {
+ type = "Abstract";
+ } else if (value == 'OG.shape.bpmn.A_HumanTask') {
+ type = "Human";
+ } else if (value == 'OG.shape.bpmn.A_WebServiceTask') {
+ type = "Service";
+ } else if (value == 'OG.shape.bpmn.A_ManualTask') {
+ type = "Manual";
+ }
+
+ $(item).trigger("changeTo" + type);
+ });
+ me._RENDERER.addHistory();
+ },
+
+
+ /**
+ * 메뉴 : 속성 창 이벤트
+ */
+ showProperty: function (event) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_selected=true]").each(function (index, item) {
+ $(item).trigger('property');
+ });
+ },
+
+ /**
+ * 메뉴 : 모든 Shape 들을 선택한다.
+ */
+ selectAll: function () {
+ var me = this;
+ var elements = [];
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "]").each(function (index, element) {
+ elements.push(element);
+ });
+ me.selectShapes(elements);
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 복사한다.
+ */
+ copySelectedShape: function () {
+ var me = this, root = me._RENDERER.getRootGroup(), selectedElement = [];
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (index, element) {
+ if (element.shape.COPYABLE) {
+ selectedElement.push(element);
+ }
+ });
+ $(root).data("copied", selectedElement);
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 잘라내기한다.
+ */
+ cutSelectedShape: function () {
+ var me = this;
+ me.copySelectedShape();
+ me.deleteSelectedShape();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 붙여넣기 한다.
+ */
+ pasteSelectedShape: function (e) {
+ var me = this;
+ var renderer = me._RENDERER;
+ var root = renderer.getRootGroup(),
+ copiedElement = $(root).data("copied"),
+ selectedElement = [], dx, dy, avgX = 0, avgY = 0,
+ copiedMap = [];
+ if (copiedElement) {
+ $(renderer.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (index, item) {
+ if (item.id) {
+ renderer.removeGuide(item);
+ }
+ });
+
+ $.each(copiedElement, function (idx, item) {
+ avgX += item.shape.geom.getBoundary().getCentroid().x;
+ avgY += item.shape.geom.getBoundary().getCentroid().y;
+ });
+
+ avgX = avgX / (copiedElement.length);
+ avgY = avgY / (copiedElement.length);
+
+ $.each(copiedElement, function (idx, item) {
+ // copy
+ var boundary = item.shape.geom.getBoundary(), newShape, newElement, newGuide;
+ newShape = item.shape.clone();
+
+ if ($(item).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE) {
+ if (item.shape.geom instanceof OG.geometry.BezierCurve) {
+ newShape.geom = new OG.BezierCurve(item.shape.geom.getControlPoints());
+ } else {
+ newShape.geom = new OG.PolyLine(item.shape.geom.getVertices());
+ }
+ newShape.geom.style = item.shape.geom.style;
+ newShape.geom.move(me._CONFIG.COPY_PASTE_PADDING, me._CONFIG.COPY_PASTE_PADDING);
+ newElement = renderer.drawShape(
+ null, newShape,
+ null, item.shapeStyle
+ );
+
+ } else {
+ if (e) {
+ dx = e.offsetX - avgX;
+ dy = e.offsetY - avgY;
+ newElement = renderer.drawShape(
+ [boundary.getCentroid().x + dx, boundary.getCentroid().y + dy],
+ newShape, [boundary.getWidth(), boundary.getHeight()], item.shapeStyle
+ );
+ } else {
+ newElement = renderer.drawShape(
+ [boundary.getCentroid().x + me._CONFIG.COPY_PASTE_PADDING, boundary.getCentroid().y + me._CONFIG.COPY_PASTE_PADDING],
+ newShape, [boundary.getWidth(), boundary.getHeight()], item.shapeStyle
+ );
+ }
+ }
+
+ // custom data
+ newElement.data = item.data;
+
+ // enable event
+ newGuide = renderer.drawGuide(newElement);
+ me.setClickSelectable(newElement, me._isSelectable(newElement.shape));
+ me.setMovable(newElement, me._isMovable(newElement.shape));
+ me.setConnectGuide(newElement, me._isConnectable(newElement.shape));
+ me.setResizable(newElement, newGuide, me._isResizable(newElement.shape));
+ me.setConnectable(newElement, newGuide, me._isConnectable(newElement.shape));
+
+ if (me._isLabelEditable(newElement.shape)) {
+ me.enableEditLabel(newElement);
+ }
+
+ // copy children
+ me._copyChildren(item, newElement);
+
+ selectedElement.push(newElement);
+ copiedMap.push({
+ copied: item,
+ pasted: newElement
+ })
+ });
+
+ var getPastedElementByCopied = function (copied) {
+ var pasted;
+ for (var i = 0, leni = copiedMap.length; i < leni; i++) {
+ if (copiedMap[i]['copied'].id == copied.id) {
+ pasted = copiedMap[i]['pasted'];
+ }
+ }
+ return pasted;
+ };
+
+ $.each(copiedElement, function (idx, item) {
+ var relatedElementsFromEdge, relatedFrom, relatedTo,
+ copiedFrom, copiedTo, copiedEdge, pastedFrom, pastedTo, pastedEdge;
+ //연결선이 복제된 경우, 복제된 대상 중 연결선의 From 과 To 가 모두 있을경우 연결선을 복원한다.
+ if ($(item).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE) {
+ relatedElementsFromEdge = renderer._CANVAS.getRelatedElementsFromEdge(item);
+ relatedFrom = relatedElementsFromEdge.from;
+ relatedTo = relatedElementsFromEdge.to;
+ copiedFrom = undefined, copiedTo = undefined, pastedFrom = undefined, pastedTo = undefined, pastedEdge = undefined;
+ copiedEdge = item;
+
+ for (var i = 0, leni = copiedElement.length; i < leni; i++) {
+ if (relatedFrom) {
+ if (copiedElement[i].id == relatedFrom.id) {
+ copiedFrom = copiedElement[i];
+ }
+ }
+ if (relatedTo) {
+ if (copiedElement[i].id == relatedTo.id) {
+ copiedTo = copiedElement[i];
+ }
+ }
+ }
+ if (copiedFrom && copiedTo) {
+ pastedFrom = getPastedElementByCopied(copiedFrom);
+ pastedTo = getPastedElementByCopied(copiedTo);
+ pastedEdge = getPastedElementByCopied(copiedEdge);
+ var pastedShape = pastedEdge.shape;
+ var pastedId = pastedEdge.id;
+
+ renderer._CANVAS.removeShape(pastedEdge);
+ pastedEdge = renderer._CANVAS.connect(pastedFrom, pastedTo, null, null, null, null, null, pastedId);
+ pastedEdge.shape = pastedShape;
+ renderer.redrawShape(pastedEdge);
+ }
+ }
+ // 일반 도형이 복제된 경우, 복제된 대상 중 연결된 도형이 있을 경우, 그 연결선 또한 복제된 대상 속에 있는지 찾는다.
+ // 만약 연결선이 복제 되지 않은 상태라면, 연결선을 복원한다.
+ // 연결선을 복원 한 후에는,
+ // copiedElement , selectedElement(pasted),copiedMap 에 각각 연결선을 추가하도록 한다.
+ else {
+ var prevEdges = renderer._CANVAS.getPrevEdges(item);
+ var nextEdges = renderer._CANVAS.getNextEdges(item);
+ var relatedEdges = prevEdges.concat(nextEdges);
+ for (var i = 0, leni = relatedEdges.length; i < leni; i++) {
+ relatedElementsFromEdge = renderer._CANVAS.getRelatedElementsFromEdge(relatedEdges[i]);
+ relatedFrom = relatedElementsFromEdge.from;
+ relatedTo = relatedElementsFromEdge.to;
+ copiedFrom = undefined, copiedTo = undefined, copiedEdge = undefined, pastedFrom = undefined, pastedTo = undefined, pastedEdge = undefined;
+
+ for (var c = 0, lenc = copiedElement.length; c < lenc; c++) {
+ if (relatedFrom) {
+ if (copiedElement[c].id == relatedFrom.id) {
+ copiedFrom = copiedElement[c];
+ }
+ }
+ if (relatedTo) {
+ if (copiedElement[c].id == relatedTo.id) {
+ copiedTo = copiedElement[c];
+ }
+ }
+ if (copiedElement[c].id == relatedEdges[i].id) {
+ copiedEdge = copiedElement[c];
+ }
+ }
+ if (copiedFrom && copiedTo && !copiedEdge) {
+ pastedFrom = getPastedElementByCopied(copiedFrom);
+ pastedTo = getPastedElementByCopied(copiedTo);
+ copiedEdge = relatedEdges[i];
+
+ //relatedEdges[i] 를 복사한다.
+ var newShape = relatedEdges[i].shape.clone();
+ if (relatedEdges[i].shape.geom instanceof OG.geometry.BezierCurve) {
+ newShape.geom = new OG.BezierCurve(relatedEdges[i].shape.geom.getControlPoints());
+ } else {
+ newShape.geom = new OG.PolyLine(relatedEdges[i].shape.geom.getVertices());
+ }
+ newShape.geom.style = relatedEdges[i].shape.geom.style;
+ newShape.geom.move(me._CONFIG.COPY_PASTE_PADDING, me._CONFIG.COPY_PASTE_PADDING);
+
+ pastedEdge = renderer._CANVAS.connect(pastedFrom, pastedTo);
+ pastedEdge.shape = newShape;
+ pastedEdge.data = relatedEdges[i].data;
+
+ renderer.redrawShape(pastedEdge);
+ copiedElement.push(copiedEdge);
+ selectedElement.push(pastedEdge);
+ copiedMap.push({
+ copied: copiedEdge.id,
+ pasted: pastedEdge.id
+ });
+ }
+ }
+ }
+ });
+
+ $(root).data("copied", selectedElement);
+ renderer.addHistory();
+ }
+
+ var copiedShapes = [];
+ var pastedShapes = [];
+
+ var setPastedShapes = function (copied, selected) {
+ copiedShapes.push(copied);
+ pastedShapes.push(selected);
+ copied.shape.onPasteShape(copied, selected);
+
+ if (renderer.isGroup(copied)) {
+ var copiedChilds = renderer.getChilds(copied);
+ var selectedChilds = renderer.getChilds(selected);
+ $.each(copiedChilds, function (idx, copiedChild) {
+ setPastedShapes(copiedChild, selectedChilds[idx]);
+ });
+ }
+ };
+ $.each(copiedElement, function (index, copied) {
+ setPastedShapes(copied, selectedElement[index]);
+ });
+
+ $(renderer._CANVAS._CONTAINER).trigger('pasteShape', [copiedShapes, pastedShapes]);
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 복제한다.
+ */
+ duplicateSelectedShape: function () {
+ var me = this;
+ me.copySelectedShape();
+ me.pasteSelectedShape();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 그룹핑한다.
+ */
+ groupSelectedShape: function () {
+ var me = this, guide,
+ groupElement = me._RENDERER.group($(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]"));
+
+ if (groupElement) {
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.removeGuide(item);
+ });
+
+ guide = me._RENDERER.drawGuide(groupElement);
+ if (guide) {
+ // enable event
+ me.setClickSelectable(groupElement, me._isSelectable(groupElement.shape));
+ me.setMovable(groupElement, me._isMovable(groupElement.shape));
+ me.setConnectGuide(groupElement, me._isConnectable(groupElement.shape));
+ me.setResizable(groupElement, guide, me._isResizable(groupElement.shape));
+ me.setConnectable(groupElement, guide, me._isConnectable(groupElement.shape));
+
+ me._RENDERER.toFront(guide.group);
+ }
+ }
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 그룹해제한다.
+ */
+ ungroupSelectedShape: function () {
+ var me = this, guide,
+ ungroupedElements = me._RENDERER.ungroup($(me._RENDERER.getRootElement()).find("[_shape=" + OG.Constants.SHAPE_TYPE.GROUP + "][_selected=true]"));
+ $.each(ungroupedElements, function (idx, item) {
+ guide = me._RENDERER.drawGuide(item);
+ if (guide) {
+ me._RENDERER.toFront(guide.group);
+ }
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들을 회전한다.
+ *
+ * @param {Number} angle 회전각도
+ */
+ rotateSelectedShape: function (angle) {
+ var me = this, guide;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_shape=" + OG.Constants.SHAPE_TYPE.EDGE + "][_selected=true]").each(function (idx, edge) {
+ me._RENDERER.removeGuide(edge);
+ });
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ if (item.shape && item.shape.TYPE !== OG.Constants.SHAPE_TYPE.EDGE &&
+ item.shape.TYPE !== OG.Constants.SHAPE_TYPE.GROUP) {
+ me._RENDERER.rotate(item, angle);
+
+ me._RENDERER.removeGuide(item);
+ guide = me._RENDERER.drawGuide(item);
+ me.setResizable(item, guide, me._isResizable(item.shape));
+ me.setConnectable(item, guide, me._isConnectable(item.shape));
+ me._RENDERER.toFront(guide.group);
+ }
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Line Width 를 설정한다.
+ *
+ * @param {Number} lineWidth
+ */
+ setLineWidthSelectedShape: function (lineWidth) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"stroke-width": lineWidth});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Line Color 를 설정한다.
+ *
+ * @param {String} lineColor
+ */
+ setLineColorSelectedShape: function (lineColor) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"stroke": lineColor});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Line Type 을 설정한다.
+ *
+ * @param {String} lineType ['straight' | 'plain' | 'bezier']
+ */
+ setLoopTypeSelectedShape: function (loopType) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ if (item.shape instanceof OG.shape.bpmn.A_Task) {
+ item.shape.LoopType = loopType;
+ me._RENDERER.redrawShape(item);
+ }
+ if (item.shape instanceof OG.shape.HorizontalPoolShape) {
+ item.shape.LoopType = loopType;
+ me._RENDERER.redrawShape(item);
+ }
+ });
+ me._RENDERER.addHistory();
+ },
+
+ setAddEventSelectedShape: function (value) {
+ var me = this;
+ var newElement, shape, boundary;
+ switch (value) {
+ case "Message":
+ shape = new OG.shape.bpmn.E_Intermediate_Message();
+ break;
+ case "Timer":
+ shape = new OG.shape.bpmn.E_Intermediate_Timer();
+ break;
+ case "Error":
+ shape = new OG.shape.bpmn.E_Intermediate_Error();
+ break;
+ case "Compensate":
+ shape = new OG.shape.bpmn.E_Intermediate_Compensation();
+ break;
+ case "Conditional":
+ shape = new OG.shape.bpmn.E_Intermediate_Rule();
+ break;
+ case "Signal":
+ shape = new OG.shape.bpmn.Signal();
+ break;
+ case "Multiple":
+ shape = new OG.shape.bpmn.E_Intermediate_Multiple();
+ break;
+ case "Parallel Multiple":
+ shape = new OG.shape.bpmn.ParallelMultiple();
+ break;
+ case "Escalation":
+ shape = new OG.shape.bpmn.E_Intermediate_Escalation();
+ break;
+ }
+
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+
+ boundary = item.shape.geom.getBoundary();
+ item.shape.Events.push(value);
+ //아래 위 라인에는 5개씩 양 옆라인에는 3개씩
+ if (item.shape.Events.length < 6) {
+ newElement = me._RENDERER._CANVAS.drawShape([boundary.getLowerLeft().x + (((boundary.getLowerRight().x - boundary.getLowerLeft().x) / 6) * (item.shape.Events.length)), boundary.getLowerCenter().y], shape, [30, 30]);
+ }
+ else if (item.shape.Events.length < 9) {
+ newElement = me._RENDERER._CANVAS.drawShape([boundary.getLowerRight().x, boundary.getLowerRight().y - (((boundary.getLowerRight().y - boundary.getUpperRight().y) / 4) * (item.shape.Events.length - 5))], shape, [30, 30]);
+ }
+ else if (item.shape.Events.length < 14) {
+ newElement = me._RENDERER._CANVAS.drawShape([boundary.getUpperRight().x - (((boundary.getUpperRight().x - boundary.getUpperLeft().x) / 6) * (item.shape.Events.length - 8)), boundary.getUpperCenter().y], shape, [30, 30]);
+ }
+ else if (item.shape.Events.length < 17) {
+ newElement = me._RENDERER._CANVAS.drawShape([boundary.getUpperLeft().x, boundary.getUpperLeft().y - (((boundary.getUpperLeft().y - boundary.getLowerLeft().y) / 4) * (item.shape.Events.length - 13))], shape, [30, 30]);
+ }
+
+ item.appendChild(newElement);
+ });
+
+ me._RENDERER.addHistory();
+ },
+
+ setTaskTypeSelectedShape: function (taskType) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ if (item.shape instanceof OG.shape.bpmn.A_Task) {
+ item.shape.TaskType = taskType;
+
+ //FIXME : refactor
+ if (taskType === "User") {
+ $(item).attr("_shape_id", "OG.shape.bpmn.A_HumanTask");
+ item.shape.SHAPE_ID = "OG.shape.bpmn.A_HumanTask";
+ } else if (taskType === "Service") {
+ $(item).attr("_shape_id", "OG.shape.bpmn.A_ServiceTask");
+ item.shape.SHAPE_ID = "OG.shape.bpmn.A_ServiceTask";
+ } else if (taskType === "Mapper") {
+ $(item).attr("_shape_id", "OG.shape.bpmn.A_MapperTask");
+ item.shape.SHAPE_ID = "OG.shape.bpmn.A_MapperTask";
+ } else {
+ $(item).attr("_shape_id", "OG.shape.bpmn.A_Task");
+ item.shape.SHAPE_ID = "OG.shape.bpmn.A_Task";
+ }
+ me._RENDERER.redrawShape(item);
+ }
+ });
+ me._RENDERER.addHistory();
+ },
+
+ setExceptionType: function (element, exceptionType) {
+ var me = this;
+ element.shape.exceptionType = exceptionType;
+ me._RENDERER.redrawShape(element);
+ me._RENDERER.addHistory();
+ },
+
+ setInclusion: function (element, inclusion) {
+ var me = this;
+ element.shape.inclusion = inclusion;
+ me._RENDERER.redrawShape(element, null, true);
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Fill Opacity 를 설정한다.
+ *
+ * @param {String} opacity
+ */
+ setFillOpacitySelectedShape: function (opacity) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"fill-opacity": opacity});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Line Style 을 설정한다.
+ *
+ * @param {String} lineStyle ['' | '-' | '.' | '-.' | '-..' | '. ' | '- ' | '--' | '- .' | '--.' | '--..']
+ */
+ setLineStyleSelectedShape: function (lineStyle) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"stroke-dasharray": lineStyle});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Edge Shape 들의 시작점 화살표 스타일을 설정한다.
+ *
+ * @param {String} arrowType ['block' | 'open_block' | 'classic' | 'diamond' | 'open_diamond' | 'open' | 'oval' | 'open_oval']
+ */
+ setArrowStartSelectedShape: function (arrowType) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"arrow-start": arrowType + '-wide-long'});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Edge Shape 들의 끝점 화살표 스타일을 설정한다.
+ *
+ * @param {String} arrowType [] ['block' | 'open_block' | 'classic' | 'diamond' | 'open_diamond' | 'open' | 'oval' | 'open_oval']
+ */
+ setArrowEndSelectedShape: function (arrowType) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"arrow-end": arrowType + '-wide-long'});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Fill Color 를 설정한다.
+ *
+ * @param {String} fillColor
+ */
+ setFillColorSelectedShape: function (fillColor) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ if (item.shape.SHAPE_ID == "OG.shape.bpmn.Value_Chain" || item.shape.SHAPE_ID == "OG.shape.bpmn.A_Subprocess") {
+ me._RENDERER.setShapeStyle(item, {"fill": "#FFFFFF-" + fillColor, "fill-opacity": 1});
+ } else {
+ me._RENDERER.setShapeStyle(item, {"fill": fillColor, "fill-opacity": 1});
+ }
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Font Family 를 설정한다.
+ *
+ * @param {String} fontFamily
+ */
+ setFontFamilySelectedShape: function (fontFamily) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"font-family": fontFamily});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Font Size 를 설정한다.
+ *
+ * @param {Number} fontSize
+ */
+ setFontSizeSelectedShape: function (fontSize) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"font-size": fontSize});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Font Color 를 설정한다.
+ *
+ * @param {String} fontColor
+ */
+ setFontColorSelectedShape: function (fontColor) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"font-color": fontColor});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Font Weight 를 설정한다.
+ *
+ * @param {String} fontWeight ['bold' | 'normal']
+ */
+ setFontWeightSelectedShape: function (fontWeight) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"font-weight": fontWeight});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Font Style 을 설정한다.
+ *
+ * @param {String} fontStyle ['italic' | 'normal']
+ */
+ setFontStyleSelectedShape: function (fontStyle) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"font-style": fontStyle});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Text Decoration 을 설정한다.
+ *
+ * @param {String} textDecoration ['underline' | 'none']
+ */
+ setTextDecorationSelectedShape: function (textDecoration) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"text-decoration": textDecoration});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Label Direction 을 설정한다.
+ *
+ * @param {String} labelDirection ['vertical' | 'horizontal']
+ */
+ setLabelDirectionSelectedShape: function (labelDirection) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"label-direction": labelDirection});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Label Angle 을 설정한다.
+ *
+ * @param {Number} labelAngle
+ */
+ setLabelAngleSelectedShape: function (labelAngle) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"label-angle": labelAngle});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 Label Position 을 설정한다.
+ *
+ * @param {String} labelPosition ['top' | 'bottom' | 'left' | 'right' | 'center']
+ */
+ setLabelPositionSelectedShape: function (labelPosition) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ if (labelPosition === 'top') {
+ me._RENDERER.setShapeStyle(item, {
+ "label-position": labelPosition,
+ "text-anchor": "middle",
+ "vertical-align": "bottom"
+ });
+ } else if (labelPosition === 'bottom') {
+ me._RENDERER.setShapeStyle(item, {
+ "label-position": labelPosition,
+ "text-anchor": "middle",
+ "vertical-align": "top"
+ });
+ } else if (labelPosition === 'left') {
+ me._RENDERER.setShapeStyle(item, {
+ "label-position": labelPosition,
+ "text-anchor": "end",
+ "vertical-align": "center"
+ });
+ } else if (labelPosition === 'right') {
+ me._RENDERER.setShapeStyle(item, {
+ "label-position": labelPosition,
+ "text-anchor": "start",
+ "vertical-align": "center"
+ });
+ } else if (labelPosition === 'center') {
+ me._RENDERER.setShapeStyle(item, {
+ "label-position": labelPosition,
+ "text-anchor": "middle",
+ "vertical-align": "center"
+ });
+ }
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 라벨 Vertical Align 를 설정한다.
+ *
+ * @param {String} verticalAlign ['top' | 'middle' | 'bottom']
+ */
+ setLabelVerticalSelectedShape: function (verticalAlign) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"vertical-align": verticalAlign});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 들의 라벨 Horizontal Align 를 설정한다.
+ *
+ * @param {String} horizontalAlign ['start' | 'middle' | 'end']
+ */
+ setLabelHorizontalSelectedShape: function (horizontalAlign) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.setShapeStyle(item, {"text-anchor": horizontalAlign});
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Shape 의 라벨을 설정한다.
+ *
+ * @param {String} label
+ */
+ setLabelSelectedShape: function (label) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.drawLabel(item, label);
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Edge Shape 의 시작점 라벨을 설정한다.
+ *
+ * @param {String} label
+ */
+ setEdgeFromLabelSelectedShape: function (label) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_shape=" + OG.Constants.SHAPE_TYPE.EDGE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.drawEdgeLabel(item, label, 'FROM');
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 선택된 Edge Shape 의 끝점 라벨을 설정한다.
+ *
+ * @param {String} label
+ */
+ setEdgeToLabelSelectedShape: function (label) {
+ var me = this;
+ $(me._RENDERER.getRootElement()).find("[_type=" + OG.Constants.NODE_TYPE.SHAPE + "][_shape=" + OG.Constants.SHAPE_TYPE.EDGE + "][_selected=true]").each(function (idx, item) {
+ me._RENDERER.drawEdgeLabel(item, label, 'TO');
+ });
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : Zoom In
+ */
+ zoomIn: function () {
+ var me = this;
+ if (me._CONFIG.SCALE + me._CONFIG.SCALE * 0.1 <= me._CONFIG.SCALE_MAX) {
+ me._RENDERER.setScale(me._CONFIG.SCALE + me._CONFIG.SCALE * 0.1);
+ }
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : Zoom Out
+ */
+ zoomOut: function () {
+ var me = this;
+ if (me._CONFIG.SCALE - me._CONFIG.SCALE * 0.1 >= me._CONFIG.SCALE_MIN) {
+ me._RENDERER.setScale(me._CONFIG.SCALE - me._CONFIG.SCALE * 0.1);
+ }
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * 메뉴 : 그려진 Shape 들을 캔버스 사이즈에 맞게 조절한다.
+ */
+ fitWindow: function () {
+ var me = this, container = me._RENDERER.getContainer();
+ me._RENDERER.fitCanvasSize([container.clientWidth, container.clientHeight], true);
+ me._RENDERER.addHistory();
+ },
+
+ /**
+ * Edge 와 선택된 Shape 정보들과의 시작, 끝점 연결 정보를 반환한다.
+ *
+ * @param {Element} edgeEle
+ * @param {Array} bBoxArray
+ * @return {Object} 연결 정보. {none, all, either, attrEither}
+ * @private
+ */
+ _isContainsConnectedShape: function (edgeEle, bBoxArray) {
+ var me = this, fromTerminal, toTerminal, fromShape, toShape, isContainsFrom = false, isContainsTo = false, i;
+
+ fromTerminal = $(edgeEle).attr("_from");
+ toTerminal = $(edgeEle).attr("_to");
+ if (fromTerminal) {
+ fromShape = me._getShapeFromTerminal(fromTerminal);
+ }
+ if (toTerminal) {
+ toShape = me._getShapeFromTerminal(toTerminal);
+ }
+
+ for (var i = 0, leni = bBoxArray.length; i < leni; i++) {
+ if (fromShape && bBoxArray[i].id === fromShape.id) {
+ isContainsFrom = true;
+ }
+ if (toShape && bBoxArray[i].id === toShape.id) {
+ isContainsTo = true;
+ }
+ }
+
+ return {
+ none: !isContainsFrom && !isContainsTo,
+ all: isContainsFrom && isContainsTo,
+ any: isContainsFrom || isContainsTo,
+ either: (isContainsFrom && !isContainsTo) || (!isContainsFrom && isContainsTo),
+ attrEither: (fromTerminal && !toTerminal) || (!fromTerminal && toTerminal)
+ };
+ },
+
+ /**
+ * 주어진 터미널 정보로 이를 포함하는 Shape 엘리먼트를 반환한다.
+ *
+ * @param {OG.shape.Terminal} terminal 연결 터미널
+ * @return {Element} Shape 엘리먼트
+ * @private
+ */
+ _getShapeFromTerminal: function (terminal) {
+ var me = this;
+ var element;
+ if (terminal) {
+ var shapeId = terminal.substring(0, terminal.indexOf(OG.Constants.TERMINAL));
+ element = me._RENDERER.getElementById(shapeId);
+ }
+ return element;
+ },
+
+ /**
+ * Page 및 Scroll offset 과 Scale 을 반영한 이벤트의 실제 offset 좌표를 반환한다.
+ *
+ * @param {Event} event
+ * @return {Object} offset 정보. {x, y}
+ * @private
+ */
+ _getOffset: function (event) {
+ var me = this, container = me._RENDERER.getContainer();
+
+ return {
+ x: (event.pageX - $(container).offset().left + container.scrollLeft) / me._CONFIG.SCALE,
+ y: (event.pageY - $(container).offset().top + container.scrollTop) / me._CONFIG.SCALE
+ };
+ },
+
+ /**
+ * 이동할 대상 즉, 선택된 Shape 정보를 반환한다.
+ *
+ * @return {Array} 선택된 Shape 정보. {id, box}' Array
+ * @private
+ */
+ _getMoveTargets: function () {
+ var me = this, bBoxArray = [], box;
+ var root = me._RENDERER.getRootElement();
+ $(root).find("[id$=" + OG.Constants.GUIDE_SUFFIX.BBOX + "]").each(function (index, item) {
+ if (item.id && item.id.indexOf(OG.Constants.CONNECT_GUIDE_SUFFIX.BBOX) == -1) {
+ var ele = me._RENDERER.getElementById(item.id);
+ var isEdge = $(ele).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE;
+
+ //엣지는 제외한다.
+ if (!isEdge) {
+ box = me._RENDERER.clone(item);
+ me._RENDERER.setAttr(box, me._CONFIG.DEFAULT_STYLE.GUIDE_SHADOW);
+ bBoxArray.push({
+ id: item.id.replace(OG.Constants.GUIDE_SUFFIX.BBOX, ""),
+ box: box
+ });
+ }
+ }
+ });
+ return bBoxArray;
+ },
+
+ /**
+ * 가로, 세로 Offset 만큼 주어진 Shape을 이동한다.
+ *
+ * @param {Array} bBoxArray 선택된 Shape 정보. {id, box}' Array
+ * @param {Number} dx 가로 Offset
+ * @param {Number} dy 세로 Offset
+ * @return {Array} 이동된 Shape 정보. {id, box}' Array
+ * @private
+ */
+ _moveElements: function (bBoxArray, dx, dy) {
+ var renderer = this._RENDERER;
+ var me = this, eleArray = [];
+
+ //이동시에 연결상태를 체크하여야 하는 shape 들을 모은다.
+ var connectCheckShapes = [];
+ $.each(bBoxArray, function (k, item) {
+ var ele = renderer.getElementById(item.id);
+ if (renderer.isEdge(ele)) {
+ return;
+ }
+ if (ele.shape && !ele.shape.MOVABLE) {
+ return;
+ }
+ connectCheckShapes.push(ele);
+ if (renderer.isGroup(ele)) {
+ $.each(renderer.getInnerShapesOfGroup(ele), function (idx, innerShape) {
+ connectCheckShapes.push(innerShape);
+ });
+ }
+ });
+
+ //이동 대상 엣지일 경우 엣지를 이동시킨다.
+ var excludeEdgeId = [];
+ var edges = renderer.getAllEdges();
+ $.each(edges, function (index, edge) {
+ var status = me._isContainsConnectedShape(edge, connectCheckShapes);
+ if (status && status.all) {
+ renderer.move(edge, [dx, dy]);
+ excludeEdgeId.push(edge.id);
+ }
+ });
+
+ //shape 이동 처리를 수행한다.
+ $.each(bBoxArray, function (k, item) {
+ var ele = renderer.getElementById(item.id);
+ if (renderer.isEdge(ele)) {
+ return;
+ }
+ // cloned box 삭제
+ renderer.remove(item.box);
+
+ // 이동
+ if (ele.shape && ele.shape.MOVABLE) {
+ renderer.move(ele, [dx, dy], excludeEdgeId);
+ eleArray.push(ele);
+ }
+ renderer.drawGuide(ele);
+ });
+
+ return eleArray;
+ },
+
+ /**
+ * Canvas 영역을 벗어나서 드래그되는 경우 Canvas 확장한다.
+ *
+ * @param {Number} currentX
+ * @param {Number} currentY
+ * @private
+ */
+ _autoExtend: function (currentX, currentY, element) {
+ var me = this, rootBBox = me._RENDERER.getRootBBox(),
+ width = element.shape.geom.boundary.getWidth(), height = element.shape.geom.boundary.getHeight()
+ // Canvas 영역을 벗어나서 드래그되는 경우 Canvas 확장
+ if (me._CONFIG.AUTO_EXTENSIONAL && rootBBox.width < (currentX + width)) {
+ me._RENDERER.setCanvasSize([rootBBox.width + me._CONFIG.AUTO_EXTENSION_SIZE, rootBBox.height]);
+ }
+ if (me._CONFIG.AUTO_EXTENSIONAL && rootBBox.height < (currentY + height)) {
+ me._RENDERER.setCanvasSize([rootBBox.width, rootBBox.height + me._CONFIG.AUTO_EXTENSION_SIZE]);
+ }
+ },
+
+ /**
+ * 그룹 Shape 인 경우 포함된 하위 Shape 들을 복사한다.
+ *
+ * @param {Element} element 원본 부모 Shape 엘리먼트
+ * @param {Element} newCopiedElement 복사된 부모 Shape 엘리먼트
+ * @private
+ */
+ _copyChildren: function (element, newCopiedElement) {
+ var me = this, children = element.childNodes;
+ $.each(children, function (idx, item) {
+ if ($(item).attr("_type") === OG.Constants.NODE_TYPE.SHAPE) {
+ // copy
+ var boundary = item.shape.geom.getBoundary(), newShape, newElement, newGuide;
+ newShape = item.shape.clone();
+
+ if ($(item).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE) {
+ newShape.geom = new OG.PolyLine(item.shape.geom.getVertices());
+ newShape.geom.style = item.shape.geom.style;
+ newShape.geom.move(me._CONFIG.COPY_PASTE_PADDING, me._CONFIG.COPY_PASTE_PADDING);
+ newElement = me._RENDERER.drawShape(
+ null, newShape,
+ null, item.shapeStyle
+ );
+
+ } else {
+ newElement = me._RENDERER.drawShape(
+ [boundary.getCentroid().x + me._CONFIG.COPY_PASTE_PADDING, boundary.getCentroid().y + me._CONFIG.COPY_PASTE_PADDING],
+ newShape, [boundary.getWidth(), boundary.getHeight()], item.shapeStyle
+ );
+ }
+
+ // custom data
+ newElement.data = item.data;
+
+ // append child
+ newCopiedElement.appendChild(newElement);
+
+ // enable event
+ me.setClickSelectable(newElement, me._isSelectable(newElement.shape));
+ me.setMovable(newElement, me._isMovable(newElement.shape));
+ me.setConnectGuide(newElement, me._isConnectable(newElement.shape));
+
+ if (me._isLabelEditable(newElement.shape)) {
+ me.enableEditLabel(newElement);
+ }
+
+ // recursive call
+ if (item.childNodes.length > 0) {
+ me._copyChildren(item, newElement);
+ }
+ }
+ });
+ },
+
+ /**
+ * 하위 Shape 자식노드를 모두 deselect 처리한다.
+ *
+ * @param {Element} element
+ * @private
+ */
+ _deselectChildren: function (element) {
+ var me = this, children = element.childNodes;
+ $.each(children, function (idx, item) {
+ if ($(item).attr("_type") === OG.Constants.NODE_TYPE.SHAPE) {
+ if (item.childNodes.length > 0) {
+ me._deselectChildren(item);
+ me._delSelectedElement(item);
+ }
+
+ if ($(item).attr("_selected") === "true") {
+ me._RENDERER.removeGuide(item);
+ $(item).draggable("destroy");
+ }
+ }
+ });
+ },
+
+ /**
+ * 선택되어진 Shape 부모노드가 하나라도 있다면 true 를 반환한다.
+ *
+ * @param {Element} element
+ * @return {Boolean}
+ * @private
+ */
+ _isParentSelected: function (element) {
+ var me = this, parentNode = element.parentNode;
+ if (parentNode) {
+ if (me._isParentSelected(parentNode)) {
+ return true;
+ }
+
+ if ($(parentNode).attr("_type") === OG.Constants.NODE_TYPE.SHAPE &&
+ $(parentNode).attr("_selected") === "true") {
+ return true;
+ }
+ }
+
+ return false;
+ },
+
+ _num: function (str) {
+ return parseInt(str, 10);
+ },
+
+ _grid: function (value, move) {
+ var me = this;
+ if (move)
+ return me._CONFIG.DRAG_GRIDABLE ? OG.Util.roundGrid(value, me._CONFIG.MOVE_SNAP_SIZE / 2) : value;
+ else
+ return me._CONFIG.DRAG_GRIDABLE ? OG.Util.roundGrid(value, me._CONFIG.MOVE_SNAP_SIZE) : value;
+ },
+
+ _isSelectable: function (shape) {
+ var me = this;
+ return me._CONFIG.SELECTABLE && shape.SELECTABLE;
+ },
+
+ _isConnectable: function (shape) {
+ var me = this;
+ return me._CONFIG.CONNECTABLE && shape.CONNECTABLE;
+ },
+
+ _isConnectableFrom: function (shape) {
+ var me = this;
+ return shape.ENABLE_FROM;
+ },
+
+ _isConnectableTo: function (shape) {
+ var me = this;
+ return shape.ENABLE_TO;
+ },
+
+ _isSelfConnectable: function (shape) {
+ var me = this;
+ return me._CONFIG.SELF_CONNECTABLE && shape.SELF_CONNECTABLE;
+ },
+
+ _isConnectCloneable: function (shape) {
+ var me = this;
+ return me._CONFIG.CONNECT_CLONEABLE && shape.CONNECT_CLONEABLE;
+ },
+
+ _isMovable: function (shape) {
+ var me = this;
+ return (me._CONFIG.SELECTABLE && shape.SELECTABLE) &&
+ (me._CONFIG.MOVABLE && me._CONFIG.MOVABLE_[shape.TYPE] && shape.MOVABLE);
+ },
+
+ _isDeletable: function (shape) {
+ var me = this;
+ return (me._CONFIG.DELETABLE && shape.DELETABLE) &&
+ (me._CONFIG.DELETABLE && me._CONFIG.DELETABLE_[shape.TYPE] && shape.DELETABLE);
+ },
+
+ _isConnectStyleChangable: function (shape) {
+ var me = this;
+ return (me._CONFIG.CONNECT_STYLE_CHANGE && shape.CONNECT_STYLE_CHANGE) &&
+ (me._CONFIG.CONNECT_STYLE_CHANGE && me._CONFIG.CONNECT_STYLE_CHANGE_[shape.TYPE] && shape.CONNECT_STYLE_CHANGE);
+ },
+
+ _isResizable: function (shape) {
+ var me = this;
+ return (me._CONFIG.SELECTABLE && shape.SELECTABLE) &&
+ (me._CONFIG.RESIZABLE && me._CONFIG.RESIZABLE_[shape.TYPE] && shape.RESIZABLE);
+ },
+
+ _isLabelEditable: function (shape) {
+ var me = this;
+ return me._CONFIG.LABEL_EDITABLE && me._CONFIG.LABEL_EDITABLE_[shape.TYPE] && shape.LABEL_EDITABLE;
+ },
+
+ //TODO : 선택된 요소를 선택요소배열에 추가
+ _addSelectedElement: function (element) {
+ if (undefined == this.selectedElements) {
+ this.selectedElements = {};
+ }
+ this.selectedElements[element.attributes["id"].value] = element;
+ //선택 이벤트
+ if (element.shape) {
+ element.shape.onSelectShape();
+ }
+ },
+
+ //TODO : 선택된 요소를 선택요소배열에서 삭제
+ _delSelectedElement: function (element) {
+ if (this.selectedElements) {
+ delete this.selectedElements[element.attributes["id"].value];
+ if (element.shape) {
+ element.shape.onDeSelectShape();
+ }
+ }
+ },
+
+ //TODO : 선택요소배열 반환
+ _getSelectedElement: function () {
+ var key, returnArray = [];
+ for (key in this.selectedElements) {
+ returnArray.push(this.selectedElements[key]);
+ }
+ return returnArray;
+ },
+
+
+ _isSelectedElement: function (element) {
+ var isSelected = false;
+ if (element && element.id) {
+ for (var key in this.selectedElements) {
+ if (key === element.id) {
+ isSelected = true;
+ }
+ }
+ }
+ return isSelected;
+ },
+
+ _removeAllSelectedElement: function () {
+ //init
+ var key;
+ for (key in this.selectedElements) {
+ var element = this.selectedElements[key]
+ delete this.selectedElements[key];
+ if (element && element.shape) {
+ element.shape.onDeSelectShape();
+ }
+ }
+ },
+ /**
+ * Shape 엘리먼트의 setConnectGuide 에 관련된 이벤트
+ *
+ * @param {Element} element Shape 엘리먼트
+ * @param {Boolean} isConnectable 가능여부
+ */
+ setConnectGuide: function (element, isConnectable) {
+ var renderer = this._RENDERER;
+ var me = this, spotBBOX, spots, circleSpots, eventOffset, skipRemove, root = renderer.getRootGroup();
+ var root = renderer.getRootGroup();
+ //스팟 이동량 보정치의 범위조건을 설정한다.
+ //드래그시작시에 한번만 계산된다.
+ var calculateSpotCorrectionConditions = function (spot) {
+
+ //이동 딜레이
+ var delay = me._CONFIG.EDGE_MOVE_DELAY_SIZE;
+ //조건집합
+ var correctionConditions = [];
+ //스팟 기준으로 이웃한 변곡점
+ var reativePoints = [];
+ var type = $(spot).data('type');
+ var vertices = element.shape.geom.getVertices();
+ var allVertices;
+
+ //AUTOMATIC_GUIDANCE 가 아닌경우는 나 자신의 변곡점 집합
+ if (!me._CONFIG.AUTOMATIC_GUIDANCE) {
+ allVertices = element.shape.geom.getVertices();
+ $.each(allVertices, function (i, vertice) {
+ reativePoints.push(vertice);
+ });
+ }
+ //모든 엣지의 변곡점 집합
+ else {
+ var allEdges = renderer.getAllEdges();
+ $.each(allEdges, function (idx, edge) {
+ allVertices = edge.shape.geom.getVertices();
+ $.each(allVertices, function (i, vertice) {
+ reativePoints.push(vertice);
+ });
+ });
+ }
+
+ //서클 타입 스팟이고, 마지막 변곡점인 경우 shape 바운더리의 십자 영역을 번위조건에 추가한다.
+ if (type === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_CIRCLE) {
+ var index = $(spot).data('index');
+ if (index === 0 || index === vertices.length - 1) {
+ $.each(root.childNodes, function (idx, childNode) {
+
+ if ($(childNode).attr("_type") === OG.Constants.NODE_TYPE.SHAPE
+ && $(childNode).attr("_shape") !== OG.Constants.SHAPE_TYPE.EDGE
+ ) {
+ var boundary = renderer.getBoundary(childNode);
+
+ if (boundary && boundary._upperLeft) {
+ var upperLeft = boundary._upperLeft;
+ var width = boundary._width;
+ var height = boundary._height;
+
+ //vertical boundary range
+ correctionConditions.push({
+ condition: {
+ minX: upperLeft.x + (width / 2) - delay,
+ maxX: upperLeft.x + (width / 2) + delay,
+ minY: upperLeft.y,
+ maxY: upperLeft.y + height,
+ },
+ fixedPosition: {
+ x: upperLeft.x + (width / 2)
+ },
+ id: idx
+ });
+
+ //horizontal boundary range
+ correctionConditions.push({
+ condition: {
+ minX: upperLeft.x,
+ maxX: upperLeft.x + width,
+ minY: upperLeft.y + (height / 2) - delay,
+ maxY: upperLeft.y + (height / 2) + delay,
+ },
+ fixedPosition: {
+ y: upperLeft.y + (height / 2)
+ },
+ id: idx
+ });
+ }
+ }
+ });
+ }
+ }
+
+ //변곡점 보정치 조건은 x 또는 y 가 일치할 경우
+ $.each(reativePoints, function (idx, point) {
+ correctionConditions.push({
+ condition: {
+ minX: point.x - delay,
+ maxX: point.x + delay,
+ },
+ fixedPosition: {
+ x: point.x
+ },
+ id: idx
+ });
+ correctionConditions.push({
+ condition: {
+ minY: point.y - delay,
+ maxY: point.y + delay,
+ },
+ fixedPosition: {
+ y: point.y
+ },
+ id: idx
+ });
+ });
+
+ // spot 에 데이터 저장
+ $(spot).data('correctionConditions', correctionConditions);
+
+ };
+
+ //스팟이 가지고있는 범위조건에 따라 새로운 포지션을 계산한다.
+ var correctionConditionAnalysis = function (spot, offset) {
+ var fixedPosition = {
+ x: offset.x,
+ y: offset.y
+ };
+ var calculateFixedPosition = function (expectedPosition) {
+ if (!expectedPosition) {
+ return fixedPosition;
+ }
+ if (expectedPosition.x && !expectedPosition.y) {
+ return {
+ x: expectedPosition.x,
+ y: fixedPosition.y
+ }
+ }
+ if (expectedPosition.y && !expectedPosition.x) {
+ return {
+ x: fixedPosition.x,
+ y: expectedPosition.y
+ }
+ }
+ if (expectedPosition.x && expectedPosition.y) {
+ return expectedPosition;
+ }
+ return fixedPosition;
+ };
+ var correctionConditions = $(spot).data('correctionConditions');
+ if (!correctionConditions) {
+ return fixedPosition;
+ }
+
+ var conditionsPassCandidates = [];
+ $.each(correctionConditions, function (index, correctionCondition) {
+ var condition = correctionCondition.condition;
+
+ var conditionsPass = true;
+ if (condition.minX) {
+ if (offset.x < condition.minX) {
+ conditionsPass = false;
+ }
+ }
+ if (condition.maxX) {
+ if (offset.x > condition.maxX) {
+ conditionsPass = false;
+ }
+ }
+ if (condition.minY) {
+ if (offset.y < condition.minY) {
+ conditionsPass = false;
+ }
+ }
+ if (condition.maxY) {
+ if (offset.y > condition.maxY) {
+ conditionsPass = false;
+ }
+ }
+
+ if (conditionsPass) {
+ conditionsPassCandidates.push(correctionCondition);
+ }
+ });
+ $.each(conditionsPassCandidates, function (index, conditionsPassCandidate) {
+ fixedPosition = calculateFixedPosition(conditionsPassCandidate.fixedPosition);
+ });
+ return fixedPosition;
+ };
+
+ var isConnectableSpot = function (spot) {
+ var isConnectable;
+ var vertices = element.shape.geom.getVertices();
+ if ($(spot).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_CIRCLE) {
+ var index = $(spot).data("index");
+ if (index || index === 0) {
+ if (index === 0) {
+ isConnectable = 'from'
+ }
+ if (index === vertices.length - 1) {
+ isConnectable = 'to'
+ }
+ }
+ }
+ return isConnectable;
+ };
+
+ $(element).bind({
+ mousemove: function (event) {
+ if (!me._isConnectable(element.shape)) {
+ return;
+ }
+
+ var isShape = $(element).attr("_type") === OG.Constants.NODE_TYPE.SHAPE;
+ var isEdge = $(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE;
+ var isSpotFocusing = $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER);
+ var isDragging = $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG);
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+
+ if (!isShape || isSpotFocusing || isDragging || isConnectMode) {
+ return;
+ }
+
+ if (isEdge) {
+ //엣지일 경우 선택되었을때만 동작
+ if (me._CONFIG.SPOT_ON_SELECT && $(element).attr("_selected") != "true") {
+ return;
+ }
+
+ eventOffset = me._getOffset(event);
+ var virtualSpot = renderer.createVirtualSpot(eventOffset.x, eventOffset.y, element);
+ if (virtualSpot) {
+
+ $(virtualSpot).bind({
+ mousedown: function () {
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, true);
+ },
+ mouseup: function () {
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, false);
+ }
+ });
+
+ $(virtualSpot).draggable({
+ start: function (event) {
+ renderer.removeAllGuide();
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG, true);
+
+ var eventOffset = me._getOffset(event);
+ var vertice = $(this).data('vertice');
+ var geometry = element.shape.geom;
+ $(this).data('offset', {
+ x: eventOffset.x - vertice.x,
+ y: eventOffset.y - vertice.y
+ });
+
+ var prev = $(this).data('prev');
+ var next = $(this).data('next');
+ var vertices = geometry.getVertices();
+
+ var offset = $(this).data('offset');
+ var newX = eventOffset.x - offset.x;
+ var newY = eventOffset.y - offset.y;
+ var newVertice = geometry.convertCoordinate([newX, newY]);
+
+ //기존 변곡점 스팟들의 인덱스값을 업데이트한다.
+ circleSpots = renderer.getCircleSpots(element);
+ $.each(circleSpots, function (index, circleSpot) {
+ var circleSpotIndex = $(circleSpot).data('index');
+ if (circleSpotIndex >= next) {
+ $(circleSpot).data('index', circleSpotIndex + 1);
+ }
+ });
+
+ //Edge 의 geometry 의 vertieces를 업데이트한다.
+ vertices.splice(next, 0, newVertice);
+ geometry.setVertices(vertices);
+
+ //가상스팟을 고정스팟으로 변경한다.
+ $(this).attr('name', OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT);
+ $(this).data('index', next);
+
+ //양 끝 변곡점의 커넥션 포인트로의 변환.
+ var needToRedrawVertices = true;
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_CIRCLE) {
+ var index = $(this).data("index");
+ if (index === 0 && index === vertices.length - 1) {
+ needToRedrawVertices = false;
+ }
+ }
+ if (needToRedrawVertices) {
+ var from = $(element).attr("_from");
+ var to = $(element).attr("_to");
+ if (from) {
+ var fromPosition = renderer._getPositionFromTerminal(from);
+ vertices[0] =
+ geometry.convertCoordinate([fromPosition.x, fromPosition.y]);
+ }
+ if (to) {
+ var toPosition = renderer._getPositionFromTerminal(to);
+ vertices[vertices.length - 1] =
+ geometry.convertCoordinate([toPosition.x, toPosition.y]);
+ }
+ geometry.setVertices(vertices);
+ }
+
+ //이동 보정 조건 추가
+ $(this).data('corrections', calculateSpotCorrectionConditions(virtualSpot));
+
+ element = renderer.drawEdge(new OG.PolyLine(vertices), geometry.style, element.id);
+
+ renderer.removeRubberBand(renderer.getRootElement());
+ renderer.selectSpot(virtualSpot);
+ },
+ drag: function (event) {
+ if (!renderer._getREleById(virtualSpot.id)) {
+ renderer.removeAllConnectGuide();
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG, false);
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, false);
+ return;
+ }
+
+ var eventOffset = me._getOffset(event);
+ var offset = $(this).data("offset");
+ var newX = eventOffset.x - offset.x;
+ var newY = eventOffset.y - offset.y;
+ var vertices = element.shape.geom.getVertices();
+
+ var analysisPosition = correctionConditionAnalysis(virtualSpot, {x: newX, y: newY});
+ newX = analysisPosition.x;
+ newY = analysisPosition.y;
+
+ renderer.setAttr(virtualSpot, {cx: newX});
+ renderer.setAttr(virtualSpot, {cy: newY});
+
+ var index = $(this).data("index");
+
+ vertices[index].x = newX;
+ vertices[index].y = newY;
+
+ renderer.drawEdge(new OG.PolyLine(vertices), element.shape.geom.style, element.id);
+ renderer.trimConnectIntersection(element);
+ },
+ stop: function (event) {
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG, false);
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, false);
+
+ var eventOffset = me._getOffset(event);
+ var offset = $(this).data("offset");
+ var index = $(this).data("index");
+ var newX = eventOffset.x - offset.x;
+ var newY = eventOffset.y - offset.y;
+ var vertices = element.shape.geom.getVertices();
+
+ var analysisPosition = correctionConditionAnalysis(virtualSpot, {x: newX, y: newY});
+ analysisPosition.x = me._grid(analysisPosition.x, 'move');
+ analysisPosition.y = me._grid(analysisPosition.y, 'move');
+ newX = analysisPosition.x;
+ newY = analysisPosition.y;
+
+ vertices[index].x = newX;
+ vertices[index].y = newY;
+
+ renderer.drawEdge(new OG.PolyLine(vertices), element.shape.geom.style, element.id);
+
+ renderer.removeConnectGuide(element);
+ renderer.removeVirtualSpot(element);
+
+ renderer.trimConnectInnerVertice(element);
+ renderer.trimConnectIntersection(element);
+ renderer.trimEdge(element);
+ renderer.addHistory();
+ }
+ });
+ }
+ }
+ },
+ mouseout: function (event) {
+ if (!me._isConnectable(element.shape)) {
+ return;
+ }
+ var isShape = $(element).attr("_type") === OG.Constants.NODE_TYPE.SHAPE;
+ var isEdge = $(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE;
+ var isDragging = $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG);
+
+ if (!isShape) {
+ return;
+ }
+
+ if (!isEdge) {
+ if (isDragging) {
+ return;
+ }
+ renderer.removeConnectGuide(element);
+ }
+
+ if (isEdge) {
+ if (isDragging) {
+ return;
+ }
+
+ //스팟이 선택되어 바운더리 영역 밖으로 나갔다고 판단될 경우 예외처리한다.
+ skipRemove = false;
+ eventOffset = me._getOffset(event);
+ spots = renderer.getSpots(element);
+ $(spots).each(function (index, spot) {
+ spotBBOX = renderer.getBBox(spot);
+ if (eventOffset.x >= spotBBOX.x && eventOffset.x <= spotBBOX.x2
+ && eventOffset.y >= spotBBOX.y && eventOffset.y <= spotBBOX.y2) {
+ skipRemove = true;
+ }
+ });
+
+ //가상스팟이 선택되어 바운더리 영역 밖으로 나갔다고 판단될 경우 예외처리한다.
+ var virtualSpot = renderer.getVirtualSpot(element);
+ if (virtualSpot) {
+ spotBBOX = renderer.getBBox(virtualSpot);
+ if (eventOffset.x >= spotBBOX.x && eventOffset.x <= spotBBOX.x2
+ && eventOffset.y >= spotBBOX.y && eventOffset.y <= spotBBOX.y2) {
+ skipRemove = true;
+ }
+ }
+
+ if (!skipRemove) {
+ renderer.removeConnectGuide(element);
+ renderer.removeVirtualSpot(element);
+ }
+ }
+ event.stopImmediatePropagation();
+ },
+ mouseover: function (event) {
+ if (!me._isConnectable(element.shape)) {
+ return;
+ }
+ var guide;
+ //마우스가 어떠한 shape 에 접근할 때
+
+ //1. 어떠한 shpae가 Edge 가 아닐경우 커넥트 가이드를 생성한다.
+ // 1) 드래그중인 스팟이 처음 또는 끝의 변곡점일경우,
+ // 1. 접근한 shape 의 정보를 root 에 알린다.
+ // 2. 빠져나간 shape 의 정보를 root 에 알린다.
+ // 3. 접근한 shpae 의 스타일을 변경한다.
+ // 4. 빠져나간 shape 의 스타일을 변경한다.
+ // 5. 접근한 shape 의 정보를 root 에 알린다.
+ // 5. 빠져나간 shape 의 정보를 root 에 삭제한다.
+
+ //2. 어떠한 shape가 Edge 일 경우
+ // 1) 다른 Edge의 커넥트가이드를 정리한다.
+ // 2) 어떠한 Edge의 Spot이 드래그중일 경우 커넥트가이드 생성을 막는다.
+ // 3) 어떠한 Edge의 Spot이 드래그중이 아닐 경우 커넥트가이드를 생성한다.
+ var enableStyle = me._CONFIG.DEFAULT_STYLE.CONNECTABLE_HIGHLIGHT;
+ var isShape = $(element).attr("_type") === OG.Constants.NODE_TYPE.SHAPE;
+ var isEdge = $(element).attr("_shape") === OG.Constants.SHAPE_TYPE.EDGE;
+ var isDragging = $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG);
+ var isConnectMode = $(root).data(OG.Constants.GUIDE_SUFFIX.LINE_CONNECT_MODE);
+ if (!isShape) {
+ return;
+ }
+
+ if (!isEdge) {
+ //스팟을 드래그 중일때는 예외처리한다.
+ if (isDragging) {
+ return;
+ }
+ renderer.removeAllConnectGuide();
+ renderer.drawConnectGuide(element);
+ }
+
+ if (isEdge) {
+ //엣지일 경우 선택되었을때만 동작
+ if (me._CONFIG.SPOT_ON_SELECT && $(element).attr("_selected") != "true") {
+ return;
+ }
+
+ if (isConnectMode) {
+ return;
+ }
+ if (isDragging) {
+ return;
+ }
+ renderer.removeOtherConnectGuide(element);
+ guide = renderer.drawConnectGuide(element);
+ if (guide && guide.spots) {
+ $(guide.spots).each(function (index, spot) {
+
+ $(spot).bind({
+ mouseover: function () {
+ var skipRemove = false;
+
+ //드래그중일때는 예외처리한다.
+ if ($(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG)) {
+ skipRemove = true;
+ }
+ if (!skipRemove) {
+ renderer.selectSpot(spot);
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, true);
+ }
+ },
+ mouseout: function () {
+ var skipRemove = false;
+
+ //드래그중일때는 예외처리한다.
+ if ($(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG)) {
+ skipRemove = true;
+ }
+ if (!skipRemove) {
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, false);
+ }
+ }
+ });
+
+ $(spot).draggable({
+ start: function (event) {
+ renderer.removeAllGuide();
+ renderer.toFront(element);
+
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG, true);
+
+ var eventOffset = me._getOffset(event);
+ var vertice = $(this).data('vertice');
+ var geometry = element.shape.geom;
+ var vertices = geometry.getVertices();
+
+ $(this).data('offset', {
+ x: eventOffset.x - vertice.x,
+ y: eventOffset.y - vertice.y
+ });
+
+ //양 끝의 변곡점을 커넥트 포지션으로 변경.
+ var needToRedrawVertices = true;
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_CIRCLE) {
+ var index = $(this).data('index');
+ if (index === 0 || index === vertices.length - 1) {
+ needToRedrawVertices = false;
+ }
+ }
+ $(this).data('needToRedrawVertices', needToRedrawVertices);
+
+ if (needToRedrawVertices) {
+ var from = $(element).attr('_from');
+ var to = $(element).attr('_to');
+ if (from) {
+ var fromPosition = renderer._getPositionFromTerminal(from);
+ vertices[0] =
+ geometry.convertCoordinate([fromPosition.x, fromPosition.y]);
+ }
+ if (to) {
+ var toPosition = renderer._getPositionFromTerminal(to);
+ vertices[vertices.length - 1] =
+ geometry.convertCoordinate([toPosition.x, toPosition.y]);
+ }
+ geometry.setVertices(vertices);
+ }
+
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_CIRCLE) {
+ $(this).data('corrections', calculateSpotCorrectionConditions(spot));
+ renderer.remove(guide.bBox);
+ renderer.removeRubberBand(renderer.getRootElement());
+ }
+
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_RECT) {
+ vertices = geometry.getVertices();
+ var prev = $(this).data('prev');
+ var next = $(this).data('next');
+ if (prev === 0) {
+ var newPreVertice =
+ element.shape.geom.convertCoordinate([vertices[0].x, vertices[0].y]);
+ vertices.splice(prev, 0, newPreVertice);
+ $(this).data('prev', prev + 1);
+ $(this).data('next', next + 1);
+ next = next + 1;
+ }
+ if (next === vertices.length - 1) {
+ var newNextVertice =
+ geometry.convertCoordinate([vertices[vertices.length - 1].x, vertices[vertices.length - 1].y]);
+ vertices.splice(next, 0, newNextVertice);
+ }
+
+ //Edge 의 geometry 의 vertieces를 업데이트한다.
+ geometry.setVertices(vertices);
+ $(this).data('corrections', calculateSpotCorrectionConditions(spot));
+ renderer.remove(guide.bBox);
+ renderer.removeRubberBand(renderer.getRootElement());
+ }
+ },
+ drag: function (event) {
+ if (!renderer._getREleById(spot.id)) {
+ renderer.removeAllConnectGuide();
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG, false);
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, false);
+ return;
+ }
+
+ var eventOffset = me._getOffset(event);
+ var offset = $(this).data("offset");
+ var newX = eventOffset.x - offset.x;
+ var newY = eventOffset.y - offset.y;
+ var vertices = element.shape.geom.getVertices();
+
+ var analysisPosition = correctionConditionAnalysis(spot, {x: newX, y: newY});
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_CIRCLE) {
+ newX = analysisPosition.x;
+ newY = analysisPosition.y;
+
+ renderer.setAttr(spot, {cx: newX});
+ renderer.setAttr(spot, {cy: newY});
+
+ var index = $(this).data("index");
+ vertices[index].x = newX;
+ vertices[index].y = newY;
+ }
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_RECT) {
+ newX = analysisPosition.x;
+ newY = analysisPosition.y;
+
+ var spotRectStyle = me._CONFIG.DEFAULT_STYLE.CONNECT_GUIDE_SPOT_RECT;
+ var height = spotRectStyle.h;
+ var direction = $(this).data('direction');
+ var prev = $(this).data("prev");
+ var next = $(this).data("next");
+ if (direction === 'vertical') {
+ vertices[prev].x = newX;
+ vertices[next].x = newX;
+ renderer.setAttr(spot, {x: newX - (height / 2)});
+ }
+ if (direction === 'horizontal') {
+ vertices[prev].y = newY;
+ vertices[next].y = newY;
+ renderer.setAttr(spot, {y: newY - (height / 2)});
+ }
+ }
+ renderer.drawEdge(new OG.PolyLine(vertices), element.shape.geom.style, element.id);
+ if ($(this).data('needToRedrawVertices')) {
+ renderer.trimConnectIntersection(element);
+ }
+
+ var connectableDirection = isConnectableSpot(spot);
+ var frontElement = renderer.getFrontForCoordinate([eventOffset.x, eventOffset.y]);
+ $.each(renderer.getAllNotEdges(), function (idx, otherElement) {
+ if (frontElement && connectableDirection) {
+ if (otherElement.id === frontElement.id) {
+ renderer.setHighlight(otherElement, enableStyle);
+ renderer.drawConnectGuide(otherElement);
+ } else {
+ renderer.removeHighlight(otherElement, enableStyle);
+ renderer.removeConnectGuide(otherElement);
+ }
+ } else {
+ renderer.removeHighlight(otherElement, enableStyle);
+ renderer.removeConnectGuide(otherElement);
+ }
+ });
+ },
+ stop: function (event) {
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_DRAG, false);
+ $(root).data(OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_EVENT_MOUSEROVER, false);
+
+ var eventOffset = me._getOffset(event);
+ var offset = $(this).data("offset");
+ var index = $(this).data("index");
+ var newX = eventOffset.x - offset.x;
+ var newY = eventOffset.y - offset.y;
+ var vertices = element.shape.geom.getVertices();
+
+ var analysisPosition = correctionConditionAnalysis(spot, {x: newX, y: newY});
+ analysisPosition.x = me._grid(analysisPosition.x, 'move');
+ analysisPosition.y = me._grid(analysisPosition.y, 'move');
+
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_CIRCLE) {
+ newX = analysisPosition.x;
+ newY = analysisPosition.y;
+
+ renderer.setAttr(spot, {cx: newX});
+ renderer.setAttr(spot, {cy: newY});
+
+ var index = $(this).data("index");
+ vertices[index].x = newX;
+ vertices[index].y = newY;
+
+ }
+ if ($(this).data('type') === OG.Constants.CONNECT_GUIDE_SUFFIX.SPOT_RECT) {
+ newX = analysisPosition.x;
+ newY = analysisPosition.y;
+
+ var spotRectStyle = me._CONFIG.DEFAULT_STYLE.CONNECT_GUIDE_SPOT_RECT;
+ var height = spotRectStyle.h;
+ var direction = $(this).data('direction');
+ var prev = $(this).data("prev");
+ var next = $(this).data("next");
+ if (direction === 'vertical') {
+ vertices[prev].x = newX;
+ vertices[next].x = newX;
+ renderer.setAttr(spot, {x: newX - (height / 2)});
+ }
+ if (direction === 'horizontal') {
+ vertices[prev].y = newY;
+ vertices[next].y = newY;
+ renderer.setAttr(spot, {y: newY - (height / 2)});
+ }
+ }
+ renderer.drawEdge(new OG.PolyLine(vertices), element.shape.geom.style, element.id);
+ renderer.removeConnectGuide(element);
+ renderer.removeVirtualSpot(element);
+
+ var connectableDirection = isConnectableSpot(spot);
+ var frontElement = renderer.getFrontForCoordinate([eventOffset.x, eventOffset.y]);
+ if (frontElement) {
+ renderer.removeHighlight(frontElement, enableStyle);
+ }
+ if (connectableDirection && frontElement) {
+ var point = [newX, newY];
+ var terminal = renderer.createTerminalString(frontElement, point);
+ var isConnectable = me._isConnectable(frontElement.shape);
+ if (isConnectable) {
+ if (connectableDirection === 'from') {
+ if (me._isConnectableFrom(frontElement.shape)) {
+ renderer.connect(terminal, null, element, element.shape.geom.style);
+ }
+ }
+ if (connectableDirection === 'to') {
+ if (me._isConnectableTo(frontElement.shape)) {
+ renderer.connect(null, terminal, element, element.shape.geom.style);
+ }
+ }
+ }
+ }
+ if (connectableDirection && !frontElement) {
+ renderer.disconnectOneWay(element, connectableDirection);
+ }
+
+ renderer.trimConnectInnerVertice(element);
+ renderer.trimConnectIntersection(element);
+ renderer.trimEdge(element);
+
+ renderer.addHistory();
+ }
+ });
+
+ })
+ }
+ }
+ event.stopImmediatePropagation();
+ }
+ })
+
+ }
+};
+OG.handler.EventHandler.prototype.constructor = OG.handler.EventHandler;
+OG.EventHandler = OG.handler.EventHandler;
+/**
+ * Remote User
+ *
+ * @class
+ * @requires OG.*
+ *
+ * @example
+ * var user = new OG.handler.RemoteUser(key, name, sessionId);
+ *
+ * @author Seungpil Park
+ * @private
+ */
+OG.handler.RemoteUser = function (key, name, sessionId) {
+
+ this.key = key;
+ this.name = name;
+ this.sessionId = sessionId;
+ this.isMaster = false;
+ this.editable = false;
+};
+OG.handler.RemoteUser.prototype = {
+ getKey: function () {
+ return this.key;
+ },
+ setKey: function (key) {
+ this.key = key;
+ },
+ getName: function () {
+ return this.name;
+ },
+ setName: function (name) {
+ this.name = name;
+ },
+ getSessionId: function () {
+ return this.sessionId;
+ },
+ setSessionId: function (sessionId) {
+ this.sessionId = sessionId;
+ },
+ getIsMaster: function () {
+ return this.isMaster;
+ },
+ setIsMaster: function (ismaster) {
+ this.isMaster = ismaster;
+ },
+ getEditable: function () {
+ return this.editable;
+ },
+ setEditable: function (editable) {
+ this.editable = editable;
+ }
+};
+OG.handler.RemoteUser.prototype.constructor = OG.handler.RemoteUser;
+OG.RemoteUser = OG.handler.RemoteUser();
+/**
+ * Remote Repository
+ *
+ * @type {{}}
+ * @private
+ */
+OG.handler.RemoteRepo = {};
+/**
+ * Remote Handler
+ *
+ * @class
+ * @requires OG.*
+ *
+ * @author Seungpil Park
+ * @private
+ */
+OG.handler.RemoteHandler = function () {
+ this._REPO = OG.handler.RemoteRepo;
+ this._CLASSNAME = 'org.uengine.opengraph.RemoteService';
+ this._SESSIONID = null;
+ this._ENCODESUFFIX = '_%$';
+ this._SCHEDULER = null;
+};
+OG.handler.RemoteHandler.prototype = {
+ encodeJson: function (obj) {
+ return JSON.stringify(obj).replace(/"/gi, this._ENCODESUFFIX);
+ },
+ getRepo: function () {
+ return this._REPO;
+ },
+ setCanvasForIdentifier: function (canvas, identifier) {
+ var repo = this.getRepo();
+ if (!repo[identifier]) {
+ repo[identifier] = {
+ canvas: null,
+ users: []
+ };
+ }
+ repo[identifier].canvas = canvas;
+ return repo[identifier];
+ },
+ getCanvasByIdentifier: function (identifier) {
+ var repo = this.getRepo();
+ if (!repo[identifier]) {
+ return null;
+ }
+
+ return repo[identifier].canvas;
+ },
+ getRemote: function (param) {
+ var obj = {
+ __className: this._CLASSNAME
+ };
+ if (param) {
+ for (var key in param) {
+ obj[key] = param[key];
+ }
+ }
+ return new MetaworksObject(obj, 'body');
+ },
+ /**
+ * 서버로부터 온 Json User 객체를 OG.handler.RemoteUser 로 변환한다.
+ *
+ * @param serverUser Object
+ * @return OG.handler.RemoteUser
+ */
+ convertRemoteUser: function (serverUser) {
+ var remoteUser = new OG.handler.RemoteUser();
+ remoteUser.setKey(serverUser['key']);
+ remoteUser.setName(serverUser['name']);
+ remoteUser.setSessionId(serverUser['sessionId']);
+ remoteUser.setIsMaster(serverUser['isMaster']);
+ remoteUser.setEditable(serverUser['editable']);
+ return remoteUser;
+ },
+ /**
+ * 사용된 메타웍스 오브젝트를 제거한다.
+ * 브라우저 가비지 제거
+ *
+ * @param remote MetaworksObject
+ *
+ */
+ closeRemote: function (remote) {
+ var objectId = remote.__objectId;
+ $('#objDiv_' + objectId).remove();
+ delete mw3.objects[objectId];
+ },
+ getCanvasId: function (canvas) {
+ return canvas._CONTAINER.id;
+ },
+
+ /**
+ * 캔버스를 리모트모드로 변경한다.
+ *
+ * @param canvas 캔버스
+ * @param identifier 리모트그룹 식별자
+ * @param user OG.handler.RemoteUser 유저
+ * @param callback Callback
+ *
+ * @return callback(OG.handler.RemoteUser) 서버 등록 후 갱신된 유저
+ *
+ */
+ startRemote: function (canvas, identifier, user, callback) {
+ var me = this;
+ if (!canvas || !identifier || !user) {
+ return;
+ }
+ if (!user.key || !user.name) {
+ return;
+ }
+ canvas.setRemotable(true);
+ canvas.setIdentifier(identifier);
+ me.setCanvasForIdentifier(canvas, identifier);
+
+ me.registeToServer(identifier, user, function (user) {
+ callback(user);
+ });
+ },
+ /**
+ * 현재 자신의 세션아이디를 구한다.
+ *
+ * @param callback Callback
+ *
+ * @return callback(String sessionId) sessionId
+ *
+ */
+ getSelfSession: function (callback) {
+ if (this._SESSIONID) {
+ callback(this._SESSIONID);
+ return;
+ }
+ var me = this;
+ var remote = this.getRemote();
+ var objectId = remote.__objectId;
+ remote.selfSession(null, function () {
+ var sessionId = mw3.objects[objectId]['currentSessionId'];
+ me.closeRemote(remote);
+
+ if (sessionId) {
+ me._SESSIONID = sessionId;
+ }
+ callback(sessionId);
+ });
+ },
+ /**
+ * 서버에 현재 사용자를 등록한다.
+ *
+ * @param identifier 리모트그룹 식별자
+ * @param user OG.handler.RemoteUser 유저
+ * @param callback Callback
+ *
+ * @return callback(OG.handler.RemoteUser) 등록된 유저
+ *
+ */
+ registeToServer: function (identifier, user, callback) {
+
+ var me = this, result;
+ var remote = this.getRemote({
+ identifier: identifier,
+ remoteUser: me.encodeJson(user)
+ });
+ var objectId = remote.__objectId;
+ remote.registe(null, function (value) {
+
+ result = mw3.objects[objectId];
+ me.closeRemote(remote);
+ var remoteUser = me.convertRemoteUser(JSON.parse(result['remoteUser']));
+ callback(remoteUser);
+ })
+ },
+
+ /**
+ * From Server.
+ * 주어진 캔바스의 유저 목록을 업데이트한다.
+ *
+ * @param data identifier, 유저목록 remoteUsers
+ *
+ */
+ updateRemoteUser: function (data) {
+ var me = this;
+ var parse = JSON.parse(data);
+ var identifier = parse.identifier;
+ var remoteServerUsers = parse.remoteUsers;
+
+ if (!this.getRepo()[identifier]) {
+ return;
+ }
+
+ var remoteUsers = [];
+ var canvas = this.getCanvasByIdentifier(identifier);
+ this.getSelfSession(function (sessionId) {
+ $.each(remoteServerUsers, function (index, serverUser) {
+ if (serverUser.sessionId && serverUser.sessionId == sessionId) {
+ canvas.setRemoteEditable(serverUser.editable);
+ canvas.setRemoteIsMaster(serverUser.isMaster);
+
+ $(canvas.getRootElement()).trigger('remoteStatusUpdated', [serverUser]);
+ }
+ if (serverUser.isMaster) {
+ remoteUsers.push(me.convertRemoteUser(serverUser));
+ }
+ });
+ $.each(remoteServerUsers, function (index, serverUser) {
+ if (!serverUser.isMaster) {
+ remoteUsers.push(me.convertRemoteUser(serverUser));
+ }
+ });
+ me.getRepo()[identifier]['users'] = remoteUsers;
+
+
+ var canvasDiv = $('#' + me.getCanvasId(canvas));
+ canvasDiv.find('.userPanel').remove();
+ var userPanel = $('
');
+ userPanel.css({
+ position: 'absolute',
+ top: '0px',
+ left: '0px'
+ });
+ canvasDiv.append(userPanel);
+ $.each(remoteUsers, function (index, remoteUser) {
+ var userDiv = $('');
+ if (remoteUser.isMaster) {
+ userDiv.append('' + remoteUser.getName() + ' (Master)');
+ } else {
+ userDiv.append('' + remoteUser.getName() + ' ');
+
+ if (canvas.getRemoteIsMaster()) {
+ var controller;
+ if (!remoteUser.editable) {
+ controller = $('');
+ controller.data('identifier', identifier);
+ controller.data('mode', 'readonly');
+ controller.data('user', remoteUser);
+ } else {
+ controller = $('');
+ controller.data('identifier', identifier);
+ controller.data('mode', 'editable');
+ controller.data('user', remoteUser);
+ }
+ userDiv.append(controller);
+
+ controller.click(function () {
+ var clickedIdentifier = $(this).data('identifier');
+ var clickedMode = $(this).data('mode');
+ var user = $(this).data('user');
+ if (clickedMode === 'readonly') {
+ user.setEditable(true);
+ } else {
+ user.setEditable(false);
+ }
+ me.updateUserState(clickedIdentifier, user, function () {
+
+ });
+ });
+ }
+ }
+ userPanel.append(userDiv);
+ });
+ });
+ },
+
+ /**
+ * 서버에 사용자 상태를 업데이트시킨다.
+ *
+ * @param identifier 리모트그룹 식별자
+ * @param user OG.handler.RemoteUser 유저
+ * @param callback Callback
+ *
+ * @return callback(OG.handler.RemoteUser) 변경된 유저
+ *
+ */
+ updateUserState: function (identifier, user, callback) {
+
+ var me = this, result;
+ var remote = this.getRemote({
+ identifier: identifier,
+ remoteUser: me.encodeJson(user)
+ });
+ var objectId = remote.__objectId;
+ remote.updateUserState(null, function () {
+
+ result = mw3.objects[objectId];
+ me.closeRemote(remote);
+ var remoteUser = me.convertRemoteUser(JSON.parse(result['remoteUser']));
+ callback(remoteUser);
+ })
+ },
+
+ /**
+ * From Server.
+ * 주어진 캔버스를 업데이트한다.
+ *
+ * @param data identifier, canvasJsonString
+ *
+ */
+ updateCanvas: function (data) {
+ var parse = JSON.parse(data);
+ var identifier = parse.identifier;
+ var canvasData = parse.canvasData;
+
+ var canvas = this.getCanvasByIdentifier(identifier);
+ if (!canvas || !canvas.getRemotable()) {
+ return;
+ }
+ canvas.setRemoteDuring(true);
+ canvas.loadJSON(canvasData);
+ canvas.setRemoteDuring(false);
+ $(canvas.getRootElement()).trigger('updateCanvas', [canvasData]);
+ },
+
+ /**
+ * To Server.
+ * 주어진 캔바스를 브로드캐스팅한다.
+ *
+ * @param OG.graph.Canvas canvas
+ * @param callback Callback
+ *
+ * @return callback(OG.graph.Canvas) canvas
+ */
+ broadCastCanvas: function (canvas, callback) {
+ if (!canvas.getRemotable()) {
+ callback(null);
+ return;
+ }
+ if (!canvas.getRemoteEditable()) {
+ callback(null);
+ return;
+ }
+
+ var identifier = canvas.getIdentifier();
+ var me = this, result;
+ var remote = this.getRemote({
+ identifier: identifier,
+ canvasData: me.encodeJson(canvas.toJSON())
+ });
+ var objectId = remote.__objectId;
+ remote.broadCastCanvas(null, function () {
+ result = mw3.objects[objectId];
+ me.closeRemote(remote);
+ callback(canvas);
+ })
+ },
+ /**
+ * To Server.
+ * 주어진 리모트그룹에 사용자가 종료하였음을 알린다.
+ *
+ * @param identifier 리모트그룹 식별자
+ * @param callback Callback
+ *
+ */
+ remoteExit: function (identifier, callback) {
+
+ var me = this, result;
+ var remote = this.getRemote({
+ identifier: identifier
+ });
+ var objectId = remote.__objectId;
+ remote.remoteUserExited(null, function () {
+ result = mw3.objects[objectId];
+ me.closeRemote(remote);
+ callback(null);
+ })
+ },
+ /**
+ * Scheduler, To Server.
+ *
+ * 브라우저의 재종료 없이 캔버스가 삭제되었을 경우
+ * 관련 캐쉬를 삭제하고 서버에 사용자가 종료되었음을 알린다.
+ *
+ */
+ checkExpiredRemoteCanvas: function () {
+ if (this._SCHEDULER) {
+ return;
+ }
+
+ var me = this, repo, identifier, canvas;
+ this._SCHEDULER = setInterval(function () {
+ repo = me.getRepo();
+ for (identifier in repo) {
+ canvas = repo[identifier].canvas;
+ if (canvas && me.getCanvasId(canvas) && $('#' + me.getCanvasId(canvas)).length) {
+ return;
+ }
+ delete repo[identifier];
+ me.remoteExit(identifier, function () {
+ });
+ }
+ }, 1000
+ );
+ }
+};
+OG.handler.RemoteHandler.prototype.constructor = OG.handler.RemoteHandler;
+OG.RemoteHandler = new OG.handler.RemoteHandler();
+OG.RemoteHandler.checkExpiredRemoteCanvas();
+
+/**
+ * OpenGraph 캔버스 클래스
+ *
+ * @class
+ * @requires OG.common.*
+ * @requires OG.geometry.*
+ * @requires OG.shape.*
+ * @requires OG.renderer.*
+ * @requires OG.handler.*
+ * @requires OG.layout.*
+ * @requires raphael-2.1.0
+ *
+ * @example
+ * var canvas = new OG.Canvas('canvas', [1000, 800], 'white', 'url(./images/grid.gif)');
+ *
+ * var circleShape = canvas.drawShape([100, 100], new OG.CircleShape(), [100, 100]);
+ * var ellipseShape = canvas.drawShape([300, 200], new OG.EllipseShape('label'), [100, 50]);
+ *
+ * var edge = canvas.connect(circleShape, ellipseShape);
+ *
+ * @param {HTMLElement|String} container 컨테이너 DOM element or ID
+ * @param {Number[]} containerSize 컨테이너 Width, Height
+ * @param {String} backgroundColor 캔버스 배경색
+ * @param {String} backgroundImage 캔버스 배경이미지
+ * @author Seungpil Park
+ */
+OG.graph.Canvas = function (container, containerSize, backgroundColor, backgroundImage) {
+
+ this._CONFIG = {
+
+ /**
+ * 트랙패드 허용
+ */
+ ENABLE_TRACKPAD: false,
+ /**
+ * 풀, 래인 도형의 드랍시 자동 위치 조정 기능
+ */
+ POOL_DROP_EVENT: false,
+ /**
+ * 도형, 스팟 이동시 이웃한 도형에 대해 자동보정이 이루어지는 여부.
+ */
+ AUTOMATIC_GUIDANCE: true,
+ /**
+ * 선연결을 클릭하였을때만 변곡점 변경 가능 여부
+ */
+ SPOT_ON_SELECT: false,
+
+ /**
+ * 백도어
+ */
+ BACKDOOR: {
+ url: null,
+ scale: 100,
+ opacity: 1,
+ width: null,
+ height: null,
+ container: null,
+ container_updated: false
+ },
+ /**
+ * 빠른 로딩
+ */
+ FAST_LOADING: false,
+ /**
+ * 자동 슬라이더 업데이트 여부
+ */
+ AUTO_SLIDER_UPDATE: true,
+ /**
+ * 자동 히스토리 저장
+ */
+ AUTO_HISTORY: false,
+ /**
+ * 마우스 휠 스케일 변경 여부
+ */
+ WHEEL_SCALABLE: false,
+ /**
+ * 마우스 드래그 페이지 이동 가능 여부
+ */
+ DRAG_PAGE_MOVABLE: false,
+ /**
+ * 도형 선택시 캔버스 포거싱 여부
+ */
+ FOCUS_CANVAS_ONSELECT: true,
+ /**
+ * 연결된 두 오브젝트의 소속에 따른 연결선 스타일 변화 여부
+ */
+ CHECK_BRIDGE_EDGE: true,
+ /**
+ * 스틱 가이드 생성 여부
+ */
+ STICK_GUIDE: true,
+ /**
+ * 슬라이더
+ */
+ SLIDER: null,
+ /**
+ * 서버 수신 데이터 처리중
+ */
+ REMOTE_PERFORMED_DURING: false,
+ /**
+ * 리모트 데피니션
+ */
+ REMOTE_IDENTIFIER: null,
+ /**
+ * 리모트 모드
+ */
+ REMOTEABLE: false,
+ /**
+ * 리모트 모드 수정권한
+ */
+ REMOTE_EDITABLE: false,
+ /**
+ * 리모트 모드 마스터모드
+ */
+ REMOTE_ISMASTER: false,
+ /**
+ * 히스토리 인덱스
+ */
+ HISTORY_INDEX: 0,
+ /**
+ * 히스토리 저장소
+ */
+ HISTORY: [],
+ /**
+ * 히스토리 저장 횟수
+ */
+ HISTORY_SIZE: 100,
+
+ /**
+ * 클릭선택 가능여부
+ */
+ SELECTABLE: true,
+
+ /**
+ * 마우스드래그선택 가능여부
+ */
+ DRAG_SELECTABLE: true,
+
+ /**
+ * 이동 가능여부
+ */
+ MOVABLE: true,
+ MOVABLE_: {
+ GEOM: true,
+ TEXT: true,
+ HTML: true,
+ IMAGE: true,
+ EDGE: true,
+ GROUP: true
+ }
+ ,
+
+ /**
+ * 리사이즈 가능여부
+ */
+ RESIZE_CANVAS_MARGIN: 5,
+ RESIZABLE: true,
+ RESIZABLE_: {
+ GEOM: true,
+ TEXT: true,
+ HTML: true,
+ IMAGE: true,
+ EDGE: true,
+ GROUP: true
+ }
+ ,
+
+ /**
+ * 연결 가능여부
+ */
+ CONNECTABLE: true,
+
+ /**
+ * Self 연결 가능여부
+ */
+ SELF_CONNECTABLE: true,
+
+ /**
+ * 가이드에 자기자신을 복사하는 컨트롤러 여부.
+ */
+ CONNECT_CLONEABLE: true,
+
+ /**
+ * 드래그하여 연결시 그룹을 건너뛸때 스타일 변경 여부
+ */
+ CONNECT_STYLE_CHANGE: true,
+ CONNECT_STYLE_CHANGE_: {
+ GEOM: true,
+ TEXT: true,
+ HTML: true,
+ IMAGE: true,
+ EDGE: true,
+ GROUP: true
+ }
+ ,
+
+ /**
+ * 가이드에 삭제 컨트롤러 여부
+ */
+ DELETABLE: true,
+ DELETABLE_: {
+ GEOM: true,
+ TEXT: true,
+ HTML: true,
+ IMAGE: true,
+ EDGE: true,
+ GROUP: true
+ }
+ ,
+
+ /**
+ * 라벨 수정여부
+ */
+ LABEL_EDITABLE: true,
+ LABEL_EDITABLE_: {
+ GEOM: true,
+ TEXT: true,
+ HTML: true,
+ IMAGE: true,
+ EDGE: true,
+ GROUP: true
+ }
+ ,
+
+ /**
+ * 그룹핑 가능여부
+ */
+ GROUP_DROPABLE: true,
+
+ /**
+ * 이동, 리사이즈 드래그시 MOVE_SNAP_SIZE 적용 여부
+ */
+ DRAG_GRIDABLE: true,
+
+ /**
+ * 핫키 가능여부
+ */
+ ENABLE_HOTKEY: true,
+
+ /**
+ * 핫키 : UNDO REDO 키 가능여부
+ */
+ ENABLE_HOTKEY_CTRL_Z: true,
+
+ /**
+ * 핫키 : DELETE 삭제 키 가능여부
+ */
+ ENABLE_HOTKEY_DELETE: false,
+
+ /**
+ * 핫키 : Ctrl+A 전체선택 키 가능여부
+ */
+ ENABLE_HOTKEY_CTRL_A: true,
+
+ /**
+ * 핫키 : Ctrl+C 복사 키 가능여부
+ */
+ ENABLE_HOTKEY_CTRL_C: false,
+
+ /**
+ * 핫키 : Ctrl+V 붙여넣기 키 가능여부
+ */
+ ENABLE_HOTKEY_CTRL_V: false,
+
+ /**
+ * 핫키 : Ctrl+D 복제하기 키 가능여부
+ */
+ ENABLE_HOTKEY_CTRL_D: true,
+
+ /**
+ * 핫키 : Ctrl+G 그룹 키 가능여부
+ */
+ ENABLE_HOTKEY_CTRL_G: true,
+
+ /**
+ * 핫키 : Ctrl+U 언그룹 키 가능여부
+ */
+ ENABLE_HOTKEY_CTRL_U: true,
+
+ /**
+ * 핫키 : 방향키 가능여부
+ */
+ ENABLE_HOTKEY_ARROW: true,
+
+ /**
+ * 핫키 : Shift + 방향키 가능여부
+ */
+ ENABLE_HOTKEY_SHIFT_ARROW: true,
+
+ /**
+ * 마우스 우클릭 메뉴 가능여부
+ */
+ ENABLE_CONTEXTMENU: true,
+
+ /**
+ * 루트 컨텍스트 메뉴 가능여부
+ */
+ ENABLE_ROOT_CONTEXTMENU: true,
+
+ /**
+ * 캔버스 스케일(리얼 사이즈 : Scale = 1)
+ */
+ SCALE: 1,
+
+ /**
+ * 캔버스 최소 스케일
+ */
+ SCALE_MIN: 0.1,
+
+ /**
+ * 캔버스 최대 스케일
+ */
+ SCALE_MAX: 10,
+
+ /**
+ * Edge 꺽은선 패딩 사이즈
+ */
+ EDGE_PADDING: 20,
+
+ /**
+ * 라벨의 패딩 사이즈
+ */
+ LABEL_PADDING: 5,
+
+ /**
+ * 라벨 에디터(textarea)의 디폴트 width
+ */
+ LABEL_EDITOR_WIDTH: 500,
+
+ /**
+ * 라벨 에디터(textarea)의 디폴트 height
+ */
+ LABEL_EDITOR_HEIGHT: 16,
+
+ /**
+ * 시작, 끝점 라벨의 offsetTop 값
+ */
+ FROMTO_LABEL_OFFSET_TOP: 15,
+
+ /**
+ * Move & Resize 용 가이드 선 콘트롤 Rect 사이즈
+ */
+ GUIDE_LINE_SIZE: 20,
+ /**
+ * Move & Resize 용 가이드 선 콘트롤 마진 사이즈
+ */
+ GUIDE_LINE_MARGIN: 10,
+
+ /**
+ * Move & Resize 용 가이드 콘트롤 Rect 사이즈
+ */
+ GUIDE_RECT_SIZE: 8,
+
+ /**
+ * Move & Resize 용 가이드 가로, 세로 최소 사이즈
+ */
+ GUIDE_MIN_SIZE: 18,
+
+ /**
+ * 도형 컨트롤러 아이콘 커넥트 라인 표시 개수
+ */
+ GUIDE_CONTROL_LINE_NUM: 2,
+
+ /**
+ * Collapse & Expand 용 가이드 Rect 사이즈
+ */
+ COLLAPSE_SIZE: 10,
+
+ /**
+ * Shape Move & Resize 시 이동 간격
+ */
+ MOVE_SNAP_SIZE: 8,
+
+ /**
+ * 터미널 cross 사이즈
+ */
+ TERMINAL_SIZE: 5,
+
+ /**
+ * Shape 복사시 패딩 사이즈
+ */
+ COPY_PASTE_PADDING: 20,
+
+ /**
+ * Fit Canvas 시 패딩 사이즈
+ */
+ FIT_CANVAS_PADDING: 20,
+
+ /**
+ * 캔버스 영역 자동 확장 여부
+ */
+ AUTO_EXTENSIONAL: true,
+
+ /**
+ * 캔버스 영역 자동 확장시 증가 사이즈
+ */
+ AUTO_EXTENSION_SIZE: 100,
+
+ /**
+ * 캔버스 배경색
+ */
+ CANVAS_BACKGROUND: "#f9f9f9",
+
+ /**
+ * 이미지 베이스 패스
+ */
+ IMAGE_BASE: 'https://raw.githubusercontent.com/kimsanghoon1/k8s-UI/master/public/static/images/symbol/',
+
+ /**
+ * 이미지 url 정보
+ */
+ IMAGE_USER: "http://processcodi.com/images/opengraph/User.png",
+ IMAGE_SEND: "http://processcodi.com/images/opengraph/Send.png",
+ IMAGE_RECEIVE: "http://processcodi.com/images/opengraph/Receive.png",
+ IMAGE_MANUAL: "http://processcodi.com/images/opengraph/Manual.png",
+ IMAGE_SERVICE: "http://processcodi.com/images/opengraph/Service.png",
+ IMAGE_RULE: "http://processcodi.com/images/opengraph/BusinessRule.png",
+ IMAGE_SCRIPT: "http://processcodi.com/images/opengraph/Script.png",
+ IMAGE_MAPPER: "http://processcodi.com/images/opengraph/mapper.png",
+ IMAGE_WEB: "http://processcodi.com/images/opengraph/w_services.png",
+
+ /**
+ * Edge 선 자동마춤 각도 최소값
+ */
+ TRIM_EDGE_ANGLE_SIZE: 170,
+ /**
+ * Edge 선 이동딜레이 거리
+ */
+ EDGE_MOVE_DELAY_SIZE: 14,
+
+ /**
+ * swimLane 리사이즈 최소 폭
+ */
+ LANE_MIN_SIZE: 50,
+
+ /**
+ * swimLane 확장 기본 폭
+ */
+ LANE_DEFAULT_SIZE: 100,
+
+ /**
+ * swimLane, pool 생성 기본 가로,세로
+ */
+ POOL_DEFAULT_SIZE: [300, 200],
+
+ /**
+ * 그룹 하위 shape 와 그룹사이의 여유폭
+ */
+ GROUP_INNER_SAPCE: 10,
+
+ /**
+ * 라벨 최소 크기(IE)
+ */
+ LABEL_MIN_SIZE: 0,
+
+ /**
+ * 라벨 최대 크기(IE)
+ */
+ LABEL_MAX_SIZE: 1000,
+
+ /**
+ * 디폴트 스타일 정의
+ */
+ DEFAULT_STYLE: {
+ SHAPE: {
+ cursor: "default"
+ }
+ ,
+ GEOM: {
+ stroke: "black",
+ "fill-r": ".5",
+ "fill-cx": ".5",
+ "fill-cy": ".5",
+ fill: "white",
+ "fill-opacity": 0,
+ "label-position": "center"
+ }
+ ,
+ TEXT: {
+ stroke: "none", "text-anchor": "middle"
+ }
+ ,
+ HTML: {
+ "label-position": "bottom", "text-anchor": "middle", "vertical-align": "top"
+ }
+ ,
+ IMAGE: {
+ "label-position": "bottom", "text-anchor": "middle", "vertical-align": "top"
+ },
+ SVG: {
+ "label-position": "bottom", "text-anchor": "middle", "vertical-align": "top"
+ }
+ ,
+ EDGE: {
+ stroke: "black",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 1.5,
+ "stroke-opacity": 1,
+ "edge-type": "plain",
+ "arrow-start": "none",
+ "arrow-end": "block",
+ "stroke-dasharray": "",
+ "label-position": "center",
+ "stroke-linejoin": "round",
+ cursor: "pointer"
+ }
+ ,
+ EDGE_SHADOW: {
+ stroke: "#00FF00",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 1,
+ "stroke-opacity": 1,
+ "arrow-start": "none",
+ "arrow-end": "none",
+ "stroke-dasharray": "- ",
+ "edge-type": "plain",
+ cursor: "pointer"
+ }
+ ,
+ EDGE_HIDDEN: {
+ stroke: "white",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 10,
+ "stroke-opacity": 0,
+ cursor: "pointer"
+ }
+ ,
+ GROUP: {
+ stroke: "black",
+ fill: "none",
+ "fill-opacity": 0,
+ "label-position": "bottom",
+ "text-anchor": "middle",
+ "vertical-align": "top"
+ }
+ ,
+ GROUP_HIDDEN: {
+ stroke: "black", fill: "white", "fill-opacity": 0, "stroke-opacity": 0, cursor: "move"
+ }
+ ,
+ GROUP_SHADOW: {
+ stroke: "white",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 15,
+ "stroke-opacity": 0,
+ cursor: "pointer"
+ }
+ ,
+ GROUP_SHADOW_MAPPER: {
+ stroke: "white",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 1,
+ "stroke-opacity": 0,
+ cursor: "pointer"
+ }
+ ,
+ GUIDE_BBOX: {
+ stroke: "#00FF00",
+ fill: "white",
+ "fill-opacity": 0,
+ "stroke-dasharray": "- ",
+ "shape-rendering": "crispEdges",
+ cursor: "move"
+ }
+ ,
+ GUIDE_UL: {
+ stroke: "#03689a",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "nwse-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_UR: {
+ stroke: "#03689a",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "nesw-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_LL: {
+ stroke: "#03689a",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "nesw-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_LR: {
+ stroke: "#03689a",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "nwse-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_LC: {
+ stroke: "#03689a",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "ew-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_UC: {
+ stroke: "black",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "ns-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_RC: {
+ stroke: "black",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "ew-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_LWC: {
+ stroke: "black",
+ fill: "#03689a",
+ "fill-opacity": 0.5,
+ cursor: "ns-resize",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_FROM: {
+ stroke: "black", fill: "#00FF00", cursor: "move", "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_TO: {
+ stroke: "black", fill: "#00FF00", cursor: "move", "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_CTL_H: {
+ stroke: "black", fill: "#00FF00", cursor: "ew-resize", "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_CTL_V: {
+ stroke: "black", fill: "#00FF00", cursor: "ns-resize", "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_SHADOW: {
+ stroke: "black", fill: "none", "stroke-dasharray": "- ", "shape-rendering": "crispEdges"
+ }
+ ,
+ GUIDE_LINE: {
+ stroke: "black",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 1.2,
+ "stroke-opacity": 1,
+ "stroke-dasharray": "",
+ "arrow-end": "block",
+ "stroke-linejoin": "round",
+ cursor: "pointer"
+ }
+ ,
+ GUIDE_LINE_ESSENSIA: {
+ stroke: "black",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 1.2,
+ "stroke-opacity": 1,
+ "stroke-dasharray": "",
+ "arrow-start": "diamond",
+ "arrow-end": "none",
+ "stroke-linejoin": "round",
+ cursor: "pointer"
+ }
+ ,
+ GUIDE_VIRTUAL_EDGE: {
+ stroke: "black",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 1,
+ "stroke-opacity": 1,
+ "stroke-dasharray": "- ",
+ "stroke-linejoin": "round",
+ "arrow-start": "none",
+ "arrow-end": "none"
+ }
+ ,
+ GUIDE_LINE_AREA: {
+ stroke: "#ffffff",
+ fill: "#ffffff",
+ "fill-opacity": 0.1,
+ "stroke-width": 1,
+ "stroke-opacity": 0.2,
+ cursor: "pointer"
+ }
+ ,
+ GUIDE_RECT_AREA: {
+ stroke: "black",
+ fill: "#ffffff",
+ "fill-opacity": 0,
+ "stroke-width": 1,
+ "stroke-opacity": 1,
+ cursor: "pointer"
+ }
+ ,
+ RUBBER_BAND: {
+ stroke: "#0000FF", opacity: 0.2, fill: "#0077FF"
+ }
+ ,
+ DROP_OVER_BBOX: {
+ stroke: "#0077FF", fill: "none", opacity: 0.3, "shape-rendering": "crispEdges"
+ }
+ ,
+ LABEL: {
+ "font-size": 12, "font-color": "black", "fill": "none"
+ }
+ ,
+ LABEL_EDITOR: {
+ position: "absolute",
+ overflow: "visible",
+ resize: "none",
+ "text-align": "center",
+ display: "block",
+ padding: 0
+ }
+ ,
+ COLLAPSE: {
+ stroke: "black",
+ fill: "none",
+ "fill-opacity": 0,
+ cursor: "pointer",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ COLLAPSE_BBOX: {
+ stroke: "none", fill: "none", "fill-opacity": 0
+ }
+ ,
+ BUTTON: {
+ stroke: "#9FD7FF",
+ fill: "white",
+ "fill-opacity": 0,
+ cursor: "pointer",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ CONNECT_GUIDE_EVENT_AREA: {
+ stroke: "#ffffff",
+ fill: "none",
+ "fill-opacity": 0,
+ "stroke-width": 20,
+ "stroke-opacity": 0
+ }
+ ,
+ CONNECT_GUIDE_BBOX: {
+ stroke: "#00FF00",
+ fill: "none",
+ "stroke-dasharray": "- ",
+ "shape-rendering": "crispEdges"
+ }
+ ,
+ CONNECT_GUIDE_BBOX_EXPEND: 10,
+ CONNECT_GUIDE_SPOT_CIRCLE: {
+ r: 7,
+ stroke: "#A6A6A6",
+ "stroke-width": 1,
+ fill: "#FFE400",
+ "fill-opacity": 0.5,
+ cursor: "pointer"
+ }
+ ,
+ CONNECT_GUIDE_SPOT_RECT: {
+ stroke: "#A6A6A6",
+ "stroke-width": 1,
+ fill: "#FFE400",
+ "fill-opacity": 0.2,
+ cursor: "ns-resize",
+ w: 20,
+ h: 10
+ }
+ ,
+ CONNECTABLE_HIGHLIGHT: {
+ "stroke-width": 2
+ }
+ ,
+ NOT_CONNECTABLE_HIGHLIGHT: {
+ fill: "#FAAFBE",
+ "fill-opacity": 0.5
+ }
+ }
+ };
+
+ this._RENDERER = container ? new OG.RaphaelRenderer(container, containerSize, backgroundColor, backgroundImage, this._CONFIG) : null;
+ this._RENDERER._CANVAS = this;
+ this._HANDLER = new OG.EventHandler(this._RENDERER, this._CONFIG);
+ this._CONTAINER = OG.Util.isElement(container) ? container : document.getElementById(container);
+}
+;
+
+OG.graph.Canvas.prototype = {
+
+ //me._CONFIG.WHEEL_SCALABLE
+
+ fastLoadingON: function () {
+ this._CONFIG.FAST_LOADING = true;
+ // this._CONFIG.AUTO_SLIDER_UPDATE = false;
+ // this._CONFIG.AUTO_HISTORY = false;
+ },
+ fastLoadingOFF: function () {
+ this._CONFIG.FAST_LOADING = false;
+ // this._CONFIG.AUTO_SLIDER_UPDATE = true;
+ // this._CONFIG.AUTO_HISTORY = true;
+ this.updateSlider();
+ },
+ getEventHandler: function () {
+ return this._HANDLER;
+ },
+ setRemoteDuring: function (during) {
+ this._CONFIG.REMOTE_PERFORMED_DURING = during;
+ },
+ getRemoteDuring: function () {
+ return this._CONFIG.REMOTE_PERFORMED_DURING;
+ },
+ setIdentifier: function (identifier) {
+ this._CONFIG.REMOTE_IDENTIFIER = identifier;
+ },
+ getIdentifier: function () {
+ return this._CONFIG.REMOTE_IDENTIFIER;
+ },
+ getRemotable: function () {
+ return this._CONFIG.REMOTEABLE;
+ },
+ setRemotable: function (remotable) {
+ this._CONFIG.REMOTEABLE = remotable;
+ },
+ setRemoteEditable: function (editable) {
+ this._CONFIG.REMOTE_EDITABLE = editable;
+ },
+ getRemoteEditable: function () {
+ return this._CONFIG.REMOTE_EDITABLE;
+ },
+ setRemoteIsMaster: function (isMaster) {
+ this._CONFIG.REMOTE_ISMASTER = isMaster;
+ },
+ getRemoteIsMaster: function () {
+ return this._CONFIG.REMOTE_ISMASTER;
+ },
+ setCurrentCanvas: function (canvas) {
+ this._RENDERER.setCanvas(canvas);
+ },
+ /**
+ * Canvas 의 설정값을 초기화한다.
+ *
+ *
+ * - selectable : 클릭선택 가능여부(디폴트 true)
+ * - dragSelectable : 마우스드래그선택 가능여부(디폴트 true)
+ * - movable : 이동 가능여부(디폴트 true)
+ * - resizable : 리사이즈 가능여부(디폴트 true)
+ * - connectable : 연결 가능여부(디폴트 true)
+ * - selfConnectable : Self 연결 가능여부(디폴트 true)
+ * - connectCloneable : 드래그하여 연결시 대상 없을 경우 자동으로 Shape 복사하여 연결 처리 여부(디폴트 true)
+ * - labelEditable : 라벨 수정여부(디폴트 true)
+ * - groupDropable : 그룹핑 가능여부(디폴트 true)
+ * - enableHotKey : 핫키 가능여부(디폴트 true)
+ * - enableContextMenu : 마우스 우클릭 메뉴 가능여부(디폴트 true)
+ * - autoExtensional : 캔버스 자동 확장 기능(디폴트 true)
+ * - useSlider : 확대축소 슬라이더 사용 여부
+ * - stickGuide : 스틱 가이드 표시 여부
+ * - checkBridgeEdge : 연결된 두 오브젝트의 소속에 따른 연결선 스타일 변화 여부
+ *
+ *
+ * @param {Object} config JSON 포맷의 configuration
+ */
+ initConfig: function (config) {
+ if (config) {
+ this._CONFIG.REMOTEABLE = config.remoteable === undefined ? this._CONFIG.REMOTEABLE : config.remoteable;
+ this._CONFIG.SELECTABLE = config.selectable === undefined ? this._CONFIG.SELECTABLE : config.selectable;
+ this._CONFIG.DRAG_SELECTABLE = config.dragSelectable === undefined ? this._CONFIG.DRAG_SELECTABLE : config.dragSelectable;
+ this._CONFIG.MOVABLE = config.movable === undefined ? this._CONFIG.MOVABLE : config.movable;
+ this._CONFIG.RESIZABLE = config.resizable === undefined ? this._CONFIG.RESIZABLE : config.resizable;
+ this._CONFIG.CONNECTABLE = config.connectable === undefined ? this._CONFIG.CONNECTABLE : config.connectable;
+ this._CONFIG.SELF_CONNECTABLE = config.selfConnectable === undefined ? this._CONFIG.SELF_CONNECTABLE : config.selfConnectable;
+ this._CONFIG.CONNECT_CLONEABLE = config.connectCloneable === undefined ? this._CONFIG.CONNECT_CLONEABLE : config.connectCloneable;
+ this._CONFIG.LABEL_EDITABLE = config.labelEditable === undefined ? this._CONFIG.LABEL_EDITABLE : config.labelEditable;
+ this._CONFIG.GROUP_DROPABLE = config.groupDropable === undefined ? this._CONFIG.GROUP_DROPABLE : config.groupDropable;
+ this._CONFIG.ENABLE_HOTKEY = config.enableHotKey === undefined ? this._CONFIG.ENABLE_HOTKEY : config.enableHotKey;
+ this._CONFIG.ENABLE_CONTEXTMENU = config.enableContextMenu === undefined ? this._CONFIG.ENABLE_CONTEXTMENU : config.enableContextMenu;
+ this._CONFIG.AUTO_EXTENSIONAL = config.autoExtensional === undefined ? this._CONFIG.AUTO_EXTENSIONAL : config.autoExtensional;
+ this._CONFIG.STICK_GUIDE = config.stickGuide === undefined ? this._CONFIG.STICK_GUIDE : config.stickGuide;
+ this._CONFIG.CHECK_BRIDGE_EDGE = config.checkBridgeEdge === undefined ? this._CONFIG.CHECK_BRIDGE_EDGE : config.checkBridgeEdge;
+ this._CONFIG.AUTO_HISTORY = config.autoHistory === undefined ? this._CONFIG.AUTO_HISTORY : config.autoHistory;
+ this._CONFIG.AUTO_SLIDER_UPDATE = config.autoSliderUpdate === undefined ? this._CONFIG.AUTO_SLIDER_UPDATE : config.autoSliderUpdate;
+ }
+
+ this._HANDLER.setDragSelectable(this._CONFIG.SELECTABLE && this._CONFIG.DRAG_SELECTABLE);
+ this._HANDLER.setWheelScale();
+ this._HANDLER.setDragPageMovable();
+ this._HANDLER.setEnableHotKey(this._CONFIG.ENABLE_HOTKEY);
+ if (this._CONFIG.ENABLE_CONTEXTMENU) {
+ if (this._CONFIG.ENABLE_ROOT_CONTEXTMENU) {
+ this._HANDLER.enableRootContextMenu();
+ }
+ this._HANDLER.enableShapeContextMenu();
+ }
+
+ this.CONFIG_INITIALIZED = true;
+ },
+
+ /**
+ * 랜더러를 반환한다.
+ *
+ * @return {OG.RaphaelRenderer}
+ */
+ getRenderer: function () {
+ return this._RENDERER;
+ },
+
+ /**
+ * 컨테이너 DOM element 를 반환한다.
+ *
+ * @return {HTMLElement}
+ */
+ getContainer: function () {
+ return this._CONTAINER;
+ },
+
+ /**
+ * 이벤트 핸들러를 반환한다.
+ *
+ * @return {OG.EventHandler}
+ */
+ getEventHandler: function () {
+ return this._HANDLER;
+ },
+
+ /**
+ * 백도어를 삽입한다.
+ * @param url
+ * @param scale
+ * @param opacity
+ */
+ addBackDoor: function (url, scale, opacity) {
+ var me = this;
+ var image = new Image();
+ image.src = url;
+ image.onload = function () {
+ var w = image.naturalWidth;
+ var h = image.naturalHeight;
+ me._CONFIG.BACKDOOR.url = url;
+ me._CONFIG.BACKDOOR.scale = scale ? scale : me._CONFIG.BACKDOOR.scale;
+ me._CONFIG.BACKDOOR.opacity = opacity ? opacity : me._CONFIG.BACKDOOR.opacity;
+ me._CONFIG.BACKDOOR.width = w;
+ me._CONFIG.BACKDOOR.height = h;
+ me._CONFIG.BACKDOOR.container_updated = true;
+
+ var container = me._CONTAINER;
+ var backdoorId = container.id + OG.Constants.BACKDOOR_SUFFIX;
+
+ //백도어 생성
+ var existBackdoor = $('#' + container.id).find('#' + backdoorId);
+ if (!existBackdoor || existBackdoor.length < 1) {
+ existBackdoor = $('![]()
');
+ existBackdoor.attr('id', backdoorId);
+ existBackdoor.css({
+ position: 'absolute',
+ top: '0px',
+ left: '0px'
+ });
+ $(me._RENDERER.getRootElement()).before(existBackdoor);
+ existBackdoor.attr('src', url);
+ } else {
+ existBackdoor.attr('src', url);
+ }
+ me._CONFIG.BACKDOOR.container = existBackdoor;
+
+ //최초에는 캔버스 크기를 조정해줌.
+ var canvasScale = me.getScale();
+ var canvasSize = me.getCanvasSize();
+ if (canvasSize[0] < w * (scale / 100) * canvasScale) {
+ canvasSize[0] = w * (scale / 100) * canvasScale;
+ }
+ if (canvasSize[1] < h * (scale / 100) * canvasScale) {
+ canvasSize[1] = h * (scale / 100) * canvasScale;
+ }
+ me.setCanvasSize(canvasSize);
+
+
+ //기존 캔버스의 백그라운드 속성 초기화
+ $(me._RENDERER._PAPER.canvas).css({
+ "background-color": "transparent"
+ });
+
+ me.updateBackDoor();
+ me.updateSlider();
+ };
+ },
+ updateBackDoor: function (scale, opacity) {
+ var me = this;
+ if (!me._CONFIG.BACKDOOR.container) {
+ return;
+ }
+ me._CONFIG.BACKDOOR.scale = scale ? scale : me._CONFIG.BACKDOOR.scale;
+ me._CONFIG.BACKDOOR.opacity = opacity ? opacity : me._CONFIG.BACKDOOR.opacity;
+ var backDoorScale = me._CONFIG.BACKDOOR.scale;
+ var backDoorOpacity = me._CONFIG.BACKDOOR.opacity;
+ var width = me._CONFIG.BACKDOOR.width;
+ var height = me._CONFIG.BACKDOOR.height;
+
+ var existBackdoor = me._CONFIG.BACKDOOR.container;
+ var canvasScale = me.getScale();
+
+ existBackdoor.width(width * (backDoorScale / 100) * canvasScale);
+ existBackdoor.height(height * (backDoorScale / 100) * canvasScale);
+ existBackdoor.css('opacity', backDoorOpacity);
+
+ //scale 값이 실제로 들어오면 캔버스 사이즈를 조정해준다.
+ if (scale) {
+ var canvasSize = me.getCanvasSize();
+ if (canvasSize[0] < width * (backDoorScale / 100) * canvasScale) {
+ canvasSize[0] = width * (backDoorScale / 100) * canvasScale;
+ }
+ if (canvasSize[1] < height * (backDoorScale / 100) * canvasScale) {
+ canvasSize[1] = height * (backDoorScale / 100) * canvasScale;
+ }
+ me.setCanvasSize(canvasSize);
+ me.updateSlider();
+ }
+ },
+
+ /**
+ * 확대 축소 슬라이더를 설치한다.
+ */
+ addSlider: function (option) {
+ var me = this;
+ var slider;
+ var sliderBarWrapper;
+ var sliderText;
+ var sliderBar;
+ var sliderImageWrapper;
+ var sliderImage;
+ var sliderNavigator;
+ var onNavigatorMove;
+ var sliderParent;
+ var expandBtn;
+ var container = me._CONTAINER;
+ console.log(container)
+ if (!option.slider) {
+ return;
+ }
+ if (!option.slider.length) {
+ return;
+ }
+ slider = option.slider;
+ slider.css({
+ width: option.width + 'px'
+ });
+
+
+ // slider.dialog({
+ // title: option.title ? option.title : "확대/축소",
+ // position: option.position ? option.position : {my: "right top", at: "right top", of: container},
+ // height: option.height ? option.height : 500,
+ // width: option.width ? option.width : 250,
+ // dialogClass: "no-close",
+ // appendTo: option.appendTo ? option.appendTo : '#' + container.id,
+ // resize: function (event, ui) {
+ // me.updateNavigatior();
+ // }
+ // }
+ // );
+
+ //클로즈버튼 이벤트를 collape,expand 이벤트로..
+ // sliderParent = slider.parent();
+ // expandBtn = sliderParent.find('.ui-dialog-titlebar-close');
+ // expandBtn.html('');
+ // expandBtn.append();
+ // expandBtn.unbind('click');
+ // expandBtn.bind('click', function () {
+ // //접혀있는 상태라면
+ // if ($(this).data('collape')) {
+ // var height = $(this).data('collape');
+ // sliderParent.height(height);
+ // slider.show();
+ // $(this).data('collape', false);
+ // }
+ // //접혀있지 않은 상태라면
+ // else {
+ // $(this).data('collape', sliderParent.height());
+ // slider.hide();
+ // sliderParent.height(40);
+ // }
+ // });
+
+ sliderBarWrapper = $('');
+ sliderBarWrapper.css({
+ position: 'relative',
+ width: '100%'
+ });
+
+ sliderText = $('');
+ sliderBar = $('');
+ sliderBar.bind('change', function () {
+ me.updateSlider($(this).val());
+ });
+ sliderBar.bind('input', function () {
+ me.updateSlider($(this).val());
+ });
+ sliderBar.css({
+ position: 'relative',
+ //'writing-mode': 'bt-lr', /* IE */
+ 'width': '100%',
+ 'height': '8px'
+ });
+
+ // sliderImageWrapper = $('');
+ // sliderImageWrapper.css({
+ // position: 'absolute',
+ // top: '50px',
+ // bottom: '5px',
+ // left: '5px',
+ // right: '5px',
+ // 'overflow-x': 'hidden',
+ // 'overflow-y': 'auto',
+ // 'background': 'black'
+ // });
+
+ sliderImage = $('');
+ sliderImage.css({
+ position: 'absolute',
+ top: '0px',
+ left: '0px'
+ });
+ sliderImage.attr("width", "100%");
+ console.log(container.id)
+ sliderImage.attr('id', container.id + 'sliderImage');
+
+
+ sliderNavigator = $('');
+ sliderNavigator.css({
+ position: 'absolute',
+ top: '0px',
+ left: '0px',
+ width: '100px',
+ height: '100px',
+ background: 'transparent'
+ });
+
+ //네비게이터가 이동되었을경우의 이벤트
+ onNavigatorMove = function () {
+ var svg, svgW, svgH, imgW, imgH, xRate, yRate, xOffset, yOffset, sliderX, sliderY;
+ svg = me._RENDERER.getRootElement();
+ imgW = sliderImage.width();
+ imgH = sliderImage.height();
+ svgW = $(svg).attr('width');
+ svgH = $(svg).attr('height');
+ xRate = imgW / svgW;
+ yRate = imgH / svgH;
+ if (xRate > 1) {
+ xRate = 1;
+ }
+ if (yRate > 1) {
+ yRate = 1;
+ }
+ xOffset = sliderNavigator.offset().left - sliderImage.offset().left;
+ if (xOffset < 0) {
+ xOffset = 0;
+ }
+ yOffset = sliderNavigator.offset().top - sliderImage.offset().top;
+ if (yOffset < 0) {
+ yOffset = 0;
+ }
+ sliderX = xOffset * (1 / xRate);
+ sliderY = yOffset * (1 / yRate);
+ container.scrollLeft = sliderX;
+ container.scrollTop = sliderY;
+ };
+
+ $(container).unbind('scroll');
+ $(container).bind('scroll', function (event) {
+ if (sliderNavigator.data('drag')) {
+ return;
+ }
+ me.updateNavigatior();
+ });
+
+ // sliderImage.click(function (event) {
+ // var eX, eY, nX, nY;
+ // eX = event.pageX - sliderImage.offset().left;
+ // eY = event.pageY - sliderImage.offset().top;
+ // nX = eX - (sliderNavigator.width() / 2);
+ // nY = eY - (sliderNavigator.height() / 2);
+ // if (nX < 0) {
+ // nX = 0;
+ // }
+ // if (nY < 0) {
+ // nY = 0;
+ // }
+ // if ((nX + sliderNavigator.width()) > sliderImage.width()) {
+ // nX = sliderImage.width() - sliderNavigator.width();
+ // }
+ // if ((nY + sliderNavigator.height()) > sliderImage.height()) {
+ // nY = sliderImage.height() - sliderNavigator.height();
+ // }
+ // sliderNavigator.css({
+ // "left": nX + 'px',
+ // "top": nY + 'px'
+ // });
+ // onNavigatorMove();
+ // });
+
+ // sliderNavigator.draggable({
+ // containment: "#" + container.id + 'sliderImage',
+ // scroll: false,
+ // start: function (event) {
+ // sliderNavigator.data('drag', true);
+ // },
+ // drag: function (event) {
+ // onNavigatorMove();
+ // },
+ // stop: function (event) {
+ // onNavigatorMove();
+ // sliderNavigator.data('drag', false);
+ // }
+ // });
+
+ slider.append(sliderBarWrapper);
+ sliderBarWrapper.append(sliderText);
+ sliderBarWrapper.append(sliderBar);
+
+ // slider.append(sliderImageWrapper);
+ // sliderImageWrapper.append(sliderImage);
+ // sliderImageWrapper.append(sliderNavigator);
+
+ //캔버스 삭제시 슬라이더도 삭제
+ $(container).on("remove", function () {
+ me.removeSlider();
+ });
+
+ //기존에 등록된 슬라이더 삭제
+ if (this._CONFIG.SLIDER) {
+ me.removeSlider();
+ }
+
+ //슬라이더를 캔버스에 등록
+ this._CONFIG.SLIDER = slider;
+
+ //슬라이더 업데이트
+ this.updateSlider(this._CONFIG.SCALE * 100);
+ },
+
+ /**
+ * 슬라이더의 네비게이터 박스를 현재 뷰에 맞게 사이즈 및 위치를 조정한다.
+ */
+ updateNavigatior: function () {
+ var me = this;
+ var svg = me._RENDERER.getRootElement();
+ var svgWidth, svgHeight, vx, vy, xRate, yRate, xImgRate, yImgRate;
+ var slider = this._CONFIG.SLIDER;
+ if (!slider) {
+ return;
+ }
+ var sliderImage = slider.find('.sliderImage');
+ var sliderNavigator = slider.find('.sliderNavigator');
+ var container = me._CONTAINER;
+
+ svgWidth = $(svg).attr('width');
+ svgHeight = $(svg).attr('height');
+ vx = container.scrollLeft;
+ vy = container.scrollTop;
+ xRate = $(container).width() / svgWidth;
+ yRate = $(container).height() / svgHeight;
+ if (xRate > 1) {
+ xRate = 1;
+ }
+ if (yRate > 1) {
+ yRate = 1;
+ }
+ xImgRate = sliderImage.width() / svgWidth;
+ yImgRate = sliderImage.height() / svgHeight;
+
+ sliderNavigator.width(sliderImage.width() * xRate);
+ sliderNavigator.height(sliderImage.height() * yRate);
+ sliderNavigator.css({
+ left: (vx * xImgRate) + 'px',
+ top: (vy * yImgRate) + 'px'
+ });
+
+ var sliderText = slider.find('.scaleSliderText');
+ var sliderBar = slider.find('.scaleSlider');
+ sliderText.html(Math.round(this._CONFIG.SCALE * 100));
+ sliderBar.val(Math.round(this._CONFIG.SCALE * 100));
+ }
+ ,
+ updateSlider: function (val) {
+ if (this._CONFIG.AUTO_SLIDER_UPDATE && !this._CONFIG.FAST_LOADING) {
+ var me = this;
+ if (!this._CONFIG.SLIDER) {
+ return;
+ }
+ if (!val) {
+ val = this._CONFIG.SCALE * 100;
+ }
+
+ var slider = this._CONFIG.SLIDER;
+ var sliderText = slider.find('.scaleSliderText');
+ var sliderBar = slider.find('.scaleSlider');
+ var sliderImage = slider.find('.sliderImage');
+ var sliderNavigator = slider.find('.sliderNavigator');
+ // var sliderImageWrapper = slider.find('.sliderImageWrapper');
+
+
+ //여기서부터는 캔버스의 내용을 슬라이더에 투영시킨다.
+ sliderText.html(Math.round(val));
+ sliderBar.val(Math.round(val));
+ me._RENDERER.setScale(val / 100);
+
+ var svg = me._RENDERER.getRootElement();
+ var svgData = new XMLSerializer().serializeToString(svg);
+ var canvasSize = this.getCanvasSize();
+
+ if (OG.Util.isIE()) {
+ svgData = '' + svgData.replace('xmlns="http://www.w3.org/2000/svg"', '').replace('xmlns:NS1=""', '').replace('NS1:', '');
+ var encoded = window.btoa(unescape(encodeURIComponent(svgData)));
+ var image = document.createElement('img');
+ $(image).css({
+ position: 'absolute',
+ top: '0px',
+ left: '0px',
+ opacity: 0
+ });
+ document.body.appendChild(image);
+ image.src = 'data:image/svg+xml;base64,' + encoded;
+ image.onload = function () {
+ var canvas = document.getElementById(sliderImage.attr('id'));
+ // canvas.width = sliderImageWrapper.width();
+ // canvas.height = sliderImageWrapper.width() * image.height / image.width;
+ var context = canvas.getContext('2d');
+ try {
+ context.drawImage(image, 0, 0, sliderImageWrapper.width(), sliderImageWrapper.width() * image.height / image.width);
+ $(image).remove();
+ me.updateNavigatior();
+ } catch (e) {
+ $(image).remove();
+ }
+ };
+ } else {
+ var image = new Image();
+ image.src = 'data:image/svg+xml;utf-8,' + svgData;
+ image.onload = function () {
+ var canvas = document.getElementById(sliderImage.attr('id'));
+ // canvas.width = sliderImageWrapper.width();
+ // canvas.height = sliderImageWrapper.width() * image.height / image.width;
+ var context = canvas.getContext('2d');
+ try {
+ // context.drawImage(image, 0, 0, sliderImageWrapper.width(), sliderImageWrapper.width() * image.height / image.width);
+ $(image).remove();
+ me.updateNavigatior();
+ } catch (e) {
+ $(image).remove();
+ }
+ };
+ }
+
+ //여기서부터는 백도어의 내용을 슬라이더에 투영시킨다.
+ if (me._CONFIG.BACKDOOR.container) {
+ var scale = me._CONFIG.BACKDOOR.scale;
+ var opacity = me._CONFIG.BACKDOOR.opacity;
+ var width = me._CONFIG.BACKDOOR.width;
+ var height = me._CONFIG.BACKDOOR.height;
+ var canvasScale = me.getScale();
+ // var contextWidth = sliderImageWrapper.width();
+ var fixedWidth = (width * (scale / 100) / canvasSize[0] * canvasScale) * contextWidth;
+ var fixedHeight = fixedWidth * height / width;
+ // var sliderBackDoorWrapper = sliderImageWrapper.find('.sliderBackDoorWrapper');
+
+ if (!sliderBackDoorWrapper || sliderBackDoorWrapper.length < 1) {
+ sliderBackDoorWrapper = $('');
+ sliderBackDoorWrapper.css({
+ position: 'absolute',
+ top: '0px',
+ left: '0px',
+ width: '100%',
+ height: '100%'
+ });
+
+ // sliderImageWrapper.data('backdoor', true);
+ sliderBackDoorWrapper.css({
+ 'background-image': 'url(' + me._CONFIG.BACKDOOR.url + ')',
+ 'background-repeat': 'no-repeat',
+ 'background-size': fixedWidth + 'px ' + fixedHeight + 'px',
+ 'opacity': opacity
+ });
+ sliderImage.before(sliderBackDoorWrapper);
+ } else {
+ //백도어 이미지가 교체되었다면 url 까지, 아니면 사이즈만 조정한다.
+ if (me._CONFIG.BACKDOOR.container_updated) {
+ me._CONFIG.BACKDOOR.container_updated = false;
+ sliderBackDoorWrapper.css({
+ 'background-image': 'url(' + me._CONFIG.BACKDOOR.url + ')',
+ 'background-repeat': 'no-repeat',
+ 'background-size': fixedWidth + 'px ' + fixedHeight + 'px',
+ 'opacity': opacity
+ });
+ } else {
+ sliderBackDoorWrapper.css({
+ 'background-size': fixedWidth + 'px ' + fixedHeight + 'px',
+ 'opacity': opacity
+ });
+ }
+ }
+ }
+ }
+ }
+ ,
+ /**
+ * 확대 축소 슬라이더를 삭제한다.
+ */
+ removeSlider: function () {
+ if (this._CONFIG.SLIDER) {
+ this._CONFIG.SLIDER.dialog("destroy");
+ this._CONFIG.SLIDER.remove();
+ }
+ }
+ ,
+
+ /**
+ * Shape 을 캔버스에 위치 및 사이즈 지정하여 드로잉한다.
+ *
+ * @example
+ * canvas.drawShape([100, 100], new OG.CircleShape(), [50, 50], {stroke:'red'});
+ *
+ * @param {Number[]} position 드로잉할 위치 좌표(중앙 기준)
+ * @param {OG.shape.IShape} shape Shape
+ * @param {Number[]} size Shape Width, Height
+ * @param {OG.geometry.Style|Object} style 스타일 (Optional)
+ * @param {String} id Element ID 지정 (Optional)
+ * @param {String} parentId 부모 Element ID 지정 (Optional)
+ * @param {Boolean} preventEvent 이벤트 생성 방지
+ * @param {Boolean} preventDropEvent 드랍 이벤트 방지
+ * @return {Element} Group DOM Element with geometry
+ */
+ drawShape: function (position, shape, size, style, id, parentId, preventEvent, preventDropEvent) {
+ var existElement
+ if (id) {
+ existElement = this.getElementById(id);
+ }
+ var element = this._RENDERER.drawShape(position, shape, size, style, id, preventEvent, preventDropEvent);
+
+ if (position && (shape.TYPE === OG.Constants.SHAPE_TYPE.EDGE)) {
+ element = this._RENDERER.move(element, position);
+ }
+
+ if (parentId && this._RENDERER.getElementById(parentId)) {
+ this._RENDERER.appendChild(element, parentId);
+ }
+
+ if (!this.CONFIG_INITIALIZED) {
+ this.initConfig();
+ }
+
+ if (!existElement) {
+ this._HANDLER.setClickSelectable(element, this._HANDLER._isSelectable(element.shape));
+ this._HANDLER.setMovable(element, this._HANDLER._isMovable(element.shape));
+ this._HANDLER.setGroupDropable(element);
+ this._HANDLER.setConnectGuide(element, this._HANDLER._isConnectable(element.shape));
+
+ if (this._HANDLER._isLabelEditable(element.shape)) {
+ this._HANDLER.enableEditLabel(element);
+ }
+ if (!id) {
+ this._RENDERER.addHistory();
+ }
+ }
+ this.updateSlider();
+ return element;
+ }
+ ,
+
+ /**
+ * Transfomer Shape 을 캔버스에 위치 및 사이즈 지정하여 드로잉한다.
+ *
+ * @example
+ * canvas.drawTransformer([100, 100], 'label' ['str1','str2'],['out']);
+ *
+ * @param {Number[]} position 드로잉할 위치 좌표(중앙 기준)
+ * @param {String} label Label
+ * @param {String[]} inputs 인풋에 위치할 리스트
+ * @param {String[]} outputs 아웃풋에 위치할 리스트
+ * @param {String} id Element ID 지정 (Optional)
+ * @return {Element} Group DOM Element with geometry
+ */
+ drawTransformer: function (position, label, inputs, outputs, drawData, id) {
+ var me = this, shape, element, style, envelope, i, toShape, fromShape, toElement, fromElement, textShape,
+ textElement;
+ shape = new OG.shape.Transformer(label);
+
+ if (!Array.isArray(inputs) || !Array.isArray(outputs)) {
+ return null;
+ }
+ var lines = Math.max(inputs.length, outputs.length);
+ element = me.drawShape(position, shape, [120, 30 + (lines * 25)], style, id);
+
+ envelope = element.shape.geom.getBoundary();
+
+ $.each(inputs, function (idx, input) {
+ textShape = new OG.shape.bpmn.M_Text(input);
+ textShape.MOVABLE = false;
+ textShape.SELECTABLE = false;
+ textShape.CONNECTABLE = false;
+ textShape.DELETABLE = false;
+ textElement = me.drawShape([envelope.getUpperLeft().x + 35, envelope.getUpperLeft().y + (idx * 25) + 40], textShape, [50, 20]);
+ element.appendChild(textElement);
+ toShape = new OG.shape.To();
+ toElement = me.drawShape([envelope.getUpperLeft().x + 15, envelope.getUpperLeft().y + (idx * 25) + 40], toShape, [5, 5], {"r": 5});
+ element.appendChild(toElement);
+ var data = JSON.parse(JSON.stringify(drawData));
+ data['type'] = 'input';
+ data['name'] = input;
+ data['parentId'] = element.id;
+ me.setCustomData(toElement, data);
+ });
+
+ $.each(outputs, function (idx, output) {
+ textShape = new OG.shape.bpmn.M_Text(output);
+ textShape.MOVABLE = false;
+ textShape.SELECTABLE = false;
+ textShape.CONNECTABLE = false;
+ textShape.DELETABLE = false;
+ textElement = me.drawShape([envelope.getUpperRight().x - 35, envelope.getUpperRight().y + (idx * 25) + 40], textShape, [50, 20]);
+ element.appendChild(textElement);
+ fromShape = new OG.shape.From();
+ fromElement = me.drawShape([envelope.getUpperRight().x - 15, envelope.getUpperRight().y + (idx * 25) + 40], fromShape, [5, 5], {"r": 5});
+ element.appendChild(fromElement);
+ var data = JSON.parse(JSON.stringify(drawData));
+ data['type'] = 'output';
+ data['name'] = output;
+ data['parentId'] = element.id;
+ me.setCustomData(fromElement, data);
+ });
+
+ if (!id) {
+ this._RENDERER.addHistory();
+ }
+ }
+ ,
+
+ setExceptionType: function (element, exceptionType) {
+ this._HANDLER.setExceptionType(element, exceptionType);
+ }
+ ,
+
+ setInclusion: function (element, inclusion) {
+ this._HANDLER.setInclusion(element, inclusion);
+ }
+ ,
+
+ /**
+ * Shape 의 스타일을 변경한다.
+ *
+ * @param {Element} shapeElement Shape DOM element
+ * @param {Object} style 스타일
+ */
+ setShapeStyle: function (shapeElement, style) {
+ this._RENDERER.setShapeStyle(shapeElement, style);
+ }
+ ,
+
+ /**
+ * Shape 의 선 연결 커스텀 컨트롤러를 설정한다.
+ *
+ * @param {Element} shapeElement Shape DOM element
+ * @param {Array} textList 텍스트 리스트
+ */
+ setTextListInController: function (shapeElement, textList) {
+ this._RENDERER.setTextListInController(shapeElement, textList);
+ }
+ ,
+
+ /**
+ * Shape 의 선 연결 커스텀 컨트롤러를 가져온다.
+ *
+ * @param {Element} shapeElement Shape DOM element
+ */
+ getTextListInController: function (shapeElement) {
+ this._RENDERER.getTextListInController(shapeElement);
+ }
+ ,
+
+ /**
+ * Shape 의 Label 을 캔버스에 위치 및 사이즈 지정하여 드로잉한다.
+ *
+ * @param {Element|String} shapeElement Shape DOM element or ID
+ * @param {String} text 텍스트
+ * @param {OG.geometry.Style|Object} style 스타일
+ * @return {Element} DOM Element
+ * @override
+ */
+ drawLabel: function (shapeElement, text, style) {
+ return this._RENDERER.drawLabel(shapeElement, text, style);
+ }
+ ,
+
+ /**
+ * Shape 의 연결된 Edge 를 redraw 한다.(이동 또는 리사이즈시)
+ *
+ * @param {Element} element
+ */
+ redrawConnectedEdge: function (element) {
+ this._RENDERER.redrawConnectedEdge(element);
+ }
+ ,
+
+ /**
+ * 연결된 터미널의 vertices 를 초기화한다.
+ *
+ * @param {Element} edge Edge Shape
+ * @return {Element} 연결된 Edge 엘리먼트
+ * @override
+ */
+ reconnect: function (edge) {
+ return this._RENDERER.reconnect(edge);
+ }
+ ,
+
+ /**
+ * 두개의 Shape 을 Edge 로 연결한다.
+ *
+ * @param {Element} fromElement from Shape Element
+ * @param {Element} toElement to Shape Element
+ * @param {OG.geometry.Style|Object} style 스타일
+ * @param {String} label Label
+ * @param fromP fromElement 와 연결될 터미널 좌표 [x,y](optional)
+ * @param toP toElement 와 연결될 터미널 좌표 [x,y](optional)
+ * @param preventTrigger 참 일 경우 이벤트 발생을 방지
+ * @param id 연결선의 아이디
+ * @param {Element} edgeShape 이 값이 없으면 신규 OG.EdgeShape 를 생성
+ * @returns {*|Element}
+ */
+ connect: function (fromElement, toElement, style, label, fromP, toP, preventTrigger, id, edgeShape) {
+ var existElement
+ if (id) {
+ existElement = this.getElementById(id);
+ }
+ var fromTerminal, toTerminal, edge, fromPosition, toPosition;
+
+ if (fromP) {
+ fromTerminal = this._RENDERER.createTerminalString(fromElement, fromP);
+ } else {
+ fromTerminal = this._RENDERER.createDefaultTerminalString(fromElement);
+ }
+
+ if (toP) {
+ toTerminal = this._RENDERER.createTerminalString(toElement, toP);
+ } else {
+ toTerminal = this._RENDERER.createDefaultTerminalString(toElement);
+ }
+
+ fromPosition = this._RENDERER._getPositionFromTerminal(fromTerminal);
+ fromPosition = [fromPosition.x, fromPosition.y];
+ toPosition = this._RENDERER._getPositionFromTerminal(toTerminal);
+ toPosition = [toPosition.x, toPosition.y];
+
+ // draw edge
+ edgeShape = edgeShape ? edgeShape : new OG.EdgeShape();
+ edgeShape.from = fromPosition;
+ edgeShape.to = toPosition;
+ edge = this._RENDERER.drawShape(null, edgeShape, null, style, id);
+ //edge = this._RENDERER.trimEdgeDirection(edge, fromElement, toElement);
+
+ //if label null, convert undefined
+ label = label ? label : undefined;
+
+ // connect
+ edge = this._RENDERER.connect(fromTerminal, toTerminal, edge, style, label, preventTrigger);
+
+ if (edge && !existElement) {
+ this._HANDLER.setClickSelectable(edge, edge.shape.SELECTABLE);
+ this._HANDLER.setMovable(edge, edge.shape.SELECTABLE && edge.shape.MOVABLE);
+ this._HANDLER.setConnectGuide(edge, this._HANDLER._isConnectable(edge.shape));
+ if (edge.shape.LABEL_EDITABLE) {
+ this._HANDLER.enableEditLabel(edge);
+ }
+ }
+ this.updateSlider();
+ return edge;
+ }
+ ,
+
+ /**
+ * 두개의 터미널 아이디로 부터 얻어진 도형들을 Edge 로 연결한다.
+ *
+ * @param {String} fromTerminal from Terminal Id
+ * @param {String} toTerminal to Terminal Id
+ * @param {OG.geometry.Style|Object} style 스타일
+ * @param {String} label Label
+ * @return {String} id 부여 할 아이디
+ * @return {String} shapeId shapeId
+ * @return {OG.geometry} geom Edge geometry
+ */
+ connectWithTerminalId: function (fromTerminal, toTerminal, style, label, id, shapeId, geom) {
+ var existElement
+ if (id) {
+ existElement = this.getElementById(id);
+ }
+ var vertices, edge, fromPosition, toPosition, fromto, shape;
+
+ fromPosition = this._RENDERER._getPositionFromTerminal(fromTerminal);
+ fromPosition = [fromPosition.x, fromPosition.y];
+
+ toPosition = this._RENDERER._getPositionFromTerminal(toTerminal);
+ toPosition = [toPosition.x, toPosition.y];
+
+ if (!geom) {
+ vertices = [fromPosition, toPosition];
+ } else {
+ vertices = geom.vertices;
+ }
+
+ fromto = JSON.stringify(vertices[0]) + ',' + JSON.stringify(vertices[vertices.length - 1]);
+ shape = eval('new ' + shapeId + '(' + fromto + ')');
+
+ //if label null, convert undefined
+ label = label ? label : undefined;
+ if (label) {
+ shape.label = label;
+ }
+
+ if (geom) {
+ if (geom.type === OG.Constants.GEOM_NAME[OG.Constants.GEOM_TYPE.POLYLINE]) {
+ geom = new OG.geometry.PolyLine(geom.vertices);
+ shape.geom = geom;
+ } else if (geom.type === OG.Constants.GEOM_NAME[OG.Constants.GEOM_TYPE.CURVE]) {
+ geom = new OG.geometry.Curve(geom.controlPoints);
+ shape.geom = geom;
+ }
+ }
+ edge = this.drawShape(null, shape, null, style, id, null);
+
+ // connect
+ edge = this._RENDERER.connect(fromTerminal, toTerminal, edge, style, label, true);
+
+ if (edge && !existElement) {
+ this._HANDLER.setClickSelectable(edge, edge.shape.SELECTABLE);
+ this._HANDLER.setMovable(edge, edge.shape.SELECTABLE && edge.shape.MOVABLE);
+ this._HANDLER.setConnectGuide(edge, this._HANDLER._isConnectable(edge.shape));
+ if (edge.shape.LABEL_EDITABLE) {
+ this._HANDLER.enableEditLabel(edge);
+ }
+ }
+ this.updateSlider();
+ return edge;
+ }
+ ,
+
+ /**
+ * 연결속성정보를 삭제한다. Edge 인 경우는 라인만 삭제하고, 일반 Shape 인 경우는 연결된 모든 Edge 를 삭제한다.
+ *
+ * @param {Element} element
+ */
+ disconnect: function (element) {
+ this._RENDERER.disconnect(element);
+ }
+ ,
+ /**
+ * 주어진 도형을 신규 아이디로 변경한다.
+ * @param element
+ * @param id
+ */
+ updateId: function (element, id) {
+ return this._RENDERER.updateId(element, id);
+ },
+
+ /**
+ * 주어진 Shape 들을 그룹핑한다.
+ *
+ * @param {Element[]} elements
+ * @return {Element} Group Shape Element
+ */
+ group: function (elements) {
+ var group = this._RENDERER.group(elements);
+
+ // enable event
+ this._HANDLER.setClickSelectable(group, group.shape.SELECTABLE);
+ this._HANDLER.setMovable(group, group.shape.SELECTABLE && group.shape.MOVABLE);
+ if (group.shape.LABEL_EDITABLE) {
+ this._HANDLER.enableEditLabel(group);
+ }
+
+ return group;
+ }
+ ,
+
+ /**
+ * 주어진 그룹들을 그룹해제한다.
+ *
+ * @param {Element[]} groupElements
+ * @return {Element[]} ungrouped Elements
+ */
+ ungroup: function (groupElements) {
+ return this._RENDERER.ungroup(groupElements);
+ }
+ ,
+
+ /**
+ * 주어진 Shape 들을 그룹에 추가한다.
+ *
+ * @param {Element} groupElement
+ * @param {Element[]} elements
+ */
+ addToGroup: function (groupElement, elements) {
+ this._RENDERER.addToGroup(groupElement, elements);
+ }
+ ,
+
+ /**
+ * 주어진 Shape 이 그룹인 경우 collapse 한다.
+ *
+ * @param {Element} element
+ */
+ collapse: function (element) {
+ this._RENDERER.collapse(element);
+ }
+ ,
+
+ /**
+ * 주어진 Shape 이 그룹인 경우 expand 한다.
+ *
+ * @param {Element} element
+ */
+ expand: function (element) {
+ this._RENDERER.expand(element);
+ }
+ ,
+
+ /**
+ * 드로잉된 모든 오브젝트를 클리어한다.
+ */
+ clear: function () {
+ this._RENDERER.clear();
+ }
+ ,
+
+ /**
+ * Shape 을 캔버스에서 관련된 모두를 삭제한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ removeShape: function (element, preventEvent) {
+ this._RENDERER.removeShape(element, preventEvent);
+ }
+ ,
+
+ /**
+ * 하위 엘리먼트만 제거한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ removeChild: function (element) {
+ this._RENDERER.removeChild(element);
+ }
+ ,
+
+ /**
+ * ID에 해당하는 Element 의 Move & Resize 용 가이드를 제거한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ removeGuide: function (element) {
+ this._RENDERER.removeGuide(element);
+ }
+ ,
+
+ /**
+ * 모든 Move & Resize 용 가이드를 제거한다.
+ */
+ removeAllGuide: function () {
+ this._RENDERER.removeAllGuide();
+ }
+ ,
+
+ /**
+ * 랜더러 캔버스 Root Element 를 반환한다.
+ *
+ * @return {Element} Element
+ */
+ getRootElement: function () {
+ return this._RENDERER.getRootElement();
+ }
+ ,
+
+ /**
+ * 랜더러 캔버스 Root Group Element 를 반환한다.
+ *
+ * @return {Element} Element
+ */
+ getRootGroup: function () {
+ return this._RENDERER.getRootGroup();
+ }
+ ,
+
+ /**
+ * 주어진 지점을 포함하는 Top Element 를 반환한다.
+ *
+ * @param {Number[]} position 위치 좌표
+ * @return {Element} Element
+ */
+ getElementByPoint: function (position) {
+ return this._RENDERER.getElementByPoint(position);
+ }
+ ,
+
+ /**
+ * 주어진 Boundary Box 영역에 포함되는 Shape(GEOM, TEXT, IMAGE) Element 를 반환한다.
+ * 모든 vertices를 포함한 엘리먼트를 반환한다.
+ *
+ * @param {OG.geometry.Envelope} envelope Boundary Box 영역
+ * @return {Element[]} Element
+ */
+ getElementsByBBox: function (envelope) {
+ return this._RENDERER.getElementsByBBox(envelope);
+ }
+ ,
+
+ /**
+ * 엘리먼트에 속성값을 설정한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @param {Object} attribute 속성값
+ */
+ setAttr: function (element, attribute) {
+ this._RENDERER.setAttr(element, attribute);
+ }
+ ,
+
+ /**
+ * 엘리먼트 속성값을 반환한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @param {String} attrName 속성이름
+ * @return {Object} attribute 속성값
+ */
+ getAttr: function (element, attrName) {
+ return this._RENDERER.getAttr(element, attrName);
+ }
+ ,
+
+ /**
+ * ID에 해당하는 Element 를 최상단 레이어로 이동한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ toFront: function (element) {
+ this._RENDERER.toFront(element);
+ }
+ ,
+
+ /**
+ * ID에 해당하는 Element 를 최하단 레이어로 이동한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ toBack: function (element) {
+ this._RENDERER.toBack(element);
+ }
+ ,
+
+ /**
+ * ID에 해당하는 Element 를 앞으로 한단계 이동한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ bringForward: function (element) {
+ this._RENDERER.bringForward(element);
+ },
+
+ /**
+ * ID에 해당하는 Element 를 뒤로 한단계 이동한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ sendBackward: function (element) {
+ this._RENDERER.sendBackward(element);
+ },
+
+ /**
+ * 랜더러 캔버스의 사이즈(Width, Height)를 반환한다.
+ *
+ * @return {Number[]} Canvas Width, Height
+ */
+ getCanvasSize: function () {
+ return this._RENDERER.getCanvasSize();
+ }
+ ,
+
+ /**
+ * 랜더러 캔버스의 사이즈(Width, Height)를 변경한다.
+ *
+ * @param {Number[]} size Canvas Width, Height
+ */
+ setCanvasSize: function (size) {
+ this._RENDERER.setCanvasSize(size);
+ }
+ ,
+
+ /**
+ * 랜더러 캔버스의 사이즈(Width, Height)를 실제 존재하는 Shape 의 영역에 맞게 변경한다.
+ *
+ * @param {Number[]} minSize Canvas 최소 Width, Height
+ * @param {Boolean} fitScale 주어진 minSize 에 맞게 fit 여부(Default:false)
+ */
+ fitCanvasSize: function (minSize, fitScale) {
+ this._RENDERER.fitCanvasSize(minSize, fitScale);
+ }
+ ,
+
+ /**
+ * 새로운 View Box 영역을 설정한다. (ZoomIn & ZoomOut 가능)
+ *
+ * @param {Number[]} position 위치 좌표(좌상단 기준)
+ * @param {Number[]} size Canvas Width, Height
+ * @param {Boolean} isFit Fit 여부
+ */
+ setViewBox: function (position, size, isFit) {
+ this._RENDERER.setViewBox(position, size, isFit);
+ }
+ ,
+
+ /**
+ * Scale 을 반환한다. (리얼 사이즈 : Scale = 1)
+ *
+ * @return {Number} 스케일값
+ */
+ getScale: function () {
+ return this._RENDERER.getScale();
+ }
+ ,
+
+ /**
+ * Scale 을 설정한다. (리얼 사이즈 : Scale = 1)
+ *
+ * @param {Number} scale 스케일값
+ */
+ setScale: function (scale) {
+ this._RENDERER.setScale(scale);
+ }
+ ,
+
+ /**
+ * ID에 해당하는 Element 를 캔버스에서 show 한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ show: function (element) {
+ this._RENDERER.show(element);
+ }
+ ,
+
+ /**
+ * ID에 해당하는 Element 를 캔버스에서 hide 한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ */
+ hide: function (element) {
+ this._RENDERER.hide(element);
+ }
+ ,
+
+ /**
+ * Source Element 를 Target Element 아래에 append 한다.
+ *
+ * @param {Element|String} srcElement Element 또는 ID
+ * @param {Element|String} targetElement Element 또는 ID
+ * @return {Element} Source Element
+ */
+ appendChild: function (srcElement, targetElement) {
+ return this._RENDERER.appendChild(srcElement, targetElement);
+ }
+ ,
+
+ /**
+ * Source Element 를 Target Element 이후에 insert 한다.
+ *
+ * @param {Element|String} srcElement Element 또는 ID
+ * @param {Element|String} targetElement Element 또는 ID
+ * @return {Element} Source Element
+ */
+ insertAfter: function (srcElement, targetElement) {
+ return this._RENDERER.insertAfter(srcElement, targetElement);
+ }
+ ,
+
+ /**
+ * Source Element 를 Target Element 이전에 insert 한다.
+ *
+ * @param {Element|String} srcElement Element 또는 ID
+ * @param {Element|String} targetElement Element 또는 ID
+ * @return {Element} Source Element
+ */
+ insertBefore: function (srcElement, targetElement) {
+ return this._RENDERER.insertBefore(srcElement, targetElement);
+ }
+ ,
+
+ /**
+ * 해당 Element 를 가로, 세로 Offset 만큼 이동한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @param {Number[]} offset [가로, 세로]
+ * @return {Element} Element
+ */
+ move: function (element, offset) {
+ return this._RENDERER.move(element, offset);
+ }
+ ,
+
+ /**
+ * 주어진 중심좌표로 해당 Element 를 이동한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @param {Number[]} position [x, y]
+ * @return {Element} Element
+ */
+ moveCentroid: function (element, position) {
+ return this._RENDERER.moveCentroid(element, position);
+ }
+ ,
+
+ /**
+ * 중심 좌표를 기준으로 주어진 각도 만큼 회전한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @param {Number} angle 각도
+ * @return {Element} Element
+ */
+ rotate: function (element, angle) {
+ return this._RENDERER.rotate(element, angle);
+ }
+ ,
+
+ /**
+ * 상, 하, 좌, 우 외곽선을 이동한 만큼 리사이즈 한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @param {Number[]} offset [상, 하, 좌, 우] 각 방향으로 + 값
+ * @return {Element} Element
+ */
+ resize: function (element, offset, preventEvent) {
+ return this._RENDERER.resize(element, offset, preventEvent);
+ }
+ ,
+
+ /**
+ * 중심좌표는 고정한 채 Bounding Box 의 width, height 를 리사이즈 한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @param {Number[]} size [Width, Height]
+ * @return {Element} Element
+ */
+ resizeBox: function (element, size, preventEvent) {
+ return this._RENDERER.resizeBox(element, size, preventEvent);
+ }
+ ,
+
+ /**
+ * 노드 Element 를 복사한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {Element} Element
+ */
+ clone: function (element) {
+ return this._RENDERER.clone(element);
+ }
+ ,
+
+ /**
+ * ID에 해당하는 Element 의 바운더리 영역을 리턴한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {OG.geometry.Envelope} Envelope 영역
+ */
+ getBoundary: function (element) {
+ return this._RENDERER.getBoundary(element);
+ },
+
+ /**
+ * ID로 Node Element 를 반환한다.
+ *
+ * @param {String} id
+ * @return {Element} Element
+ */
+ getElementById: function (id) {
+ return this._RENDERER.getElementById(id);
+ }
+ ,
+
+ /**
+ * Shape 타입에 해당하는 Node Element 들을 반환한다.
+ *
+ * @param {String} shapeType Shape 타입(GEOM, HTML, IMAGE, EDGE, GROUP), Null 이면 모든 타입
+ * @param {String} excludeType 제외 할 타입
+ * @return {Element[]} Element's Array
+ */
+ getElementsByType: function (shapeType, excludeType) {
+ return this._RENDERER.getElementsByType(shapeType, excludeType);
+ }
+ ,
+
+ /**
+ * Shape ID에 해당하는 Node Element 들을 반환한다.
+ *
+ * @param {String} shapeId Shape ID
+ * @return {Element[]} Element's Array
+ */
+ getElementsByShapeId: function (shapeId) {
+ var root = this.getRootGroup();
+ return $(root).find("[_type=SHAPE][_shape_id='" + shapeId + "']");
+ }
+ ,
+
+ /**
+ * 두 도형 사이의 연결된 Edge 를 반환한다.
+ * @param elements
+ * @returns {Element} edge
+ */
+ getRelatedEdgeFromShapes: function (elements) {
+ return this._RENDERER.getRelatedEdgeFromShapes(elements);
+ },
+
+ /**
+ * Edge 엘리먼트와 연결된 fromShape, toShape 엘리먼트를 반환한다.
+ *
+ * @param {Element|String} edgeElement Element 또는 ID
+ * @return {Object}
+ */
+ getRelatedElementsFromEdge: function (edgeElement) {
+ var me = this,
+ edge = OG.Util.isElement(edgeElement) ? edgeElement : this.getElementById(edgeElement),
+ getShapeFromTerminal = function (terminal) {
+ if (terminal) {
+ return me._RENDERER.getElementById(terminal.substring(0, terminal.indexOf(OG.Constants.TERMINAL)));
+ } else {
+ return null;
+ }
+ };
+
+
+ if ($(edge).attr('_shape') === OG.Constants.SHAPE_TYPE.EDGE) {
+ return {
+ from: getShapeFromTerminal($(edgeElement).attr('_from')),
+ to: getShapeFromTerminal($(edgeElement).attr('_to'))
+ };
+ } else {
+ return {
+ from: null,
+ to: null
+ };
+ }
+ }
+ ,
+ /**
+ * 부모 엘리먼트를 반환한다. 부모가 루트일때는 반환하지 않는다.
+ *
+ * @param {Element} Element 엘리먼트
+ * @return {Element} Element 엘리먼트
+ */
+ getParent: function (element) {
+ return this._RENDERER.getParent(element);
+ },
+
+ /**
+ * 그룹의 하위 엘리먼트를 반환한다.
+ *
+ * @param {Element} element 엘리먼트
+ * @returns {Array} Elements
+ */
+ getChilds: function (element) {
+ return this._RENDERER.getChilds(element);
+ },
+
+ /**
+ * 캔버스의 모든 Shape 들을 리턴
+ *
+ * @return {Array} Elements
+ */
+ getAllShapes: function () {
+ return this._RENDERER.getAllShapes();
+ },
+
+ /**
+ * 캔버스의 모든 Edge를 리턴
+ *
+ * @return {Array} Edge Elements
+ */
+ getAllEdges: function () {
+ return this._RENDERER.getAllEdges();
+ },
+
+ /**
+ * 해당 엘리먼트의 BoundingBox 영역 정보를 반환한다.
+ *
+ * @param {Element|String} element
+ * @return {Object} {width, height, x, y, x2, y2}
+ */
+ getBBox: function (element) {
+ return this._RENDERER.getBBox(element);
+ }
+ ,
+
+ /**
+ * 부모노드기준으로 캔버스 루트 엘리먼트의 BoundingBox 영역 정보를 반환한다.
+ *
+ * @return {Object} {width, height, x, y, x2, y2}
+ */
+ getRootBBox: function () {
+ return this._RENDERER.getRootBBox();
+ }
+ ,
+
+ /**
+ * 부모노드기준으로 캔버스 루트 엘리먼트의 실제 Shape 이 차지하는 BoundingBox 영역 정보를 반환한다.
+ *
+ * @return {Object} {width, height, x, y, x2, y2}
+ */
+ getRealRootBBox: function () {
+ return this._RENDERER.getRealRootBBox();
+ }
+ ,
+
+ /**
+ * SVG 인지 여부를 반환한다.
+ *
+ * @return {Boolean} svg 여부
+ */
+ isSVG: function () {
+ return this._RENDERER.isSVG();
+ }
+ ,
+
+ /**
+ * VML 인지 여부를 반환한다.
+ *
+ * @return {Boolean} vml 여부
+ */
+ isVML: function () {
+ return this._RENDERER.isVML();
+ }
+ ,
+
+ /**
+ * 주어진 Shape 엘리먼트에 커스텀 데이타를 저장한다.
+ *
+ * @param {Element|String} shapeElement Shape DOM Element or ID
+ * @param {Object} data JSON 포맷의 Object
+ */
+ setCustomData: function (shapeElement, data) {
+ var element = OG.Util.isElement(shapeElement) ? shapeElement : document.getElementById(shapeElement);
+ element.data = data;
+
+ //도형의 shape 에 데이터를 저장한다.
+ element.shape.data = data;
+ }
+ ,
+
+ /**
+ * 주어진 Shape 엘리먼트에 저장된 커스텀 데이터를 반환한다.
+ *
+ * @param {Element|String} shapeElement Shape DOM Element or ID
+ * @return {Object} JSON 포맷의 Object
+ */
+ getCustomData: function (shapeElement) {
+ var element = OG.Util.isElement(shapeElement) ? shapeElement : document.getElementById(shapeElement);
+ // element 에 데이터가 없을 경우 (shape 이 데이터를 가지고 있을 경우)
+ if (!element.data) {
+ element.data = element.shape.data;
+ }
+ return element.data;
+ }
+ ,
+
+ /**
+ * 주어진 Shape 엘리먼트에 확장 커스텀 데이타를 저장한다.
+ *
+ * @param {Element|String} shapeElement Shape DOM Element or ID
+ * @param {Object} data JSON 포맷의 Object
+ */
+ setExtCustomData: function (shapeElement, data) {
+ var element = OG.Util.isElement(shapeElement) ? shapeElement : document.getElementById(shapeElement);
+ element.dataExt = data;
+ }
+ ,
+
+ /**
+ * 주어진 Shape 엘리먼트에 저장된 확장 커스텀 데이터를 반환한다.
+ *
+ * @param {Element|String} shapeElement Shape DOM Element or ID
+ * @return {Object} JSON 포맷의 Object
+ */
+ getExtCustomData: function (shapeElement) {
+ var element = OG.Util.isElement(shapeElement) ? shapeElement : document.getElementById(shapeElement);
+ return element.dataExt;
+ }
+ ,
+
+ /**
+ * 주어진 Shape 엘리먼트에 커스텀 컨텍스트 메뉴를 지정한다.
+ *
+ * @param {Element|String} shapeElement Shape DOM Element or ID
+ * @param {Object} data JSON 포맷의 context Object
+ */
+ setCustomContextMenu: function (shapeElement, data) {
+ var element = OG.Util.isElement(shapeElement) ? shapeElement : document.getElementById(shapeElement);
+
+ element.shape.customContextMenu = data;
+ },
+
+ /**
+ * 주어진 Shape 엘리먼트에 저장된 커스텀 컨텍스트 메뉴를 반환한다.
+ *
+ * @param {Element|String} shapeElement Shape DOM Element or ID
+ * @return {Object} JSON 포맷의 context Object
+ */
+ getCustomContextMenu: function (shapeElement) {
+ var element = OG.Util.isElement(shapeElement) ? shapeElement : document.getElementById(shapeElement);
+ return element.shape.customContextMenu;
+ }
+ ,
+
+ /**
+ * Canvas 에 그려진 Shape 들을 OpenGraph XML 문자열로 export 한다.
+ *
+ * @return {String} XML 문자열
+ */
+ toXML: function () {
+ return OG.Util.jsonToXml(this.toJSON());
+ }
+ ,
+
+ /**
+ * Canvas 에 그려진 Shape 들을 OpenGraph JSON 객체로 export 한다.
+ *
+ * @return {Object} JSON 포맷의 Object
+ */
+ toJSON: function () {
+ var CANVAS = this,
+ rootBBox = this._RENDERER.getRootBBox(),
+ rootGroup = this._RENDERER.getRootGroup(),
+ scale = this.getScale(),
+ canvasWidth = this.getCanvasSize()[0],
+ canvasHeight = this.getCanvasSize()[1],
+ backdoor = this._CONFIG.BACKDOOR,
+ jsonObj = {
+ opengraph: {
+ '@width': canvasWidth,
+ '@height': canvasHeight,
+ '@scale': scale,
+ cell: [],
+ backdoor: [
+ {
+ '@url': backdoor.url,
+ '@scale': backdoor.scale,
+ '@opacity': backdoor.opacity,
+ '@width': backdoor.width,
+ '@height': backdoor.height
+ }
+ ]
+ }
+ },
+ childShape, i, cellMap;
+ cellMap = {};
+
+ childShape = function (node) {
+ $(node).find("[_type=SHAPE]").each(function (idx, item) {
+ // push cell to array
+ var shape = item.shape,
+ style = item.shape.geom.style.map,
+ geom = shape.geom,
+ envelope = geom.getBoundary(),
+ cell = {},
+ vertices,
+ from,
+ to,
+ prevShapeIds,
+ nextShapeIds;
+
+ if (shape.ignoreExport) {
+ return;
+ }
+
+ cell['@id'] = $(item).attr('id');
+ if ($(item).parent().attr('id') === $(node).attr('id')) {
+ cell['@parent'] = $(node).attr('id');
+ } else {
+ cell['@parent'] = $(item).parent().attr('id');
+ }
+ cell['@shapeType'] = shape.TYPE;
+ cell['@shapeId'] = shape.SHAPE_ID;
+ cell['@x'] = envelope.getCentroid().x;
+ cell['@y'] = envelope.getCentroid().y;
+ cell['@width'] = envelope.getWidth();
+ cell['@height'] = envelope.getHeight();
+ if (style) {
+ cell['@style'] = escape(OG.JSON.encode(style));
+ }
+
+ if (shape.TYPE === OG.Constants.SHAPE_TYPE.EDGE) {
+ if ($(item).attr('_from')) {
+ cell['@from'] = $(item).attr('_from');
+ }
+ if ($(item).attr('_to')) {
+ cell['@to'] = $(item).attr('_to');
+ }
+ } else {
+ prevShapeIds = CANVAS.getPrevShapeIds(item);
+ nextShapeIds = CANVAS.getNextShapeIds(item);
+ if (prevShapeIds.length > 0) {
+ cell['@from'] = prevShapeIds.toString();
+ }
+ if (nextShapeIds.length > 0) {
+ cell['@to'] = nextShapeIds.toString();
+ }
+ }
+
+ if ($(item).attr('_fromedge')) {
+ cell['@fromEdge'] = $(item).attr('_fromedge');
+ }
+ if ($(item).attr('_toedge')) {
+ cell['@toEdge'] = $(item).attr('_toedge');
+ }
+ if (shape.label) {
+ cell['@label'] = escape(shape.label);
+ }
+ if (shape.fromLabel) {
+ cell['@fromLabel'] = escape(shape.fromLabel);
+ }
+ if (shape.toLabel) {
+ cell['@toLabel'] = escape(shape.toLabel);
+ }
+ if (shape.angle && shape.angle !== 0) {
+ cell['@angle'] = shape.angle;
+ }
+ if (shape instanceof OG.shape.ImageShape) {
+ cell['@value'] = shape.image;
+ } else if (shape instanceof OG.shape.HtmlShape) {
+ cell['@value'] = escape(shape.html);
+ } else if (shape instanceof OG.shape.TextShape) {
+ cell['@value'] = escape(shape.text);
+ } else if (shape instanceof OG.shape.EdgeShape) {
+ vertices = geom.getVertices();
+ cell['@value'] = '';
+ for (var i = 0, leni = vertices.length; i < leni; i++) {
+ cell['@value'] = cell['@value'] + vertices[i];
+ if (i < vertices.length - 1) {
+ cell['@value'] = cell['@value'] + ','
+ }
+ }
+ }
+ if (geom) {
+ cell['@geom'] = escape(geom.toString());
+ }
+ if (item.data) {
+ cell['@data'] = escape(OG.JSON.encode(item.data));
+ } else {
+ cell['@data'] = escape(OG.JSON.encode(item.shape.data));
+ }
+ if (shape.textList) {
+ cell['@textList'] = escape(OG.JSON.encode(shape.textList));
+ }
+ if (item.dataExt) {
+ cell['@dataExt'] = escape(OG.JSON.encode(item.dataExt));
+ }
+ if (shape.LoopType) {
+ cell['@loopType'] = shape.LoopType;
+ }
+ if (shape.TaskType) {
+ cell['@taskType'] = shape.TaskType;
+ }
+ if (shape.exceptionType) {
+ cell['@exceptionType'] = shape.exceptionType;
+ }
+
+ cell['@childs'] = [];
+ jsonObj.opengraph.cell.push(cell);
+
+ // gathering Cell Map
+ cellMap[cell["@id"]] = cell;
+ });
+ };
+
+ if (rootGroup.data) {
+ jsonObj.opengraph['@data'] = escape(OG.JSON.encode(rootGroup.data));
+ }
+ if (rootGroup.dataExt) {
+ jsonObj.opengraph['@dataExt'] = escape(OG.JSON.encode(rootGroup.dataExt));
+ }
+
+ //root check
+ childShape(rootGroup, true);
+ return jsonObj;
+ }
+ ,
+
+ /**
+ * OpenGraph XML 문자열로 부터 Shape 을 드로잉한다.
+ *
+ * @param {String| Element} xml XML 문자열 또는 DOM Element
+ * @return {Object} {width, height, x, y, x2, y2}
+ */
+ loadXML: function (xml) {
+ if (!OG.Util.isElement(xml)) {
+ xml = OG.Util.parseXML(xml);
+ }
+ return this.loadJSON(OG.Util.xmlToJson(xml));
+ }
+ ,
+
+ alignLeft: function () {
+ this._RENDERER.alignLeft();
+ }
+ ,
+
+ alignRight: function () {
+ this._RENDERER.alignRight();
+ }
+ ,
+
+ alignTop: function () {
+ this._RENDERER.alignTop();
+ }
+ ,
+
+ alignBottom: function () {
+ this._RENDERER.alignBottom();
+ }
+ ,
+
+ /**
+ * JSON 객체로 부터 Shape 을 드로잉한다.
+ *
+ * @param {Object} json JSON 포맷의 Object
+ * @return {Object} {width, height, x, y, x2, y2}
+ */
+ loadJSON: function (json) {
+ this.fastLoadingON();
+ var canvasWidth, canvasHeight, rootGroup, canvasScale,
+ minX = Number.MAX_VALUE, minY = Number.MAX_VALUE, maxX = Number.MIN_VALUE, maxY = Number.MIN_VALUE,
+ i, cell, shape, id, parent, shapeType, shapeId, x, y, width, height, style, geom, from, to,
+ fromEdge, toEdge, label, fromLabel, toLabel, angle, value, data, dataExt, element, loopType, taskType,
+ swimlane, textList;
+
+ this._RENDERER.clear();
+ var renderer = this._RENDERER;
+ $(renderer._PAPER.canvas).trigger('loading', ['start']);
+
+ if (json && json.opengraph && json.opengraph.cell && OG.Util.isArray(json.opengraph.cell)) {
+ canvasWidth = json.opengraph['@width'];
+ canvasHeight = json.opengraph['@height'];
+ canvasScale = json.opengraph['@scale'];
+ if (canvasScale) {
+ this.setScale(canvasScale);
+ } else {
+ this.setScale(1);
+ }
+ this.setCanvasSize([canvasWidth, canvasHeight]);
+
+ data = json.opengraph['@data'];
+ dataExt = json.opengraph['@dataExt'];
+ if (data) {
+ rootGroup = this.getRootGroup();
+ rootGroup.data = OG.JSON.decode(unescape(data));
+ }
+ if (dataExt) {
+ rootGroup = this.getRootGroup();
+ rootGroup.dataExt = OG.JSON.decode(unescape(dataExt));
+ }
+
+ cell = json.opengraph.cell;
+ var totalCount = cell.length;
+ var cellCount = 0;
+
+ for (var i = 0, leni = cell.length; i < leni; i++) {
+ id = cell[i]['@id'];
+ parent = cell[i]['@parent'];
+ swimlane = cell[i]['@swimlane'];
+ shapeType = cell[i]['@shapeType'];
+ shapeId = cell[i]['@shapeId'];
+ x = parseInt(cell[i]['@x'], 10);
+ y = parseInt(cell[i]['@y'], 10);
+ width = parseInt(cell[i]['@width'], 10);
+ height = parseInt(cell[i]['@height'], 10);
+ style = unescape(cell[i]['@style']);
+ geom = unescape(cell[i]['@geom']);
+
+ from = cell[i]['@from'];
+ to = cell[i]['@to'];
+ fromEdge = cell[i]['@fromEdge'];
+ toEdge = cell[i]['@toEdge'];
+ label = cell[i]['@label'];
+ fromLabel = cell[i]['@fromLabel'];
+ toLabel = cell[i]['@toLabel'];
+ angle = cell[i]['@angle'];
+ value = cell[i]['@value'];
+ data = cell[i]['@data'];
+ textList = cell[i]['@textList'];
+ dataExt = cell[i]['@dataExt'];
+ loopType = cell[i]['@loopType'];
+ taskType = cell[i]['@taskType'];
+
+ label = label ? unescape(label) : label;
+
+ minX = (minX > (x - width / 2)) ? (x - width / 2) : minX;
+ minY = (minY > (y - height / 2)) ? (y - height / 2) : minY;
+ maxX = (maxX < (x + width / 2)) ? (x + width / 2) : maxX;
+ maxY = (maxY < (y + height / 2)) ? (y + height / 2) : maxY;
+
+ switch (shapeType) {
+ case OG.Constants.SHAPE_TYPE.GEOM:
+ case OG.Constants.SHAPE_TYPE.GROUP:
+ shape = eval('new ' + shapeId + '()');
+ if (label) {
+ shape.label = label;
+ }
+ if (data) {
+ shape.data = OG.JSON.decode(unescape(data));
+ }
+ if (textList) {
+ shape.textList = OG.JSON.decode(unescape(textList));
+ }
+ element = this.drawShape([x, y], shape, [width, height], OG.JSON.decode(style), id, parent);
+ if (element.shape instanceof OG.shape.bpmn.A_Task) {
+ element.shape.LoopType = loopType;
+ element.shape.TaskType = taskType;
+ }
+ break;
+ case OG.Constants.SHAPE_TYPE.EDGE:
+ var list = JSON.parse('[' + value + ']');
+ var fromto = JSON.stringify(list[0]) + ',' + JSON.stringify(list[list.length - 1]);
+ shape = eval('new ' + shapeId + '(' + fromto + ')');
+ if (label) {
+ shape.label = label;
+ }
+ if (data) {
+ shape.data = OG.JSON.decode(unescape(data));
+ }
+ if (textList) {
+ shape.textList = OG.JSON.decode(unescape(textList));
+ }
+ if (fromLabel) {
+ shape.fromLabel = unescape(fromLabel);
+ }
+ if (toLabel) {
+ shape.toLabel = unescape(toLabel);
+ }
+ if (geom) {
+ geom = OG.JSON.decode(geom);
+ if (geom.type === OG.Constants.GEOM_NAME[OG.Constants.GEOM_TYPE.POLYLINE]) {
+ geom = new OG.geometry.PolyLine(geom.vertices);
+ shape.geom = geom;
+ } else if (geom.type === OG.Constants.GEOM_NAME[OG.Constants.GEOM_TYPE.CURVE]) {
+ geom = new OG.geometry.Curve(geom.controlPoints);
+ shape.geom = geom;
+ }
+ }
+ element = this.drawShape(null, shape, null, OG.JSON.decode(style), id, parent);
+ break;
+ case OG.Constants.SHAPE_TYPE.HTML:
+ shape = eval('new ' + shapeId + '()');
+ if (value) {
+ shape.html = unescape(value);
+ }
+ if (label) {
+ shape.label = label;
+ }
+ if (data) {
+ shape.data = OG.JSON.decode(unescape(data));
+ }
+ if (textList) {
+ shape.textList = OG.JSON.decode(unescape(textList));
+ }
+ element = this.drawShape([x, y], shape, [width, height, angle], OG.JSON.decode(style), id, parent);
+ break;
+ case OG.Constants.SHAPE_TYPE.IMAGE:
+ shape = eval('new ' + shapeId + '(\'' + value + '\')');
+ if (label) {
+ shape.label = label;
+ }
+ if (data) {
+ shape.data = OG.JSON.decode(unescape(data));
+ }
+ if (textList) {
+ shape.textList = OG.JSON.decode(unescape(textList));
+ }
+ element = this.drawShape([x, y], shape, [width, height, angle], OG.JSON.decode(style), id, parent);
+ break;
+ case OG.Constants.SHAPE_TYPE.TEXT:
+ shape = eval('new ' + shapeId + '()');
+ if (value) {
+ shape.text = unescape(value);
+ }
+ if (data) {
+ shape.data = OG.JSON.decode(unescape(data));
+ }
+ if (textList) {
+ shape.textList = OG.JSON.decode(unescape(textList));
+ }
+ element = this.drawShape([x, y], shape, [width, height, angle], OG.JSON.decode(style), id, parent);
+ break;
+ }
+
+ if (from) {
+ $(element).attr('_from', from);
+ }
+ if (to) {
+ $(element).attr('_to', to);
+ }
+ if (fromEdge) {
+ $(element).attr('_fromedge', fromEdge);
+ }
+ if (toEdge) {
+ $(element).attr('_toedge', toEdge);
+ }
+
+ if (data) {
+ element.data = OG.JSON.decode(unescape(data));
+ }
+ if (dataExt) {
+ element.dataExt = OG.JSON.decode(unescape(dataExt));
+ }
+
+ cellCount++;
+ $(renderer._PAPER.canvas).trigger('loading', [Math.round((cellCount / totalCount) * 100)]);
+ }
+
+ //백도어를 불러온다.
+ if (json.opengraph.backdoor && OG.Util.isArray(json.opengraph.backdoor) && json.opengraph.backdoor.length) {
+ var backdoor = json.opengraph.backdoor[0];
+ if (backdoor['@url']) {
+ this.addBackDoor(backdoor['@url'], backdoor['@scale'], backdoor['@opacity'])
+ }
+ }
+
+ this.fastLoadingOFF();
+ $(renderer._PAPER.canvas).trigger('loading', ['end']);
+
+ return {
+ width: maxX - minX,
+ height: maxY - minY,
+ x: minX,
+ y: minY,
+ x2: maxX,
+ y2: maxY
+ };
+ }
+
+ this.fastLoadingOFF();
+ $(renderer._PAPER.canvas).trigger('loading', ['end']);
+
+ return {
+ width: 0,
+ height: 0,
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 0
+ };
+ }
+ ,
+
+ /**
+ * 캔버스 undo.
+ */
+ undo: function () {
+ this._RENDERER.undo();
+ }
+ ,
+
+ /**
+ * 캔버스 redo.
+ */
+ redo: function () {
+ this._RENDERER.redo();
+ }
+ ,
+
+ /**
+ * 연결된 이전 Edge Element 들을 반환한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {Element[]} Previous Element's Array
+ */
+ getPrevEdges: function (element) {
+ return this._RENDERER.getPrevEdges(element);
+ }
+ ,
+
+ /**
+ * 연결된 이후 Edge Element 들을 반환한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {Element[]} Previous Element's Array
+ */
+ getNextEdges: function (element) {
+ return this._RENDERER.getNextEdges(element);
+ }
+ ,
+
+ /**
+ * 연결된 이전 노드 Element 들을 반환한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {Element[]} Previous Element's Array
+ */
+ getPrevShapes: function (element) {
+ return this._RENDERER.getPrevShapes(element);
+ }
+ ,
+
+ /**
+ * 연결된 이전 노드 Element ID들을 반환한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {String[]} Previous Element Id's Array
+ */
+ getPrevShapeIds: function (element) {
+ return this._RENDERER.getPrevShapeIds(element);
+ }
+ ,
+
+ /**
+ * 연결된 이후 노드 Element 들을 반환한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {Element[]} Previous Element's Array
+ */
+ getNextShapes: function (element) {
+ return this._RENDERER.getNextShapes(element);
+ }
+ ,
+
+ /**
+ * 연결된 이후 노드 Element ID들을 반환한다.
+ *
+ * @param {Element|String} element Element 또는 ID
+ * @return {String[]} Previous Element Id's Array
+ */
+ getNextShapeIds: function (element) {
+ return this._RENDERER.getNextShapeIds(element);
+ }
+ ,
+
+ /**
+ * Shape 이 처음 Draw 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement)
+ */
+ onDrawShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('drawShape', function (event, shapeElement) {
+ callbackFunc(event, shapeElement);
+ });
+ }
+ ,
+
+ /**
+ * History Update 되었을때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event)
+ */
+ onAddHistory: function (callbackFunc) {
+ $(this.getRootElement()).bind('addHistory', function (event) {
+ callbackFunc(event);
+ });
+ },
+
+ /**
+ * Undo 되었을때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event)
+ */
+ onUndo: function (callbackFunc) {
+ $(this.getRootElement()).bind('undo', function (event) {
+ callbackFunc(event);
+ });
+ }
+ ,
+
+ /**
+ * Redo 되었을때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event)
+ */
+ onRedo: function (callbackFunc) {
+ $(this.getRootElement()).bind('redo', function (event) {
+ callbackFunc(event);
+ });
+ }
+ ,
+
+ /**
+ * Lane 이 divide 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, dividedLane)
+ */
+ onDivideLane: function (callbackFunc) {
+ $(this.getRootElement()).bind('divideLane', function (event, dividedLane) {
+ callbackFunc(event, dividedLane);
+ });
+ }
+ ,
+
+ /**
+ * 라벨이 Draw 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement, labelText)
+ */
+ onDrawLabel: function (callbackFunc) {
+ $(this.getRootElement()).bind('drawLabel', function (event, shapeElement, labelText) {
+ callbackFunc(event, shapeElement, labelText);
+ })
+ }
+ ,
+
+ /**
+ * 라벨이 Change 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement, afterText, beforeText)
+ */
+ onLabelChanged: function (callbackFunc) {
+ $(this.getRootElement()).bind('labelChanged', function (event, shapeElement, afterText, beforeText) {
+ callbackFunc(event, shapeElement, afterText, beforeText);
+ });
+ }
+ ,
+
+ /**
+ * 라벨이 Change 되기전 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement, afterText, beforeText)
+ */
+ onBeforeLabelChange: function (callbackFunc) {
+ $(this.getRootElement()).bind('beforeLabelChange', function (event) {
+ if (callbackFunc(event, event.element, event.afterText, event.beforeText) === false) {
+ event.stopPropagation();
+ }
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Redraw 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement)
+ */
+ onRedrawShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('redrawShape', function (event, shapeElement) {
+ callbackFunc(event, shapeElement);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Remove 될 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement)
+ */
+ onRemoveShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('removeShape', function (event, shapeElement) {
+ callbackFunc(event, shapeElement);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Rotate 될 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, element, angle)
+ */
+ onRotateShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('rotateShape', function (event, element, angle) {
+ callbackFunc(event, element, angle);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Move 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement, offset)
+ */
+ onMoveShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('moveShape', function (event, shapeElement, offset) {
+ callbackFunc(event, shapeElement, offset);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Resize 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, shapeElement, offset)
+ */
+ onResizeShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('resizeShape', function (event, shapeElement, offset) {
+ callbackFunc(event, shapeElement, offset);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Connect 되기전 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, edgeElement, fromElement, toElement)
+ */
+ onBeforeConnectShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('beforeConnectShape', function (event) {
+ if (callbackFunc(event, event.edge, event.fromShape, event.toShape) === false) {
+ event.stopPropagation();
+ }
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Remove 되기전 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, element)
+ */
+ onBeforeRemoveShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('beforeRemoveShape', function (event) {
+ if (callbackFunc(event, event.element) === false) {
+ event.stopPropagation();
+ }
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Connect 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, edgeElement, fromElement, toElement)
+ */
+ onConnectShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('connectShape', function (event, edgeElement, fromElement, toElement) {
+ callbackFunc(event, edgeElement, fromElement, toElement);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Disconnect 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, edgeElement, fromElement, toElement)
+ */
+ onDisconnectShape: function (callbackFunc) {
+ $(this.getRootElement()).bind('disconnectShape', function (event, edgeElement, fromElement, toElement) {
+ callbackFunc(event, edgeElement, fromElement, toElement);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 Grouping 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, groupElement)
+ */
+ onGroup: function (callbackFunc) {
+ $(this.getRootElement()).bind('group', function (event, groupElement) {
+ callbackFunc(event, groupElement);
+ });
+ }
+ ,
+
+ /**
+ * Shape 이 UnGrouping 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, ungroupedElements)
+ */
+ onUnGroup: function (callbackFunc) {
+ $(this.getRootElement()).bind('ungroup', function (event, ungroupedElements) {
+ callbackFunc(event, ungroupedElements);
+ });
+ }
+ ,
+
+ /**
+ * Group 이 Collapse 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, element)
+ */
+ onCollapsed: function (callbackFunc) {
+ $(this.getRootElement()).bind('collapsed', function (event, element) {
+ callbackFunc(event, element);
+ });
+ }
+ ,
+
+ /**
+ * Group 이 Expand 되었을 때의 이벤트 리스너
+ *
+ * @param {Function} callbackFunc 콜백함수(event, element)
+ */
+ onExpanded: function (callbackFunc) {
+ $(this.getRootElement()).bind('expanded', function (event, element) {
+ callbackFunc(event, element);
+ });
+ },
+
+ /**
+ *
+ * @param {Function} callbackFunc 콜백함수(event, edgeElement, sourceElement, targetElement)
+ */
+ onDuplicated: function (callbackFunc) {
+ $(this.getRootElement()).bind('duplicated', function (event, edgeElement, sourceElement, targetElement) {
+ callbackFunc(event, edgeElement, sourceElement, targetElement);
+ });
+ },
+
+ /**
+ * 캔버스 로딩 이벤트 리스너
+ */
+ onLoading: function (callbackFunc) {
+ $(this.getRootElement()).bind('loading', function (event, progress) {
+ callbackFunc(event, progress);
+ });
+ }
+}
+;
+OG.graph.Canvas.prototype.constructor = OG.graph.Canvas;
+OG.Canvas = OG.graph.Canvas;
diff --git a/public/static/slimscroll/jquery.slimscroll.min.js b/public/static/slimscroll/jquery.slimscroll.min.js
new file mode 100755
index 00000000..092d3366
--- /dev/null
+++ b/public/static/slimscroll/jquery.slimscroll.min.js
@@ -0,0 +1,10 @@
+
+(function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
+var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,g,e){k=!1;var f=b.outerHeight()-c.outerHeight();g&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),f),g=0=b.outerHeight()?k=!0:(c.stop(!0,
+!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
+h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
+width:a.width,height:a.height});var m=e("").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,
+WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
+function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
+x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
diff --git a/public/static/templates/spring-boot/Entity.java b/public/static/templates/spring-boot/Entity.java
new file mode 100644
index 00000000..f9aac327
--- /dev/null
+++ b/public/static/templates/spring-boot/Entity.java
@@ -0,0 +1,26 @@
+package hello;
+
+import javax.persistence.*;
+import java.util.List;
+
+@Entity
+@Table(name="{{name}}table")
+public class {{name}} {
+
+ {{#fieldDescriptors}}{{#isKey}}@Id @GeneratedValue(strategy=GenerationType.AUTO){{/isKey}}{{multiplicity}}
+ private {{type}} {{name}};
+ {{/fieldDescriptors}}
+
+ public {{name}}() {}
+
+ {{#fieldDescriptors}}
+ public {{className}} get{{nameCamel}}() {
+ return {{name}};
+ }
+
+ public void set{{nameCamel}}({{className}} {{name}}) {
+ this.{{name}} = {{name}};
+ }
+ {{/fieldDescriptors}}
+
+}
\ No newline at end of file
diff --git a/public/static/v.png b/public/static/v.png
new file mode 100755
index 00000000..a2ce2353
Binary files /dev/null and b/public/static/v.png differ
diff --git a/pusher/.gitignore b/pusher/.gitignore
new file mode 100644
index 00000000..5148e527
--- /dev/null
+++ b/pusher/.gitignore
@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
diff --git a/pusher/LICENSE b/pusher/LICENSE
new file mode 100644
index 00000000..b7c0f3c6
--- /dev/null
+++ b/pusher/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Rahat Khanna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/pusher/README.md b/pusher/README.md
new file mode 100644
index 00000000..4fc84197
--- /dev/null
+++ b/pusher/README.md
@@ -0,0 +1,68 @@
+# whats-up-realtime-status-update
+An app that let's you see any User's Status in realtime
+
+[View tutorial](https://pusher.com/tutorials/social-network-javascript/)
+
+## Prerequisite Softwares
+- NodeJS
+- NPM
+- Yarn (Optional)
+
+## Running the Project
+In order to run the app on your machines, please follow the below given steps:
+
+1. Clone the Repo using the URL - https://github.com/mappmechanic/whats-up-realtime-status-update
+
+```
+ git clone https://github.com/mappmechanic/whats-up-realtime-status-update.git
+```
+
+2. Run either of the following commands to install dependencies
+
+```
+ npm install
+```
+
+OR
+
+```
+ yarn
+```
+
+3. Signup at [https://pusher.com/signup](https://pusher.com/signup).
+
+4. Create a new app to obtain the API Key, secret & appId. Also, I have chosen the cluster **'ap2 (Mumbai, India)**, but you will be required to choose a cluster specific to your app users.
+
+Replace the respective key, secret & appId for pusher initialisation in **server.js** file with your values:
+
+```javascript
+ var pusher = new Pusher({
+ appId: '',
+ key: '',
+ secret: '',
+ encrypted: true
+ });
+```
+
+5. Finally you will have to also replace your app-key in **app.js** file too:
+
+```javascript
+ ...
+ pusher = new Pusher('', {
+ authEndpoint: '/usersystem/auth',
+ encrypted: true
+ }),
+ ...
+```
+
+6. Now we are ready to run our app using the following node commands
+
+```
+node server
+```
+
+7. We will be able to access the app at [http://localhost:9000](http://localhost:9000)
+
+For Any clarifications or questions Tweet to me at
+[https://twitter.com/mappmechanic](https://twitter.com/mappmechanic)
+
diff --git a/pusher/article.md b/pusher/article.md
new file mode 100644
index 00000000..519ab1b3
--- /dev/null
+++ b/pusher/article.md
@@ -0,0 +1,689 @@
+# How to update a user's status in realtime in JavaScript
+
+"Hey, what's up?" is not a phrase we need to ask someone these days. These days knowing what someone is up to has become so easy that we keep seeing updated status for all our friends on Whatsapp, Snapchat, Facebook etc. In this blog post, we will learn how can we build a *Realtime user's status update* component along with a list of all members who are online.
+
+We will be using **NodeJS** as the application server, **Vanilla JS** in the front end and **Pusher** for realtime communication between our server and front end.
+
+We will build an app which will be like your friends list or a common chat room where you can see who's online and their latest status update in realtime. In the blog post, we will learn about Pusher's **presence** channel and how to know about the online members to this channel.
+
+
+
+We will be building the following components during this blog post:
+
+- NodeJS Server using **ExpressJS Framework**
+ - **/register** API - In order to register/login a new user to our channel and server by creating their session and saving their info
+ - **/isLoggedIn** API - To check if a user is already logged in or not in case of refreshing the browser
+ - **/usersystem/auth** API - Auth validation done by Pusher after registering it with our app and on subscribing to a presence or private channel
+ - **/logout** API - To logout the user and remove the session
+
+- Front End App using **Vanilla Javascript**
+ - Register/Login Form - To register/login a new user by filling in their username and initial status
+ - Members List - To see everyone who is online and their updated status
+ - Update Status - To click on the existing status and update it on blur of the status text edit control
+
+
+# Introduction to Pusher
+
+Pusher is a platform which abstracts the complexities of implementing a realtime system on our own using Websockets or Long Polling. We can instantly add realtime features to our existing web applications using Pusher as it supports a wide variety of SDKs. Integration kits are available for variety of front end libraries like **Backbone, React, Angular, jQuery etc** and also backend platforms/languages like **.NET, Java, Python, Ruby, PHP, GO etc**.
+
+## Signing up with Pusher
+
+You can create a free account in Pusher [here](http://pusher.com/signup). After you signup and login for the first time, you will be asked to create a new app as seen in the picture below. You will have to fill in some information about your project and also the front end library or backend language you will be building your app with.
+
+
+
+For this particular blog post, we will be selecting **Vanilla JS** for the front end and **NodeJS** for the backend as seen in the picture above. This will just show you a set of starter sample codes for these selections, but you can use any integration kit later on with this app.
+
+
+
+# NodeJS Server
+
+NodeJS should be installed in the system as a prerequisite to this. Now let us begin building the NodeJS server and all the required APIs using **Express**. Initialise a new node project by the following command
+
+``` bash
+npm init
+```
+## Installing Dependencies
+
+We will be installing the required dependencies like Express, express-session, Pusher, body-parser, cookie-parser by the following command:
+
+``` bash
+npm install express express-session body-parser cookie-parser --save
+```
+## Foundation Server
+
+We will now create the basic foundation for Node Server and also enable sessions in that using express-session module.
+
+``` javascript
+var express = require('express');
+var path = require('path');
+var bodyParser = require('body-parser');
+var expressSession = require('express-session');
+var cookieParser = require('cookie-parser');
+
+var app = express();
+
+// must use cookieParser before expressSession
+app.use(cookieParser());
+
+app.use(expressSession({
+ secret:'',
+ resave: true,
+ saveUninitialized: true
+}));
+
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Error Handler for 404 Pages
+app.use(function(req, res, next) {
+ var error404 = new Error('Route Not Found');
+ error404.status = 404;
+ next(error404);
+});
+
+module.exports = app;
+
+app.listen(9000, function(){
+ console.log('Example app listening on port 9000!')
+});
+```
+In the above code, we have created a basic Express server and using the method **.use** we have enabled cookie-parser, body-parser and a static file serving from **public** folder. We have also enabled sessions using **express-session** module. This will enable us to save user information in the appropriate request session for the user.
+
+## Adding Pusher
+
+Pusher has an open source NPM module for **NodeJS** integrations which we will be using. It provides a set of utility methods to integrate with **Pusher** APIs using a unique appId, key and a secret. We will first install the Pusher `npm` module using the following command:
+
+``` bash
+npm install pusher --save
+```
+Now, we can use 'require' to get the Pusher module and to create a new instance passing an options object with important keys to initialise our integration. For this blog post, I have put random keys; you will have to obtain it for your app from the Pusher dashboard.
+
+``` javascript
+var Pusher = require('pusher');
+
+var pusher = new Pusher({
+ appId: '30XXX64',
+ key: '82XXXXXXXXXXXXXXXXXb5',
+ secret: '7bXXXXXXXXXXXXXXXX9e',
+ encrypted: true
+});
+
+var app = express();
+...
+```
+You will have to replace the **appId**, **key** and a **secret** with values specific to your own app. After this, we will write code for a new API which will be used to create a new comment.
+
+## Register/Login API
+
+Now, we will develop the first API route of our application through which a new user can register/login itself and make itself available on our app.
+
+``` javascript
+app.post('/register', function(req, res){
+ console.log(req.body);
+ if(req.body.username && req.body.status){
+ var newMember = {
+ username: req.body.username,
+ status: req.body.status
+ }
+ req.session.user = newMember;
+ res.json({
+ success: true,
+ error: false
+ });
+ }else{
+ res.json({
+ success: false,
+ error: true,
+ message: 'Incomplete information: username and status are required'
+ });
+ }
+});
+```
+In the above code, we have exposed a POST API call on the route **/register** which would expect **username** and **status** parameters to be passed in the request body. We will be saving this user info in the request session.
+
+## User System Auth API
+
+In order to enable any client subscribing to Pusher **Private** and **Presence** channels, we need to implement an auth API which would authenticate the user request by calling **Pusher.authenticate** method at the server side. Add the following code in the server in order to fulfil this condition:
+
+``` javascript
+app.post('/usersystem/auth', function(req, res) {
+ var socketId = req.body.socket_id;
+ var channel = req.body.channel_name;
+ var currentMember = req.session.user;
+ var presenceData = {
+ user_id: currentMember.username,
+ user_info: {
+ status: currentMember.status,
+ }
+ };
+ var auth = pusher.authenticate(socketId, channel, presenceData);
+ res.send(auth);
+});
+```
+We need to provide the specific route in the initialisation of **Pusher Client** side library which we will see later in this blog post. The Pusher client library will automatically call this route and pass in the channel_name and socket_id properties. We will simultaneously get the user information from the user session object and pass it as presenceData to the **Pusher.authenticate** method call.
+
+## IsLoggedIn and Logout API
+
+If the user refreshes the browser, the client side app should detect if the user is already registered or not. We will implement an **isLoggedIn** API route for this. Also, we need a **logout** route to enable any user to logout from the app.
+
+``` javascript
+app.get('/isLoggedIn', function(req,res){
+ if(req.session.user){
+ res.send({
+ authenticated: true
+ });
+ }else{
+ res.send({ authenticated: false });
+ }
+});
+
+app.get('/logout', function(req,res){
+ if(req.session.user){
+ req.session.user = null;
+ }
+ res.redirect('/');
+});
+```
+# Front End App using Vanilla JS
+
+We will be developing the front end app now to register a new user with an initial status, see the members who are online and their statuses. We will also build the feature for the logged in user to update their users and all other users will see the updated status in realtime.
+
+## Step 1: Create a folder named public and create an index.html
+
+We have already written code in our `server.js` to serve static content from `public` folder, so we will write all our front end code in this folder.
+
+Please create a new folder `public` and also create an empty `index.html` for now.
+
+## Step 2: Add Boilerplate Code to our index.html
+
+We will be adding some basic boilerplate code to set up the base structure for our web app like Header, Sections where registration form and the members list can be placed.
+
+``` javascript
+
+
+
+ Whats Up ! Know what other's are up to in Realtime !
+
+
+
+
+
+
+
+
+
+
by uEngine
+
+
+
+
+ info
+
+
+ Logout
+
+
+ Login
+
+
+
+
+
+ settings
+
+
+
+
+
+
+
+
+
+
+
+<<<<<<< HEAD
+ >>>>>> 30502b93b64cce4918c9208ba91b7a7c48a35b56
+ >
+
+ mdi-close
+
+
+
+
+
+
+
+ How to use EventStorming-tool?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ close
+
+ Settings
+
+
+ Save
+
+
+
+ Connection Setting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click Setting & Insert Infomation
+
+ Close
+
+
+
+
+
+
+
+
diff --git a/src/assets/event.png b/src/assets/event.png
new file mode 100644
index 00000000..8ce40ebd
Binary files /dev/null and b/src/assets/event.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 00000000..145b6d13
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/DashBoard.vue b/src/components/DashBoard.vue
new file mode 100644
index 00000000..52391f7b
--- /dev/null
+++ b/src/components/DashBoard.vue
@@ -0,0 +1,1036 @@
+
+
+
+
+
+ pods
+
+
+ deployment
+
+
+ service
+
+
+ add
+
+
+
+
+
+
+
+ ADD
+
+
+
+
+
+
+
+ |
+
+ |
+ {{ props.item.name }}
+ |
+ {{ props.item.namespace }} |
+
+ {{ props.item.status }} |
+
+ {{ props.item.createTimeStamp }}
+ |
+
+
+ {{ props.item.statusReadyReplicas }}
+ |
+
+ {{ props.item.statusReplicas }}
+ |
+
+ {{ props.item.statusUpdateReplicas }}
+ |
+
+ {{ props.item.statusAvailableReplicas }}
+ |
+
+ {{ props.item.createTimeStamp }}
+ |
+
+
+ {{ props.item.specType }}
+ |
+
+ {{ props.item.specClusterIp }}
+ |
+
+ {{ props.item.ingressIp }}
+ |
+
+ {{ props.item.hostname }}
+ |
+
+
+ |
+
+
+ {{ portData.port }}:{{ portData.nodePort }}/{{ portData.protocol }}
+
+ |
+
+
+
+
+ |
+
+ {{ props.item.createTimeStamp }}
+ |
+
+
+ show_chart
+
+
+ edit
+
+
+ delete
+
+ |
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+ close
+
+
+ {{ selectedRow.item.name }} LOG
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | {{ items.item.dateTime
+ }}
+ |
+ {{ items.item.status }}
+ |
+ {{ items.item.message }} |
+
+
+ | {{ items.item.dateTime
+ }}
+ |
+ {{ items.item.status }}
+ |
+ {{ items.item.message }} |
+
+
+ | {{ items.item.dateTime
+ }}
+ |
+ {{ items.item.status }}
+ |
+ {{ items.item.message }} |
+
+
+
+
+ Sorry, nothing to display here :(
+
+
+
+
+
+
+
+
+
+
+
+
+ close
+
+
+ {{ selectedRow.item.name }} Log
+
+
+
+
+
+
+
+ {{ keyitem }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | {{
+ items.item.dateTime }}
+ |
+ {{
+ items.item.status }}
+ |
+ {{ items.item.message }} |
+
+
+ | {{
+ items.item.dateTime }}
+ |
+ {{
+ items.item.status }}
+ |
+ {{ items.item.message }} |
+
+
+ | {{
+ items.item.dateTime }}
+ |
+ {{
+ items.item.status }}
+ |
+ {{ items.item.message }} |
+
+
+
+
+ Sorry, nothing to display here :(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{types.toUpperCase()}} Editor
+
+
+
+
+
+ clear
+
+
+
+
+
+
+
+
+
+
+
+
+
삭제 안내
+
{{ deleteName }}를 삭제하시겠습니까?
+
+
+
+ {{ snackbar.text }}
+
+ Close
+
+
+
+ Welcome to Vuetify
+
+
+ For help and collaboration with other Vuetify developers,
+
please join our online
+ Discord Community
+
+
+
+
+ What's next?
+
+
+
+ {{ next.text }}
+
+
+
+
+
+ Important Links
+
+
+
+ {{ link.text }}
+
+
+
+
+
+ Ecosystem
+
+
+
+ {{ eco.text }}
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/CodeViewer.vue b/src/components/designer/CodeViewer.vue
new file mode 100644
index 00000000..697ec528
--- /dev/null
+++ b/src/components/designer/CodeViewer.vue
@@ -0,0 +1,181 @@
+
+
+
+
+
+ {{value[0][0].name}}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/DefinitionList.vue b/src/components/designer/DefinitionList.vue
new file mode 100755
index 00000000..99253e03
--- /dev/null
+++ b/src/components/designer/DefinitionList.vue
@@ -0,0 +1,725 @@
+
+
+
+
+ restore
+
+
+ Version Manager
+
+
+
+
+
+
+ Close
+
+
+
+
+
+
+ {{selectedCard.name}}을 삭제하시겠습니까?
+ 삭제하시겠습니까?
+
+
+
+ 예
+
+ 아니요
+
+
+
+
+
+
+
+
+ add
+ add
+
+
+
+ New Process
+ label
+
+
+ New Class
+ device_hub
+
+
+ New Practice
+ slideshow
+
+
+ New Folder
+ folder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("message['title.desinger.package']") }}
+
+
+
+
+
+
+
+
+
+ folder
+ {{ item.name }}
+
+
+
+
+
+ {{ $t("message['button.rename']") }}
+ edit
+
+
+ {{ $t("message['button.move']") }}
+ folder_open
+
+
+ {{ $t("message['button.delete']") }}
+ delete
+
+
+
+
+
+
+
+
+
+
+
+
{{ $t("message['title.desinger.process']") }}
+
+
+
+
+
+
+ ![]()
+
+
+
+ {{card.name.split(".")[0]}}
+
+
+
+ {{card.desc}}
+
+
+
+
+ {{ $t("message['button.activate']") }}
+ {{ $t("message['button.edit']") }}
+
+
+
+ {{ $t("message['button.move']") }}
+
+ {{
+ $t("message['button.delete']") }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("message['title.desinger.package.move']") }}
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+ {{currentPath.substring(currentPath.lastIndexOf("/")+1, currentPath.length)}}
+
+
+
+
+
+ {{package.name}}
+
+
+
+
+
+ {{ $t("message['button.move']")
+ }}
+
+ {{ $t("message['button.close']") }}
+
+
+
+
+
+
+ {{ $t("message['title.desinger.new.package']") }}
+
+
+
+
+
+
+
+ {{
+ $t("message['button.create']") }}
+
+ {{ $t("message['button.close']") }}
+
+
+
+
+
+
+ {{ $t("message['title.desinger.rename.package']") }}
+
+
+
+
+
+
+
+ {{
+ $t("message['button.rename']") }}
+
+ {{ $t("message['button.close']") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/AggregateDefinition.vue b/src/components/designer/class-modeling/elements/AggregateDefinition.vue
new file mode 100755
index 00000000..bec16794
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/AggregateDefinition.vue
@@ -0,0 +1,290 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/BoundedContext.vue b/src/components/designer/class-modeling/elements/BoundedContext.vue
new file mode 100755
index 00000000..8f6377fe
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/BoundedContext.vue
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/ClassDefinition.vue b/src/components/designer/class-modeling/elements/ClassDefinition.vue
new file mode 100755
index 00000000..390119ca
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/ClassDefinition.vue
@@ -0,0 +1,279 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reference from other model (Bounded Context)
+
+
+
+
+
+
+
+ pk
+
+
+
+
+
+
+
+
+
+
+
+ String
+ Long
+ Double
+ Date
+ Boolean
+
+
+ delete
+
+
+
+
+
+ ADD ATTRIBUTE
+
+
+
+ Update class info
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/CommandDefinition.vue b/src/components/designer/class-modeling/elements/CommandDefinition.vue
new file mode 100755
index 00000000..7d90e166
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/CommandDefinition.vue
@@ -0,0 +1,165 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/DomainEventDefinition.vue b/src/components/designer/class-modeling/elements/DomainEventDefinition.vue
new file mode 100644
index 00000000..84df71ff
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/DomainEventDefinition.vue
@@ -0,0 +1,235 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/ExternalDefinition.vue b/src/components/designer/class-modeling/elements/ExternalDefinition.vue
new file mode 100755
index 00000000..d70554cc
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/ExternalDefinition.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/PolicyDefinition.vue b/src/components/designer/class-modeling/elements/PolicyDefinition.vue
new file mode 100755
index 00000000..30c4cfae
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/PolicyDefinition.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/elements/ViewDefinition.vue b/src/components/designer/class-modeling/elements/ViewDefinition.vue
new file mode 100755
index 00000000..a6a64f6f
--- /dev/null
+++ b/src/components/designer/class-modeling/elements/ViewDefinition.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/class-modeling/index.js b/src/components/designer/class-modeling/index.js
new file mode 100755
index 00000000..60ea016f
--- /dev/null
+++ b/src/components/designer/class-modeling/index.js
@@ -0,0 +1,32 @@
+const ClassModeling = {
+ install (Vue, opts = {}) {
+
+ const files = require.context('.', true, /\.vue$/);
+ const components = {}
+ files.keys().forEach((key) => {
+ if (key === './index.js') {
+ return;
+ }
+ components[key.replace(/(\.\/|\.vue)/g, '')] = files(key);
+ });
+
+ if(Vue._components==null) Vue._components = {};
+
+ for (var key in components) {
+ Vue.component(components[key].default.name, components[key].default);
+ Vue._components[components[key].default.name] = components[key].default;
+ }
+
+ //bpmn 컴포넌트 검색용
+ Vue.classModelingComponents = components;
+
+ //윈도우 전역변수 등록 (다른 인스톨 플러그인에서 거진 하긴 해주지만 혹시 모르니...)
+ if (window && !window.Vue) {
+ window.Vue = Vue;
+ }
+ }
+}
+
+export default ClassModeling
+
+
diff --git a/src/components/designer/modeling/Element.vue b/src/components/designer/modeling/Element.vue
new file mode 100755
index 00000000..8c344689
--- /dev/null
+++ b/src/components/designer/modeling/Element.vue
@@ -0,0 +1,245 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/modeling/ModelingDesigner.vue b/src/components/designer/modeling/ModelingDesigner.vue
new file mode 100755
index 00000000..f4de6d08
--- /dev/null
+++ b/src/components/designer/modeling/ModelingDesigner.vue
@@ -0,0 +1,2015 @@
+
+
+
+
+
+
+
+
+
+
+ Code Preview
+
+
+
+
+
+
+
+
+ {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
+
+
+ {{ files[item.file] }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ code
+ Preview
+
+ Download Archive
+
+
+
+
+
+ SAVE
+
+
+
+
+
+
+ Hands
+
+
+
+
+ ![]()
+
+
+ {{item.label}}
+
+
+
+
+
+
+ {{ text }}
+
+ Close
+
+
+
+
+
![]()
+
+
+
+ {{ titleName }}
+
+
+
+
+
+
+
+
+
+ Type
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{titleName}} Name
+
+
+
+
+ 추천 단어 : {{ translateText }}
+
+
+ 선택시 변경 됩니다.
+
+
+
+
+ Attributes
+
+
+
+
+
+
+ delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ADD ATTRIBUTE
+
+
+
+
+
+
+
+
+
+
+
+ Associated Aggregate
+
+
+
+
+
+
+
+
+ Edit Domain Model by UML
+
+
+ Trigger
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/modeling/ModelingRelation.vue b/src/components/designer/modeling/ModelingRelation.vue
new file mode 100755
index 00000000..81191ba8
--- /dev/null
+++ b/src/components/designer/modeling/ModelingRelation.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/modeling/UMLDesigner.vue b/src/components/designer/modeling/UMLDesigner.vue
new file mode 100755
index 00000000..736010a5
--- /dev/null
+++ b/src/components/designer/modeling/UMLDesigner.vue
@@ -0,0 +1,937 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SAVE
+
+
+
+
+
+
+
+ Hands
+
+
+
+
+ ![]()
+
+
+ {{item.label}}
+
+
+
+
+
+
+
+ Customized.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.label}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ save
+
+
+
+
+
+ Locale
+ English
+ Korean
+
+ Process Variable
+
+ Defintion Settings
+
+
+
+
+ 담당자 변경
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/designer/process/ProcessDesigner.vue b/src/components/designer/process/ProcessDesigner.vue
new file mode 100755
index 00000000..a27016d1
--- /dev/null
+++ b/src/components/designer/process/ProcessDesigner.vue
@@ -0,0 +1,1053 @@
+
+
+
+
+
+ Mark Production (rev
+ {{id.substring(id.indexOf('@') + 1)}})
+
+
+ this is production (rev. {{id.substring(id.indexOf('@') + 1)}})
+
+
+
+ latest version
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Drag On/Off
+
+
+ {{item.label}}
+
+
+
+
+ Undo
+
+
+ Redo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ rev. {{version.ver}}
+ production
+
+
+
+
+
+
+
+
+
+ settings
+ Settings
+
+
+
+
+
+
+ sort_by_alpha
+ Vars
+
+
+
+
+
+
+
+ Korean
+ English
+
+
+
+
+
+
+
+ play_arrow
+
+
+ save
+ history
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Variables
+
+
+ Role Mappings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/EdgeElement.vue b/src/components/opengraph/shape/EdgeElement.vue
new file mode 100755
index 00000000..94a4beb3
--- /dev/null
+++ b/src/components/opengraph/shape/EdgeElement.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/EllipseElement.vue b/src/components/opengraph/shape/EllipseElement.vue
new file mode 100755
index 00000000..9b16c19e
--- /dev/null
+++ b/src/components/opengraph/shape/EllipseElement.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/GeometryElement.vue b/src/components/opengraph/shape/GeometryElement.vue
new file mode 100755
index 00000000..7d7f770c
--- /dev/null
+++ b/src/components/opengraph/shape/GeometryElement.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/GroupElement.vue b/src/components/opengraph/shape/GroupElement.vue
new file mode 100755
index 00000000..b95a95cb
--- /dev/null
+++ b/src/components/opengraph/shape/GroupElement.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/HorizontalLaneElement.vue b/src/components/opengraph/shape/HorizontalLaneElement.vue
new file mode 100755
index 00000000..59e388d3
--- /dev/null
+++ b/src/components/opengraph/shape/HorizontalLaneElement.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/HorizontalPoolElement.vue b/src/components/opengraph/shape/HorizontalPoolElement.vue
new file mode 100755
index 00000000..b323cea0
--- /dev/null
+++ b/src/components/opengraph/shape/HorizontalPoolElement.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/HtmlElement.vue b/src/components/opengraph/shape/HtmlElement.vue
new file mode 100755
index 00000000..c9cae148
--- /dev/null
+++ b/src/components/opengraph/shape/HtmlElement.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/ImageElement.vue b/src/components/opengraph/shape/ImageElement.vue
new file mode 100755
index 00000000..3b7254b1
--- /dev/null
+++ b/src/components/opengraph/shape/ImageElement.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/OpengraphElement.vue b/src/components/opengraph/shape/OpengraphElement.vue
new file mode 100755
index 00000000..f31c1a50
--- /dev/null
+++ b/src/components/opengraph/shape/OpengraphElement.vue
@@ -0,0 +1,1050 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/RectangleElement.vue b/src/components/opengraph/shape/RectangleElement.vue
new file mode 100755
index 00000000..3633c806
--- /dev/null
+++ b/src/components/opengraph/shape/RectangleElement.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/SubController.vue b/src/components/opengraph/shape/SubController.vue
new file mode 100755
index 00000000..db6b0633
--- /dev/null
+++ b/src/components/opengraph/shape/SubController.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/SubElements.vue b/src/components/opengraph/shape/SubElements.vue
new file mode 100755
index 00000000..81a8b0dd
--- /dev/null
+++ b/src/components/opengraph/shape/SubElements.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/SvgElement.vue b/src/components/opengraph/shape/SvgElement.vue
new file mode 100755
index 00000000..67f0b54d
--- /dev/null
+++ b/src/components/opengraph/shape/SvgElement.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/TextElement.vue b/src/components/opengraph/shape/TextElement.vue
new file mode 100755
index 00000000..87cc1e95
--- /dev/null
+++ b/src/components/opengraph/shape/TextElement.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/VerticalLaneElement.vue b/src/components/opengraph/shape/VerticalLaneElement.vue
new file mode 100755
index 00000000..398f9f6e
--- /dev/null
+++ b/src/components/opengraph/shape/VerticalLaneElement.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/opengraph/shape/VerticalPoolElement.vue b/src/components/opengraph/shape/VerticalPoolElement.vue
new file mode 100755
index 00000000..121dd736
--- /dev/null
+++ b/src/components/opengraph/shape/VerticalPoolElement.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/yaml.vue b/src/components/yaml.vue
new file mode 100644
index 00000000..420e99ed
--- /dev/null
+++ b/src/components/yaml.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..6f28060d
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,59 @@
+import Vue from 'vue'
+import './plugins/vuetify'
+import 'vuetify/dist/vuetify.min.css'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import './registerServiceWorker'
+import VueJWT from 'vuejs-jwt'
+import VModal from 'vue-js-modal'
+import EditYaml from './components/edityamlpage.vue'
+import textReader from './components/yaml.vue'
+import Opengraph from './components/opengraph'
+import ClassModeling from './components/designer/class-modeling'
+import Modeling from './components/designer/modeling'
+import Mustache from 'mustache'
+import CodeMirror from 'vue-codemirror'
+import VueYouTubeEmbed from 'vue-youtube-embed'
+
+Vue.use(Mustache)
+Vue.use(CodeMirror)
+Vue.use(Opengraph);
+Vue.use(ClassModeling);
+Vue.use(Modeling);
+// import Metaworks4 from '../node_modules/metaworks4'
+import vuetify from './plugins/vuetify';
+//
+// Vue.use(Metaworks4);
+
+Vue.use(VModal)
+Vue.component('EditYaml', EditYaml)
+Vue.component('text-reader', textReader)
+
+var options = {'keyName' : 'accessToken'};
+
+Vue.use(VueJWT, options)
+Vue.use(VueYouTubeEmbed, { global: true, componentId: "youtube-media" })
+process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+
+Vue.prototype.$EventBus = new Vue()
+Vue.prototype.$ModelingBus = new Vue()
+window.$Mustache = Mustache
+
+if( process.env.NODE_ENV == "development" ){
+ window.API_HOST = "localhost:8080";
+}else{
+ window.API_HOST = process.env.VUE_APP_API_HOST
+}
+
+// const TRANSLATE_KEY =`${process.env.VUE_APP_TRANSLATE_KEY}`
+// console.log(TRANSLATE_KEY)
+
+Vue.config.productionTip = false
+
+new Vue({
+ router,
+ store,
+ vuetify,
+ render: function (h) { return h(App) }
+}).$mount('#app')
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
new file mode 100644
index 00000000..2a4bab2b
--- /dev/null
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+ icons: {
+ iconfont: 'mdi',
+ },
+});
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
new file mode 100644
index 00000000..76cede07
--- /dev/null
+++ b/src/registerServiceWorker.js
@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+ register(`${process.env.BASE_URL}service-worker.js`, {
+ ready () {
+ console.log(
+ 'App is being served from cache by a service worker.\n' +
+ 'For more details, visit https://goo.gl/AFskqB'
+ )
+ },
+ registered () {
+ console.log('Service worker has been registered.')
+ },
+ cached () {
+ console.log('Content has been cached for offline use.')
+ },
+ updatefound () {
+ console.log('New content is downloading.')
+ },
+ updated () {
+ console.log('New content is available; please refresh.')
+ },
+ offline () {
+ console.log('No internet connection found. App is running in offline mode.')
+ },
+ error (error) {
+ console.error('Error during service worker registration:', error)
+ }
+ })
+}
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 00000000..328bbf23
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,53 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+// import Dashboard from './views/dashboardpage.vue'
+import EventStormingListPage from './components/EventStormingList/EventStormingListPage.vue'
+import Introduce from './components/EventStormingList/Introduce.vue'
+
+
+
+Vue.use(Router)
+
+import ModelerRouter from './components/designer/ModelerRouter'
+import ProcessDesigner from './components/designer/process/ProcessDesigner'
+import EventModeler from './components/designer/class-modeling/EventModeler'
+import ClassModeler from './components/designer/class-modeling/ClassModeler'
+import ModelerImageGenerator from './components/designer/ModelerImageGenerator'
+
+Vue.component('modeler-router', ModelerRouter);
+Vue.component('modeler-image-generator', ModelerImageGenerator);
+Vue.component('process-designer', ProcessDesigner);
+Vue.component('event-modeler', EventModeler)
+Vue.component('class-modeler', ClassModeler)
+
+
+export default new Router({
+ base: process.env.BASE_URL,
+ routes: [
+ // {
+ // path: '/',
+ // name: 'Introduce',
+ // component: Introduce
+ // },
+ // {
+ // path: '/event',
+ // name: 'EventStorming',
+ // component: EventStormingListPage
+ // },
+ {
+ path: '/',
+ name: 'EventStorming',
+ component: EventModeler
+ },
+ // {
+ // path: '/about',
+ // name: 'about',
+ // // route level code-splitting
+ // // this generates a separate chunk (about.[hash].js) for this route
+ // // which is lazy-loaded when the route is visited.
+ // component: function () {
+ // return import(/* webpackChunkName: "about" */ './views/About.vue')
+ // }
+ // }
+ ]
+})
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 00000000..d448712f
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+Vue.prototype.$http = axios
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+ state: {
+ accessToken: null,
+ kubeHost: '',
+ kubeToken: '',
+ username:'',
+ storeAuthorized: false
+ },
+ getters: {
+ getAuth(state) {
+ return state.storeAuthorized
+ }
+ },
+ mutations: {
+ LOGIN (state, data) {
+ state.kubeHost = data.kubeHost;
+ state.kubeToken = data.kubeToken;
+ state.username = data.userName;
+ state.storeAuthorized = true;
+
+ axios.defaults.headers.common['kubehost'] = state.kubeHost;
+ axios.defaults.headers.common['kubetoken'] = state.kubeToken;
+ },
+ LOGOUT (state) {
+ state.kubeHost = ''
+ state.kubeToken = ''
+ state.storeAuthorized = false;
+ }
+ },
+ actions: {
+ LOGIN ({ commit }, data) {
+ // console.log(data)
+ commit('LOGIN', data)
+
+ // commit('LOGIN', {accessToken, host})
+ // Vue.prototype.$http.defaults.baseURL = 'http://localhost:8080';
+ // Vue.prototype.$http.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+ },
+ LOGOUT ({commit}) {
+ commit('LOGOUT')
+ },
+ }
+})
diff --git a/src/views/About.vue b/src/views/About.vue
new file mode 100644
index 00000000..3fa28070
--- /dev/null
+++ b/src/views/About.vue
@@ -0,0 +1,5 @@
+
+
+
This is an about page
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 00000000..47595541
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/src/views/dashboardpage.vue b/src/views/dashboardpage.vue
new file mode 100644
index 00000000..033a1e4b
--- /dev/null
+++ b/src/views/dashboardpage.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 00000000..ef6e86b2
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ "transpileDependencies": [
+ "vuetify"
+ ]
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..ed10c7c7
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ module: {
+ rules: [
+ {
+
+ test: /\.css$/,
+ use: [ 'style-loader', 'css-loader', 'cssimportant-loader' ]
+ }
+ ]
+ },
+ devServer: {
+ disableHostCheck : true,
+ public: 'mydomain.com:8080',
+ port: 8081
+ },
+}
+
+### Policy
+#### 내용
+ 1.1 서비스 규칙, 각각의 서비스 및 이벤트 사이에서 규칙을 정하기 위한 Policy
+ 규칙을 정의하고, API을 설정 해야합니다.
+ 
+
+### Command
+#### 내용
+ 1.1 명령어, '상품이 추가'라는 Command 실행및 명령어 수행 하기 위한 Command
+ 이벤트 명을 작성하고, API을 설정 해야합니다.
+
+
+
+### Aggregate
+#### 내용
+ 1.1 집합, 상품이라는 정보를 저장및 사용하기 위한 집합체로 하나의 서비스의 DB 같은 역할을 하는 Aggregate
+ 집함명 작성, API을 설정, 정보저장 Entity 설정, 연결 정보를 보여줍니다.
+
+
+
+### Exteranl
+#### 내용
+ 1.1 외부 서비스, 상품 서비스에서 외부 서비스를 필요 하거나, 정보가 필요 할때 사용 하는 External
+ 외부 서비스 명 작성
+ 
+
+### View
+#### 내용
+ 1.1 조회, 상품을 리스트를 조회하거나, Read 를 할 때 필요한 View
+ View 명을 작성하고, API(GET) 을 설정 해야합니다.
+
+
+### Bounded Context
+#### 내용
+ 1.1 서비스 단위, 하나의 서비스를 묶이기 위한 Boundary.
+ Bounded 명을 작성 해야합니다.
+
+
+
+
+
+## Eelement Function
+### Entitiy
+
+
+### Aggregate Connect
+
+
+### Automtion Entity Add when connect Aggregate.
+
+
+
+
+## Tool Function
+### Zoom In& Out
+
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
-# k8s-UI
+### Save & Upload
+ 1. 정보를 저장하기 위하여 JSON 형식으로 값 저장.
+
+
+### undo & redo
+ 1.1 undo: ctrl +C
+ 1.2 redo: Ctrl + shift + C
+
+### Bulid
+
diff --git a/event-storming-tool-new.iml b/event-storming-tool-new.iml
new file mode 100644
index 00000000..8021953e
--- /dev/null
+++ b/event-storming-tool-new.iml
@@ -0,0 +1,9 @@
+
+