From 3014b26439b251575b30d16d2dab31d7cc455b97 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Tue, 5 Sep 2017 18:36:15 -0700 Subject: [PATCH] PR review fixes --- .../server/methods/clearWhiteboard.js | 31 +++---- .../server/methods/sendAnnotation.js | 37 ++++----- .../server/methods/undoAnnotation.js | 31 +++---- .../server/methods/publishCursorUpdate.js | 32 +++---- .../ui/components/presentation/component.jsx | 56 ++++++------- .../presentation/cursor/component.jsx | 8 +- .../presentation/cursor/container.jsx | 5 +- .../cursor-wrapper-container/container.jsx | 8 +- .../annotation-factory/component.jsx | 2 +- .../reactive-annotation/component.jsx | 2 +- .../reactive-annotation/container.jsx | 2 +- .../static-annotation/component.jsx | 2 +- .../annotations/ellipse/component.jsx | 11 +-- .../whiteboard/annotations/helpers.js | 4 +- .../whiteboard/annotations/line/component.jsx | 11 +-- .../annotations/pencil/component.jsx | 17 ++-- .../annotations/rectangle/component.jsx | 2 +- .../whiteboard/annotations/text/component.jsx | 41 +++++---- .../whiteboard/annotations/text/service.js | 2 +- .../annotations/triangle/component.jsx | 2 +- .../whiteboard-overlay/component.jsx | 12 +-- .../whiteboard-overlay/container.jsx | 4 +- .../whiteboard/whiteboard-overlay/service.js | 2 +- .../shape-draw-listener/component.jsx | 83 ++++++++++--------- .../whiteboard-toolbar/component.jsx | 10 +-- 25 files changed, 214 insertions(+), 203 deletions(-) diff --git a/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/clearWhiteboard.js b/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/clearWhiteboard.js index cf4d6ed906..00393bb1ee 100755 --- a/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/clearWhiteboard.js +++ b/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/clearWhiteboard.js @@ -16,21 +16,22 @@ export default function clearWhiteboard(credentials, whiteboardId) { check(requesterToken, String); check(whiteboardId, String); - if (Acl.can('methods.clearWhiteboard', credentials) || getMultiUserStatus(meetingId)) { - const header = { - name: EVENT_NAME, - meetingId, - userId: requesterUserId, - }; - - const payload = { - whiteboardId, - }; - - return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); + const allowed = Acl.can('methods.clearWhiteboard', credentials) || getMultiUserStatus(meetingId); + if (!allowed) { + throw new Meteor.Error( + 'not-allowed', `User ${requesterUserId} is not allowed to clear the whiteboard`, + ); } - throw new Meteor.Error( - 'not-allowed', `User ${requesterUserId} is not allowed to clear the whiteboard`, - ); + const header = { + name: EVENT_NAME, + meetingId, + userId: requesterUserId, + }; + + const payload = { + whiteboardId, + }; + + return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); } diff --git a/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/sendAnnotation.js b/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/sendAnnotation.js index 9dc474f47e..98706799b7 100755 --- a/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/sendAnnotation.js +++ b/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/sendAnnotation.js @@ -13,10 +13,7 @@ function isLastMessage(annotation, userId) { }; const _annotation = Annotations.findOne(selector); - if (_annotation != null) { - return true; - } - return false; + return _annotation !== null; } return false; @@ -41,23 +38,25 @@ export default function sendAnnotation(credentials, annotation) { // and then slide/presentation changes, the user lost presenter rights, // or multi-user whiteboard gets turned off // So we allow the last "DRAW_END" message to pass through, to finish the shape. - if (Acl.can('methods.sendAnnotation', credentials) || + const allowed = Acl.can('methods.sendAnnotation', credentials) || getMultiUserStatus(meetingId) || - isLastMessage(annotation, requesterUserId)) { - const header = { - name: EVENT_NAME, - meetingId, - userId: requesterUserId, - }; + isLastMessage(annotation, requesterUserId); - const payload = { - annotation, - }; - - return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); + if (!allowed) { + throw new Meteor.Error( + 'not-allowed', `User ${requesterUserId} is not allowed to send an annotation`, + ); } - throw new Meteor.Error( - 'not-allowed', `User ${requesterUserId} is not allowed to send an annotation`, - ); + const header = { + name: EVENT_NAME, + meetingId, + userId: requesterUserId, + }; + + const payload = { + annotation, + }; + + return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); } diff --git a/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/undoAnnotation.js b/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/undoAnnotation.js index 1e16072c96..efb4d5e4db 100755 --- a/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/undoAnnotation.js +++ b/bigbluebutton-html5/imports/api/2.0/annotations/server/methods/undoAnnotation.js @@ -16,21 +16,22 @@ export default function undoAnnotation(credentials, whiteboardId) { check(requesterToken, String); check(whiteboardId, String); - if (Acl.can('methods.undoAnnotation', credentials) || getMultiUserStatus(meetingId)) { - const header = { - name: EVENT_NAME, - meetingId, - userId: requesterUserId, - }; - - const payload = { - whiteboardId, - }; - - return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); + const allowed = Acl.can('methods.undoAnnotation', credentials) || getMultiUserStatus(meetingId); + if (!allowed) { + throw new Meteor.Error( + 'not-allowed', `User ${requesterUserId} is not allowed to undo the annotation`, + ); } - throw new Meteor.Error( - 'not-allowed', `User ${requesterUserId} is not allowed to undo the annotation`, - ); + const header = { + name: EVENT_NAME, + meetingId, + userId: requesterUserId, + }; + + const payload = { + whiteboardId, + }; + + return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); } diff --git a/bigbluebutton-html5/imports/api/2.0/cursor/server/methods/publishCursorUpdate.js b/bigbluebutton-html5/imports/api/2.0/cursor/server/methods/publishCursorUpdate.js index 9cb8a666bc..3428a24f79 100755 --- a/bigbluebutton-html5/imports/api/2.0/cursor/server/methods/publishCursorUpdate.js +++ b/bigbluebutton-html5/imports/api/2.0/cursor/server/methods/publishCursorUpdate.js @@ -20,21 +20,23 @@ export default function publishCursorUpdate(credentials, coordinates) { yPercent: Number, }); - if (Acl.can('methods.moveCursor', credentials) || getMultiUserStatus(meetingId)) { - const header = { - name: EVENT_NAME, - userId: requesterUserId, - meetingId, - }; - - const payload = { - xPercent: coordinates.xPercent, - yPercent: coordinates.yPercent, - }; - - return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); - } - throw new Meteor.Error( + const allowed = Acl.can('methods.moveCursor', credentials) || getMultiUserStatus(meetingId); + if (!allowed) { + throw new Meteor.Error( 'not-allowed', `User ${requesterUserId} is not allowed to move the cursor`, ); + } + + const header = { + name: EVENT_NAME, + userId: requesterUserId, + meetingId, + }; + + const payload = { + xPercent: coordinates.xPercent, + yPercent: coordinates.yPercent, + }; + + return RedisPubSub.publish(CHANNEL, EVENT_NAME, meetingId, payload, header); } diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx index 517e68e14b..f2687d2a2d 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx @@ -31,12 +31,13 @@ export default class PresentationArea extends React.Component { setTimeout(this.handleResize.bind(this), 0); }); - const { presentationPaper, whiteboardSizeAvailable } = this; - this.getInitialPaperSizes(presentationPaper, whiteboardSizeAvailable); + this.getInitialPaperSizes(); } componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); + window.removeEventListener('resize', () => { + setTimeout(this.handleResize.bind(this), 0); + }); } // returns a ref to the svg element, which is required by a WhiteboardOverlay @@ -45,29 +46,9 @@ export default class PresentationArea extends React.Component { return this.svggroup; } - getInitialPaperSizes(presentationPaper, whiteboardSizeAvailable) { - // determining the paperWidth and paperHeight (available space for the svg) on the initial load - let clientHeight; - let clientWidth; - if (this.props.userIsPresenter) { - clientHeight = whiteboardSizeAvailable.clientHeight; - clientWidth = whiteboardSizeAvailable.clientWidth; - } else { - clientHeight = presentationPaper.clientHeight; - clientWidth = presentationPaper.clientWidth; - } - - // setting the state of the paperWidth and paperheight (available space for the svg) - // and set the showSlide to true to start rendering the slide - this.setState({ - paperHeight: clientHeight, - paperWidth: clientWidth, - showSlide: true, - }); - } - - handleResize() { + getPaperSizes() { const { presentationPaper, whiteboardSizeAvailable } = this; + const paperSizes = {}; if (presentationPaper) { // if a user is a presenter - this means there is a whiteboardToolBar on the right @@ -85,11 +66,28 @@ export default class PresentationArea extends React.Component { clientWidth = presentationPaper.clientWidth; } + paperSizes.paperHeight = clientHeight; + paperSizes.paperWidth = clientWidth; + } + return paperSizes; + } + + getInitialPaperSizes() { + // determining the paperWidth and paperHeight (available space for the svg) on the initial load + const paperSizes = this.getPaperSizes(); + if (Object.keys(paperSizes).length > 0) { + // setting the state of the paperWidth and paperHeight (available space for the svg) + // and set the showSlide to true to start rendering the slide + paperSizes.showSlide = true; + this.setState(paperSizes); + } + } + + handleResize() { + const paperSizes = this.getPaperSizes(); + if (Object.keys(paperSizes).length > 0) { // updating the size of the space available for the slide - this.setState({ - paperHeight: clientHeight, - paperWidth: clientWidth, - }); + this.setState(paperSizes); } } diff --git a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx index c9703c1965..e15af7ab17 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx @@ -71,13 +71,13 @@ export default class Cursor extends Component { componentWillMount() { const cursorCoordinate = Cursor.getCursorCoordinates(this.props); const { fill, displayLabel } = Cursor.getFillAndLabel(this.props); - const scaledSizes = Cursor.getScaledSizes(this.props); + const _scaledSizes = Cursor.getScaledSizes(this.props); // setting the initial cursor info this.cursorCoordinate = cursorCoordinate; this.fill = fill; this.displayLabel = displayLabel; - this.scaledSizes = scaledSizes; + this.scaledSizes = _scaledSizes; } componentDidMount() { @@ -108,8 +108,8 @@ export default class Cursor extends Component { || (labelBoxWidth !== nextProps.labelBoxWidth || labelBoxHeight !== nextProps.labelBoxHeight)) { - const scaledSizes = Cursor.getScaledSizes(nextProps); - this.scaledSizes = scaledSizes; + const _scaledSizes = Cursor.getScaledSizes(nextProps); + this.scaledSizes = _scaledSizes; } if (cursorX !== nextProps.cursorX || cursorY !== nextProps.cursorY) { diff --git a/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx index 2085d9584e..0059880163 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx @@ -24,14 +24,15 @@ class CursorContainer extends Component { render() { const { cursorX, cursorY } = this.props; + const { labelBoxWidth, labelBoxHeight } = this.state; if (cursorX > 0 && cursorY > 0) { return ( diff --git a/bigbluebutton-html5/imports/ui/components/presentation/cursor/cursor-wrapper-container/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/cursor-wrapper-container/container.jsx index 6b44b2d32a..f766bbc5e9 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/cursor/cursor-wrapper-container/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/cursor-wrapper-container/container.jsx @@ -20,7 +20,7 @@ import CursorContainer from '../container'; const CursorWrapperContainer = ({ presenterCursorId, multiUserCursorIds, ...rest }) => ( - { presenterCursorId ? + {Object.keys(presenterCursorId).length > 0 ? : null } - {multiUserCursorIds && multiUserCursorIds.length > 0 ? + {multiUserCursorIds.length > 0 ? multiUserCursorIds.map(cursorId => ( diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/helpers.js b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/helpers.js index 6e19376a51..dde707b1fe 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/helpers.js +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/helpers.js @@ -8,7 +8,7 @@ const colourToHex = (value) => { return `#${hex}`; }; -const formatColor = (color) => { +const getFormattedColor = (color) => { let _color; if (!color) { @@ -27,6 +27,6 @@ const formatColor = (color) => { const getStrokeWidth = (thickness, slideWidth) => (thickness * slideWidth) / 100; export default { - formatColor, + getFormattedColor, getStrokeWidth, }; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/line/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/line/component.jsx index 1b4b71b574..81e8dacf9d 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/line/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/line/component.jsx @@ -28,14 +28,15 @@ export default class LineDrawComponent extends Component { render() { const results = this.getCoordinates(); const { annotation, slideWidth } = this.props; + const { x1, y1, x2, y2 } = results; return ( diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/component.jsx index 6890a5c68e..a1c162370b 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/component.jsx @@ -30,6 +30,7 @@ export default class TextDrawComponent extends Component { static getPresenterStyles(results) { const styles = { fontFamily: 'Arial', + lineHeight: 'normal', border: '1px solid black', width: '100%', height: '100%', @@ -76,25 +77,35 @@ export default class TextDrawComponent extends Component { getCoordinates() { const { annotation, slideWidth, slideHeight } = this.props; - - const x = (annotation.x / 100) * slideWidth; - const y = (annotation.y / 100) * slideHeight; - const width = (annotation.textBoxWidth / 100) * slideWidth; - const height = (annotation.textBoxHeight / 100) * slideHeight; - const fontColor = AnnotationHelpers.formatColor(annotation.fontColor); - const fontSize = annotation.fontSize; - const calcedFontSize = (annotation.calcedFontSize / 100) * slideHeight; - const text = annotation.text; - - return { + const { x, y, - text, - width, - height, - fontSize, + textBoxWidth, + textBoxHeight, fontColor, + fontSize, calcedFontSize, + text, + } = annotation; + + const _x = (x / 100) * slideWidth; + const _y = (y / 100) * slideHeight; + const _width = (textBoxWidth / 100) * slideWidth; + const _height = (textBoxHeight / 100) * slideHeight; + const _fontColor = AnnotationHelpers.getFormattedColor(fontColor); + const _fontSize = fontSize; + const _calcedFontSize = (calcedFontSize / 100) * slideHeight; + const _text = text; + + return { + x: _x, + y: _y, + text: _text, + width: _width, + height: _height, + fontSize: _fontSize, + fontColor: _fontColor, + calcedFontSize: _calcedFontSize, }; } diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/service.js index 65d8c44011..9bad9191b4 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/service.js +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/text/service.js @@ -46,7 +46,7 @@ const activeTextShapeId = () => { return drawSettings.textShape.textShapeActiveId; } - return undefined; + return ''; }; export default { diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/triangle/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/triangle/component.jsx index 0a62b804ae..06e49c1e86 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/triangle/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/triangle/component.jsx @@ -39,7 +39,7 @@ export default class TriangleDrawComponent extends Component { viewBoxX + viewBoxWidth) { x = viewBoxX + viewBoxWidth; - shouldUnSelect = true; + shouldUnselect = true; } if (y < viewBoxY) { y = viewBoxY; - shouldUnSelect = true; + shouldUnselect = true; } else if (y > viewBoxY + viewBoxHeight) { y = viewBoxY + viewBoxHeight; - shouldUnSelect = true; + shouldUnselect = true; } // if either x or y are out of bounds - remove selection from potentially selected elements - if (shouldUnSelect) { + if (shouldUnselect) { WhiteboardOverlay.unSelect(); } diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/container.jsx index 2c4b7d350b..193e7e8902 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/container.jsx @@ -5,7 +5,7 @@ import WhiteboardOverlayService from './service'; import WhiteboardOverlay from './component'; const WhiteboardOverlayContainer = ({ ...props }) => { - if (props.drawSettings) { + if (Object.keys(props.drawSettings).length > 0) { return ( ); @@ -40,5 +40,5 @@ WhiteboardOverlayContainer.propTypes = { }; WhiteboardOverlayContainer.defaultProps = { - drawSettings: undefined, + drawSettings: {}, }; diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js index 70d1d919ae..17248925a9 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/service.js @@ -26,7 +26,7 @@ const getWhiteboardToolbarValues = () => { textShapeActiveId: textShape.textShapeActiveId ? textShape.textShapeActiveId : '', }; } - return undefined; + return {}; }; const resetTextShapeSession = () => { diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-draw-listener/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-draw-listener/component.jsx index af72da94d7..f80c6e3b3a 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-draw-listener/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-draw-listener/component.jsx @@ -51,48 +51,49 @@ export default class ShapeDrawListener extends Component { // main mouse down handler mouseDownHandler(event) { - if (!this.isDrawing) { - window.addEventListener('mouseup', this.mouseUpHandler); - window.addEventListener('mousemove', this.mouseMoveHandler, true); - this.isDrawing = true; - - const { - getTransformedSvgPoint, - generateNewShapeId, - svgCoordinateToPercentages, - } = this.props.actions; - - // sending the first message - let transformedSvgPoint = getTransformedSvgPoint(event); - - // transforming svg coordinate to percentages relative to the slide width/height - transformedSvgPoint = svgCoordinateToPercentages(transformedSvgPoint); - - // generating new shape id - generateNewShapeId(); - - // setting the initial current status - this.currentStatus = 'DRAW_START'; - - // saving the coordinates for future references - this.initialCoordinate = { - x: transformedSvgPoint.x, - y: transformedSvgPoint.y, - }; - - this.currentCoordinate = { - x: transformedSvgPoint.x, - y: transformedSvgPoint.y, - }; - - // All the messages will be send on timer by sendCoordinates func - this.intervalId = setInterval(this.sendCoordinates, MESSAGE_INTERVAL); - - // Sometimes when you Alt+Tab while drawing it can happen that your mouse is up, - // but the browser didn't catch it. So check it here. - } else { - this.sendLastMessage(); + // Sometimes when you Alt+Tab while drawing it can happen that your mouse is up, + // but the browser didn't catch it. So check it here. + if (this.isDrawing) { + return this.sendLastMessage(); } + + window.addEventListener('mouseup', this.mouseUpHandler); + window.addEventListener('mousemove', this.mouseMoveHandler, true); + this.isDrawing = true; + + const { + getTransformedSvgPoint, + generateNewShapeId, + svgCoordinateToPercentages, + } = this.props.actions; + + // sending the first message + let transformedSvgPoint = getTransformedSvgPoint(event); + + // transforming svg coordinate to percentages relative to the slide width/height + transformedSvgPoint = svgCoordinateToPercentages(transformedSvgPoint); + + // generating new shape id + generateNewShapeId(); + + // setting the initial current status + this.currentStatus = 'DRAW_START'; + + // saving the coordinates for future references + this.initialCoordinate = { + x: transformedSvgPoint.x, + y: transformedSvgPoint.y, + }; + + this.currentCoordinate = { + x: transformedSvgPoint.x, + y: transformedSvgPoint.y, + }; + + // All the messages will be send on timer by sendCoordinates func + this.intervalId = setInterval(this.sendCoordinates, MESSAGE_INTERVAL); + + return true; } // main mouse move handler diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx index d0aa3decb9..7d91bf70c0 100755 --- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx @@ -141,7 +141,7 @@ export default class WhiteboardToolbar extends Component { * we have 4 main cases: * 1. Color change - a) Text tool is selected, Font-Size icon substitutes the thickness icon, - thus we need to trigger just color change for the color icon + thus we need to trigger the color change just for the color icon b) Any other tool than Text tool is selected - trigger color change for both icons * 2. Thickness change - trigger radius for the thickness icon * 3. Switch from the Text tool to any other - trigger color and radius for thickness @@ -150,14 +150,12 @@ export default class WhiteboardToolbar extends Component { // 1st case if (this.state.colorSelected !== prevState.colorSelected) { - // 1st case a) - if (this.state.annotationSelected.sessionValue === 'text') { - this.colorListIconColor.beginElement(); // 1st case b) - } else { - this.colorListIconColor.beginElement(); + if (this.state.annotationSelected.sessionValue !== 'text') { this.thicknessListIconColor.beginElement(); } + // 1st case a) + this.colorListIconColor.beginElement(); // 2nd case } else if (this.state.thicknessSelected !== prevState.thicknessSelected) { this.thicknessListIconRadius.beginElement();