Gitlab CSE Unil

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

ajout redimensionnement des shapes

parent 6976b668
......@@ -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"
......
......@@ -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.
......
......@@ -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
......@@ -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.
......
......@@ -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
......
......@@ -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();
......
......@@ -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();
......
......@@ -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");
......
......@@ -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;