zui53 0.0.2

data/lib/assets/javascripts/zui53/zui53.js.coffee

@@ -0,0 +1,257 @@
+#= require ./helper
+#= require ./tools/pan_tool
+#= require ./tools/zoom_tool
+#= require ./surfaces/svg_surface
+#= require ./surfaces/css_surface
+
+namespace 'ZUI53', (exports)->
+  class exports.Viewport
+    constructor: (vp)->
+      @min_scale = null
+      @max_scale = null
+      
+      @viewport = @styleViewport(vp)
+      @surfaces = []
+    
+      # Offset Matrix, this should change in future, if viewport HTML-Element changes position
+      @updateOffset()
+      
+      @reset()
+      $(vp).scroll (e)=>
+        # If the browser automatically scrolls our viewport, we translate the scroll into a pan and
+        # reset the scroll. Otherwise MouseFocused Zooming and @clientToSurface is broken.
+        # This happens when the user types into a contenteditable element and the carat moves outside
+        # of the viewport.
+        jVP = $(@viewport)
+        @panBy( -jVP.scrollLeft(), -jVP.scrollTop() )
+        jVP.scrollTop(0).scrollLeft(0)
+      
+      @toolset = new ZUI53.Tools.Set( new ZUI53.Tools.Zoom(@) )
+    
+    styleViewport: (vp)->
+      $(vp).css({
+        'position': 'relative',
+        'overflow': 'hidden',
+        'width': '100%', 
+        'height': '100%'
+      })
+      vp
+    
+    updateOffset: ()=>
+      @vpOffset = $(@viewport).offset()
+      
+      @vpOffset.left -= (Number) $(window.document).scrollLeft()
+      @vpOffset.top  -= (Number) $(window.document).scrollTop()
+      
+      @vpOffM = $M([
+        [1, 0, @vpOffset.left],
+        [0, 1, @vpOffset.top],
+        [0, 0, 1]
+      ])
+
+      return @vpOffM
+    
+    reset: ()=>
+      @zoomPos = 0
+      @scale = 1.0
+      # Base Transformation Matrix for Scale/Pan and Point-Calculation
+      @surfaceM = $M([
+        [1, 0, 0],
+        [0, 1, 0],
+        [0, 0, 1]
+      ])
+      @updateSurface()
+    
+    addSurface: (surface)=>
+      @surfaces.push surface
+      @addLimits(surface.limits())
+      
+    removeSurface: (surface)=>
+      i = @surfaces.indexOf(surface)
+      @surfaces.splice(i, 1) if i >= 0
+      
+    addLimits: (limits)=>
+      return unless limits
+      if @min_scale || @max_scale
+        @min_scale = Math.max(limits[0], @min_scale) if limits[0]
+        @max_scale = Math.min(limits[1], @max_scale) if limits[1]
+      else
+        @min_scale = limits[0]
+        @max_scale = limits[1]
+      # console.log "LIMITS: #{@min_scale}, #{@max_scale}"
+  
+    clientToSurface: (x, y)=>
+      v = $V([x, y, 1])
+      sV = @surfaceM.inverse().multiply( @updateOffset().inverse().multiply(v) )
+      
+    layerToSurface: (x, y)=>
+      v = $V([x, y, 1])
+      sV = @surfaceM.inverse().multiply( v )
+    
+    surfaceToClient: (v)=>
+      @updateOffset().multiply( @surfaceM.multiply(v) )
+      
+    surfaceToLayer: (v)=>
+      @surfaceM.multiply(v)
+  
+    updateSurface: ()=>
+      v = @getPanAndScale()
+      for node in @surfaces
+        node.apply(v[0], v[1], v[2])
+      
+      return true
+
+    panBy: (x, y)=>
+      @translateSurface(x, y)
+      @updateSurface()
+  
+    zoomBy: (byF, clientX, clientY)=>
+      newScale = @_pos_to_scale(@zoomPos + byF)
+      @zoomSet(newScale, clientX, clientY)
+  
+    zoomSet: (newScale, clientX, clientY)=>
+      newScale = @fitToLimits(newScale)
+      @zoomPos = @_scale_to_pos(newScale)
+      if newScale != @scale
+        sf = @clientToSurface(clientX, clientY)
+        scaleBy = newScale/@scale
+
+        @surfaceM = @_scaleMatrix(@surfaceM, scaleBy)
+        @scale = newScale
+      
+        c = @surfaceToClient(sf)
+        dX = clientX - c.e(1)
+        dY = clientY - c.e(2)
+        @translateSurface(dX, dY)
+      
+      @updateSurface()
+      
+    # zoomByO: (byF, offsetX, offsetY)=>
+    #   # @zoomPos += byF
+    #   newScale = @_pos_to_scale(@zoomPos + byF)
+    #   @zoomSetO(newScale, offsetX, offsetY)
+    # 
+    # zoomSetO: (newScale, offsetX, offsetY)=>
+    #   newScale = @fitToLimits(newScale)
+    #   @zoomPos = @_scale_to_pos(newScale)
+    #   if newScale != @scale
+    #     sf = @layerToSurface(offsetX, offsetY)
+    #     scaleBy = newScale/@scale
+    # 
+    #     @surfaceM = @_scaleMatrix(@surfaceM, scaleBy)
+    #     @scale = newScale
+    # 
+    #     c = @surfaceToLayer(sf)
+    #     dX = offsetX - c.e(1)
+    #     dY = offsetY - c.e(2)
+    #     @translateSurface(dX, dY)
+    # 
+    #   @updateSurface()      
+    
+  
+    fitToLimits: (s)=>
+      # console.log "Try Scale: #{s}"
+      if @min_scale && s < @min_scale
+        s = @min_scale 
+      else if @max_scale && s > @max_scale
+        s = @max_scale 
+      return s
+  
+    translateSurface: (x, y)=>
+      @surfaceM = @_translateMatrix(@surfaceM, x, y)
+    
+    _translateMatrix: (m, x, y)->
+      m.add( $M([
+        [0, 0, x],
+        [0, 0, y],
+        [0, 0, 0]
+      ]))
+    
+    _scaleMatrix: (m, s)->
+      return m.multiply( $M([
+        [s, 0, 0],
+        [0, s, 0],
+        [0, 0, 1]
+      ]))
+    
+    _pos_to_scale: (pos)->
+      Math.exp(pos)
+    
+    _scale_to_pos: (s)->
+      Math.log(s)
+    
+    avp: ()=>
+      @updateOffset()
+      min = @clientToSurface(@vpOffset.left, @vpOffset.top)
+      max = @clientToSurface(@vpOffset.left + $(@viewport).width(), @vpOffset.top + $(@viewport).height())
+    
+      del = max.subtract(min)
+    
+      return {
+        x: min.e(1), 
+        y: min.e(2),
+        width: del.e(1),
+        height: del.e(2)
+      }
+    
+    _boundsCenter: (b)->
+      return {
+        x: (b.x + b.width/2),
+        y: (b.y + b.height/2)
+      }
+
+    showBounds: (evp)=>
+      if evp.width == 0 or evp.height == 0
+        return
+      
+      avp = @avp()
+      s = Math.min(avp.width/evp.width, avp.height/evp.height)
+
+      # Expand
+      exp = 50/s  #expand 50px, just a constant at the moment, should be variable
+      evp.x -= exp
+      evp.y -= exp
+      evp.width += 2*exp
+      evp.height += 2*exp
+      s = Math.min(avp.width/evp.width, avp.height/evp.height)
+      
+      s = @fitToLimits(s)
+      eC = @_boundsCenter(evp)
+      aC = @_boundsCenter(avp)
+      
+      @setPanAndScale(-eC.x*s, -eC.y*s, s)
+      @translateSurface( $(@viewport).width()/2, $(@viewport).height()/2) # Center
+
+      @updateSurface()
+    
+    getPanAndScale: ()=>
+      [@surfaceM.e(1, 3), @surfaceM.e(2, 3), @surfaceM.e(1, 1)]
+    
+    setPanAndScale: (panX, panY, scale)=>
+      @surfaceM = $M([
+        [1, 0, 0],
+        [0, 1, 0],
+        [0, 0, 1]
+      ])
+
+      @translateSurface(panX, panY)
+      @surfaceM = @_scaleMatrix(@surfaceM, scale)
+      @scale = scale
+      @zoomPos = @_scale_to_pos(scale)
+      
+    getTransformString: ()=>
+      @getPanAndScale().join(',')
+      
+    setTransformString: (str)=>
+      return unless str
+      v = str.split(',')
+      # console.log v.length
+      # return unless v.length == 3
+      panX = (Number) v[0]
+      panY = (Number) v[1]
+      scale = (Number) v[2]
+      @setPanAndScale(panX, panY, scale)
+      @updateSurface()
+    
+    
+    

