Author: solomax
Date: Mon Mar 20 17:46:48 2017
New Revision: 1787820

URL: http://svn.apache.org/viewvc?rev=1787820&view=rev
Log:
[OPENMEETINGS-551] more tools added

Added:
    
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/arrow.png
   (with props)
    
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/ellipse.png
   (with props)
    
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/uline.png
   (with props)
Removed:
    
openmeetings/application/trunk/openmeetings-web/src/main/webapp/public/cliparts/thumb/
Modified:
    
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java
    
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.html
    
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.java
    
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java
    
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.html
    
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.java
    
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js
    openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java
 (original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/app/Application.java
 Mon Mar 20 17:46:48 2017
@@ -138,6 +138,7 @@ public class Application extends Authent
                //chain of Resource Loaders, if not found it will search in 
Wicket's internal
                //Resource Loader for a the property key
                getResourceSettings().getStringResourceLoaders().add(0, new 
LabelResourceLoader());
+               //FIXME TODO v3 on the way
                getJavaScriptLibrarySettings().setJQueryReference(new 
JavaScriptResourceReference(DynamicJQueryResourceReference.class, 
DynamicJQueryResourceReference.VERSION_2));
 
                super.init();

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.html
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.html?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.html
 (original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.html
 Mon Mar 20 17:46:48 2017
@@ -23,12 +23,15 @@
        <canvas></canvas>
        <div class="tools ui-state-active vertical clear" style="display: none; 
position: absolute; top: 20px; right: 0px;">
                <div class="bumper"></div>
-               <div wicket:message="title:72" class="ui-widget-header om-icon 
big pointer"></div>
-               <div wicket:message="title:73" class="ui-widget-header om-icon 
big text"></div>
-               <div wicket:message="title:74" class="ui-widget-header om-icon 
big paint"></div>
-               <div wicket:message="title:75" class="ui-widget-header om-icon 
big line"></div>
-               <div wicket:message="title:77" class="ui-widget-header om-icon 
big rect"></div>
-               <div wicket:message="title:4" class="ui-widget-header om-icon 
big settings"></div>
+               <div wicket:message="title:72" class="ui-widget-header 
clickable om-icon big pointer"></div>
+               <div wicket:message="title:73" class="ui-widget-header 
clickable om-icon big text"></div>
+               <div wicket:message="title:74" class="ui-widget-header 
clickable om-icon big paint"></div>
+               <div wicket:message="title:75" class="ui-widget-header 
clickable om-icon big line"></div>
+               <div wicket:message="title:76" class="ui-widget-header 
clickable om-icon big uline"></div>
+               <div wicket:message="title:77" class="ui-widget-header 
clickable om-icon big rect"></div>
+               <div wicket:message="title:78" class="ui-widget-header 
clickable om-icon big ellipse"></div>
+               <div wicket:message="title:79" class="ui-widget-header 
clickable om-icon big arrow"></div>
+               <div wicket:message="title:4" class="ui-widget-header clickable 
om-icon big settings"></div>
        </div>
        <div class="wb-settings ui-corner-all ui-widget-content" 
style="display: none; bottom: 100px; right: 100px;">
                <div wicket:message="title:843" class="header 
ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix 
ui-draggable-handle">

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.java
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.java?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.java
 (original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbArea.java
 Mon Mar 20 17:46:48 2017
@@ -19,15 +19,11 @@
 package org.apache.openmeetings.web.room.wb;
 
 import org.apache.wicket.markup.head.IHeaderResponse;
-import org.apache.wicket.markup.head.JavaScriptHeaderItem;
 import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
 import org.apache.wicket.markup.html.panel.Panel;
-import org.apache.wicket.request.resource.JavaScriptResourceReference;
-import org.apache.wicket.request.resource.ResourceReference;
 
 public class WbArea extends Panel {
        private static final long serialVersionUID = 1L;
-       private final static ResourceReference FABRIC_JS_REFERENCE = new 
JavaScriptResourceReference(WbArea.class, "fabric.js");
 
        public WbArea(String id) {
                super(id);
@@ -37,7 +33,6 @@ public class WbArea extends Panel {
        @Override
        public void renderHead(IHeaderResponse response) {
                super.renderHead(response);
-               
response.render(JavaScriptHeaderItem.forReference(FABRIC_JS_REFERENCE));
                
response.render(OnDomReadyHeaderItem.forScript(String.format("initArea('%s');", 
getMarkupId())));
        }
 }

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java
 (original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.java
 Mon Mar 20 17:46:48 2017
@@ -24,12 +24,7 @@ import org.apache.openmeetings.core.data
 import org.apache.openmeetings.db.entity.room.Room.Right;
 import org.apache.openmeetings.web.room.RoomPanel;
 import org.apache.wicket.core.request.handler.IPartialPageRequestHandler;
-import org.apache.wicket.markup.head.IHeaderResponse;
-import org.apache.wicket.markup.head.JavaScriptHeaderItem;
-import org.apache.wicket.markup.head.PriorityHeaderItem;
 import org.apache.wicket.markup.html.panel.Panel;
-import org.apache.wicket.request.resource.JavaScriptResourceReference;
-import org.apache.wicket.request.resource.ResourceReference;
 
 public class WbPanel extends Panel {
        private static final long serialVersionUID = 1L;
@@ -48,16 +43,6 @@ public class WbPanel extends Panel {
                tabs.addWb("Whiteboard 1");
        }
 
-       private static ResourceReference newResourceReference() {
-               return new JavaScriptResourceReference(WbPanel.class, "wb.js");
-       }
-
-       @Override
-       public void renderHead(IHeaderResponse response) {
-               super.renderHead(response);
-               response.render(new 
PriorityHeaderItem(JavaScriptHeaderItem.forReference(newResourceReference())));
-       }
-
        public boolean isReadOnly() {
                return readOnly;
        }

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.html
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.html?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.html
 (original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.html
 Mon Mar 20 17:46:48 2017
@@ -16,15 +16,25 @@
    limitations under the License.
 -->
 <wicket:panel xmlns:wicket="http://wicket.apache.org";>
-       <ul>
+       <ul class="wb-tabbar">
+               <div class="add om-icon big"></div>
                <li wicket:id="tabs">
                        <wicket:container wicket:id="tab"></wicket:container>
                </li>
        </ul>
        <div wicket:id="panels">[panel]</div>
-       
+
        <wicket:fragment wicket:id="tab-fragment">
                <a wicket:id="link">[title]</a><span wicket:id="close" 
class='ui-icon ui-icon-close' 
                                wicket:message="title:85" 
role='presentation'><wicket:message key="85"/></span>
        </wicket:fragment>
+       <div id="wb-area-clip" class="btn-group" style="display:none; float: 
left;">
+               <a class="dropdown-toggle" data-toggle="dropdown" 
wicket:message="title:1323"></a>
+               <ul class="dropdown-menu om-left">
+                       <li>
+                               <div wicket:id="clipart" 
class="ui-widget-header clickable om-icon big clipart" 
+                                       data-image="./public/cliparts/"></div>
+                       </li>
+               </ul>
+       </div>
 </wicket:panel>

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.java
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.java?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.java
 (original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbTabbedPanel.java
 Mon Mar 20 17:46:48 2017
@@ -21,26 +21,55 @@ package org.apache.openmeetings.web.room
 import static org.apache.wicket.AttributeModifier.append;
 
 import java.util.ArrayList;
+import java.util.Arrays;
 
+import org.apache.openmeetings.util.OmFileHelper;
 import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.behavior.AttributeAppender;
 import org.apache.wicket.extensions.ajax.markup.html.AjaxEditableLabel;
 import org.apache.wicket.extensions.markup.html.tabs.ITab;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.JavaScriptHeaderItem;
 import org.apache.wicket.markup.html.WebMarkupContainer;
+import org.apache.wicket.markup.html.list.ListItem;
+import org.apache.wicket.markup.html.list.ListView;
 import org.apache.wicket.markup.html.panel.Fragment;
 import org.apache.wicket.model.IModel;
 import org.apache.wicket.model.Model;
+import org.apache.wicket.request.resource.JavaScriptResourceReference;
+import org.apache.wicket.request.resource.ResourceReference;
 
 import com.googlecode.wicket.jquery.ui.widget.tabs.TabbedPanel;
 
 public class WbTabbedPanel extends TabbedPanel {
        private static final long serialVersionUID = 1L;
+       private final static ResourceReference WB_JS_REFERENCE = new 
JavaScriptResourceReference(WbTabbedPanel.class, "wb.js");
+       private final static ResourceReference FABRIC_JS_REFERENCE = new 
JavaScriptResourceReference(WbTabbedPanel.class, "fabric.js");
        private final WbPanel wb;
 
        public WbTabbedPanel(String id, WbPanel wb) {
                super(id, new ArrayList<>());
                setOutputMarkupId(true);
                this.wb = wb;
+
+               add(new ListView<String>("clipart", 
Arrays.asList(OmFileHelper.getPublicClipartsDir().list())) {
+                       private static final long serialVersionUID = 1L;
+
+                       @Override
+                       protected void populateItem(ListItem<String> item) {
+                               String cls = String.format("clipart-%s", 
item.getIndex());
+                               item.add(append("class", cls), 
append("data-mode", cls)
+                                               , new 
AttributeAppender("data-image", item.getModelObject()).setSeparator(""));
+                       }
+               });
+       }
+
+       @Override
+       public void renderHead(IHeaderResponse response) {
+               super.renderHead(response);
+               
response.render(JavaScriptHeaderItem.forReference(FABRIC_JS_REFERENCE));
+               
response.render(JavaScriptHeaderItem.forReference(WB_JS_REFERENCE));
        }
 
        @Override

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js
 (original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/wb.js
 Mon Mar 20 17:46:48 2017
@@ -16,6 +16,69 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+/**
+ * Fast UUID generator, RFC4122 version 4 compliant.
+ * @author Jeff Ward (jcward.com).
+ * @license MIT license
+ * @link 
http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
+ **/
+var UUID = (function() {
+       var self = {};
+       var lut = [];
+       for (var i = 0; i < 256; i++) {
+               lut[i] = (i < 16 ? '0' : '') + (i).toString(16);
+       }
+       self.generate = function() {
+               var d0 = Math.random() * 0xffffffff | 0;
+               var d1 = Math.random() * 0xffffffff | 0;
+               var d2 = Math.random() * 0xffffffff | 0;
+               var d3 = Math.random() * 0xffffffff | 0;
+               return lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 
0xff] + lut[d0 >> 24 & 0xff] + '-' +
+                       lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + '-' + lut[d1 >> 
16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + '-' +
+                       lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + '-' + 
lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] +
+                       lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 
0xff] + lut[d3 >> 24 & 0xff];
+       }
+       return self;
+})();
+// Based on https://groups.google.com/d/msg/fabricjs/TSwLHzLsP_w/-sE8WBDq6QIJ
+fabric.LineArrow = fabric.util.createClass(fabric.Line, {
+       type: 'lineArrow'
+       , initialize: function(element, options) {
+               options || (options = {});
+               this.callSuper('initialize', element, options);
+       }
+       , toObject: function() {
+               return fabric.util.object.extend(this.callSuper('toObject'));
+       }
+       , _render: function(ctx) {
+               this.callSuper('_render', ctx);
+
+               // do not render if width/height are zeros or object is not 
visible
+               if (this.width === 0 || this.height === 0 || !this.visible) 
return;
+
+               ctx.save();
+               var xDiff = this.x2 - this.x1;
+               var yDiff = this.y2 - this.y1;
+               var angle = Math.atan2(yDiff, xDiff);
+               ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
+               ctx.rotate(angle);
+               ctx.beginPath();
+               // move 10px in front of line to start the arrow so it does not 
have the
+               // square line end showing in front (0,0)
+               ctx.moveTo(10, 0);
+               ctx.lineTo(-20, 15);
+               ctx.lineTo(-20, -15);
+               ctx.closePath();
+               this._renderFill(ctx);
+               this._renderStroke(ctx);
+               ctx.restore();
+       }
+});
+fabric.LineArrow.fromObject = function (object, callback) {
+       callback && callback(new fabric.LineArrow([object.x1, object.y1, 
object.x2, object.y2],object));
+};
+fabric.LineArrow.async = true;
+
 var Pointer = function(canvas, s) {
        return {
                activate: function() {
@@ -37,11 +100,33 @@ var Pointer = function(canvas, s) {
        };
 }
 var Base = function() {
-       return {
+       var base = {
                fill: {enabled: true, color: '#FFFF33'}
                , stroke: {enabled: true, color: '#FF6600', width: 5}
                , opacity: 1
        };
+       base.enableLineProps = function(s) {
+               var c = s.find('.wb-prop-color'), w = s.find('.wb-prop-width'), 
o = s.find('.wb-prop-opacity');
+               s.find('.wb-prop-fill').prop('disabled', true);
+               s.find('.wb-prop-b, .wb-prop-i, .wb-prop-lock-color, 
.wb-prop-lock-fill').button("disable");
+               c.val(base.stroke.color).prop('disabled', false);
+               w.val(base.stroke.width).prop('disabled', false);
+               o.val(100 * base.opacity).prop('disabled', false);
+               return {c: c, w: w, o: o};
+       };
+       base.enableAllProps = function(s) {
+               var c = s.find('.wb-prop-color'), w = s.find('.wb-prop-width')
+                       , o = s.find('.wb-prop-opacity'), f = 
s.find('.wb-prop-fill')
+                       , lc = s.find('.wb-prop-lock-color'), lf = 
s.find('.wb-prop-lock-fill');
+               s.find('.wb-prop-b, .wb-prop-i').button("disable");
+               lc.button("enable").button('option', 'icon', 
base.stroke.enabled ? 'ui-icon-unlocked' : 'ui-icon-locked');
+               lf.button("enable").button('option', 'icon', base.fill.enabled 
? 'ui-icon-unlocked' : 'ui-icon-locked');
+               c.val(base.stroke.color).prop('disabled', !base.stroke.enabled);
+               w.val(base.stroke.width).prop('disabled', false);
+               o.val(100 * base.opacity).prop('disabled', false);
+               f.val(base.fill.color).prop('disabled', !base.fill.enabled);
+       };
+       return base;
 }
 var Text = function(canvas, s) {
        var text = Base();
@@ -58,6 +143,8 @@ var Text = function(canvas, s) {
                                , top: pointer.y
                                , padding: 7
                                , stroke: text.stroke.color
+                               , fill: text.fill.color
+                               , opacity: text.opacity
                        });
                        canvas.add(text.obj).setActiveObject(text.obj);
                }
@@ -71,6 +158,7 @@ var Text = function(canvas, s) {
                                o.selectable = true;
                        }
                });
+               text.enableAllProps(s);
        };
        text.deactivate = function() {
                canvas.off('mouse:down', text.mouseDown);
@@ -91,12 +179,7 @@ var Paint = function(canvas, s) {
                canvas.freeDrawingBrush.color = paint.stroke.color;
                canvas.freeDrawingBrush.opacity = paint.opacity; //TODO not 
working
 
-               var c = s.find('.wb-prop-color'), w = s.find('.wb-prop-width'), 
o = s.find('.wb-prop-opacity');
-               s.find('.wb-prop-fill').prop('disabled', true);
-               s.find('.wb-prop-b, .wb-prop-i, .wb-prop-lock-color, 
.wb-prop-lock-fill').button("disable");
-               c.val(paint.stroke.color).prop('disabled', false);
-               w.val(paint.stroke.width).prop('disabled', false);
-               o.val(100 * paint.opacity).prop('disabled', true); //TODO not 
working
+               paint.enableLineProps(s).o.prop('disabled', true); //TODO not 
working
        };
        paint.deactivate = function() {
                canvas.isDrawingMode = false;
@@ -109,11 +192,15 @@ var Shape = function(canvas) {
        shape.isDown = false;
        shape.orig = {x: 0, y: 0};
 
+       shape.add2Canvas = function() {
+               canvas.add(shape.obj);
+       }
        shape.mouseDown = function(o) {
                shape.isDown = true;
                var pointer = canvas.getPointer(o.e);
                shape.orig = {x: pointer.x, y: pointer.y};
-               canvas.add(shape.createShape());
+               shape.createShape();
+               shape.add2Canvas();
        };
        shape.mouseMove = function(o) {
                if (!shape.isDown) return;
@@ -152,18 +239,19 @@ var Line = function(canvas, s) {
                return line.obj;
        };
        line.internalActivate = function() {
-               var c = s.find('.wb-prop-color'), w = s.find('.wb-prop-width'), 
o = s.find('.wb-prop-opacity');
-               s.find('.wb-prop-fill').prop('disabled', true);
-               s.find('.wb-prop-b, .wb-prop-i, .wb-prop-lock-color, 
.wb-prop-lock-fill').button("disable");
-               c.val(line.stroke.color).prop('disabled', false);
-               w.val(line.stroke.width).prop('disabled', false);
-               o.val(100 * line.opacity).prop('disabled', false);
+               line.enableLineProps(s);
        };
        line.updateShape = function(pointer) {
                line.obj.set({ x2: pointer.x, y2: pointer.y });
        };
        return line;
 }
+var ULine = function(canvas, s) {
+       var uline = Line(canvas, s);
+       uline.stroke.width = 20;
+       uline.opacity = .5;
+       return uline;
+}
 var Rect = function(canvas, s) {
        var rect = Shape(canvas);
        rect.createShape = function() {
@@ -179,16 +267,7 @@ var Rect = function(canvas, s) {
                return rect.obj;
        };
        rect.internalActivate = function() {
-               var c = s.find('.wb-prop-color'), w = s.find('.wb-prop-width')
-                       , o = s.find('.wb-prop-opacity'), f = 
s.find('.wb-prop-fill')
-                       , lc = s.find('.wb-prop-lock-color'), lf = 
s.find('.wb-prop-lock-fill');
-               s.find('.wb-prop-b, .wb-prop-i').button("disable");
-               lc.button("enable").button('option', 'icon', 
rect.stroke.enabled ? 'ui-icon-unlocked' : 'ui-icon-locked');
-               lf.button("enable").button('option', 'icon', rect.fill.enabled 
? 'ui-icon-unlocked' : 'ui-icon-locked');
-               c.val(rect.stroke.color).prop('disabled', !rect.stroke.enabled);
-               w.val(rect.stroke.width).prop('disabled', false);
-               o.val(100 * rect.opacity).prop('disabled', false);
-               f.val(rect.fill.color).prop('disabled', !rect.fill.enabled);
+               rect.enableAllProps(s);
        };
        rect.updateShape = function(pointer) {
                if (rect.orig.x > pointer.x) {
@@ -204,15 +283,86 @@ var Rect = function(canvas, s) {
        };
        return rect;
 }
+var Ellipse = function(canvas, s) {
+       var ellipse = Rect(canvas, s);
+       ellipse.createShape = function() {
+               ellipse.obj = new fabric.Ellipse({
+                       strokeWidth: ellipse.stroke.width
+                       , fill: ellipse.fill.enabled ? ellipse.fill.color : 
'rgba(0,0,0,0)'
+                       , stroke: ellipse.stroke.enabled ? ellipse.stroke.color 
: 'rgba(0,0,0,0)'
+                       , left: ellipse.orig.x
+                       , top: ellipse.orig.y
+                       , rx: 0
+                       , ry: 0
+                       , originX: 'center'
+                       , originY: 'center'
+               });
+               return ellipse.obj;
+       };
+       ellipse.updateShape = function(pointer) {
+               ellipse.obj.set({
+                       rx: Math.abs(ellipse.orig.x - pointer.x)
+                       , ry: Math.abs(ellipse.orig.y - pointer.y)
+               });
+       };
+       return ellipse;
+}
+var Arrow = function(canvas, s) {
+       var arrow = Line(canvas, s);
+       arrow.createShape = function() {
+               arrow.obj = new fabric.LineArrow([arrow.orig.x, arrow.orig.y, 
arrow.orig.x, arrow.orig.y], {
+                       strokeWidth: arrow.stroke.width
+                       , fill: arrow.fill.enabled ? arrow.fill.color : 
'rgba(0,0,0,0)'
+                       , stroke: arrow.stroke.enabled ? arrow.stroke.color : 
'rgba(0,0,0,0)'
+                       , opacity: arrow.opacity
+               });
+               return arrow.obj;
+       };
+       arrow.internalActivate = function() {
+               arrow.enableAllProps(s);
+       };
+       return arrow;
+}
+var Clipart = function(canvas, btn) {
+       var art = Shape(canvas);
+       art.add2Canvas = function() {}
+       art.createShape = function() {
+               fabric.Image.fromURL(btn.data('image'), function(img) {
+                       art.orig.width = img.width;
+                       art.orig.height = img.height;
+                       art.obj = img.set({
+                               left: art.orig.x
+                               , top: art.orig.y
+                               , width: 0
+                               , height: 0
+                       });
+                       canvas.add(art.obj);
+               });
+       }
+       art.updateShape = function(pointer) {
+               if (!art.obj) {
+                       return; // not ready
+               }
+               //TODO height == width
+               var dx = pointer.x - art.orig.x, dy = pointer.y - art.orig.y;
+               var d = Math.sqrt(dx * dx + dy * dy);
+               art.obj.set({
+                       width: d
+                       , height: art.orig.height * d / art.orig.width
+                       , angle: Math.atan2(dy, dx) * 180 / Math.PI
+               });
+       }
+       return art;
+}
 var Wb = function() {
        const ACTIVE = 'active';
        var a, t, s, canvas, mode;
 
-       function getBtn() {
-               return t.find(".om-icon." + mode);
+       function getBtn(m) {
+               return t.find(".om-icon." + (m || mode));
        }
        function initToolBtn(m, def, obj) {
-               var btn = t.find(".om-icon." + m);
+               var btn = getBtn(m);
                btn.data({
                        obj: obj
                        , activate: function() {
@@ -237,6 +387,22 @@ var Wb = function() {
                        btn.data('activate')();
                }
        }
+       function initCliparts() {
+               var c = $('#wb-area-clip').clone().attr('id', '');
+               getBtn('arrow').after(c);
+               c.find('a').prepend(c.find('div.om-icon.big:first'));
+               c.find('.om-icon.clipart').each(function(idx) {
+                       var cur = $(this);
+                       cur.css('background-image', 'url(' + cur.data('image') 
+ ')')
+                               .click(function() {
+                                       var old = c.find('a .om-icon.clipart');
+                                       c.find('ul li').prepend(old);
+                                       c.find('a').prepend(cur);
+                               });
+                       initToolBtn(cur.data('mode'), false, Clipart(canvas, 
cur));
+               });
+               c.show();
+       }
        function internalInit(t) {
                t.show().draggable({
                        snap: "parent"
@@ -256,7 +422,11 @@ var Wb = function() {
                initToolBtn('text', false, Text(canvas, s));
                initToolBtn('paint', false, Paint(canvas, s));
                initToolBtn('line', false, Line(canvas, s));
+               initToolBtn('uline', false, ULine(canvas, s));
                initToolBtn('rect', false, Rect(canvas, s));
+               initToolBtn('ellipse', false, Ellipse(canvas, s));
+               initToolBtn('arrow', false, Arrow(canvas, s));
+               initCliparts();
                t.find(".om-icon.settings").click(function() {
                        s.show();
                });

Added: 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/arrow.png
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/arrow.png?rev=1787820&view=auto
==============================================================================
Binary file - no diff available.

Propchange: 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/arrow.png
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/ellipse.png
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/ellipse.png?rev=1787820&view=auto
==============================================================================
Binary file - no diff available.

Propchange: 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/ellipse.png
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/uline.png
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/uline.png?rev=1787820&view=auto
==============================================================================
Binary file - no diff available.

Propchange: 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/images/uline.png
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Modified: 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css
URL: 
http://svn.apache.org/viewvc/openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css?rev=1787820&r1=1787819&r2=1787820&view=diff
==============================================================================
--- 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css 
(original)
+++ 
openmeetings/application/trunk/openmeetings-web/src/main/webapp/css/room.css 
Mon Mar 20 17:46:48 2017
@@ -159,12 +159,21 @@
 .room.wb.area .tools .om-icon.big.line {
        background-image: url(images/line.png);
 }
+.room.wb.area .tools .om-icon.big.uline {
+       background-image: url(images/uline.png);
+}
 .room.wb.area .tools .om-icon.big.rect {
        background-image: url(images/rectangle.png);
 }
+.room.wb.area .tools .om-icon.big.ellipse {
+       background-image: url(images/ellipse.png);
+}
 .room.wb.area .tools .om-icon.big.text {
        background-image: url(images/font.png);
 }
+.room.wb.area .tools .om-icon.big.arrow {
+       background-image: url(images/arrow.png);
+}
 .room.sidebar.left .ui-tabs .ui-tabs-panel {
        padding: 0;
 }
@@ -415,3 +424,13 @@
 .wb-settings .tab.props .wb-prop-b.selected {
        font-weight: bold;
 }
+.dropdown-menu.om-left {
+       right: 0;
+       left: auto !important;
+}
+.wb-tabbar {
+       padding-left: 45px;
+}
+.wb-tabbar .add {
+       position: absolute; left: 2px;
+}


Reply via email to