From 119beae88be632cccc987e0ff07a906e82251a6e Mon Sep 17 00:00:00 2001
From: Oleksandr Zhurbenko <xaerok.od.ua@gmail.com>
Date: Wed, 22 Feb 2017 16:10:30 -0800
Subject: [PATCH] Restructured whiteboard code
---
bigbluebutton-html5/imports/locales/en.json | 24 +++++-----
.../ui/components/presentation/component.jsx | 19 +++-----
.../ui/components/presentation/container.jsx | 1 -
.../ui/components/presentation/service.js | 14 ------
.../presentation/slide-controls/component.jsx | 24 +++++-----
.../whiteboard/shape-group/component.jsx | 41 +++++++++++++++++
.../whiteboard/shape-group/container.jsx | 46 +++++++++++++++++++
.../whiteboard/shape-group/service.js | 16 +++++++
.../whiteboard-overlay/component.jsx | 1 +
.../whiteboard-toolbar/component.jsx | 1 +
10 files changed, 135 insertions(+), 52 deletions(-)
create mode 100755 bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/component.jsx
create mode 100755 bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/container.jsx
create mode 100755 bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/service.js
create mode 100755 bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx
create mode 100755 bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
diff --git a/bigbluebutton-html5/imports/locales/en.json b/bigbluebutton-html5/imports/locales/en.json
index 25442f286d..c4a94d85e7 100755
--- a/bigbluebutton-html5/imports/locales/en.json
+++ b/bigbluebutton-html5/imports/locales/en.json
@@ -13,18 +13,18 @@
"app.chat.partnerDisconnected": "{name} has left the meeting",
"app.chat.moreMessages": "More messages below",
"app.kickMessage": "You have been kicked out of the meeting",
- "app.whiteboard.slideControls.prevSlideLabel": "Previous slide",
- "app.whiteboard.slideControls.prevSlideDescrip": "Change the presentation to the previous slide",
- "app.whiteboard.slideControls.nextSlideLabel": "Next slide",
- "app.whiteboard.slideControls.nextSlideDescrip": "Change the presentation to the next slide",
- "app.whiteboard.slideControls.skipSlideLabel": "Skip slide",
- "app.whiteboard.slideControls.skipSlideDescrip": "Change the presentation to a specific slide",
- "app.whiteboard.slideControls.fitWidthLabel": "Fit to width",
- "app.whiteboard.slideControls.fitWidthDescrip": "Display the whole width of the slide",
- "app.whiteboard.slideControls.fitScreenLabel": "Fit to screen",
- "app.whiteboard.slideControls.fitScreenDescrip": "Display the whole slide",
- "app.whiteboard.slideControls.zoomLabel": "Zoom",
- "app.whiteboard.slideControls.zoomDescrip": "Change the zoom level of the presentation",
+ "app.presentation.slideControls.prevSlideLabel": "Previous slide",
+ "app.presentation.slideControls.prevSlideDescrip": "Change the presentation to the previous slide",
+ "app.presentation.slideControls.nextSlideLabel": "Next slide",
+ "app.presentation.slideControls.nextSlideDescrip": "Change the presentation to the next slide",
+ "app.presentation.slideControls.skipSlideLabel": "Skip slide",
+ "app.presentation.slideControls.skipSlideDescrip": "Change the presentation to a specific slide",
+ "app.presentation.slideControls.fitWidthLabel": "Fit to width",
+ "app.presentation.slideControls.fitWidthDescrip": "Display the whole width of the slide",
+ "app.presentation.slideControls.fitScreenLabel": "Fit to screen",
+ "app.presentation.slideControls.fitScreenDescrip": "Display the whole slide",
+ "app.presentation.slideControls.zoomLabel": "Zoom",
+ "app.presentation.slideControls.zoomDescrip": "Change the zoom level of the presentation",
"app.failedMessage": "Apologies, trouble connecting to the server.",
"app.connectingMessage": "Connecting...",
"app.waitingMessage": "Disconnected. Trying to reconnect in {seconds} seconds...",
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
index ed88cdfa99..75f2c84483 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
@@ -1,8 +1,7 @@
import React, { PropTypes } from 'react';
-import WhiteboardShapeModel from '../whiteboard/shape-factory/component.jsx';
+import ShapeGroupContainer from '../whiteboard/shape-group/container.jsx';
import Cursor from './cursor/component.jsx';
import SlideControlsContainer from './slide-controls/container.jsx'; //I added
-import { createContainer } from 'meteor/react-meteor-data';
import Slide from './slide/component.jsx';
import styles from './styles.scss';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
@@ -54,17 +53,11 @@ export default class PresentationArea extends React.Component {
</defs>
<g clipPath="url(#viewBox)">
<Slide id="slideComponent" currentSlide={this.props.currentSlide}/>
- {this.props.shapes ? this.props.shapes.map((shape) =>
- <WhiteboardShapeModel
- shape={shape.shape}
- key={shape.shape.id}
- slideWidth = {slideObj.width}
- slideHeight = {slideObj.height}
- widthRatio={slideObj.width_ratio}
- heightRatio={slideObj.height_ratio}
- />
- )
- : null }
+ <ShapeGroupContainer
+ width = {slideObj.width}
+ height = {slideObj.height}
+ whiteboardId = {slideObj.id}
+ />
{this.props.cursor ?
<Cursor
viewBoxWidth={viewBoxWidth}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
index f9e1815d0e..6c1e04b2da 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
@@ -19,7 +19,6 @@ class PresentationAreaContainer extends Component {
export default createContainer(() => ({
currentSlide: PresentationAreaService.getCurrentSlide(),
- shapes: PresentationAreaService.getCurrentShapes(),
cursor: PresentationAreaService.getCurrentCursor(),
userIsPresenter: PresentationAreaService.isPresenter(),
}), PresentationAreaContainer);
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/service.js b/bigbluebutton-html5/imports/ui/components/presentation/service.js
index 3bad32391d..48ddef1c12 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/service.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/service.js
@@ -1,5 +1,4 @@
import Presentations from '/imports/api/presentations';
-import Shapes from '/imports/api/shapes';
import Slides from '/imports/api/slides';
import Cursor from '/imports/api/cursor';
import Users from '/imports/api/users';
@@ -22,18 +21,6 @@ const getCurrentSlide = () => {
});
};
-const getCurrentShapes = () => {
- const currentSlide = getCurrentSlide();
-
- if (!currentSlide) {
- return null;
- }
-
- return Shapes.find({
- whiteboardId: currentSlide.slide.id,
- }).fetch();
-};
-
const getCurrentCursor = () => Cursor.findOne({});
const isPresenter = () => {
@@ -49,7 +36,6 @@ const isPresenter = () => {
export default {
getCurrentPresentation,
getCurrentSlide,
- getCurrentShapes,
getCurrentCursor,
isPresenter,
};
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/slide-controls/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/slide-controls/component.jsx
index 93ccc8bcfd..9bcde49665 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/slide-controls/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/slide-controls/component.jsx
@@ -157,14 +157,14 @@ export default class SlideControls extends Component {
{/*Previous Slide button aria*/}
<div id="prevSlideLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.prevSlideLabel"
+ id="app.presentation.slideControls.prevSlideLabel"
description="Aria label for when switching to previous slide"
defaultMessage="Previous slide"
/>
</div>
<div id="prevSlideDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.prevSlideDescrip"
+ id="app.presentation.slideControls.prevSlideDescrip"
description="Aria description for when switching to previous slide"
defaultMessage="Change the presentation to the previous slide"
/>
@@ -172,14 +172,14 @@ export default class SlideControls extends Component {
{/*Next Slide button aria*/}
<div id="nextSlideLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.nextSlideLabel"
+ id="app.presentation.slideControls.nextSlideLabel"
description="Aria label for when switching to next slide"
defaultMessage="Next slide"
/>
</div>
<div id="nextSlideDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.nextSlideDescrip"
+ id="app.presentation.slideControls.nextSlideDescrip"
description="Aria description for when switching to next slide"
defaultMessage="Change the presentation to the next slide"
/>
@@ -187,14 +187,14 @@ export default class SlideControls extends Component {
{/*Skip Slide drop down aria*/}
<div id="skipSlideLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.skipSlideLabel"
+ id="app.presentation.slideControls.skipSlideLabel"
description="Aria label for when switching to a specific slide"
defaultMessage="Skip slide"
/>
</div>
<div id="skipSlideDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.skipSlideDescrip"
+ id="app.presentation.slideControls.skipSlideDescrip"
description="Aria description for when switching to a specific slide"
defaultMessage="Change the presentation to a specific slide"
/>
@@ -202,14 +202,14 @@ export default class SlideControls extends Component {
{/*Fit to width button aria*/}
<div id="fitWidthLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.fitWidthLabel"
+ id="app.presentation.slideControls.fitWidthLabel"
description="Aria description to display the whole width of the slide"
defaultMessage="Fit to width"
/>
</div>
<div id="fitWidthDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.fitWidthDescrip"
+ id="app.presentation.slideControls.fitWidthDescrip"
description="Aria description to display the whole width of the slide"
defaultMessage="Display the whole width of the slide"
/>
@@ -217,14 +217,14 @@ export default class SlideControls extends Component {
{/*Fit to screen button aria*/}
<div id="fitScreenLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.fitScreenLabel"
+ id="app.presentation.slideControls.fitScreenLabel"
description="Aria label to display the whole slide"
defaultMessage="Fit to screen"
/>
</div>
<div id="fitScreenDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.fitScreenDescrip"
+ id="app.presentation.slideControls.fitScreenDescrip"
description="Aria label to display the whole slide"
defaultMessage="Display the whole slide"
/>
@@ -232,14 +232,14 @@ export default class SlideControls extends Component {
{/*Zoom slider aria*/}
<div id="zoomLabel">
<FormattedMessage
- id="app.whiteboard.slideControls.zoomLabel"
+ id="app.presentation.slideControls.zoomLabel"
description="Aria label to zoom presentation"
defaultMessage="Zoom"
/>
</div>
<div id="zoomDescrip">
<FormattedMessage
- id="app.whiteboard.slideControls.zoomDescrip"
+ id="app.presentation.slideControls.zoomDescrip"
description="Aria label to zoom presentation"
defaultMessage="Change the zoom level of the presentation"
/>
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/component.jsx
new file mode 100755
index 0000000000..e9fe789010
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/component.jsx
@@ -0,0 +1,41 @@
+import React, { Component, PropTypes } from 'react';
+import WhiteboardShapeModel from '../shape-factory/component';
+
+const propTypes = {
+ // initial width and height of the slide are required to calculate the coordinates for each shape
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+
+ //array of shapes, optional
+ shapes: React.PropTypes.array,
+};
+
+export default class ShapeGroup extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ const {
+ shapes,
+ width,
+ height,
+ } = this.props;
+
+ return (
+ <g>
+ {shapes ? shapes.map((shape) =>
+ <WhiteboardShapeModel
+ shape={shape.shape}
+ key={shape.shape.id}
+ slideWidth = {width}
+ slideHeight = {height}
+ />
+ )
+ : null }
+ </g>
+ );
+ }
+}
+
+ShapeGroup.propTypes = propTypes;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/container.jsx
new file mode 100755
index 0000000000..dc3d226c13
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/container.jsx
@@ -0,0 +1,46 @@
+import React, { Component, PropTypes } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+
+import ShapeGroupService from './service';
+import ShapeGroup from './component';
+
+const propTypes = {
+ // the id is required to fetch the shapes
+ whiteboardId: PropTypes.string.isRequired,
+
+ // initial width and height of the slide are required to calculate the coordinates for each shape
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+
+ //array of shapes, optional
+ shapes: React.PropTypes.array,
+};
+
+class ShapeGroupContainer extends React.Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+ <ShapeGroup
+ shapes={this.props.shapes}
+ width={this.props.width}
+ height={this.props.height}
+ />
+ );
+ }
+}
+
+export default createContainer((params) => {
+ const { whiteboardId, width, height } = params;
+ const shapes = ShapeGroupService.getCurrentShapes(whiteboardId);
+
+ return {
+ shapes,
+ width,
+ height,
+ };
+}, ShapeGroupContainer);
+
+ShapeGroupContainer.propTypes = propTypes;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/service.js
new file mode 100755
index 0000000000..bc22b525c6
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/shape-group/service.js
@@ -0,0 +1,16 @@
+import Shapes from '/imports/api/shapes';
+
+const getCurrentShapes = (whiteboardId) => {
+
+ if (!whiteboardId) {
+ return null;
+ }
+
+ return Shapes.find({
+ whiteboardId: whiteboardId,
+ }).fetch();
+};
+
+export default {
+ getCurrentShapes,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx
new file mode 100755
index 0000000000..8b13789179
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/component.jsx
@@ -0,0 +1 @@
+
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
new file mode 100755
index 0000000000..8b13789179
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
@@ -0,0 +1 @@
+
--
GitLab