Gitlab CSE Unil

Skip to content

GitLab

Commit 656dc31c authored by M. Chardon's avatar M. Chardon
Browse files

ajout redimensionnement des shapes

parent 6976b668
Expand all Hide whitespace changes
Inline Side-by-side
classes/bdd/tool_generic.php
View file @ 656dc31c
......@@ -40,6 +40,7 @@ class tool_generic extends tool {
"rectangle" => "fa fa-square-o",
"drag" => "fa fa-hand-paper-o",
"select" => "fa fa-mouse-pointer",
"resize" => "fa fa-arrows-h",
"annotationcolour" => "fa fa-tint",
"rotateleft" => "fa fa-undo",
"rotateright" => "fa fa-undo fa-flip-horizontal"
......
classes/renderer.php
View file @ 656dc31c
......@@ -35,6 +35,7 @@ class assignfeedback_editpdfplus_renderer extends plugin_renderer_base {
const PLUGIN_NAME = "assignfeedback_editpdfplus";
const TOOL_SELECT = "select";
const TOOL_DRAG = "drag";
const TOOL_RESIZE = "resize";
const TOOL_ANNOTATIONCOLOR = "annotationcolour";
const HTMLCLASS = "class";
const HTMLDISABLED = "disabled";
......@@ -170,6 +171,9 @@ class assignfeedback_editpdfplus_renderer extends plugin_renderer_base {
$selectTool = new tool_generic();
$selectTool->init(array(self::TOOL_OBJ_LABEL => self::TOOL_SELECT));
$toolbarBase .= $this->render_toolbar_button_tool($selectTool);
$resizeTool = new tool_generic();
$resizeTool->init(array(self::TOOL_OBJ_LABEL => self::TOOL_RESIZE));
$toolbarBase .= $this->render_toolbar_button_tool($resizeTool);
$toolbarBaseBlock = $this->render_toolbar($toolbarBase, "mr-3");
// Generic Tools.
......
styles.css
View file @ 656dc31c
......@@ -539,4 +539,17 @@ ul.assignfeedback_editpdfplus_menu {
border-style: solid;
height: 330px;
box-sizing: border-box;
}
.assignfeedback_editpdfplus_resize{
position: absolute;
}
.assignfeedback_editpdfplus_resize_active {
background-color:#e3e3ff;
border: solid #ccccff;
}
.assignfeedback_editpdfplus_resize_horizontal.assignfeedback_editpdfplus_resize_active:hover {
cursor:col-resize;
}
.assignfeedback_editpdfplus_resize_vertical.assignfeedback_editpdfplus_resize_active:hover {
cursor:row-resize;
}
\ No newline at end of file
yui/src/editor/js/annotation.js
View file @ 656dc31c
......@@ -110,6 +110,12 @@ Y.extend(ANNOTATION, Y.Base, {
* @public
*/
drawable: false,
/**
* List of all resize areas (div id) for this annotation
* @type array
* @public
*/
resizeAreas: [],
/**
* Reference to M.assignfeedback_editpdfplus.tool
* @property tooltype
......@@ -229,6 +235,12 @@ Y.extend(ANNOTATION, Y.Base, {
* @public
*/
pdfdisplay: "footnote",
/**
* minimum size for resize area
* @type Int
* @public
*/
minresizewidth: 20,
/**
* Initialise the annotation.
*
......@@ -277,6 +289,7 @@ Y.extend(ANNOTATION, Y.Base, {
this.path = config.path || '';
this.toolid = config.toolid || this.editor.get_dialogue_element(TOOLTYPE.RECTANGLE);
this.drawable = false;
this.resizeAreas = [];
this.pdfdisplay = config.pdfdisplay;
this.tooltypefamille = this.editor.typetools[this.tooltype.type];
},
......@@ -456,6 +469,21 @@ Y.extend(ANNOTATION, Y.Base, {
var date = (new Date().toJSON()).replace(/:/g, '').replace(/\./g, '');
this.divcartridge = 'ct_' + this.tooltype.id + '_' + date;
},
/**
* Init the HTML id for the shape
* @protected
* @param {String} toolname
* @returns {String} the shape id
*/
init_shape_id: function (toolname) {
if (!this.shape_id) {
//create only one time the shape_id
var d = new Date();
var n = d.getTime();
this.shape_id = "ct_" + toolname + "_" + n;
}
return this.shape_id;
},
/**
* get the html node for the cartridge
* @param {string} colorcartridge
......@@ -1065,6 +1093,99 @@ Y.extend(ANNOTATION, Y.Base, {
draw_catridge: function () {
return true;
},
/**
* global method, replacement of the cartridge after move or resize
*/
replacement_cartridge: function () {
return true;
},
/**
* global method, draw empty resize area
*/
draw_resizeAreas: function () {
return true;
},
/**
* get the html node for the cartridge
* @param {string} colorcartridge
* @return node
*/
get_div_resizearea: function (direction) {
var plane = "horizontal";
if (direction === "up" || direction === "down") {
plane = "vertical";
}
var div = "<div "
+ "id='" + this.divcartridge + "_resize_" + direction + "' "
+ "class='assignfeedback_editpdfplus_resize assignfeedback_editpdfplus_resize_" + plane + "' ";
if (plane === "horizontal") {
var intery = Math.max(this.endy - this.y, 7);
div += "style='min-width:7px;min-height:" + intery + "px;' ";
} else {
var interx = Math.max(this.endx - this.x, 7);
div += "style='min-height:7px;min-width:" + interx + "px;' ";
}
div += "data-direction='" + direction + "' "
+ "> "
+ "</div>";
return Y.Node.create(div);
},
/**
* Remove all resize areas
*/
remove_resizearea: function () {
var divAreaResize = Y.all('.assignfeedback_editpdfplus_resize');
divAreaResize.remove();
},
/**
* Insert new resize area in the DOM
* @param {String} direction direction for the resizing {left, up down, right}
* @param {int} x left position of the resize area
* @param {int} y top position of the resize area
*/
push_div_resizearea: function (direction, x, y) {
var drawingregion = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS);
var div = this.editor.get_dialogue_element('#' + this.divcartridge + "_resize_" + direction);
if (div) {
return;
}
var divresize = this.get_div_resizearea(direction);
if (!divresize) {
return;
}
divresize.setX(x);
divresize.setY(y);
drawingregion.append(divresize);
this.resizeAreas.push(divresize);
},
/**
* global method, actions when resizing a shape
*/
mousemoveResize: function () {
return true;
},
/**
* Actions after resizing a shape
* - save new positions
* - redraw cartridge
* @param {Event} e click event
* @param {Div node} divresize resize area div
*/
mouseupResize: function (e, divresize) {
var canvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS);
var offset = canvas.getXY();
var direction = divresize.getData('direction');
if (direction === 'right') {
this.endx = e.clientX + canvas.get('docScrollX') - offset[0];
} else if (direction === 'left') {
this.x = e.clientX + canvas.get('docScrollX') - offset[0];
} else if (direction === 'up') {
this.y = e.clientY + canvas.get('docScrollY') - offset[1];
} else if (direction === 'down') {
this.endy = e.clientY + canvas.get('docScrollY') - offset[1];
}
this.replacement_cartridge();
},
/**
* display annotation view
* @param {type} e
......@@ -1342,6 +1463,10 @@ Y.extend(ANNOTATION, Y.Base, {
this.drawable.erase();
}
this.editor.drawables.push(this.draw());
//init resize area
this.remove_resizearea();
this.draw_resizeAreas();
},
/**
* Draw the in progress edit.
......
yui/src/editor/js/annotationcommentplus.js
View file @ 656dc31c
......@@ -142,7 +142,6 @@ Y.extend(ANNOTATIONCOMMENTPLUS, M.assignfeedback_editpdfplus.annotation, {
*/
draw_catridge: function () {
var divdisplay;
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
if (this.divcartridge === '') {
this.init_div_cartridge_id();
var drawingregion = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS);
......@@ -177,11 +176,20 @@ Y.extend(ANNOTATIONCOMMENTPLUS, M.assignfeedback_editpdfplus.annotation, {
this.apply_visibility_annot();
} else {
divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
this.replacement_cartridge();
}
return true;
},
/**
* Replacement of the cartridge after move or resize
*/
replacement_cartridge: function () {
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
var divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
if (divdisplay) {
divdisplay.setX(offsetcanvas[0] + this.x + 20);
divdisplay.setY(offsetcanvas[1] + this.y);
}
return true;
},
/**
* Display the annotation according to current parameters
......
yui/src/editor/js/annotationframe.js
View file @ 656dc31c
......@@ -40,6 +40,12 @@ Y.extend(ANNOTATIONFRAME, M.assignfeedback_editpdfplus.annotation, {
children: [],
oldx: 0,
oldy: 0,
/**
* Margin to let for resize area
* @type Number
* @protected
*/
marginDivResize: 4,
/**
* Draw a highlight annotation
* @protected
......@@ -58,8 +64,8 @@ Y.extend(ANNOTATIONFRAME, M.assignfeedback_editpdfplus.annotation, {
new M.assignfeedback_editpdfplus.point(this.endx, this.endy)]);
highlightcolour = this.get_color();
this.init_shape_id('frame');
this.shape_id = 'ct_frame_' + (new Date().toJSON()).replace(/:/g, '').replace(/\./g, '');
shape = this.editor.graphic.addShape({
id: this.shape_id,
type: Y.Rect,
......@@ -90,6 +96,8 @@ Y.extend(ANNOTATIONFRAME, M.assignfeedback_editpdfplus.annotation, {
this.draw_catridge();
this.draw_resizeAreas();
return ANNOTATIONFRAME.superclass.draw.apply(this);
},
/**
......@@ -187,6 +195,10 @@ Y.extend(ANNOTATIONFRAME, M.assignfeedback_editpdfplus.annotation, {
this.drawable.erase();
}
this.editor.drawables.push(this.draw());
//init resize area
this.remove_resizearea();
this.draw_resizeAreas();
},
/**
* Get the color of the element, depend of data on DB
......@@ -202,7 +214,6 @@ Y.extend(ANNOTATIONFRAME, M.assignfeedback_editpdfplus.annotation, {
draw_catridge: function () {
if (this.parent_annot_element === null && this.parent_annot === 0) {
var divdisplay;
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
if (this.divcartridge === '') {
this.init_div_cartridge_id();
var drawingregion = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS);
......@@ -359,14 +370,69 @@ Y.extend(ANNOTATIONFRAME, M.assignfeedback_editpdfplus.annotation, {
}
} else {
var divid = '#' + this.divcartridge;
divdisplay = this.editor.get_dialogue_element(divid);
divdisplay.setX(offsetcanvas[0] + this.cartridgex);
divdisplay.setY(offsetcanvas[1] + this.y + this.cartridgey);
this.replacement_cartridge();
}
}
return true;
},
/**
* Replacement of the cartridge after move or resize
*/
replacement_cartridge: function () {
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
var divid = '#' + this.divcartridge;
var divdisplay = this.editor.get_dialogue_element(divid);
if (divdisplay) {
divdisplay.setX(offsetcanvas[0] + this.cartridgex);
divdisplay.setY(offsetcanvas[1] + this.y + this.cartridgey);
}
},
/**
* Draw empty resize area on left and right
*/
draw_resizeAreas: function () {
this.push_div_resizearea('left', this.x - 2, this.y);
this.push_div_resizearea('right', this.endx - 2, this.y);
},
/**
* Actions when resizing a shape:
* - on left, new x and width
* - on right, new width
* New placement of resize area (div)
* @param {Event} e
* @param {Point} point current position
* @param {div} divresize id of resize area
*/
mousemoveResize: function (e, point, divresize) {
if (this.drawable.shapes.length === 0) {
return;
}
var shape = this.drawable.shapes[0];
if (!shape) {
return;
}
var direction = divresize.getData('direction');
var width = this.minresizewidth;
var canvasDim = this.editor.get_canvas_bounds();
var newpointx = point.x;
//sortie de cadre
if (newpointx < 0) {
newpointx = 0;
} else if (canvasDim.width < newpointx) {
newpointx = canvasDim.width;
}
var decalage = canvasDim.x;
if (direction === 'right') {
width = Math.max(newpointx - this.x, this.minresizewidth);
shape.set('width', width);
divresize.setX(this.x + width + decalage - this.marginDivResize);
} else if (direction === 'left') {
width = Math.max(this.endx - point.x, this.minresizewidth);
shape.set('x', Math.min(newpointx, this.endx - this.minresizewidth));
shape.set('width', width);
divresize.setX(this.endx - width + decalage - this.marginDivResize);
}
},
/**
* drag-and-drop process
* @param {type} e
......@@ -605,6 +671,7 @@ Y.extend(ANNOTATIONFRAME, M.assignfeedback_editpdfplus.annotation, {
var divdisplay = this.editor.get_dialogue_element(divid);
divdisplay.remove();
}
this.remove_resizearea();
annotations.splice(k, 1);
if (this.drawable) {
this.drawable.erase();
......
yui/src/editor/js/annotationhighlightplus.js
View file @ 656dc31c
......@@ -37,6 +37,13 @@ ANNOTATIONHIGHLIGHTPLUS.NAME = "annotationhighlightplus";
ANNOTATIONHIGHLIGHTPLUS.ATTRS = {};
Y.extend(ANNOTATIONHIGHLIGHTPLUS, M.assignfeedback_editpdfplus.annotation, {
/**
* Margin to let for resize area
* @type Number
* @protected
*/
marginDivResize: 4,
/**
* Draw a highlight annotation
* @protected
......@@ -49,14 +56,16 @@ Y.extend(ANNOTATIONHIGHLIGHTPLUS, M.assignfeedback_editpdfplus.annotation, {
bounds,
highlightcolour;
highlightcolour = this.get_color();
this.init_shape_id('hightlightplus');
drawable = new M.assignfeedback_editpdfplus.drawable(this.editor);
bounds = new M.assignfeedback_editpdfplus.rect();
bounds.bound([new M.assignfeedback_editpdfplus.point(this.x, this.y),
new M.assignfeedback_editpdfplus.point(this.endx, this.endy)]);
highlightcolour = this.get_color();
shape = this.editor.graphic.addShape({
id: this.shape_id,
type: Y.Rect,
width: bounds.width,
height: bounds.height,
......@@ -74,6 +83,8 @@ Y.extend(ANNOTATIONHIGHLIGHTPLUS, M.assignfeedback_editpdfplus.annotation, {
this.draw_catridge();
this.draw_resizeAreas();
return ANNOTATIONHIGHLIGHTPLUS.superclass.draw.apply(this);
},
/**
......@@ -146,7 +157,6 @@ Y.extend(ANNOTATIONHIGHLIGHTPLUS, M.assignfeedback_editpdfplus.annotation, {
*/
draw_catridge: function () {
var divdisplay;
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
if (this.divcartridge === '') {
this.init_div_cartridge_id();
var drawingregion = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS);
......@@ -188,11 +198,66 @@ Y.extend(ANNOTATIONHIGHLIGHTPLUS, M.assignfeedback_editpdfplus.annotation, {
this.apply_visibility_annot();
} else {
divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
this.replacement_cartridge();
}
return true;
},
/**
* Replacement of the cartridge after move or resize
*/
replacement_cartridge: function () {
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
var divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
if (divdisplay) {
divdisplay.setX(offsetcanvas[0] + this.x + this.cartridgex);
divdisplay.setY(offsetcanvas[1] + this.y + this.cartridgey);
}
return true;
},
/**
* Draw empty resize area on left and right
*/
draw_resizeAreas: function () {
this.push_div_resizearea('left', this.x - this.marginDivResize, this.y);
this.push_div_resizearea('right', this.endx - this.marginDivResize, this.y);
},
/**
* Actions when resizing a shape:
* - on left, new x and width
* - on right, new width
* New placement of resize area (div)
* @param {Event} e
* @param {Point} point current position
* @param {div} divresize id of resize area
*/
mousemoveResize: function (e, point, divresize) {
if (this.drawable.shapes.length === 0) {
return;
}
var shape = this.drawable.shapes[0];
if (!shape) {
return;
}
var direction = divresize.getData('direction');
var width = this.minresizewidth;
var canvasDim = this.editor.get_canvas_bounds();
var newpointx = point.x;
//sortie de cadre
if (newpointx < 0) {
newpointx = 0;
} else if (canvasDim.width < newpointx) {
newpointx = canvasDim.width;
}
var decalage = canvasDim.x;
if (direction === 'right') {
width = Math.max(newpointx - this.x, this.minresizewidth);
shape.set('width', width);
divresize.setX(this.x + width + decalage - this.marginDivResize);
} else if (direction === 'left') {
width = Math.max(this.endx - newpointx, this.minresizewidth);
shape.set('x', Math.min(newpointx, this.endx - this.minresizewidth));
shape.set('width', width);
divresize.setX(this.endx - width + decalage - this.marginDivResize);
}
},
/**
* Delete an annotation
......@@ -213,6 +278,7 @@ Y.extend(ANNOTATIONHIGHLIGHTPLUS, M.assignfeedback_editpdfplus.annotation, {
var divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
divdisplay.remove();
}
this.remove_resizearea();
annotations.splice(i, 1);
if (this.drawable) {
this.drawable.erase();
......
yui/src/editor/js/annotationstampcomment.js
View file @ 656dc31c
......@@ -150,7 +150,6 @@ Y.extend(ANNOTATIONSTAMPCOMMENT, M.assignfeedback_editpdfplus.annotation, {
*/
draw_catridge: function () {
var divdisplay;
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
if (this.divcartridge === '') {
this.init_div_cartridge_id();
var drawingregion = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS);
......@@ -212,11 +211,20 @@ Y.extend(ANNOTATIONSTAMPCOMMENT, M.assignfeedback_editpdfplus.annotation, {
this.apply_visibility_annot();
} else {
divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
this.replacement_cartridge();
}
return true;
},
/**
* Replacement of the cartridge after move or resize
*/
replacement_cartridge: function () {
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
var divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
if (divdisplay) {
divdisplay.setX(offsetcanvas[0] + this.x + this.cartridgex);
divdisplay.setY(offsetcanvas[1] + this.y + this.cartridgey);
}
return true;
},
change_stamp: function () {
var rotationstate = this.editor.get_dialogue_element('#' + this.divcartridge + "_rotation");
......
yui/src/editor/js/annotationverticalline.js
View file @ 656dc31c
......@@ -37,6 +37,13 @@ ANNOTATIONVERTICALLINE.NAME = "annotationverticalline";
ANNOTATIONVERTICALLINE.ATTRS = {};
Y.extend(ANNOTATIONVERTICALLINE, M.assignfeedback_editpdfplus.annotation, {
/**
* Margin to let for resize area
* @type Number
* @protected
*/
marginDivResize: 2,
/**
* Draw a verticalline annotation
* @protected
......@@ -51,8 +58,10 @@ Y.extend(ANNOTATIONVERTICALLINE, M.assignfeedback_editpdfplus.annotation, {
drawable = new M.assignfeedback_editpdfplus.drawable(this.editor);
verticallinecolour = this.get_color();
this.init_shape_id('verticalline');
shape = this.editor.graphic.addShape({
id: this.shape_id,
type: Y.Path,
fill: false,
stroke: {
......@@ -73,6 +82,8 @@ Y.extend(ANNOTATIONVERTICALLINE, M.assignfeedback_editpdfplus.annotation, {
this.draw_catridge();
this.draw_resizeAreas();
return ANNOTATIONVERTICALLINE.superclass.draw.apply(this);
},
/**
......@@ -152,7 +163,6 @@ Y.extend(ANNOTATIONVERTICALLINE, M.assignfeedback_editpdfplus.annotation, {
*/
draw_catridge: function () {
var divdisplay;
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
if (this.divcartridge === '') {
this.init_div_cartridge_id();
var drawingregion = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS);
......@@ -194,11 +204,71 @@ Y.extend(ANNOTATIONVERTICALLINE, M.assignfeedback_editpdfplus.annotation, {
this.apply_visibility_annot();
} else {
divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
this.replacement_cartridge();
}
return true;
},
/**
* Replacement of the cartridge after move or resize
*/
replacement_cartridge: function () {
var offsetcanvas = this.editor.get_dialogue_element(SELECTOR.DRAWINGCANVAS).getXY();
var divdisplay = this.editor.get_dialogue_element('#' + this.divcartridge);
if (divdisplay) {
divdisplay.setX(offsetcanvas[0] + this.x + this.cartridgex);
divdisplay.setY(offsetcanvas[1] + this.y + this.cartridgey);
}
return true;
},