data/lib/generators/zui53/install_generator.rb

@@ -0,0 +1,21 @@
+module Zui53
+class InstallGenerator < Rails::Generators::Base
+  desc "Copies zui53 assets"
+  source_root File.expand_path('../../../../build', __FILE__)
+
+  def copy_stylesheets_and_images
+    copy_file "zui53.js", "app/assets/javascripts/zui53.js"
+    
+    # ["zui53.js.coffee"].each do |f|
+    #   copy_file "javascripts/zui53/#{f}", "app/assets/javascripts/#{f}"
+    # end
+    # copy_file "images/css3buttons/css3-github-buttons-icons.png", 
+    #           "public/images/css3buttons/css3-github-buttons-icons.png"
+    # copy_file "stylesheets/css3buttons/css3-github-buttons.css", 
+    #           "public/stylesheets/css3buttons/css3-github-buttons.css"
+    # copy_file "stylesheets/css3buttons/reset.css", 
+    #           "public/stylesheets/css3buttons/reset.css"
+    # gsub_file "public/stylesheets/css3buttons/css3-github-buttons.css", /url\(css3buttons/, "url(/images/css3buttons"
+  end
+end
+end

data/lib/zui53.rb

@@ -0,0 +1,7 @@
+module Zui53
+  if ::Rails.version >= "3.1"
+    class Engine < ::Rails::Engine
+
+    end
+  end
+end

data/vendor/assets/javascripts/jquery.mousewheel.js

@@ -0,0 +1,78 @@
+/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.4
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
+    if ( event.detail     ) { delta = -event.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return $.event.handle.apply(this, args);
+}
+
+})(jQuery);