PageRenderTime 142ms CodeModel.GetById 37ms app.highlight 44ms RepoModel.GetById 57ms app.codeStats 0ms

/wwwroot/widgets/whiteboard/whiteboard.ui.js

http://github.com/AF83/ucengine
JavaScript | 320 lines | 271 code | 42 blank | 7 comment | 20 complexity | 67d9457f846074177b8da2ff8d98b011 MD5 | raw file
  1(function($) {
  2$.uce.WhiteBoard = function() {}
  3$.uce.WhiteBoard.prototype = {
  4    options: {
  5        /**
  6         * uce meeting instance
  7         */
  8        ucemeeting          : null,
  9        // widget title
 10        title               : "Whiteboard",
 11        disabled            : false,
 12        colors              : [],
 13        width               : null,
 14        height              : null,
 15        ratio               : 0.8
 16    },
 17    // ucengine events
 18    meetingsEvents : {
 19        "whiteboard.shape.draw"    : 'handleWhiteboardEvent',
 20        "whiteboard.drawing.clear" : 'handleWhiteboardEvent'
 21    },
 22
 23    _widgetClass: 'ui-widget ui-whiteboard',
 24
 25    _create: function() {
 26        var that = this;
 27
 28        // Default colors
 29        this.options.colors = [this._randomColor(), this._randomColor(), '#ffffff', '#000000'];
 30
 31        this.element.addClass(this._widgetClass);
 32        this.addHeader();
 33
 34        this._content = $("<div>").addClass("ui-widget-content").appendTo(this.element);
 35
 36        /* create toolbar */
 37        this.tool = "pencil";
 38        this.color = "#000000";
 39
 40        var toolbar = $('<div>').attr('class', 'ui-whiteboard-toolbar');
 41
 42        this._tools = {};
 43
 44        this._tools.brush = $('<span>')
 45            .attr('class', 'ui-whiteboard ui-toolbar-button ui-button-left')
 46            .button({
 47                text: false,
 48                icons: {
 49                    primary: "ui-icon-pencil"
 50                }
 51            }).click(function() {
 52                that._selectTool(this);
 53                that._changeTool('pencil');
 54            }).appendTo(toolbar);
 55
 56        this._tools.rectangle = $('<span>')
 57            .attr('class', 'ui-whiteboard ui-toolbar-button ui-button-left')
 58            .button({
 59                text: false,
 60                icons: {
 61                    primary: "ui-whiteboard-icon-rectangle"
 62                }
 63            }).click(function() {
 64                that._selectTool(this);
 65                that._changeTool('rectangle');
 66            }).appendTo(toolbar);
 67
 68        this._tools.circle = $('<span>')
 69            .attr('class', 'ui-whiteboard ui-toolbar-button ui-button-left')
 70            .button({
 71                text: false,
 72                icons: {
 73                    primary: "ui-whiteboard-icon-circle"
 74                }
 75            }).click(function() {
 76                that._selectTool(this);
 77                that._changeTool('circle');
 78            }).appendTo(toolbar);
 79
 80        this._selectTool(this._tools.brush);
 81
 82        this._tools.clear = $('<span>')
 83            .attr('class', 'ui-whiteboard ui-toolbar-button ui-button-right')
 84            .button({
 85                text: false,
 86                icons: {
 87                    primary: "ui-icon-trash"
 88                }
 89            }).click(function() {
 90                that._clear();
 91            }).appendTo(toolbar);
 92
 93        this._colors = [];
 94        $.each(this.options.colors, function(index, hex) {
 95            var color = $('<span>')
 96                .attr('class', 'ui-whiteboard ui-toolbar-button ui-button-right ui-button-color')
 97                .button()
 98                .click(function() {
 99                    that.color = hex;
100                    $.each(that._colors, function(index, color) {
101                        color.removeClass('ui-state-highlight');
102                    });
103                    $(this).addClass('ui-state-highlight');
104                })
105                .css('background-color', hex);
106            color.appendTo(toolbar);
107            that._colors.push(color);
108        });
109
110        toolbar.appendTo(this._content);
111
112        var canvasId = this.element.attr('id') + "-canvas";
113        this.canvas = $('<canvas>')
114            .attr('id', canvasId)
115            .bind('mousedown', function(event) {
116                Whiteboard.setStrokeStyle(that.color);
117
118                that.canvas.unbind("mouseup");
119                that.canvas.unbind("mouseout");
120
121                if (that.tool == "pencil") {
122                    var x1 = that._getX(event);
123                    var y1 = that._getY(event);
124                    that.canvas.bind("mousemove", function(event) {
125                        var x2 = that._getX(event);
126                        var y2 = that._getY(event);
127                        that._draw(x1, y1, x2, y2);
128                        x1 = x2;
129                        y1 = y2;
130                    });
131                    that.canvas.bind("mouseup", function(event) {
132                        that._endDraw();
133                    });
134                    that.canvas.bind("mouseout", function(event) {
135                        that._endDraw();
136                    });
137                };
138
139                if (that.tool == "rectangle") {
140                    var x1 = that._getX(event);
141                    var y1 = that._getY(event);
142                    Whiteboard.beginShape(x1, y1);
143                    that.canvas.bind("mousemove", function(event) {
144                        var x2 = that._getX(event);
145                        var y2 = that._getY(event);
146                        Whiteboard.drawRectangle(x2, y2);
147                        that.canvas.unbind('mouseup');
148                        that.canvas.bind("mouseup", function(event) {
149                            that._draw(x1, y1, x2, y2);
150                            that._endDraw();
151                        });
152                    })
153                };
154                if (that.tool == "circle") {
155                    var x1 = that._getX(event);
156                    var y1 = that._getY(event);
157                    Whiteboard.beginShape(x1, y1);
158                    that.canvas.bind("mousemove", function(event) {
159                        var x2 = that._getX(event);
160                        var y2 = that._getY(event);
161                        Whiteboard.drawOval(x2, y2);
162                        that.canvas.unbind('mouseup');
163                        that.canvas.bind("mouseup", function(event) {
164                            that._draw(x1, y1, x2, y2);
165                            that._endDraw();
166                        });
167                    });
168                };
169            });
170
171        $('<div>')
172            .attr('class', 'ui-whiteboard-drawing')
173            .append(this.canvas)
174            .appendTo(this._content);
175
176        Whiteboard.init(canvasId);
177
178        if (!this.options.width && !this.options.height) {
179            this.options.width = this.element.width();
180        }
181        if (!this.options.width && this.options.height) {
182            this.options.width = this.options.height / this.options.ratio;
183        }
184        if (this.options.height) {
185            this.options.ratio = this.options.height / this.options.width;
186        }
187
188        this.canvas.attr('width', this.options.width);
189        this.canvas.attr('height', this.options.width * this.options.ratio);
190    },
191
192    _getX: function(event) {
193        var clientX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
194        var cssx = (clientX - this.canvas.offset().left);
195        var xrel = Whiteboard.getRelative().width;
196        var canvasx = cssx * xrel;
197        return parseInt(canvasx);
198    },
199
200    _getY: function(event) {
201        var clientY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
202        var cssy = (clientY - this.canvas.offset().top);
203        var yrel = Whiteboard.getRelative().height;
204        var canvasy = cssy * yrel;
205        return parseInt(canvasy);
206    },
207
208    _clear: function() {
209        if (this.options.disabled == false) {
210            this.options.ucemeeting.push("whiteboard.drawing.clear", {});
211        }
212    },
213
214    _draw: function(x1, y1, x2, y2) {
215        if (this.options.disabled == false) {
216            this.options.ucemeeting.push("whiteboard.shape.draw",
217                                         {"tool": this.tool,
218                                          "color": this.color,
219                                          "x1": x1,
220                                          "y1": y1,
221                                          "x2": x2,
222                                          "y2": y2});
223        }
224    },
225
226    _endDraw: function(event) {
227        this.canvas.unbind("mousemove");
228        this.canvas.unbind("mouseup");
229        this.canvas.unbind("mouseout");
230    },
231
232    _selectTool: function(tool) {
233        this._tools.brush.removeClass('ui-state-highlight');
234        this._tools.rectangle.removeClass('ui-state-highlight');
235        this._tools.circle.removeClass('ui-state-highlight');
236        $(tool).addClass('ui-state-highlight');
237    },
238
239    _changeTool: function(tool) {
240        this.tool = tool;
241    },
242
243    _randomColor: function() {
244        var rint = Math.round(0xffffff * Math.random());
245        var color = ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
246        return color;
247    },
248
249    _setOption: function(key, value) {
250        $.Widget.prototype._setOption.apply(this, arguments);
251    },
252
253    reduce: function() {
254        this._resize();
255    },
256
257    expand: function() {
258        this._resize();
259    },
260
261    clear: function() {
262        var canvas = this.canvas[0];
263        var context = canvas.getContext('2d');
264        context.clearRect(0, 0, canvas.width, canvas.height);
265        this._endDraw();
266    },
267
268    _resize: function() {
269        var width = this.element.width();
270        this.canvas.css('height', width * this.options.ratio);
271    },
272
273    hideControls: function() {
274        this.element.find('.ui-whiteboard-toolbar').hide();
275    },
276
277    showControls: function() {
278        this.element.find('.ui-whiteboard-toolbar').show();
279    },
280
281    handleWhiteboardEvent: function(event) {
282        var x1 = parseInt(event.metadata.x1);
283        var y1 = parseInt(event.metadata.y1);
284        var x2 = parseInt(event.metadata.x2);
285        var y2 = parseInt(event.metadata.y2);
286
287        Whiteboard.setStrokeStyle(event.metadata.color);
288
289        if (event.type == "whiteboard.shape.draw") {
290            switch (event.metadata.tool) {
291            case "pencil":
292                Whiteboard.beginPencilDraw(x1, y1);
293                Whiteboard.pencilDraw(x2, y2);
294                break;
295            case "rectangle":
296                Whiteboard.beginShape(x1, y1);
297                Whiteboard.drawRectangle(x2, y2);
298                break;
299            case "circle":
300                Whiteboard.beginShape(x1, y1);
301                Whiteboard.drawOval(x2, y2);
302                break;
303            }
304        }
305        if (event.type == "whiteboard.drawing.clear") {
306            var canvas = this.canvas[0];
307            var context = canvas.getContext('2d');
308            context.clearRect(0, 0, canvas.width, canvas.height);
309            this._endDraw();
310        }
311    },
312
313    destroy: function() {
314        this.element.find('*').remove();
315        this.element.removeClass(this._widgetClass);
316        $.Widget.prototype.destroy.apply(this, arguments); // default destroy
317    }
318};
319$.uce.widget("whiteboard", new $.uce.WhiteBoard());
320})(jQuery);