Created Initial Draw Components

bigbluebutton-html5/Gruntfile.js

@@ -41,7 +41,7 @@ module.exports = function (grunt) {
 
     shell: {
       start_meteor: {
-        command: 'HOME=/usr/share/meteor JASMINE_SERVER_UNIT=0 JASMINE_SERVER_INTEGRATION=0 JASMINE_CLIENT_INTEGRATION=0 JASMINE_BROWSER=PhantomJS JASMINE_MIRROR_PORT=3000 ROOT_URL=http://127.0.0.1/html5client meteor',
+        command: 'JASMINE_SERVER_UNIT=0 JASMINE_SERVER_INTEGRATION=0 JASMINE_CLIENT_INTEGRATION=0 JASMINE_BROWSER=PhantomJS JASMINE_MIRROR_PORT=3000 ROOT_URL=http://127.0.0.1/html5client meteor',
       },
     },
 

bigbluebutton-html5/imports/ui/shared/Svg.jsx

@@ -0,0 +1,29 @@
+import React, { Component, PropTypes } from 'react';
+
+// import SVGDOMPropertyConfig from 'react/lib/SVGDOMPropertyConfig.js';
+
+export default class Svg extends Component {
+  render() {
+    return (
+      <svg version='1.1' xmlNS='http://www.w3.org/2000/svg' {...this.props.svgProps} style={this.props.svgStyle}>
+      	{this.props.children}
+      </svg>
+    );
+  }
+}
+
+Svg.propTypes = {
+  children: function (props, propName, componentName) {
+    var error;
+    var prop = props[propName];
+    React.Children.forEach(prop, function (child) {
+      if (child.type !== 'Shape') {
+        error = new Error(
+          '`' + componentName + '` only accepts children of type `Shape`.'
+        );
+      }
+    });
+
+    return error;
+  },
+};

bigbluebutton-html5/imports/ui/whiteboard/SlideService.js

@@ -0,0 +1,22 @@
+let getCurrentSlide = () => {
+  let currentPresentation, currentSlide, presentationId, shapes, ref;
+  currentPresentation = Meteor.Presentations.findOne({
+      'presentation.current': true,
+    });
+  presentationId = currentPresentation != null ? (ref = currentPresentation.presentation) != null ? ref.id : void 0 : void 0;
+  currentSlide = Meteor.Slides.findOne({
+      presentationId: presentationId,
+      'slide.current': true,
+    });
+  if (currentSlide != null) {
+    currentSlide.shapes = Meteor.Shapes.find({
+        whiteboardId: currentSlide.slide.id,
+      }).fetch();
+  }
+
+  return currentSlide;
+};
+
+export default {
+  getCurrentSlide,
+};

bigbluebutton-html5/imports/ui/whiteboard/Whiteboard.jsx

@@ -5,6 +5,7 @@ import { EmojiContainer } from './EmojiContainer.jsx';
 import { Polling } from './Polling.jsx';
 import { Button } from '../shared/Button.jsx';
 import { WhiteboardControls } from './WhiteboardControls.jsx';
+import WhiteboardPaper from './whiteboard_marks/WhiteboardPaper.jsx';
 
 export let Whiteboard = React.createClass({
   mixins: [ReactMeteorData],
@@ -102,7 +103,7 @@ export let Whiteboard = React.createClass({
   render() {
     return (
       <div id="whiteboard" className="component">
-        <div id="whiteboard-container" className={ classNames(this.data.whiteboard_size) }>
+        <div id="whiteboard-container" style={{background: '#2A2D34'}} className={ classNames(this.data.whiteboard_size) }>
           <Slide />
           <EmojiContainer />
           {this.data.is_mobile ?

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/EllipseDrawComponent.jsx

@@ -0,0 +1,14 @@
+import React, { PropTypes } from 'react';
+
+export default class EllipseDrawComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <ellipse cx="" cy="" rx="" ry="" fill="" stroke="" stroke-width="" style=""></ellipse>
+    );
+  }
+}
+

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/LineDrawComponent.jsx

@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react';
+
+export default class LineDrawComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      //stroke and stroke-width might be inside of the style
+      <line x1="" y1="" x2="" y2="" stroke="" stroke-width="" style="" />
+    );
+  }
+}
+

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/PollDrawComponent.jsx

@@ -0,0 +1,14 @@
+import React, { PropTypes } from 'react';
+
+export default class PollDrawComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <g></g>
+    );
+  }
+}
+

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/RectangleDrawComponent.jsx

