add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / draw / FreeDrawComponent.js

/**\r
 * Demonstrates path drawing and smoothing.\r
 */\r
Ext.define('KitchenSink.view.FreeDrawComponent', function () {\r
\r
    function smoothList(points) {\r
        if (points.length < 3) {\r
            return ['M', points[0], points[1]];\r
        }\r
        var dx = [], dy = [], result = ['M'],\r
            i, ln = points.length;\r
        for (i = 0; i < ln; i += 2) {\r
            dx.push(points[i]);\r
            dy.push(points[i + 1]);\r
        }\r
        dx = Ext.draw.Draw.spline(dx);\r
        dy = Ext.draw.Draw.spline(dy);\r
        result.push(dx[0], dy[0], 'C');\r
        for (i = 1, ln = dx.length; i < ln; i++) {\r
            result.push(dx[i], dy[i]);\r
        }\r
        return result;\r
    }\r
\r
    return {\r
        extend: 'Ext.draw.Container',\r
        xtype: 'free-paint-component',\r
\r
        config: {\r
            background: 'white'\r
        },\r
\r
        sprite: undefined,\r
        lastEventX: undefined,\r
        lastEventY: undefined,\r
        list: [],\r
\r
        listeners: {\r
            element: 'element',\r
            // The type of events that are supported for each framework and platform are...\r
            // - ExtJS on Desktop Machine: Mouse events\r
            // - ExtJS on Touch Device:    Mouse events + Touch events\r
            // - Sencha Touch:             Touch events + Drag events\r
            //\r
            // Mouse events = mousedown  / mousemove / mouseup\r
            // Touch events = touchstart / touchmove / touchend\r
            // Drag  events = dragstart  / drag      / dragend\r
            //\r
            // Since this is an ExtJS example, we can listen to Mouse events only.\r
            //\r
            // If we wanted the example to run on Sencha Touch also, we would have\r
            // to listen to both Mouse events and Drag events (listening to Mouse\r
            // events and Touch events would work as well but with the drawback\r
            // that ExtJS on Touch Device would send duplicate events.\r
            mousedown: function(e) {\r
                var targetElement = this,\r
                    me = Ext.getCmp(targetElement.id),\r
                    surface = me.getSurface();\r
                if (!me.sprite) {\r
                    var xy = surface.getEventXY(e),\r
                        x = xy[0],\r
                        y = xy[1];\r
\r
                    me.list = [x, y, x, y];\r
                    me.lastEventX = x;\r
                    me.lastEventY = y;\r
                    me.sprite = surface.add({\r
                        type: 'path',\r
                        path: ['M', me.list[0], me.list[1], 'L', me.list[0] + 1e-1, me.list[1] + 1e-1],\r
                        lineWidth: 30 * Math.random() + 10,\r
                        lineCap: 'round',\r
                        lineJoin: 'round',\r
                        strokeStyle: new Ext.draw.Color(Math.random() * 127 + 128, Math.random() * 127 + 128, Math.random() * 127 + 128)\r
                    });\r
                    surface.renderFrame();\r
                }\r
            },\r
            mousemove: function(e) {\r
                var targetElement = this,\r
                    me = Ext.getCmp(targetElement.id),\r
                    surface = me.getSurface();\r
                if (me.sprite) {\r
                    var xy = surface.getEventXY(e),\r
                        x = xy[0],\r
                        y = xy[1],\r
                        dx = me.lastEventX - x,\r
                        dy = me.lastEventY - y,\r
                        D = 10;\r
\r
                    if (dx * dx + dy * dy < D * D) {\r
                        me.list.length -= 2;\r
                        me.list.push(x, y);\r
                    } else {\r
                        me.list.length -= 2;\r
                        me.list.push(me.lastEventX = x, me.lastEventY = y);\r
                        me.list.push(me.lastEventX + 1, me.lastEventY + 1);\r
                    }\r
\r
                    var path = smoothList(me.list);\r
                    me.sprite.setAttributes({\r
                        path: path\r
                    });\r
                    if (Ext.os.is.Android) {\r
                        Ext.draw.Animator.schedule(function () {\r
                            surface.renderFrame();\r
                        }, me);\r
                    } else {\r
                        surface.renderFrame();\r
                    }\r
                }\r
            }\r
        },\r
\r
        initEvents: function () {\r
            this.callParent(arguments);\r
            this.on({\r
                element: 'element',\r
                mouseup: this.onMouseUp,\r
                mouseleave: this.onMouseUp\r
            });\r
        },\r
\r
        onMouseUp: function(e) {\r
            var targetElement = this,\r
                me = Ext.getCmp(targetElement.id);\r
            me.sprite = null;\r
        },\r
\r
        onResize: function() {\r
            var size = this.element.getSize();\r
            this.getSurface().setRect([0, 0, size.width, size.height]);\r
            this.renderFrame();\r
        }\r
    };\r
});\r
\r
\r