Index: lams_central/web/authoring/authoring.jsp =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/authoring/authoring.jsp,v diff -u -r1.6.2.12 -r1.6.2.13 --- lams_central/web/authoring/authoring.jsp 19 Jun 2015 10:33:44 -0000 1.6.2.12 +++ lams_central/web/authoring/authoring.jsp 26 Jun 2015 08:37:52 -0000 1.6.2.13 @@ -27,7 +27,7 @@ - + Index: lams_central/web/authoring/svgGenerator.jsp =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/authoring/svgGenerator.jsp,v diff -u -r1.2.2.2 -r1.2.2.3 --- lams_central/web/authoring/svgGenerator.jsp 10 Apr 2015 16:37:40 -0000 1.2.2.2 +++ lams_central/web/authoring/svgGenerator.jsp 26 Jun 2015 08:37:52 -0000 1.2.2.3 @@ -10,7 +10,7 @@ <fmt:message key="authoring.fla.page.svg.generator.title" /> - + Fisheye: Tag 1.1.2.1 refers to a dead (removed) revision in file `lams_central/web/includes/javascript/snap.svg.js'. Fisheye: No comparison available. Pass `N' to diff? Index: lams_central/web/includes/javascript/authoring/authoringActivity.js =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/authoring/authoringActivity.js,v diff -u -r1.38.2.12 -r1.38.2.13 --- lams_central/web/includes/javascript/authoring/authoringActivity.js 23 Jun 2015 17:38:51 -0000 1.38.2.12 +++ lams_central/web/includes/javascript/authoring/authoringActivity.js 26 Jun 2015 08:37:52 -0000 1.38.2.13 @@ -277,19 +277,24 @@ } // create activity SVG elements - paper.setStart(); - var shape = paper.path(Raphael.format('M {0} {1} a 8 8 0 1 0 16 0 a 8 8 0 1 0 -16 0', x, y + 8)) + this.items = Snap.set(); + var shape = paper.path(Snap.format('M {x} {y} a 8 8 0 1 0 16 0 a 8 8 0 1 0 -16 0', + { + 'x' : x, + 'y' : y + 8 + }) + ) .attr({ + 'stroke' : layout.colors.activityBorder, 'fill' : this.isStart ? layout.colors.branchingEdgeStart : layout.colors.branchingEdgeEnd - }); + }), + title = this.branchingActivity.title, + label = paper.text(x + 8, y + 27, title + ' ' + (this.isStart ? LABELS.BRANCHING_START_SUFFIX + : LABELS.BRANCHING_END_SUFFIX)) + .attr(layout.defaultTextAttributes); - var title = this.branchingActivity.title; - paper.text(x + 8, y + 27, title + ' ' + (this.isStart ? LABELS.BRANCHING_START_SUFFIX - : LABELS.BRANCHING_END_SUFFIX)) - .attr(layout.defaultTextAttributes); - - this.items = paper.setFinish(); + this.items.push(shape).push(label); this.items.shape = shape; ActivityLib.activityHandlersInit(this); @@ -314,7 +319,7 @@ if (this.childActivities && this.childActivities.length > 0) { // draw one by one, horizontally var activityX = x + layout.conf.containerActivityPadding, - allElements = paper.set(), + allElements = Snap.set(), floatingActivity = this, box = this.items.shape.getBBox(); $.each(this.childActivities, function(orderID){ @@ -340,7 +345,7 @@ layout.colors.optionalActivity); } - this.items.data('parentObject', this); + GeneralLib.applyToSet(this.items, 'data', ['parentObject', this]); }, @@ -358,17 +363,22 @@ } // create activity SVG elements - paper.setStart(); - var shape = paper.path(Raphael.format('M {0} {1} l-9 9 v16 l9 9 h16 l9 -9 v-16 l-9 -9 z', x + 9, y)) + this.items = Snap.set(); + var shape = paper.path(Snap.format('M {x} {y} l-9 9 v16 l9 9 h16 l9 -9 v-16 l-9 -9 z', + { + 'x' : x + 9, + 'y' : y + }) + ) .attr({ - 'fill' : layout.colors.gate - }); + 'stroke' : layout.colors.activityBorder, + 'fill' : layout.colors.gate + }), + label = paper.text(x + 17, y + 20, LABELS.GATE_ACTIVITY_LABEL) + .attr(layout.defaultTextAttributes) + .attr('stroke', layout.colors.gateText); - paper.text(x + 17, y + 16, LABELS.GATE_ACTIVITY_LABEL) - .attr(layout.defaultTextAttributes) - .attr('stroke', layout.colors.gateText); - - this.items = paper.setFinish(); + this.items.push(shape).push(label); this.items.shape = shape; ActivityLib.activityHandlersInit(this); @@ -390,16 +400,22 @@ } // create activity SVG elements - paper.setStart(); - var shape = paper.path(Raphael.format('M {0} {1} h 125 v 50 h -125 z', x, y)) + this.items = Snap.set(); + var shape = paper.path(Snap.format('M {x} {y} h 125 v 50 h -125 z', + { + 'x' : x, + 'y' : y + }) + ) .attr({ + 'stroke' : layout.colors.activityBorder, 'fill' : layout.colors.grouping - }); + }), + icon = paper.image('../images/grouping.gif', x + 47, y + 2, 30, 30), + label = paper.text(x + 62, y + 40, ActivityLib.shortenActivityTitle(this.title)) + .attr(layout.defaultTextAttributes); - paper.image('../images/grouping.gif', x + 47, y + 2, 30, 30); - paper.text(x + 62, y + 40, ActivityLib.shortenActivityTitle(this.title)); - - this.items = paper.setFinish(); + this.items.push(shape).push(icon).push(label); this.items.shape = shape; ActivityLib.activityHandlersInit(this); @@ -424,14 +440,15 @@ if (this.childActivities && this.childActivities.length > 0) { // draw one by one, vertically var activityY = y + layout.conf.containerActivityPadding + 10, - allElements = paper.set(), + allElements = Snap.set(), optionalActivity = this, - box = this.items.shape.getBBox(); + box = this.items.shape.getBBox(), + boxWidth = box.width; $.each(this.childActivities, function(orderID){ this.parentActivity = optionalActivity; this.orderID = orderID + 1; var childBox = this.items.shape.getBBox(); - this.draw(x + Math.max(layout.conf.containerActivityPadding, (box.width - childBox.width)/2), activityY); + this.draw(x + Math.max(layout.conf.containerActivityPadding, (boxWidth - childBox.width)/2), activityY); childBox = this.items.shape.getBBox(); activityY = childBox.y2 + layout.conf.containerActivityChildrenPadding; allElements.push(this.items.shape); @@ -452,10 +469,11 @@ if (!isReadOnlyMode){ // allow transition drawing and other activity behaviour - this.items.unmousedown().mousedown(HandlerActivityLib.activityMousedownHandler); + GeneralLib.applyToSet(this.items, 'unmousedown'); + GeneralLib.applyToSet(this.items, 'mousedown', [HandlerActivityLib.activityMousedownHandler]); } - this.items.data('parentObject', this); + GeneralLib.applyToSet(this.items, 'data', ['parentObject', this]); }, @@ -474,7 +492,7 @@ if (this.childActivities && this.childActivities.length > 0) { // draw one by one, vertically var activityY = y + layout.conf.containerActivityPadding + 10, - allElements = paper.set(), + allElements = Snap.set(), optionalActivity = this; $.each(this.childActivities, function(orderID){ this.parentActivity = optionalActivity; @@ -503,10 +521,11 @@ if (!isReadOnlyMode){ // allow transition drawing and other activity behaviour - this.items.unmousedown().mousedown(HandlerActivityLib.activityMousedownHandler); + GeneralLib.applyToSet(this.items, 'unmousedown'); + GeneralLib.applyToSet(this.items, 'mousedown', [HandlerActivityLib.activityMousedownHandler]); } - this.items.data('parentObject', this); + GeneralLib.applyToSet(this.items, 'data', ['parentObject', this]); }, @@ -525,25 +544,30 @@ } // create activity SVG elements - this.items = paper.set(); - var shape = paper.path(Raphael.format('M {0} {1} h 125 v 50 h -125 z', x, y)) + this.items = Snap.set(); + var shape = paper.path(Snap.format('M {x} {y} h 125 v 50 h -125 z', + { + 'x' : x, + 'y' : y + })) // activity colour depends on its category ID .attr({ + 'stroke' : layout.colors.activityBorder, 'fill' : layout.colors.activity[layout.toolMetadata[this.learningLibraryID].activityCategoryID] - }); + }), + // check for icon in the library + icon = paper.image(layout.toolMetadata[this.learningLibraryID].iconPath, x + 47, y + 3, 30, 30), + label = paper.text(x + 62, y + 43, ActivityLib.shortenActivityTitle(this.title)) + .attr(layout.defaultTextAttributes) + .attr('fill', layout.colors.activityText); + + this.items.push(shape).push(icon).push(label); this.items.shape = shape; - this.items.push(shape); if (this.grouping) { ActivityLib.addGroupingEffect(this); } - // check for icon in the library - this.items.push(paper.image(layout.toolMetadata[this.learningLibraryID].iconPath, x + 47, y + 2, 30, 30)); - this.items.push(paper.text(x + 62, y + 40, ActivityLib.shortenActivityTitle(this.title)) - .attr(layout.defaultTextAttributes) - .attr('fill', layout.colors.activityText)); - ActivityLib.activityHandlersInit(this); }, @@ -561,46 +585,51 @@ var points = ActivityLib.findTransitionPoints(this.fromActivity, this.toActivity); // create transition SVG elements - paper.setStart(); - paper.path(Raphael.format('M {0} {1} L {2} {3}', points.startX, points.startY, points.endX, points.endY)) - .attr({ - 'stroke' : layout.colors.transition, - 'stroke-width' : 2 - }); - - // draw the arrow and turn it in the same direction as the line - var angle = 90 + Math.atan2(points.endY - points.startY, points.endX - points.startX) * 180 / Math.PI, - arrowPath = Raphael.transformPath(Raphael.format('M {0} {1} l 10 15 a 25 25 0 0 0 -20 0 z', - points.middleX, points.middleY), - Raphael.format('R {0} {1} {2}', angle, points.middleX, points.middleY)); - paper.path(arrowPath) - .attr({ - 'stroke' : layout.colors.transition, - 'fill' : layout.colors.transition - }); + this.items = Snap.set(); + var arrowShaft = paper.path(Snap.format('M {startX} {startY} L {endX} {endY}', points)) + .attr({ + 'stroke' : layout.colors.transition, + 'stroke-width' : 2 + }), + // draw the arrow and turn it in the same direction as the line + angle = 90 + Math.atan2(points.endY - points.startY, points.endX - points.startX) * 180 / Math.PI, + arrowPath = paper.path(Snap.format('M {middleX} {middleY} l 10 15 a 25 25 0 0 0 -20 0 z', points)) + .transform(Snap.format('R {angle} {points.middleX} {points.middleY}', + { + 'angle' : angle, + 'points' : points + }) + ) + .attr({ + 'stroke' : layout.colors.transition, + 'fill' : layout.colors.transition + }); + this.items.push(arrowShaft).push(arrowPath); if (this.title) { // adjust X & Y depending on the angle, so the label does not overlap with the transition; // angle in Javascript is -90 <= a <= 270 - paper.text(points.middleX + ((angle > -45 && angle < 45) || (angle > 135 && angle < 225) ? 20 : 0), - points.middleY + ((angle > 45 && angle < 135) || angle > 225 || angle < 45 ? -20 : 0), - this.title) - .attr('text-anchor', 'start'); + var label = paper.text(points.middleX + ((angle > -45 && angle < 45) || (angle > 135 && angle < 225) ? 20 : 0), + points.middleY + ((angle > 45 && angle < 135) || angle > 225 || angle < 45 ? -20 : 0), + this.title) + .attr(layout.defaultTextAttributes) + .attr('text-anchor', 'start'); + + this.items.push(label); } - this.items = paper.setFinish(); - this.items.toBack(); + GeneralLib.toBack(this.items); // region annotations could cover grouping effect $.each(layout.regions, function(){ - this.items.shape.toBack(); + GeneralLib.toBack(this.items.shape); }); - this.items.data('parentObject', this); + GeneralLib.applyToSet(this.items, 'data', ['parentObject', this]); if (!isReadOnlyMode){ - this.items.attr('cursor', 'pointer'); - this.items.mousedown(HandlerTransitionLib.transitionMousedownHandler); - this.items.click(HandlerLib.itemClickHandler); + GeneralLib.applyToSet(this.items, 'attr', ['cursor', 'pointer']); + GeneralLib.applyToSet(this.items, 'mousedown', [HandlerTransitionLib.transitionMousedownHandler]); + GeneralLib.applyToSet(this.items, 'click', [HandlerLib.itemClickHandler]); } } }, @@ -616,33 +645,32 @@ * Make a new activity fully functional on canvas. */ activityHandlersInit : function(activity) { - activity.items.data('parentObject', activity); + GeneralLib.applyToSet(activity.items, 'data', ['parentObject', activity]); if (isReadOnlyMode) { if (activitiesOnlySelectable) { - activity.items.click(HandlerLib.itemClickHandler) - .attr({ - 'cursor' : 'pointer' - }); + GeneralLib.applyToSet(activity.items, 'click', [HandlerLib.itemClickHandler]); + GeneralLib.applyToSet(activity.items, 'attr', [{'cursor' : 'pointer'}]); } } else { // set all the handlers - activity.items.mousedown(HandlerActivityLib.activityMousedownHandler) - .click(HandlerLib.itemClickHandler) - .dblclick(HandlerActivityLib.activityDblclickHandler) - .attr({ - 'cursor' : 'pointer' - }); + GeneralLib.applyToSet(activity.items, 'mousedown', [HandlerActivityLib.activityMousedownHandler]); + GeneralLib.applyToSet(activity.items, 'click', [HandlerLib.itemClickHandler]); + GeneralLib.applyToSet(activity.items, 'dblclick', [HandlerActivityLib.activityDblclickHandler]); + GeneralLib.applyToSet(activity.items, 'attr', [{'cursor' : 'pointer'}]); if (activity instanceof ActivityDefs.BranchingEdgeActivity && activity.branchingActivity.end) { // highligh branching edges on hover - activity.branchingActivity.start.items.hover(HandlerActivityLib.branchingEdgeMouseoverHandler, - HandlerActivityLib.branchingEdgeMouseoutHandler); - activity.branchingActivity.end.items.hover(HandlerActivityLib.branchingEdgeMouseoverHandler, - HandlerActivityLib.branchingEdgeMouseoutHandler); + GeneralLib.applyToSet(activity.branchingActivity.start.items, 'hover', + [HandlerActivityLib.branchingEdgeMouseoverHandler, + HandlerActivityLib.branchingEdgeMouseoutHandler]); + GeneralLib.applyToSet(activity.branchingActivity.end.items, 'hover', + [HandlerActivityLib.branchingEdgeMouseoverHandler, + HandlerActivityLib.branchingEdgeMouseoutHandler]); } } + }, @@ -718,19 +746,17 @@ activityBox.width, activityBox.height) .attr({ + 'stroke' : layout.colors.activityBorder, 'fill' : shape.attr('fill') - }) - .toBack(); + }); + GeneralLib.toBack(activity.items.groupingEffect); activity.items.push(activity.items.groupingEffect); // region annotations could cover grouping effect $.each(layout.regions, function(){ - this.items.shape.toBack(); + GeneralLib.toBack(this.items.shape); }); - - // this is needed, for some reason, otherwise the activity can not be selected - HandlerLib.resetCanvasMode(true); } }, @@ -745,17 +771,17 @@ if (object instanceof DecorationDefs.Region) { object.items.shape.attr({ 'stroke' : layout.colors.selectEffect, - 'stroke-dasharray' : '-' + 'stroke-dasharray' : '5,3' }); object.items.selectEffect = true; if (!isReadOnlyMode) { - object.items.resizeButton.show(); - object.items.resizeButton.toFront(); + object.items.resizeButton.attr('display', null); + GeneralLib.toFront(object.items.resizeButton); // also select encapsulated activities var childActivities = DecorationLib.getChildActivities(object.items.shape); if (childActivities.length > 0) { - object.items.fitButton.show(); + object.items.fitButton.attr('display', null); $.each(childActivities, function(){ if (!this.parentActivity || !(this.parentActivity instanceof DecorationDefs.Container)) { @@ -779,15 +805,18 @@ var box = object.items.getBBox(); // a simple rectange a bit wider than the actual activity boundaries - object.items.selectEffect = paper.rect( - box.x - layout.conf.selectEffectPadding, - box.y - layout.conf.selectEffectPadding, - box.width + 2*layout.conf.selectEffectPadding, - box.height + 2*layout.conf.selectEffectPadding) - .attr({ - 'stroke' : layout.colors.selectEffect, - 'stroke-dasharray' : '-' - }); + object.items.selectEffect = paper.path(Snap.format('M {x} {y} h {width} v {height} h -{width} z', + { + 'x' : box.x - layout.conf.selectEffectPadding, + 'y' : box.y - layout.conf.selectEffectPadding, + 'width' : box.width + 2*layout.conf.selectEffectPadding, + 'height' : box.height + 2*layout.conf.selectEffectPadding + })) + .attr({ + 'stroke' : layout.colors.selectEffect, + 'stroke-dasharray' : '5,3', + 'fill' : 'none' + }); object.items.push(object.items.selectEffect); // if it's "import part" select children activities @@ -1061,10 +1090,9 @@ }, // find intersection points of the temporary transition - tempTransition = Raphael.parsePathString(Raphael.format( - 'M {0} {1} L {2} {3}', points.startX, points.startY, points.endX, points.endY)), - fromIntersect = Raphael.pathIntersection(tempTransition, fromActivity.items.shape.attr('path')), - toIntersect = Raphael.pathIntersection(tempTransition, toActivity.items.shape.attr('path')); + tempTransitionPath = Snap.format('M {startX} {startY} L {endX} {endY}', points), + fromIntersect = Snap.path.intersection(tempTransitionPath, fromActivity.items.shape.attr('path')), + toIntersect = Snap.path.intersection(tempTransitionPath, toActivity.items.shape.attr('path')); // find points on borders of activities, if they exist if (fromIntersect.length > 0) { @@ -1100,12 +1128,12 @@ // check if it was added to an Optional or Floating Activity var container = layout.floatingActivity - && Raphael.isPointInsideBBox(layout.floatingActivity.items.getBBox(),x,y) + && Snap.path.isPointInsideBBox(layout.floatingActivity.items.getBBox(),x,y) ? layout.floatingActivity : null; if (!container) { $.each(layout.activities, function(){ if (this instanceof ActivityDefs.OptionalActivity - && Raphael.isPointInsideBBox(this.items.getBBox(),x,y)) { + && Snap.path.isPointInsideBBox(this.items.getBBox(),x,y)) { container = this; return false; } @@ -1313,11 +1341,11 @@ // different effects for different types of objects if (object instanceof DecorationDefs.Region) { object.items.shape.attr({ - 'stroke' : 'black', - 'stroke-dasharray' : '' + 'stroke' : layout.colors.activityBorder, + 'stroke-dasharray' : null }); - object.items.fitButton.hide(); - object.items.resizeButton.hide(); + object.items.fitButton.attr('display','none'); + object.items.resizeButton.attr('display','none'); var childActivities = DecorationLib.getChildActivities(object.items.shape); $.each(childActivities, function(){ @@ -1441,8 +1469,7 @@ transition.items.remove(); GeneralLib.setModified(true); }, - - + /** * Reduce length of activity's title so it fits in its SVG shape. */ Index: lams_central/web/includes/javascript/authoring/authoringDecoration.js =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/authoring/authoringDecoration.js,v diff -u -r1.11 -r1.11.2.1 --- lams_central/web/includes/javascript/authoring/authoringDecoration.js 9 Jul 2014 09:37:57 -0000 1.11 +++ lams_central/web/includes/javascript/authoring/authoringDecoration.js 26 Jun 2015 08:37:52 -0000 1.11.2.1 @@ -76,36 +76,46 @@ } // the label - this.items = paper.set(); + this.items = Snap.set(); if (this.title) { - var label = paper.text(x + 7, y + 10, this.title) + var label = paper.text(x + 7, y + 14, this.title) .attr(layout.defaultTextAttributes) - .attr('text-anchor', 'start') - .toBack(); + .attr('text-anchor', 'start'); if (!isReadOnlyMode){ label.attr('cursor', 'pointer'); } + + GeneralLib.toBack(label); this.items.push(label); // make sure title fits x2 = Math.max(x2, label.getBBox().x2 + 5); } // the rectangle - this.items.shape = paper.path('M {0} {1} H {2} V {3} H {0} z', x, y, x2, y2) - .attr('fill', color) - .toBack(); + this.items.shape = paper.path(Snap.format('M {x} {y} H {x2} V {y2} H {x} z', + { + 'x' : x, + 'y' : y, + 'x2' : x2, + 'y2' : y2 + })) + .attr({ + 'stroke' : layout.colors.activityBorder, + 'fill' : color + }); + GeneralLib.toBack(this.items.shape); this.items.push(this.items.shape); if (isReadOnlyMode){ if (activitiesOnlySelectable) { this.items.shape.attr('cursor', 'pointer'); - this.items.click(HandlerLib.itemClickHandler); + GeneralLib.applyToSet(this.items, 'click',[HandlerLib.itemClickHandler]); } } else { this.items.shape.attr('cursor', 'pointer'); - this.items.mousedown(HandlerDecorationLib.containerMousedownHandler) - .click(HandlerLib.itemClickHandler); + GeneralLib.applyToSet(this.items, 'mousedown',[HandlerDecorationLib.containerMousedownHandler]); + GeneralLib.applyToSet(this.items, 'click',[HandlerLib.itemClickHandler]); } }, @@ -121,7 +131,7 @@ ActivityLib.removeSelectEffect(this); - var allElements = paper.set(); + var allElements = Snap.set(); $.each(childActivities, function(){ allElements.push(this.items.shape); }); @@ -142,28 +152,26 @@ */ label : { draw : function(x, y) { - var x = x ? x : this.items.shape.getBBox().x, - // the Y coordinate has to be adjusted; - // it is not perfect and not really cross-browser compliant... - y = y ? y : this.items.shape.getBBox().y + 6; + var x = x ? x : this.items.shape.attr('x'), + y = y ? y : this.items.shape.attr('y'); if (this.items) { this.items.remove(); } - this.items = paper.set(); + this.items = Snap.set(); this.items.shape = paper.text(x, y, this.title) .attr(layout.defaultTextAttributes) .attr('text-anchor', 'start'); this.items.push(this.items.shape); this.items.shape.attr('cursor', 'pointer'); - this.items.click(HandlerLib.itemClickHandler); + GeneralLib.applyToSet(this.items, 'click',[HandlerLib.itemClickHandler]); if (!isReadOnlyMode){ this.items.shape.mousedown(HandlerDecorationLib.labelMousedownHandler); } - this.items.data('parentObject', this); + GeneralLib.applyToSet(this.items, 'data', ['parentObject', this]); } }, @@ -180,35 +188,41 @@ if (!isReadOnlyMode){ this.items.fitButton = paper.circle(box.x2 - 10, box.y + 10, 5) .attr({ - 'stroke' : null, - 'fill' : 'blue', - 'cursor' : 'pointer', - 'title' : LABELS.REGION_FIT_BUTTON_TOOLTIP + 'stroke' : null, + 'fill' : 'blue', + // hide it for now + 'display' : 'none', + 'cursor' : 'pointer', + 'title' : LABELS.REGION_FIT_BUTTON_TOOLTIP }) .click(function(event){ event.stopImmediatePropagation(); var region = this.data('parentObject'); region.fit(); ActivityLib.addSelectEffect(region, true); - }) - .hide(); + }); this.items.push(this.items.fitButton); - this.items.resizeButton = paper.path(Raphael.format('M {0} {1} v {2} h -{2} z', - box.x2, box.y2 - 15, 15)) + this.items.resizeButton = paper.path(Snap.format('M {x} {y} v {side} h -{side} z', + { + 'x' : box.x2, + 'y' : box.y2 - 15, + 'side' : 15 + }) + ) .attr({ 'stroke' : null, 'fill' : 'blue', + // hide it for now + 'display' : 'none', 'cursor' : 'se-resize' }); - this.items.resizeButton.mousedown(HandlerDecorationLib.resizeRegionStartHandler) - .hide(); - + this.items.resizeButton.mousedown(HandlerDecorationLib.resizeRegionStartHandler); this.items.push(this.items.resizeButton); } - this.items.data('parentObject', this); + GeneralLib.applyToSet(this.items, 'data', ['parentObject', this]); } } } @@ -254,8 +268,8 @@ var activityBox = this.items.shape.getBBox(), shapeBox = shape.getBBox(); - if (Raphael.isPointInsideBBox(shapeBox,activityBox.x, activityBox.y) - && Raphael.isPointInsideBBox(shapeBox, activityBox.x2, activityBox.y2)) { + if (Snap.path.isPointInsideBBox(shapeBox,activityBox.x, activityBox.y) + && Snap.path.isPointInsideBBox(shapeBox, activityBox.x2, activityBox.y2)) { result.push(this); } } Index: lams_central/web/includes/javascript/authoring/authoringGeneral.js =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/authoring/authoringGeneral.js,v diff -u -r1.51.2.15 -r1.51.2.16 --- lams_central/web/includes/javascript/authoring/authoringGeneral.js 22 Jun 2015 02:02:11 -0000 1.51.2.15 +++ lams_central/web/includes/javascript/authoring/authoringGeneral.js 26 Jun 2015 08:37:52 -0000 1.51.2.16 @@ -31,7 +31,7 @@ * A few publicly visible variables . */ - // The Raphael Paper object + // The Snap Paper object var paper = null, // container for the paper canvas = null, @@ -65,7 +65,7 @@ 'arrangeHorizontalPadding' : 35, 'arrangeVerticalPadding' : 50, - 'dragStartThreshold' : 100, + 'dragStartThreshold' : 300, 'propertiesDialogDimOpacity' : 0.3, 'propertiesDialogDimThreshold' : 100, @@ -84,14 +84,11 @@ 'groupingEffectPadding' : 5, 'selectEffectPadding' : 7, - 'supportsDownloadAttribute' : typeof $('')[0].download != 'undefined', - - // when mouse hovers over rubbish bin - 'binGlowWidth' : 10, - 'binGlowOpacity' : 1 + 'supportsDownloadAttribute' : typeof $('')[0].download != 'undefined' }, 'colors' : { + 'activityBorder' : 'black', // each activity type has its own colour 'activity' : ['','#d0defd','#fffccb','#ece9f7','#fdf1d3','#FFFFFF','#e9f9c0'], 'activityText' : 'black', @@ -103,7 +100,7 @@ 'B0C4DE', 'FFE4E1', 'FF4500', 'EE82EE'], // when mouse hovers over rubbish bin - 'binGlow' : 'red', + 'binSelect' : 'red', 'branchingEdgeStart' : 'green', 'branchingEdgeEnd' : 'red', @@ -119,8 +116,9 @@ }, 'defaultTextAttributes' : { - 'font-size' : 10, - 'font' : 'sans-serif' + 'text-anchor' : 'middle', + 'font-size' : 10, + 'font-family' : 'sans-serif' } }, @@ -1058,8 +1056,18 @@ nameValidator : /^[^<>^*@%$]*$/i, numberValidator : /^[\d\.]+$/, - + /** + * Runs the method with parameters on each item of the set. + */ + applyToSet : function(set, method, params) { + set.forEach(function(item){ + item[method].apply(item, params); + }); + }, + + + /** * Sorts activities on canvas. */ arrangeActivities : function(activities){ @@ -1097,7 +1105,7 @@ // for special cases when row needs to shifted more forceRowY = null, // check how many columns current paper can hold - maxColumns = Math.floor((paper.width - layout.conf.arrangeHorizontalPadding) + maxColumns = Math.floor((paper.attr('width') - layout.conf.arrangeHorizontalPadding) / layout.conf.arrangeHorizontalSpace), // the initial max length of subsequences is limited by paper space subsequenceMaxLength = maxColumns, @@ -1416,7 +1424,8 @@ paper.clear(); } else { // need to set size right away for Chrome - paper = Raphael('canvas', canvas.width() - 5, canvas.height() - 5); + paper = Snap(canvas.width() - 5, canvas.height() - 5); + canvas.append(paper.node); } GeneralLib.resizePaper(); @@ -1998,7 +2007,10 @@ width = Math.max(width, canvas.width()) - 20; height = Math.max(height + (isReadOnlyMode ? 20 : 50), canvas.height()) - 20; - paper.setSize(width, height); + paper.attr({ + 'width' : width, + 'height' : height + }); if (!isReadOnlyMode){ if (layout.bin) { @@ -2679,8 +2691,34 @@ }); }, + /** + * Puts given object (set or shape) to back of parent. + */ + toBack : function(object) { + if (object.type == 'set') { + object.forEach(function(item) { + GeneralLib.toBack(item); + }); + } else { + $(object.node).parent().prepend(object.node); + } + }, /** + * Puts given object (set or shape) to front of parent. + */ + toFront : function(object) { + if (object.type == 'set') { + object.forEach(function(item) { + GeneralLib.toFront(item); + }); + } else { + $(object.node).parent().append(object.node); + } + }, + + + /** * Get real coordinates on paper, based on event coordinates. */ translateEventOnCanvas : function(event) { Index: lams_central/web/includes/javascript/authoring/authoringHandler.js =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/authoring/authoringHandler.js,v diff -u -r1.16.2.4 -r1.16.2.5 --- lams_central/web/includes/javascript/authoring/authoringHandler.js 22 Jun 2015 02:02:11 -0000 1.16.2.4 +++ lams_central/web/includes/javascript/authoring/authoringHandler.js 26 Jun 2015 08:37:52 -0000 1.16.2.5 @@ -26,6 +26,11 @@ * Start dragging an activity or a transition. */ dragItemsStartHandler : function(items, draggedElement, mouseupHandler, event, startX, startY) { + if (layout.drawMode || (event.originalEvent ? + event.originalEvent.defaultPrevented : event.defaultPrevented)){ + return; + } + // if user clicks or drags very shortly, do not take it into account var dragCancel = function(){ canvas.off('mouseup'); @@ -40,32 +45,32 @@ dragCancel(); canvas.mouseup(dragCancel); - if (layout.drawMode || (event.originalEvent ? - event.originalEvent.defaultPrevented : event.defaultPrevented)){ - return; - } - // run only if "click" event was not generated, i.e. user really wants to drag items.dragStarter = setTimeout(function(){ items.dragStarter = null; // show that we are in the middle of something HandlerLib.resetCanvasMode(); items.isDragged = true; - items.attr('cursor', 'move'); + GeneralLib.applyToSet(items, 'attr', ['cursor', 'move']); var parentObject = draggedElement.data('parentObject'); sticky = parentObject && (parentObject instanceof ActivityDefs.ParallelActivity || parentObject instanceof ActivityDefs.OptionalActivity || parentObject instanceof ActivityDefs.FloatingActivity); // hide child activities while moving the parent around + // they will be redrawn when the parent is dropped if (sticky) { $.each(parentObject.childActivities, function(){ - this.items.hide(); + this.items.forEach(function(item){ + item.attr('display', 'none'); + }); if (this.childActivities) { $.each(this.childActivities, function() { - this.items.hide(); + this.items.forEach(function(item){ + item.attr('display', 'none'); + }); }); } }); @@ -78,7 +83,7 @@ var mouseup = function(mouseupEvent){ // finish dragging - restore various elements' default state items.isDragged = false; - items.unmouseup(); + GeneralLib.applyToSet(items, 'unmouseup'); HandlerLib.resetCanvasMode(true); if (layout.bin.glowEffect) { layout.bin.glowEffect.remove(); @@ -108,21 +113,27 @@ var dx = event.pageX - startX, dy = event.pageY - startY; - items.transform('t' + dx + ' ' + dy); + GeneralLib.applyToSet(items, 'transform', ['t' + dx + ' ' + dy]); if (items.groupingEffect) { - items.groupingEffect.toBack(); + GeneralLib.toBack(items.groupingEffect); } // highlight rubbish bin if dragged elements are over it if (HandlerLib.isElemenentBinned(event)) { if (!layout.bin.glowEffect) { - layout.bin.glowEffect = layout.bin.glow({ - 'width' : layout.conf.binGlowWidth, - 'opacity' : layout.conf.binGlowOpacity, - 'color' : layout.colors.binGlow, - 'offsety' : 2 - }); + layout.bin.glowEffect = paper.path(Snap.format('M {x} {y} h {side} v {side} h -{side} z', + { + 'x' : layout.bin.attr('x'), + 'y' : layout.bin.attr('y'), + 'side' : layout.bin.attr('width') + })) + .attr({ + 'stroke' : layout.colors.binSelect, + 'stroke-width' : 2, + 'stroke-dasharray' : '5,3', + 'fill' : 'none' + }); } } else if (layout.bin.glowEffect){ layout.bin.glowEffect.remove(); @@ -136,8 +147,8 @@ */ dropObject : function(object) { // finally transform the dragged elements - var transformation = object.items.shape.attr('transform'); - object.items.transform(''); + var transformation = Snap.parseTransformString(object.items.shape.transform().string); + GeneralLib.applyToSet(object.items, 'transform', ['']); var box = object.items.shape.getBBox(), originalCoordinates = { @@ -146,7 +157,7 @@ y : box.y + (object instanceof DecorationDefs.Label ? 6 : 0) }; - if (transformation.length > 0) { + if (transformation && transformation.length > 0) { object.draw(originalCoordinates.x + transformation[0][1], originalCoordinates.y + transformation[0][2]); } @@ -162,7 +173,7 @@ */ isElemenentBinned : function(event) { var translatedEvent = GeneralLib.translateEventOnCanvas(event); - return Raphael.isPointInsideBBox(layout.bin.getBBox(), translatedEvent[0], translatedEvent[1]); + return Snap.path.isPointInsideBBox(layout.bin.getBBox(), translatedEvent[0], translatedEvent[1]); }, @@ -176,7 +187,6 @@ } var parentObject = this.data('parentObject'); - // if it's "import part" allow multiple selection of activities if (activitiesOnlySelectable) { if (parentObject.items.selectEffect) { @@ -376,11 +386,14 @@ data.shape.remove(); } - data.shape = paper.path(Raphael.format('M {0} {1} h {2} v {3} h -{2} z', - x < data.startX ? x : data.startX, - y < data.startY ? y : data.startY, - Math.abs(x - data.startX), - Math.abs(y - data.startY))) + data.shape = paper.path(Snap.format('M {x} {y} h {width} v {height} h -{width} z', + { + 'x' : x < data.startX ? x : data.startX, + 'y' : y < data.startY ? y : data.startY, + 'width' : Math.abs(x - data.startX), + 'height' : Math.abs(y - data.startY) + }) + ) .attr({ 'fill' : layout.colors.annotation, 'opacity' : 0.3 @@ -559,16 +572,24 @@ var translatedEvent = GeneralLib.translateEventOnCanvas(event), endX = translatedEvent[0], endY = translatedEvent[1]; - // draw a temporary transition so user sees what he is doing - activity.tempTransition = paper.set(); - activity.tempTransition.push(paper.circle(startX, startY, 3)); - activity.tempTransition.push(paper.path(Raphael.format('M {0} {1} L {2} {3}', - startX, startY, endX, endY)) - .attr({ - 'arrow-end' : 'open-wide-long', - 'stroke-dasharray' : '- ' - })); + activity.tempTransition = Snap.set(); + activity.tempTransition.push(paper.circle(startX, startY, 3).attr({ + 'stroke' : layout.colors.transition + })); + activity.tempTransition.push(paper.path(Snap.format('M {startX} {startY} L {endX} {endY}', + { + 'startX' : startX, + 'startY' : startY, + 'endX' : endX, + 'endY' : endY + })) + .attr({ + 'stroke' : layout.colors.transition, + 'stroke-width' : 2, + 'stroke-dasharray' : '5,3' + }) + ); }, @@ -587,7 +608,7 @@ } var endActivity = null, - targetElement = paper.getElementByPoint(event.pageX, event.pageY); + targetElement = Snap.getElementByPoint(event.pageX, event.pageY); if (targetElement) { endActivity = targetElement.data('parentObject'); } Index: lams_central/web/includes/javascript/authoring/authoringMenu.js =================================================================== RCS file: /usr/local/cvsroot/lams_central/web/includes/javascript/authoring/authoringMenu.js,v diff -u -r1.34.2.2 -r1.34.2.3 --- lams_central/web/includes/javascript/authoring/authoringMenu.js 27 May 2015 06:23:54 -0000 1.34.2.2 +++ lams_central/web/includes/javascript/authoring/authoringMenu.js 26 Jun 2015 08:37:52 -0000 1.34.2.3 @@ -137,13 +137,13 @@ dialog.text(''); dialog.dialog('close'); - var targetElement = paper.getElementByPoint(event.pageX, event.pageY); + var targetElement = Snap.getElementByPoint(event.pageX, event.pageY); - if (targetElement) { - // cancel - HandlerLib.resetCanvasMode(true); - } else { + if (targetElement.type == 'svg') { HandlerDecorationLib.drawRegionStartHandler(event); + } else { + // cancel if clicked on some existing element, not canvas + HandlerLib.resetCanvasMode(true); } }); }, @@ -303,7 +303,7 @@ dialog.dialog('close'); var startActivity = null, - targetElement = paper.getElementByPoint(event.pageX, event.pageY); + targetElement = Snap.getElementByPoint(event.pageX, event.pageY); if (targetElement) { startActivity = targetElement.data('parentObject'); if (startActivity) { @@ -450,17 +450,18 @@ // need to set attributes using pure JS as jQuery sets them with lower case, which is unacceptable in SVG svg.setAttribute('viewBox', crop.x + ' ' + crop.y + ' ' + width + ' ' + height); svg.setAttribute('preserveAspectRatio', 'xMinYMin slice'); + svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); + svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); + // reset any cursor=pointer styles $('*[style*="cursor"]', svg).css('cursor', 'default'); imageCode = crop.canvasClone.html(); // otherwise there will be syntax erros in IE11 - imageCode = imageCode.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, ''); imageCode = imageCode.replace(/xmlns:NS1=\"\"/, ''); - imageCode = imageCode.replace(/NS1:xmlns:xlink=\"http:\/\/www\.w3\.org\/1999\/xlink\"/, 'xmlns:xlink=\"http:\/\/www\.w3\.org\/1999\/xlink\"'); - imageCode = imageCode.replace(/xmlns:xlink=\"http:\/\/www\.w3\.org\/1999\/xlink\" xlink:href/g, 'xlink:href'); + imageCode = imageCode.replace(/NS1:xmlns:xlink=\"http:\/\/www\.w3\.org\/1999\/xlink\"/, ''); } if (download) { @@ -488,7 +489,7 @@ */ getCanvasCrop : function(){ var canvasClone = canvas.clone(); - // Raphael does not add this and it's needed by Firefox + // Snap does not add this and it's needed by Firefox $('svg', canvasClone).attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // remove the rubbish bin icon canvasClone.find('#rubbishBin').remove();