[openmeetings] branch master updated: [OPENMEETINGS-2519] fabric.js is updated

[so...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

solomax pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/openmeetings.git


The following commit(s) were added to refs/heads/master by this push:
     new e6b90b8  [OPENMEETINGS-2519] fabric.js is updated
e6b90b8 is described below

commit e6b90b819d55faa5bde52233037572b480e61ba1
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Thu Feb 25 17:31:14 2021 +0700

    [OPENMEETINGS-2519] fabric.js is updated
---
 openmeetings-web/src/main/front/wb/package.json   |  2 +-
 openmeetings-web/src/main/front/wb/src/wb-area.js | 80 ++++++++++-------------
 2 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/openmeetings-web/src/main/front/wb/package.json b/openmeetings-web/src/main/front/wb/package.json
index 9b63ae5..7920b65 100644
--- a/openmeetings-web/src/main/front/wb/package.json
+++ b/openmeetings-web/src/main/front/wb/package.json
@@ -18,7 +18,7 @@
     "tinyify": "^3.0.0"
   },
   "dependencies": {
-    "fabric": "^3.6.6",
+    "fabric": "^4.3.1",
     "mathjax-full": "^3.1.2"
   }
 }
diff --git a/openmeetings-web/src/main/front/wb/src/wb-area.js b/openmeetings-web/src/main/front/wb/src/wb-area.js
index 4e94fec..a7baa5b 100644
--- a/openmeetings-web/src/main/front/wb/src/wb-area.js
+++ b/openmeetings-web/src/main/front/wb/src/wb-area.js
@@ -68,56 +68,48 @@ module.exports = class DrawWbArea extends WbAreaBase {
 		let scroll, role = Role.NONE, _inited = false;
 
 		// Fabric overrides (should be kept up-to-date on fabric.js updates)
-		if ('function' !== typeof(window.originalDrawControl)) {
-			window.originalDrawControl = fabric.Object.prototype._drawControl;
-			window.originalGetRotatedCornerCursor = fabric.Canvas.prototype._getRotatedCornerCursor;
-			window.originalGetActionFromCorner = fabric.Canvas.prototype._getActionFromCorner;
-			window.originalGetCornerCursor = fabric.Canvas.prototype.getCornerCursor;
+		if ('function' !== typeof (window.originalTr)) {
+			window.originalTr = fabric.Object.prototype.controls.tr;
 		}
-		fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top, styleOverride) {
-			switch (control) {
-				case 'mtr':
-				{
-					const x = left + (this.cornerSize - arrowImg.width) / 2
-						, y = top + (this.cornerSize - arrowImg.height) / 2;
-					ctx.drawImage(arrowImg, x, y);
-				}
-					break;
-				case 'tr':
-				{
-					if (role === Role.PRESENTER) {
-						const x = left + (this.cornerSize - delImg.width) / 2
-							, y = top + (this.cornerSize - delImg.height) / 2;
-						ctx.drawImage(delImg, x, y);
-					} else {
-						window.originalDrawControl.call(this, control, ctx, methodName, left, top, styleOverride);
-					}
+		fabric.Object.prototype.controls.mtr.render = function(ctx, left, top, _, fabricObject) {
+			ctx.save();
+			ctx.translate(left, top);
+			ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+			ctx.drawImage(arrowImg, x-arrowImg.width / 2, -arrowImg.height / 2);
+			ctx.restore();
+		};
+		fabric.Object.prototype.controls.tr = new fabric.Control({
+			x: 0.5
+			, y: -0.5
+			, cursorStyleHandler: function(eventData, control, fabricObject) {
+				if (role === Role.PRESENTER) {
+					return 'pointer';
 				}
-					break;
-				default:
-					window.originalDrawControl.call(this, control, ctx, methodName, left, top, styleOverride);
-					break;
+				return window.originalTr.cursorStyleHandler.call(this, eventData, control, fabricObject);
 			}
-		};
-		fabric.Canvas.prototype._getRotatedCornerCursor = function(corner, target, e) {
-			if (role === Role.PRESENTER && 'tr' === corner) {
-				return 'pointer';
+			, getActionName: function(eventData, control, fabricObject) {
+				if (role === Role.PRESENTER) {
+					return 'click';
+				}
+				return window.originalTr.getActionName.call(this, eventData, control, fabricObject);
 			}
-			return window.originalGetRotatedCornerCursor.call(this, corner, target, e);
-		};
-		fabric.Canvas.prototype._getActionFromCorner = function(alreadySelected, corner, e) {
-			if (role === Role.PRESENTER && 'tr' === corner) {
-				_performDelete();
-				return 'none';
+			, mouseDownHandler: function(eventData, transformData, x, y) {
+				if (role === Role.PRESENTER) {
+					_performDelete();
+					return true;
+				}
+				return window.originalTr.mouseDownHandler.call(this, eventData, transformData, x, y);
 			}
-			return window.originalGetActionFromCorner.call(this, alreadySelected, corner, e);
-		};
-		fabric.Canvas.prototype.getCornerCursor = function(corner, target, e) {
-			if (role === Role.PRESENTER && 'tr' === corner) {
-				return 'pointer';
+			, render: function(ctx, left, top, styleOverride, fabricObject) {
+				if (role === Role.PRESENTER) {
+					const x = left - delImg.width / 2
+						, y = top - delImg.height / 2;
+					ctx.drawImage(delImg, x, y);
+				} else {
+					window.originalTr.render.call(this, ctx, left, top, styleOverride, fabricObject);
+				}
 			}
-			return window.originalGetCornerCursor.call(this, corner, target, e);
-		}
+		});
 		function _performDelete() {
 			const wb = _getActive().data()
 				, canvas = wb.getCanvas();