Repository: openmeetings Updated Branches: refs/heads/4.0.x 7cbac9dc3 -> 7008a6930
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js index 7659eba..56adc13 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/player.js @@ -23,196 +23,193 @@ var Player = (function() { .append($('<source>').attr('type', 'video/mp4').attr('src', _o._src)); $('#wb-tab-' + canvas.wbId).append(vid); new fabric.Image.fromURL(_o._poster, function(poster) { - new fabric.Image(vid[0], {}, function (video) { - video.visible = false; - poster.width = _o.width; - poster.height = _o.height; - if (typeof(_o.status) === 'undefined') { - _o.status = {paused: true}; - } - let playable = false; - const trg = new fabric.Triangle({ - left: 2.7 * rad - , top: _o.height - 2.5 * rad - , visible: _o.status.paused - , angle: 90 - , width: rad - , height: rad - , stroke: mainColor - , fill: mainColor - }); - const rectPause1 = new fabric.Rect({ - left: 1.6 * rad - , top: _o.height - 2.5 * rad - , visible: !_o.status.paused - , width: rad / 3 - , height: rad - , stroke: mainColor - , fill: mainColor - }); - const rectPause2 = new fabric.Rect({ - left: 2.1 * rad - , top: _o.height - 2.5 * rad - , visible: !_o.status.paused - , width: rad / 3 - , height: rad - , stroke: mainColor - , fill: mainColor - }); - const play = new fabric.Group([ - new fabric.Circle({ - left: rad - , top: _o.height - 3 * rad - , radius: rad - , stroke: mainColor - , strokeWidth: 2 - , fill: null - }) - , trg, rectPause1, rectPause2] - , { - objectCaching: false - , visible: false - }); - const cProgress = new fabric.Rect({ - left: 3.5 * rad - , top: _o.height - 1.5 * rad - , visible: false - , width: _o.width - 5 * rad - , height: rad / 2 - , stroke: mainColor - , fill: null - , rx: 5 - , ry: 5 - }); - const isDone = function() { - return video.getElement().currentTime === video.getElement().duration; - }; - const updateProgress = function() { - progress.set('width', (video.getElement().currentTime * cProgress.width) / video.getElement().duration); - canvas.renderAll(); - }; - const progress = new fabric.Rect({ - left: 3.5 * rad - , top: _o.height - 1.5 * rad + poster.scaleX = poster.scaleY = _o.width / poster.getOriginalSize().width; + const video = new fabric.Image(vid[0], {visible: false}); + if (typeof(_o.status) === 'undefined') { + _o.status = {paused: true}; + } + let playable = false; + const trg = new fabric.Triangle({ + left: 2.7 * rad + , top: _o.height - 2.5 * rad + , visible: _o.status.paused + , angle: 90 + , width: rad + , height: rad + , stroke: mainColor + , fill: mainColor + }); + const rectPause1 = new fabric.Rect({ + left: 1.6 * rad + , top: _o.height - 2.5 * rad + , visible: !_o.status.paused + , width: rad / 3 + , height: rad + , stroke: mainColor + , fill: mainColor + }); + const rectPause2 = new fabric.Rect({ + left: 2.1 * rad + , top: _o.height - 2.5 * rad + , visible: !_o.status.paused + , width: rad / 3 + , height: rad + , stroke: mainColor + , fill: mainColor + }); + const play = new fabric.Group([ + new fabric.Circle({ + left: rad + , top: _o.height - 3 * rad + , radius: rad + , stroke: mainColor + , strokeWidth: 2 + , fill: null + }) + , trg, rectPause1, rectPause2] + , { + objectCaching: false , visible: false - , width: 0 - , height: rad / 2 - , stroke: mainColor - , fill: mainColor - , rx: 5 - , ry: 5 }); - let request; + const cProgress = new fabric.Rect({ + left: 3.5 * rad + , top: _o.height - 1.5 * rad + , visible: false + , width: _o.width - 5 * rad + , height: rad / 2 + , stroke: mainColor + , fill: null + , rx: 5 + , ry: 5 + }); + const isDone = function() { + return video.getElement().currentTime === video.getElement().duration; + }; + const updateProgress = function() { + progress.set('width', (video.getElement().currentTime * cProgress.width) / video.getElement().duration); + canvas.requestRenderAll(); + }; + const progress = new fabric.Rect({ + left: 3.5 * rad + , top: _o.height - 1.5 * rad + , visible: false + , width: 0 + , height: rad / 2 + , stroke: mainColor + , fill: mainColor + , rx: 5 + , ry: 5 + }); + let request; - const opts = $.extend({ - subTargetCheck: true - , objectCaching: false - , omType: 'Video' - , selectable: canvas.selection - }, _filter(_o, ['fileId', 'fileType', 'slide', 'uid', '_poster', '_src', 'width', 'height', 'status'])); - const group = new fabric.Group([video, poster, play, progress, cProgress], opts); + const opts = $.extend({ + subTargetCheck: true + , objectCaching: false + , omType: 'Video' + , selectable: canvas.selection + }, _filter(_o, ['fileId', 'fileType', 'slide', 'uid', '_poster', '_src', 'width', 'height', 'status'])); + const group = new fabric.Group([video, poster, play, progress, cProgress], opts); - const updateControls = function() { - video.visible = true; - poster.visible = false; + const updateControls = function() { + video.visible = true; + poster.visible = false; - trg.visible = group.status.paused; - rectPause1.visible = !group.status.paused; - rectPause2.visible = !group.status.paused; - canvas.renderAll(); - }; - const render = function () { - if (isDone()) { - _sendStatus(group, true, video.getElement().duration); - updateControls(); - } - updateProgress(); - if (group.status.paused) { - cancelAnimationFrame(request); - canvas.renderAll(); - } else { - request = fabric.util.requestAnimFrame(render); - } - }; - cProgress.on({ - 'mousedown': function (evt) { - const _ptr = canvas.getPointer(evt.e, true) - , ptr = canvas._normalizePointer(group, _ptr) - , l = ptr.x - cProgress.aCoords.bl.x + group.width / 2; - _sendStatus(group, group.status.paused, l * video.getElement().duration / cProgress.width) - } - }); - play.on({ - /* - * https://github.com/kangax/fabric.js/issues/4115 - * - 'mouseover': function() { - circle1.set({strokeWidth: 4}); - canvas.renderAll(); - } - , 'mouseout': function() { - circle1.set({ - left: pos.left - , top: pos.top - , strokeWidth: 2 - }); - canvas.renderAll(); - } - , */'mousedown': function () { - play.set({ - left: pos.left + 3 - , top: pos.top + 3 - }); - canvas.renderAll(); - } - , 'mouseup': function () { - play.set({ - left: pos.left - , top: pos.top - }); - if (!group.status.paused && isDone()) { - video.getElement().currentTime = 0; - } - _sendStatus(group, !group.status.paused, video.getElement().currentTime) - updateControls(); - } - }); - group.on({ - 'mouseover': function() { - play.visible = playable; - cProgress.visible = playable; - progress.visible = playable; - canvas.renderAll(); - } - , 'mouseout': function() { - play.visible = false; - cProgress.visible = false; - progress.visible = false; - canvas.renderAll(); - } - }); - group.setPlayable = function(_r) { - playable = _r !== NONE; - }; - group.videoStatus = function(_status) { - group.status = _status; + trg.visible = group.status.paused; + rectPause1.visible = !group.status.paused; + rectPause2.visible = !group.status.paused; + canvas.requestRenderAll(); + }; + const render = function () { + if (isDone()) { + _sendStatus(group, true, video.getElement().duration); updateControls(); - video.getElement().currentTime = group.status.pos; - updateProgress(); - if (group.status.paused) { - video.getElement().pause(); - } else { - video.getElement().play(); - fabric.util.requestAnimFrame(render); + } + updateProgress(); + if (group.status.paused) { + cancelAnimationFrame(request); + canvas.requestRenderAll(); + } else { + request = fabric.util.requestAnimFrame(render); + } + }; + cProgress.on({ + 'mousedown': function (evt) { + const _ptr = canvas.getPointer(evt.e, true) + , ptr = canvas._normalizePointer(group, _ptr) + , l = ptr.x - cProgress.aCoords.bl.x + group.width / 2; + _sendStatus(group, group.status.paused, l * video.getElement().duration / cProgress.width) + } + }); + play.on({ + /* + * https://github.com/kangax/fabric.js/issues/4115 + * + 'mouseover': function() { + circle1.set({strokeWidth: 4}); + canvas.requestRenderAll(); + } + , 'mouseout': function() { + circle1.set({ + left: pos.left + , top: pos.top + , strokeWidth: 2 + }); + canvas.requestRenderAll(); + } + , */'mousedown': function () { + play.set({ + left: pos.left + 3 + , top: pos.top + 3 + }); + canvas.requestRenderAll(); + } + , 'mouseup': function () { + play.set({ + left: pos.left + , top: pos.top + }); + if (!group.status.paused && isDone()) { + video.getElement().currentTime = 0; } + _sendStatus(group, !group.status.paused, video.getElement().currentTime) + updateControls(); + } + }); + group.on({ + 'mouseover': function() { + play.visible = playable; + cProgress.visible = playable; + progress.visible = playable; + canvas.requestRenderAll(); + } + , 'mouseout': function() { + play.visible = false; + cProgress.visible = false; + progress.visible = false; + canvas.requestRenderAll(); } - group.setPlayable(wb.getRole()); - canvas.add(group); - canvas.renderAll(); - player.modify(group, _o); - - const pos = {left: play.left, top: play.top}; }); + group.setPlayable = function(_r) { + playable = _r !== NONE; + }; + group.videoStatus = function(_status) { + group.status = _status; + updateControls(); + video.getElement().currentTime = group.status.pos; + updateProgress(); + if (group.status.paused) { + video.getElement().pause(); + } else { + video.getElement().play(); + fabric.util.requestAnimFrame(render); + } + } + group.setPlayable(wb.getRole()); + canvas.add(group); + canvas.requestRenderAll(); + player.modify(group, _o); + + const pos = {left: play.left, top: play.top}; }); }; player.modify = function(g, _o) { @@ -224,7 +221,7 @@ var Player = (function() { , top: 10 }, _filter(_o, ['angle', 'left', 'scaleX', 'scaleY', 'top'])); g.set(opts); - g.canvas.renderAll(); + g.canvas.requestRenderAll(); }; return player; })(); http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js index cde5b89..875dfd8 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/tool-shape.js @@ -21,7 +21,7 @@ var Shape = function(wb) { if (!shape.isDown) return; const pointer = canvas.getPointer(o.e); shape.updateShape(pointer); - canvas.renderAll(); + canvas.requestRenderAll(); }; shape.updateCreated = function(o) { return o; @@ -31,7 +31,7 @@ var Shape = function(wb) { shape.isDown = false; shape.obj.setCoords(); shape.obj.selectable = false; - canvas.renderAll(); + canvas.requestRenderAll(); shape.objectCreated(shape.obj, canvas); }; shape.internalActivate = function() {}; http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js index 85a5b8d..775ba77 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-area.js @@ -25,22 +25,12 @@ var DrawWbArea = function() { return true; } const arr = []; - if (!!canvas.getActiveGroup()) { - canvas.getActiveGroup().forEachObject(function(o) { - arr.push({ - uid: o.uid - , slide: o.slide - }); + canvas.getActiveObjects().forEachObject(function(o) { + arr.push({ + uid: o.uid + , slide: o.slide }); - } else { - const o = canvas.getActiveObject(); - if (!!o) { - arr.push({ - uid: o.uid - , slide: o.slide - }); - } - } + }); wbAction('deleteObj', JSON.stringify({ wbId: wb.id , obj: arr http://git-wip-us.apache.org/repos/asf/openmeetings/blob/7008a693/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js index 9bc70fb..417db27 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb-board.js @@ -281,7 +281,7 @@ var Wb = function() { if (!!__o) { const cnvs = canvases[o.slide]; if (!!cnvs) { - cnvs.discardActiveGroup(); + cnvs.discardActiveObject(); if ('Video' === __o.omType) { $('#wb-video-' + __o.uid).remove(); } @@ -345,7 +345,7 @@ var Wb = function() { wb.eachCanvas(function(canvas) { canvas.renderOnAddRemove = true; - canvas.renderAll(); + canvas.requestRenderAll(); }); }); }; @@ -360,7 +360,7 @@ var Wb = function() { return r; } //events - function wbObjCreatedHandler(o) { + function objCreatedHandler(o) { if (role === NONE && o.type !== 'pointer') return; let json; @@ -385,7 +385,7 @@ var Wb = function() { case 'i-text': o.uid = UUID.generate(); o.slide = this.slide; - wbObjCreatedHandler(o); + objCreatedHandler(o); break; default: o.selectable = this.selection; @@ -397,7 +397,7 @@ var Wb = function() { if (role === NONE && o.type !== 'pointer') return; o.includeDefaultValues = false; - if ("group" === o.type && o.omType !== 'Video') { + if ("activeSelection" === o.type) { o.clone(function(_o) { // ungrouping _o.includeDefaultValues = false; @@ -424,7 +424,7 @@ var Wb = function() { function pathCreatedHandler(o) { o.path.uid = UUID.generate(); o.path.slide = this.slide; - wbObjCreatedHandler(o.path); + objCreatedHandler(o.path); }; function scrollHandler() { $(this).find('.canvas-container').each(function(idx) { @@ -462,7 +462,7 @@ var Wb = function() { function setHandlers(canvas) { // off everything first to prevent duplicates canvas.off({ - 'wb:object:created': wbObjCreatedHandler + 'wb:object:created': objCreatedHandler , 'object:modified': objModifiedHandler , 'object:added': objAddedHandler , 'object:selected': objSelectedHandler @@ -471,7 +471,7 @@ var Wb = function() { //, 'text:changed': textChangedHandler }); canvas.on({ - 'wb:object:created': wbObjCreatedHandler + 'wb:object:created': objCreatedHandler , 'object:modified': objModifiedHandler }); if (role !== NONE) { @@ -702,7 +702,7 @@ var Wb = function() { } $('.room.wb.area .wb-video.slide-' + _sl).remove(); canvas.renderOnAddRemove = true; - canvas.renderAll(); + canvas.requestRenderAll(); } }; wb.getCanvas = function() {
