Merge branch '090-branding-logo' into mconf-live0.6.2
Conflicts: bigbluebutton-client/src/org/bigbluebutton/modules/whiteboard/views/WhiteboardToolbar.mxml
This commit is contained in:
Felipe Cecagno
commit
408e573478
@ -1,436 +1,436 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!--
|
||||
|
||||
BigBlueButton open source conferencing system - http://www.bigbluebutton.org/
|
||||
|
||||
Copyright (c) 2012 BigBlueButton Inc. and by respective authors (see below).
|
||||
|
||||
This program is free software; you can redistribute it and/or modify it under the
|
||||
terms of the GNU Lesser General Public License as published by the Free Software
|
||||
Foundation; either version 3.0 of the License, or (at your option) any later
|
||||
version.
|
||||
|
||||
BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Lesser General Public License along
|
||||
with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
|
||||
<mx:VBox xmlns="flexlib.containers.*"
|
||||
initialize="init()"
|
||||
xmlns:mx="http://www.adobe.com/2006/mxml"
|
||||
xmlns:view="org.bigbluebutton.modules.whiteboard.views.*"
|
||||
xmlns:wbBtns="org.bigbluebutton.modules.whiteboard.views.buttons.*"
|
||||
xmlns:mate="http://mate.asfusion.com/"
|
||||
creationComplete="onCreationComplete()"
|
||||
visible="{showWhiteboardToolbar}"
|
||||
includeInLayout="{showWhiteboardToolbar}"
|
||||
styleName="whiteboardToolbarStyle"
|
||||
hideEffect="{fadeOut}" showEffect="{fadeIn}">
|
||||
|
||||
<mate:Listener type="{MadePresenterEvent.SWITCH_TO_PRESENTER_MODE}" method="presenterMode" />
|
||||
<mate:Listener type="{MadePresenterEvent.SWITCH_TO_VIEWER_MODE}" method="viewerMode" />
|
||||
<mate:Listener type="{StopWhiteboardModuleEvent.STOP_HIGHLIGHTER_MODULE_EVENT}" method="closeToolbar" />
|
||||
<mate:Listener type="{ShortcutEvent.UNDO_WHITEBOARD}" method="undoShortcut" />
|
||||
<mate:Listener type="{GraphicObjectFocusEvent.OBJECT_SELECTED}" method="graphicObjSelected" />
|
||||
<mate:Listener type="{GraphicObjectFocusEvent.OBJECT_DESELECTED}" method="graphicObjDeselected" />
|
||||
<mate:Listener type="{WhiteboardButtonEvent.WHITEBOARD_BUTTON_PRESSED}" method="handleWhiteboardButtonPressed"/>
|
||||
<mate:Listener type="{ChangeMyRole.CHANGE_MY_ROLE_EVENT}" method="refreshRole" />
|
||||
<mate:Listener type="{NavigationEvent.GOTO_PAGE}" method="handleSlideChange" />
|
||||
<mate:Listener type="{DisplaySlideEvent.DISPLAY_SLIDE_EVENT}" method="handleSlideLoaded" />
|
||||
<mate:Listener type="{UploadEvent.PRESENTATION_READY}" method="handlePresentationSwitch" />
|
||||
|
||||
<mx:Style>
|
||||
.colorPickerStyle {
|
||||
backgroundColor:#E5E6E7;
|
||||
columnCount:13;
|
||||
horizontalGap:0;
|
||||
previewHeight:22;
|
||||
previewWidth:50;
|
||||
swatchGridBackgroundColor:#000000;
|
||||
swatchGridBorderSize:0;
|
||||
swatchHeight:60;
|
||||
swatchHighlightColor:#FFFFFF;
|
||||
swatchHighlightSize:1;
|
||||
swatchWidth:12;
|
||||
textFieldWidth:72;
|
||||
verticalGap:0;
|
||||
}
|
||||
|
||||
</mx:Style>
|
||||
|
||||
<mx:Script>
|
||||
<![CDATA[
|
||||
import com.asfusion.mate.events.Listener;
|
||||
import flash.ui.Keyboard;
|
||||
import flexlib.mdi.events.MDIWindowEvent;
|
||||
import mx.containers.ControlBar;
|
||||
import mx.events.MoveEvent;
|
||||
import mx.events.ResizeEvent;
|
||||
import mx.managers.CursorManager;
|
||||
import org.bigbluebutton.common.Images;
|
||||
import org.bigbluebutton.common.LogUtil;
|
||||
import org.bigbluebutton.core.UsersUtil;
|
||||
import org.bigbluebutton.core.managers.UserManager;
|
||||
import org.bigbluebutton.main.events.MadePresenterEvent;
|
||||
import org.bigbluebutton.main.events.ShortcutEvent;
|
||||
import org.bigbluebutton.main.model.users.events.ChangeMyRole;
|
||||
import org.bigbluebutton.modules.present.events.DisplaySlideEvent;
|
||||
import org.bigbluebutton.modules.present.events.PresentationEvent;
|
||||
import org.bigbluebutton.modules.present.events.NavigationEvent;
|
||||
import org.bigbluebutton.modules.present.events.UploadEvent;
|
||||
import org.bigbluebutton.modules.present.ui.views.PresentationWindow;
|
||||
import org.bigbluebutton.modules.present.ui.views.SlideView;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.DrawObject;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.GraphicObject;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.TextObject;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.WhiteboardConstants;
|
||||
import org.bigbluebutton.modules.whiteboard.events.GraphicObjectFocusEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.StopWhiteboardModuleEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.ToggleGridEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardButtonEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardDrawEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardPresenterEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardSettingResetEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.views.models.WhiteboardOptions;
|
||||
import org.bigbluebutton.util.i18n.ResourceUtil;
|
||||
|
||||
private var images:Images = new Images();
|
||||
[Bindable] private var hand_icon:Class = images.hand_icon;
|
||||
[Bindable] private var pencil_icon:Class = images.pencil_icon;
|
||||
[Bindable] private var undo_icon:Class = images.undo_icon;
|
||||
[Bindable] private var delete_icon:Class = images.delete_icon;
|
||||
[Bindable] private var rectangle_icon:Class = images.square_icon;
|
||||
[Bindable] private var ellipse_icon:Class = images.circle_icon;
|
||||
[Bindable] private var thick_icon:Class = images.whiteboard_thick;
|
||||
[Bindable] private var thin_icon:Class = images.whiteboard_thin;
|
||||
[Bindable] private var scribble_icon:Class = images.scribble_icon;
|
||||
[Bindable] private var text_icon:Class = images.text_icon;
|
||||
[Bindable] private var triangle_icon:Class = images.triangle_icon;
|
||||
[Bindable] private var line_icon:Class = images.line_icon;
|
||||
[Bindable] private var fill_icon:Class = images.fill_icon;
|
||||
[Bindable] private var transparency_icon:Class = images.transparency_icon;
|
||||
[Bindable] private var eraser_icon:Class = images.eraser_icon;
|
||||
[Bindable] private var highlighter_icon:Class = images.highlighter_icon;
|
||||
[Bindable] private var select_icon:Class = images.select_icon;
|
||||
[Bindable] private var grid_icon:Class = images.grid_icon;
|
||||
|
||||
[Bindable] public var wbOptions:WhiteboardOptions;
|
||||
[Bindable] private var baseIndex:int;
|
||||
|
||||
[Bindable] private var showWhiteboardToolbar:Boolean = false;
|
||||
|
||||
private static const LOG:String = "WB::WhiteboardToolbar - ";
|
||||
|
||||
private var mousedOver:Boolean = false;
|
||||
private var slideLoaded:Boolean = false;
|
||||
|
||||
public var canvas:WhiteboardCanvas;
|
||||
private var presentationWindow:PresentationWindow;
|
||||
|
||||
[Bindable] private var colorPickerColours:Array = ['0x000000', '0xFFFFFF' , '0xFF0000', '0xFF8800',
|
||||
'0xCCFF00', '0x00FF00', '0x00FF88', '0x00FFFF', '0x0088FF', '0x0000FF', '0x8800FF', '0xFF00FF', '0xC0C0C0'];
|
||||
|
||||
private var _hideToolbarTimer:Timer = new Timer(500, 1);
|
||||
|
||||
private function init():void{
|
||||
wbOptions = new WhiteboardOptions();
|
||||
baseIndex = wbOptions.baseTabIndex;
|
||||
}
|
||||
|
||||
private function onCreationComplete():void {
|
||||
setToolType(WhiteboardConstants.TYPE_ZOOM, null);
|
||||
_hideToolbarTimer.addEventListener(TimerEvent.TIMER, onHideToolbarTimerComplete);
|
||||
}
|
||||
|
||||
private function handleWhiteboardButtonPressed(e:WhiteboardButtonEvent):void {
|
||||
setToolType(e.graphicType, e.toolType);
|
||||
}
|
||||
|
||||
private function setToolType(graphicType:String, toolType:String):void {
|
||||
if (graphicType == WhiteboardConstants.TYPE_CLEAR) {
|
||||
dispatchEvent(new WhiteboardDrawEvent(WhiteboardDrawEvent.CLEAR));
|
||||
} else if (graphicType == WhiteboardConstants.TYPE_UNDO) {
|
||||
sendUndoCommand();
|
||||
} else {
|
||||
canvas.setGraphicType(graphicType);
|
||||
canvas.setTool(toolType);
|
||||
|
||||
if (panzoomBtn != null) {
|
||||
panzoomBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (scribbleBtn != null) {
|
||||
scribbleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (rectangleBtn != null) {
|
||||
rectangleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (circleBtn != null) {
|
||||
circleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (triangleBtn != null) {
|
||||
triangleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (lineBtn != null) {
|
||||
lineBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (textBtn != null) {
|
||||
textBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected function changeColor(e:Event):void {
|
||||
canvas.changeColor(e);
|
||||
}
|
||||
|
||||
protected function changeFillColor(e:Event):void {
|
||||
canvas.changeFillColor(e);
|
||||
}
|
||||
|
||||
protected function changeThickness(e:Event):void {
|
||||
canvas.changeThickness(e);
|
||||
}
|
||||
|
||||
protected function toggleFill():void {
|
||||
canvas.toggleFill();
|
||||
}
|
||||
|
||||
protected function toggleTransparency():void {
|
||||
canvas.toggleTransparency();
|
||||
}
|
||||
|
||||
private function presenterMode(e:MadePresenterEvent):void {
|
||||
if (canvas == null) return;
|
||||
|
||||
canvas.makeTextObjectsEditable(e);
|
||||
setToolType(WhiteboardConstants.TYPE_ZOOM, null);
|
||||
}
|
||||
|
||||
private function viewerMode(e:MadePresenterEvent):void {
|
||||
canvas.makeTextObjectsUneditable(e);
|
||||
if (!toolbarAllowed()) {
|
||||
checkVisibility();
|
||||
if (panzoomBtn) {
|
||||
panzoomBtn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function undoShortcut(e:ShortcutEvent):void{
|
||||
trace(LOG + "Ctrl-Z got into undoShortcut");
|
||||
sendUndoCommand();
|
||||
}
|
||||
|
||||
private function sendUndoCommand():void {
|
||||
// if (!canvas.isPageEmpty()) {
|
||||
dispatchEvent(new WhiteboardDrawEvent(WhiteboardDrawEvent.UNDO));
|
||||
// }
|
||||
}
|
||||
|
||||
public function positionToolbar(window:PresentationWindow):void {
|
||||
trace(LOG + "Positioning whiteboard toolbar");
|
||||
presentationWindow = window;
|
||||
presentationWindow.addEventListener(MoveEvent.MOVE, setPositionAndDepth);
|
||||
presentationWindow.addEventListener(ResizeEvent.RESIZE, setPositionAndDepth);
|
||||
presentationWindow.addEventListener(MouseEvent.CLICK, setPositionAndDepth);
|
||||
|
||||
if (!wbOptions.keepToolbarVisible) {
|
||||
window.presCtrlBar.addEventListener(MouseEvent.ROLL_OVER, handleMouseOut);
|
||||
window.presCtrlBar.addEventListener(MouseEvent.ROLL_OUT, handleMouseIn);
|
||||
|
||||
window.addEventListener(MouseEvent.ROLL_OVER, handleMouseIn);
|
||||
window.addEventListener(MouseEvent.ROLL_OUT, handleMouseOut);
|
||||
|
||||
this.addEventListener(MouseEvent.ROLL_OVER, handleMouseIn);
|
||||
this.addEventListener(MouseEvent.ROLL_OUT, handleMouseOut);
|
||||
} else {
|
||||
var listener1:Listener = new Listener();
|
||||
listener1.method = checkVisibility;
|
||||
listener1.type = MadePresenterEvent.SWITCH_TO_PRESENTER_MODE;
|
||||
var listener2:Listener = new Listener();
|
||||
listener2.method = checkVisibility;
|
||||
listener2.type = MadePresenterEvent.SWITCH_TO_VIEWER_MODE;
|
||||
//Do an initial check to see if the toolbar should be visible
|
||||
checkVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
private function refreshRole(e:ChangeMyRole):void {
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function checkVisibility(e:MadePresenterEvent = null):void {
|
||||
if (toolbarAllowed() && slideLoaded && (wbOptions.keepToolbarVisible || mousedOver)) {
|
||||
setPositionAndDepth();
|
||||
showToolbar();
|
||||
} else {
|
||||
hideToolbar();
|
||||
}
|
||||
}
|
||||
|
||||
private function showToolbar():void {
|
||||
_hideToolbarTimer.reset();
|
||||
showWhiteboardToolbar = true;
|
||||
}
|
||||
|
||||
private function hideToolbar():void {
|
||||
_hideToolbarTimer.reset();
|
||||
_hideToolbarTimer.start();
|
||||
}
|
||||
|
||||
private function onHideToolbarTimerComplete(event:TimerEvent):void {
|
||||
showWhiteboardToolbar = false;
|
||||
}
|
||||
|
||||
private function setPositionAndDepth(e:Event = null):void {
|
||||
this.x = presentationWindow.x + presentationWindow.width - 43;
|
||||
this.y = presentationWindow.y + 30;
|
||||
parent.setChildIndex(this, parent.numChildren - 1);
|
||||
}
|
||||
|
||||
private function closeToolbar(e:StopWhiteboardModuleEvent):void {
|
||||
parent.removeChild(this);
|
||||
}
|
||||
|
||||
private function handleMouseIn(e:MouseEvent):void {
|
||||
mousedOver = true;
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handleMouseOut(e:MouseEvent = null):void {
|
||||
mousedOver = false;
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handleSlideLoaded(e:DisplaySlideEvent):void {
|
||||
slideLoaded = true;
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handleSlideChange(e:NavigationEvent):void {
|
||||
slideLoaded = false;
|
||||
// don't switch the toolbar button on slide change
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handlePresentationSwitch(e:UploadEvent):void {
|
||||
slideLoaded = false;
|
||||
if (panzoomBtn) {
|
||||
panzoomBtn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
|
||||
}
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function graphicObjSelected(event:GraphicObjectFocusEvent):void {
|
||||
var gobj:GraphicObject = event.data;
|
||||
}
|
||||
|
||||
private function graphicObjDeselected(event:GraphicObjectFocusEvent):void {
|
||||
var gobj:GraphicObject = event.data;
|
||||
}
|
||||
|
||||
private function toolbarAllowed():Boolean {
|
||||
if (wbOptions) {
|
||||
if (wbOptions.whiteboardAccess == "presenter")
|
||||
return isPresenter;
|
||||
else if (wbOptions.whiteboardAccess == "moderator")
|
||||
return isModerator || isPresenter;
|
||||
else if (wbOptions.whiteboardAccess == "all")
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
} else
|
||||
return false;
|
||||
}
|
||||
|
||||
/** Helper method to test whether this user is the presenter */
|
||||
private function get isPresenter():Boolean {
|
||||
return UsersUtil.amIPresenter();
|
||||
}
|
||||
|
||||
private function get isModerator():Boolean {
|
||||
return UsersUtil.amIModerator();
|
||||
}
|
||||
|
||||
]]>
|
||||
</mx:Script>
|
||||
|
||||
<mx:Fade id="fadeOut" duration="200" alphaFrom="1.0" alphaTo="0.0" />
|
||||
<mx:Fade id="fadeIn" duration="200" alphaFrom="0.0" alphaTo="1.0" />
|
||||
|
||||
<!-- Now, every 'tool' has two types of identifiers, one is found in WhiteboardConstants
|
||||
that identifies the "category" of the tool (ex. shape vs text), and the other specifies the
|
||||
tool itself (ex. line tool vs triangle tool, even though both are "shapes")
|
||||
-->
|
||||
<wbBtns:PanZoomButton id="panzoomBtn"
|
||||
tabIndex="{baseIndex}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<mx:Spacer height="10" visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:ScribbleButton id="scribbleBtn"
|
||||
tabIndex="{baseIndex+1}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:RectangleButton id="rectangleBtn"
|
||||
tabIndex="{baseIndex+2}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:CircleButton id="circleBtn"
|
||||
tabIndex="{baseIndex+3}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:TriangleButton id="triangleBtn"
|
||||
tabIndex="{baseIndex+4}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:LineButton id="lineBtn"
|
||||
tabIndex="{baseIndex+5}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:TextButton id="textBtn"
|
||||
tabIndex="{baseIndex+6}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
<mx:Spacer height="5" visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:ClearButton id="clearBtn"
|
||||
tabIndex="{baseIndex+7}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:UndoButton id="undoBtn"
|
||||
tabIndex="{baseIndex+8}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
<mx:Spacer height="5" visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
<!--
|
||||
Properties that were removed from original color picker:
|
||||
|
||||
swatchPanelStyleName="colorPickerStyle"
|
||||
dataProvider="{colorPickerColours}"
|
||||
-->
|
||||
|
||||
<!-- Layout is really bad right now, and is confusing. Basically, there are two
|
||||
of ColorPickers, one for the "line" color for the outlines of shapes, and the other for
|
||||
the "fill" color that is used only if "fill" is enabled in WhiteboardCanvasModel
|
||||
-->
|
||||
<mx:ColorPicker change="changeColor(event)" id="cpik" visible="{showWhiteboardToolbar}"
|
||||
selectedColor="0x000000" width="30" dataProvider="{colorPickerColours}" swatchPanelStyleName="colorPickerStyle"
|
||||
toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.color')}"
|
||||
tabIndex="{baseIndex+9}"
|
||||
accessibilityName="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.color')}"/>
|
||||
|
||||
<mx:Spacer height="3" visible="{showWhiteboardToolbar}"/>
|
||||
<mx:Image source="{thick_icon}" horizontalAlign="center" width="30" visible="{showWhiteboardToolbar}"/>
|
||||
<mx:VSlider height="50" id="sld" change="changeThickness(event)" visible="{showWhiteboardToolbar}"
|
||||
toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.thickness.accessibilityName')}"
|
||||
minimum="1" maximum="30"
|
||||
useHandCursor="true" value="2" showDataTip="true" snapInterval="1" dataTipOffset="0" labelOffset="0"
|
||||
tabIndex="{baseIndex+10}"
|
||||
accessibilityName="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.thickness.accessibilityName')}" />
|
||||
<mx:Image source="{thin_icon}" horizontalAlign="center" width="30" visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
</mx:VBox>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!--
|
||||
|
||||
BigBlueButton open source conferencing system - http://www.bigbluebutton.org/
|
||||
|
||||
Copyright (c) 2012 BigBlueButton Inc. and by respective authors (see below).
|
||||
|
||||
This program is free software; you can redistribute it and/or modify it under the
|
||||
terms of the GNU Lesser General Public License as published by the Free Software
|
||||
Foundation; either version 3.0 of the License, or (at your option) any later
|
||||
version.
|
||||
|
||||
BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Lesser General Public License along
|
||||
with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
|
||||
<mx:VBox xmlns="flexlib.containers.*"
|
||||
initialize="init()"
|
||||
xmlns:mx="http://www.adobe.com/2006/mxml"
|
||||
xmlns:view="org.bigbluebutton.modules.whiteboard.views.*"
|
||||
xmlns:wbBtns="org.bigbluebutton.modules.whiteboard.views.buttons.*"
|
||||
xmlns:mate="http://mate.asfusion.com/"
|
||||
creationComplete="onCreationComplete()"
|
||||
visible="{showWhiteboardToolbar}"
|
||||
includeInLayout="{showWhiteboardToolbar}"
|
||||
styleName="whiteboardToolbarStyle"
|
||||
hideEffect="{fadeOut}" showEffect="{fadeIn}">
|
||||
|
||||
<mate:Listener type="{MadePresenterEvent.SWITCH_TO_PRESENTER_MODE}" method="presenterMode" />
|
||||
<mate:Listener type="{MadePresenterEvent.SWITCH_TO_VIEWER_MODE}" method="viewerMode" />
|
||||
<mate:Listener type="{StopWhiteboardModuleEvent.STOP_HIGHLIGHTER_MODULE_EVENT}" method="closeToolbar" />
|
||||
<mate:Listener type="{ShortcutEvent.UNDO_WHITEBOARD}" method="undoShortcut" />
|
||||
<mate:Listener type="{GraphicObjectFocusEvent.OBJECT_SELECTED}" method="graphicObjSelected" />
|
||||
<mate:Listener type="{GraphicObjectFocusEvent.OBJECT_DESELECTED}" method="graphicObjDeselected" />
|
||||
<mate:Listener type="{WhiteboardButtonEvent.WHITEBOARD_BUTTON_PRESSED}" method="handleWhiteboardButtonPressed"/>
|
||||
<mate:Listener type="{ChangeMyRole.CHANGE_MY_ROLE_EVENT}" method="refreshRole" />
|
||||
<mate:Listener type="{NavigationEvent.GOTO_PAGE}" method="handleSlideChange" />
|
||||
<mate:Listener type="{DisplaySlideEvent.DISPLAY_SLIDE_EVENT}" method="handleSlideLoaded" />
|
||||
<mate:Listener type="{UploadEvent.PRESENTATION_READY}" method="handlePresentationSwitch" />
|
||||
|
||||
<mx:Style>
|
||||
.colorPickerStyle {
|
||||
backgroundColor:#E5E6E7;
|
||||
columnCount:13;
|
||||
horizontalGap:0;
|
||||
previewHeight:22;
|
||||
previewWidth:50;
|
||||
swatchGridBackgroundColor:#000000;
|
||||
swatchGridBorderSize:0;
|
||||
swatchHeight:60;
|
||||
swatchHighlightColor:#FFFFFF;
|
||||
swatchHighlightSize:1;
|
||||
swatchWidth:12;
|
||||
textFieldWidth:72;
|
||||
verticalGap:0;
|
||||
}
|
||||
|
||||
</mx:Style>
|
||||
|
||||
<mx:Script>
|
||||
<![CDATA[
|
||||
import com.asfusion.mate.events.Listener;
|
||||
import flash.ui.Keyboard;
|
||||
import flexlib.mdi.events.MDIWindowEvent;
|
||||
import mx.containers.ControlBar;
|
||||
import mx.events.MoveEvent;
|
||||
import mx.events.ResizeEvent;
|
||||
import mx.managers.CursorManager;
|
||||
import org.bigbluebutton.common.Images;
|
||||
import org.bigbluebutton.common.LogUtil;
|
||||
import org.bigbluebutton.core.UsersUtil;
|
||||
import org.bigbluebutton.core.managers.UserManager;
|
||||
import org.bigbluebutton.main.events.MadePresenterEvent;
|
||||
import org.bigbluebutton.main.events.ShortcutEvent;
|
||||
import org.bigbluebutton.main.model.users.events.ChangeMyRole;
|
||||
import org.bigbluebutton.modules.present.events.DisplaySlideEvent;
|
||||
import org.bigbluebutton.modules.present.events.PresentationEvent;
|
||||
import org.bigbluebutton.modules.present.events.NavigationEvent;
|
||||
import org.bigbluebutton.modules.present.events.UploadEvent;
|
||||
import org.bigbluebutton.modules.present.ui.views.PresentationWindow;
|
||||
import org.bigbluebutton.modules.present.ui.views.SlideView;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.DrawObject;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.GraphicObject;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.TextObject;
|
||||
import org.bigbluebutton.modules.whiteboard.business.shapes.WhiteboardConstants;
|
||||
import org.bigbluebutton.modules.whiteboard.events.GraphicObjectFocusEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.StopWhiteboardModuleEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.ToggleGridEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardButtonEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardDrawEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardPresenterEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.events.WhiteboardSettingResetEvent;
|
||||
import org.bigbluebutton.modules.whiteboard.views.models.WhiteboardOptions;
|
||||
import org.bigbluebutton.util.i18n.ResourceUtil;
|
||||
|
||||
private var images:Images = new Images();
|
||||
[Bindable] private var hand_icon:Class = images.hand_icon;
|
||||
[Bindable] private var pencil_icon:Class = images.pencil_icon;
|
||||
[Bindable] private var undo_icon:Class = images.undo_icon;
|
||||
[Bindable] private var delete_icon:Class = images.delete_icon;
|
||||
[Bindable] private var rectangle_icon:Class = images.square_icon;
|
||||
[Bindable] private var ellipse_icon:Class = images.circle_icon;
|
||||
[Bindable] private var thick_icon:Class = images.whiteboard_thick;
|
||||
[Bindable] private var thin_icon:Class = images.whiteboard_thin;
|
||||
[Bindable] private var scribble_icon:Class = images.scribble_icon;
|
||||
[Bindable] private var text_icon:Class = images.text_icon;
|
||||
[Bindable] private var triangle_icon:Class = images.triangle_icon;
|
||||
[Bindable] private var line_icon:Class = images.line_icon;
|
||||
[Bindable] private var fill_icon:Class = images.fill_icon;
|
||||
[Bindable] private var transparency_icon:Class = images.transparency_icon;
|
||||
[Bindable] private var eraser_icon:Class = images.eraser_icon;
|
||||
[Bindable] private var highlighter_icon:Class = images.highlighter_icon;
|
||||
[Bindable] private var select_icon:Class = images.select_icon;
|
||||
[Bindable] private var grid_icon:Class = images.grid_icon;
|
||||
|
||||
[Bindable] public var wbOptions:WhiteboardOptions;
|
||||
[Bindable] private var baseIndex:int;
|
||||
|
||||
[Bindable] private var showWhiteboardToolbar:Boolean = false;
|
||||
|
||||
private static const LOG:String = "WB::WhiteboardToolbar - ";
|
||||
|
||||
private var mousedOver:Boolean = false;
|
||||
private var slideLoaded:Boolean = false;
|
||||
|
||||
public var canvas:WhiteboardCanvas;
|
||||
private var presentationWindow:PresentationWindow;
|
||||
|
||||
[Bindable] private var colorPickerColours:Array = ['0x000000', '0xFFFFFF' , '0xFF0000', '0xFF8800',
|
||||
'0xCCFF00', '0x00FF00', '0x00FF88', '0x00FFFF', '0x0088FF', '0x0000FF', '0x8800FF', '0xFF00FF', '0xC0C0C0'];
|
||||
|
||||
private var _hideToolbarTimer:Timer = new Timer(500, 1);
|
||||
|
||||
private function init():void{
|
||||
wbOptions = new WhiteboardOptions();
|
||||
baseIndex = wbOptions.baseTabIndex;
|
||||
}
|
||||
|
||||
private function onCreationComplete():void {
|
||||
setToolType(WhiteboardConstants.TYPE_ZOOM, null);
|
||||
_hideToolbarTimer.addEventListener(TimerEvent.TIMER, onHideToolbarTimerComplete);
|
||||
}
|
||||
|
||||
private function handleWhiteboardButtonPressed(e:WhiteboardButtonEvent):void {
|
||||
setToolType(e.graphicType, e.toolType);
|
||||
}
|
||||
|
||||
private function setToolType(graphicType:String, toolType:String):void {
|
||||
if (graphicType == WhiteboardConstants.TYPE_CLEAR) {
|
||||
dispatchEvent(new WhiteboardDrawEvent(WhiteboardDrawEvent.CLEAR));
|
||||
} else if (graphicType == WhiteboardConstants.TYPE_UNDO) {
|
||||
sendUndoCommand();
|
||||
} else {
|
||||
canvas.setGraphicType(graphicType);
|
||||
canvas.setTool(toolType);
|
||||
|
||||
if (panzoomBtn != null) {
|
||||
panzoomBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (scribbleBtn != null) {
|
||||
scribbleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (rectangleBtn != null) {
|
||||
rectangleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (circleBtn != null) {
|
||||
circleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (triangleBtn != null) {
|
||||
triangleBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (lineBtn != null) {
|
||||
lineBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
|
||||
if (textBtn != null) {
|
||||
textBtn.setTool(graphicType, toolType);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected function changeColor(e:Event):void {
|
||||
canvas.changeColor(e);
|
||||
}
|
||||
|
||||
protected function changeFillColor(e:Event):void {
|
||||
canvas.changeFillColor(e);
|
||||
}
|
||||
|
||||
protected function changeThickness(e:Event):void {
|
||||
canvas.changeThickness(e);
|
||||
}
|
||||
|
||||
protected function toggleFill():void {
|
||||
canvas.toggleFill();
|
||||
}
|
||||
|
||||
protected function toggleTransparency():void {
|
||||
canvas.toggleTransparency();
|
||||
}
|
||||
|
||||
private function presenterMode(e:MadePresenterEvent):void {
|
||||
if (canvas == null) return;
|
||||
|
||||
canvas.makeTextObjectsEditable(e);
|
||||
setToolType(WhiteboardConstants.TYPE_ZOOM, null);
|
||||
}
|
||||
|
||||
private function viewerMode(e:MadePresenterEvent):void {
|
||||
canvas.makeTextObjectsUneditable(e);
|
||||
if (!toolbarAllowed()) {
|
||||
checkVisibility();
|
||||
if (panzoomBtn) {
|
||||
panzoomBtn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function undoShortcut(e:ShortcutEvent):void{
|
||||
trace(LOG + "Ctrl-Z got into undoShortcut");
|
||||
sendUndoCommand();
|
||||
}
|
||||
|
||||
private function sendUndoCommand():void {
|
||||
// if (!canvas.isPageEmpty()) {
|
||||
dispatchEvent(new WhiteboardDrawEvent(WhiteboardDrawEvent.UNDO));
|
||||
// }
|
||||
}
|
||||
|
||||
public function positionToolbar(window:PresentationWindow):void {
|
||||
trace(LOG + "Positioning whiteboard toolbar");
|
||||
presentationWindow = window;
|
||||
presentationWindow.addEventListener(MoveEvent.MOVE, setPositionAndDepth);
|
||||
presentationWindow.addEventListener(ResizeEvent.RESIZE, setPositionAndDepth);
|
||||
presentationWindow.addEventListener(MouseEvent.CLICK, setPositionAndDepth);
|
||||
|
||||
if (!wbOptions.keepToolbarVisible) {
|
||||
window.presCtrlBar.addEventListener(MouseEvent.ROLL_OVER, handleMouseOut);
|
||||
window.presCtrlBar.addEventListener(MouseEvent.ROLL_OUT, handleMouseIn);
|
||||
|
||||
window.addEventListener(MouseEvent.ROLL_OVER, handleMouseIn);
|
||||
window.addEventListener(MouseEvent.ROLL_OUT, handleMouseOut);
|
||||
|
||||
this.addEventListener(MouseEvent.ROLL_OVER, handleMouseIn);
|
||||
this.addEventListener(MouseEvent.ROLL_OUT, handleMouseOut);
|
||||
} else {
|
||||
var listener1:Listener = new Listener();
|
||||
listener1.method = checkVisibility;
|
||||
listener1.type = MadePresenterEvent.SWITCH_TO_PRESENTER_MODE;
|
||||
var listener2:Listener = new Listener();
|
||||
listener2.method = checkVisibility;
|
||||
listener2.type = MadePresenterEvent.SWITCH_TO_VIEWER_MODE;
|
||||
//Do an initial check to see if the toolbar should be visible
|
||||
checkVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
private function refreshRole(e:ChangeMyRole):void {
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function checkVisibility(e:MadePresenterEvent = null):void {
|
||||
if (toolbarAllowed() && slideLoaded && (wbOptions.keepToolbarVisible || mousedOver) && !presentationWindow.minimized) {
|
||||
setPositionAndDepth();
|
||||
showToolbar();
|
||||
} else {
|
||||
hideToolbar();
|
||||
}
|
||||
}
|
||||
|
||||
private function showToolbar():void {
|
||||
_hideToolbarTimer.reset();
|
||||
showWhiteboardToolbar = true;
|
||||
}
|
||||
|
||||
private function hideToolbar():void {
|
||||
_hideToolbarTimer.reset();
|
||||
_hideToolbarTimer.start();
|
||||
}
|
||||
|
||||
private function onHideToolbarTimerComplete(event:TimerEvent):void {
|
||||
showWhiteboardToolbar = false;
|
||||
}
|
||||
|
||||
private function setPositionAndDepth(e:Event = null):void {
|
||||
this.x = presentationWindow.x + presentationWindow.width - 43;
|
||||
this.y = presentationWindow.y + 30;
|
||||
parent.setChildIndex(this, parent.numChildren - 1);
|
||||
}
|
||||
|
||||
private function closeToolbar(e:StopWhiteboardModuleEvent):void {
|
||||
parent.removeChild(this);
|
||||
}
|
||||
|
||||
private function handleMouseIn(e:MouseEvent):void {
|
||||
mousedOver = true;
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handleMouseOut(e:MouseEvent = null):void {
|
||||
mousedOver = false;
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handleSlideLoaded(e:DisplaySlideEvent):void {
|
||||
slideLoaded = true;
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handleSlideChange(e:NavigationEvent):void {
|
||||
slideLoaded = false;
|
||||
// don't switch the toolbar button on slide change
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function handlePresentationSwitch(e:UploadEvent):void {
|
||||
slideLoaded = false;
|
||||
if (panzoomBtn) {
|
||||
panzoomBtn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
|
||||
}
|
||||
checkVisibility();
|
||||
}
|
||||
|
||||
private function graphicObjSelected(event:GraphicObjectFocusEvent):void {
|
||||
var gobj:GraphicObject = event.data;
|
||||
}
|
||||
|
||||
private function graphicObjDeselected(event:GraphicObjectFocusEvent):void {
|
||||
var gobj:GraphicObject = event.data;
|
||||
}
|
||||
|
||||
private function toolbarAllowed():Boolean {
|
||||
if (wbOptions) {
|
||||
if (wbOptions.whiteboardAccess == "presenter")
|
||||
return isPresenter;
|
||||
else if (wbOptions.whiteboardAccess == "moderator")
|
||||
return isModerator || isPresenter;
|
||||
else if (wbOptions.whiteboardAccess == "all")
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
} else
|
||||
return false;
|
||||
}
|
||||
|
||||
/** Helper method to test whether this user is the presenter */
|
||||
private function get isPresenter():Boolean {
|
||||
return UsersUtil.amIPresenter();
|
||||
}
|
||||
|
||||
private function get isModerator():Boolean {
|
||||
return UsersUtil.amIModerator();
|
||||
}
|
||||
|
||||
]]>
|
||||
</mx:Script>
|
||||
|
||||
<mx:Fade id="fadeOut" duration="200" alphaFrom="1.0" alphaTo="0.0" />
|
||||
<mx:Fade id="fadeIn" duration="200" alphaFrom="0.0" alphaTo="1.0" />
|
||||
|
||||
<!-- Now, every 'tool' has two types of identifiers, one is found in WhiteboardConstants
|
||||
that identifies the "category" of the tool (ex. shape vs text), and the other specifies the
|
||||
tool itself (ex. line tool vs triangle tool, even though both are "shapes")
|
||||
-->
|
||||
<wbBtns:PanZoomButton id="panzoomBtn"
|
||||
tabIndex="{baseIndex}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<mx:Spacer height="10" visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:ScribbleButton id="scribbleBtn"
|
||||
tabIndex="{baseIndex+1}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:RectangleButton id="rectangleBtn"
|
||||
tabIndex="{baseIndex+2}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:CircleButton id="circleBtn"
|
||||
tabIndex="{baseIndex+3}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:TriangleButton id="triangleBtn"
|
||||
tabIndex="{baseIndex+4}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:LineButton id="lineBtn"
|
||||
tabIndex="{baseIndex+5}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:TextButton id="textBtn"
|
||||
tabIndex="{baseIndex+6}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
<mx:Spacer height="5" visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:ClearButton id="clearBtn"
|
||||
tabIndex="{baseIndex+7}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
<wbBtns:UndoButton id="undoBtn"
|
||||
tabIndex="{baseIndex+8}"
|
||||
visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
<mx:Spacer height="5" visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
<!--
|
||||
Properties that were removed from original color picker:
|
||||
|
||||
swatchPanelStyleName="colorPickerStyle"
|
||||
dataProvider="{colorPickerColours}"
|
||||
-->
|
||||
|
||||
<!-- Layout is really bad right now, and is confusing. Basically, there are two
|
||||
of ColorPickers, one for the "line" color for the outlines of shapes, and the other for
|
||||
the "fill" color that is used only if "fill" is enabled in WhiteboardCanvasModel
|
||||
-->
|
||||
<mx:ColorPicker change="changeColor(event)" id="cpik" visible="{showWhiteboardToolbar}"
|
||||
selectedColor="0x000000" width="30" dataProvider="{colorPickerColours}" swatchPanelStyleName="colorPickerStyle"
|
||||
toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.color')}"
|
||||
tabIndex="{baseIndex+9}"
|
||||
accessibilityName="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.color')}"/>
|
||||
|
||||
<mx:Spacer height="3" visible="{showWhiteboardToolbar}"/>
|
||||
<mx:Image source="{thick_icon}" horizontalAlign="center" width="30" visible="{showWhiteboardToolbar}"/>
|
||||
<mx:VSlider height="50" id="sld" change="changeThickness(event)" visible="{showWhiteboardToolbar}"
|
||||
toolTip="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.thickness.accessibilityName')}"
|
||||
minimum="1" maximum="30"
|
||||
useHandCursor="true" value="2" showDataTip="true" snapInterval="1" dataTipOffset="0" labelOffset="0"
|
||||
tabIndex="{baseIndex+10}"
|
||||
accessibilityName="{ResourceUtil.getInstance().getString('bbb.highlighter.toolbar.thickness.accessibilityName')}" />
|
||||
<mx:Image source="{thin_icon}" horizontalAlign="center" width="30" visible="{showWhiteboardToolbar}"/>
|
||||
|
||||
</mx:VBox>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user