@@ -0,0 +1,13 @@
+import React, { PropTypes } from 'react';
+
+export default class RectangleDrawComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <rect x="" y="" width="" height="" r="" rx="" ry="" fill="" stroke="" stroke-width="" style=""></rect>
+    );
+  }
+}

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/TextDrawComponent.jsx

@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react';
+
+export default class TextDrawComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <text x="" y="" text-anchor="" font="" stroke="" fill="" style="" font-family="" font-size="" stroke-width="">
+        <tspan x="" dy=""></tspan>
+      </text>
+      );
+  }
+}

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/TriangleDrawComponent.jsx

@@ -0,0 +1,15 @@
+import React, { PropTypes } from 'react';
+
+export default class TriangleDrawComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <path style="" fill="" stroke="" d="" stroke-width="" stroke-linejoin=""></path>
+    );
+  }
+}
+
+

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/WhiteboardPaper.jsx

@@ -0,0 +1,84 @@
+import React, { PropTypes } from 'react';
+import Svg from '../../shared/Svg.jsx';
+
+export default class WhiteboardPaper extends React.Component {
+  constructor(props) {
+    super(props);
+    //var Component = allComponents['Svg'];
+  }
+
+  render() {
+    var allComponents = { 'Svg': Svg };
+    var test = 'Svg';
+    var Component = allComponents[test];
+    return (
+      <div id="whiteboard-paper" style={this.props.svgStyle}>
+        <div id="svggroup">
+          <Component svgProps={this.props.svgProps} svgStyle={this.props.svgStyle}>
+
+          </Component>
+        </div>
+      </div>
+    );
+  }
+}
+
+WhiteboardPaper.defaultProps = {
+  svgProps: {
+    width:'1134',
+    height:'850.5',
+    preserveAspectRatio: 'xMinYMin slice',
+    viewBox:'0 0 1134 850.5',
+  },
+  svgStyle: {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+};
+
+/*
+
+<Svg {...this.props} />
+
+ <svg height="850.5"
+ version="1.1"
+ width="1134"
+ xmlns="http://www.w3.org/2000/svg"
+ style="overflow: hidden; position: relative;"
+ viewBox="0 0 1134 850.5"
+ preserveAspectRatio="xMinYMin"></svg>
+*/
+
+ /* getDefaultProps: function() {
+    return {
+      id: 'whiteboard-paper',
+      version: '1.1',
+      xmlns: 'http://www.w3.org/2000/svg',
+      width:'1134',
+      height:'850.5',
+      style: 'overflow: hidden; position: relative;',
+      preserveAspectRatio: 'xMinYMin slice',
+      viewBox:'0 0 1134 850.5'
+    };
+  },
+*/
+
+/*
+
+SvgContainer.propTypes = {
+	children: function (props, propName, componentName) {
+      var error;
+      var prop = props[propName];
+
+      React.Children.forEach(prop, function (child) {
+        if (child.type !== 'Shape') {
+          error = new Error(
+            '`' + componentName + '` only accepts children of type `Shape`.'
+          );
+        }
+      });
+      return error;
+    }
+  },,
+};
+*/

bigbluebutton-html5/imports/ui/whiteboard/whiteboard_marks/WhiteboardShapeModel.jsx

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react';
+
+export default class WhiteboardShapeModel extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+      </div>
+    );
+  }
+}
+
+WhiteboardPaper.defaultProps = {
+  shapes: {
+    'ellipse': Ellipse,
+    'line': Line,
+    'poll': Poll,
+    'rectangle': Rectangle,
+    'text': Text,
+    'triangle': Triangle,
+  },
+};