Improve draw of loops and drums

Use cairo to draw to border around the loop,
the drums path is modified to contain better the instrument images

Signed-off-by: Gonzalo Odiard <gonzalo@laptop.org>

4 files changed, 63 insertions, 176 deletions

diff --git a/Jam/Block.py b/Jam/Block.py
index 97a95a2..d5f706b 100644
--- a/Jam/Block.py
+++ b/Jam/Block.py
@@ -793,118 +793,38 @@ class Loop(Block):
         Block.button_release( self, event )
 
     def _doDraw( self, startX, startY, stopX, stopY, ctx):
-        y = max( startY, self.y )
-        endY = min( stopY, self.endY )
-        height = endY - y
+        x = max(startX, self.x)
+        y = max(startY, self.y)
+
+        loop = self.img[self.active]
+        width = loop.get_width()
+        height = loop.get_height()
 
-        loop = self.img[ self.active ]
         ctx.save()
-        # TODO: we have all this logic here again?
-        # is not the same than in Picker.py line 330 ?
+
+        CairoUtil.draw_loop_mask(ctx, x, y, width, height)
+
+        ctx.set_line_width(3)
+        if self.active:
+            ctx.set_source_rgb(*CairoUtil.gdk_color_to_cairo(
+                    self.owner.colors["Bg_Active"]))
+        else:
+            ctx.set_source_rgb(*CairoUtil.gdk_color_to_cairo(
+                    self.owner.colors["Bg_Inactive"]))
+        ctx.fill_preserve()
         if self.active:
             ctx.set_source_rgb(*CairoUtil.gdk_color_to_cairo(
                     self.owner.colors["Border_Active"]))
         else:
             ctx.set_source_rgb(*CairoUtil.gdk_color_to_cairo(
                     self.owner.colors["Border_Inactive"]))
+        ctx.stroke()
 
-        #-- draw head -----------------------------------------
-
-        if self.x + Loop.HEAD > startX:
-            x = max( startX, self.x )
-            endX = min( stopX, self.x + Loop.HEAD )
-            width = endX - x
-
-            ctx.save()
-            # draw border
-            # self.gc.set_clip_origin( self.x-Loop.MASK_START, self.y )
-            ctx.rectangle(x, y, width, height)
-            ctx.fill()
-
-            # draw block
-            #self.gc.set_clip_origin( self.x-Loop.MASK_START, self.y-self.height )
-            ctx.translate(x, y)
-            ctx.set_source_surface(loop)
-            ctx.paint()
-            ctx.restore()
-        #-- draw beats ----------------------------------------
-
-        beats = self.owner.noteDB.getPage(self.data["id"]).beats - 1 # last beat is drawn with the tail
-        curx = self.x + Loop.HEAD
-        while beats > 3:
-            if curx >= stopX:
-                break
-            elif curx + Loop.BEAT_MUL3 > startX:
-                x = max( startX, curx )
-                endX = min( stopX, curx + Loop.BEAT_MUL3 )
-                width = endX - x
-
-                ctx.save()
-                # draw border
-                #self.gc.set_clip_origin( curx-Loop.MASK_BEAT, self.y )
-                ctx.rectangle(x, y, width, height)
-                ctx.fill()
-                # draw block
-                #self.gc.set_clip_origin( curx-Loop.MASK_BEAT, self.y-self.height )
-                ctx.translate(x, y)
-                ctx.set_source_surface(loop)
-                ctx.paint()
-                #pixmap.draw_drawable( self.gc, loop, x-self.x, y-self.y, x,
-                # y, width, height )
-                ctx.restore()
-
-            curx += Loop.BEAT_MUL3
-            beats -= 3
-        if beats and curx < stopX:
-            endX = curx + Loop.BEAT*beats
-            if endX > startX:
-                x = max( startX, curx )
-                endX = min( stopX, endX )
-                width = endX - x
-
-                ctx.save()
-                # draw border
-                #self.gc.set_clip_origin( curx-Loop.MASK_BEAT, self.y )
-                ctx.rectangle(x, y, width, height)
-                ctx.fill()
-
-                # draw block
-                #self.gc.set_clip_origin( curx-Loop.MASK_BEAT, self.y-self.height )
-                ctx.translate(x, y)
-                ctx.set_source_surface(loop)
-                ctx.paint()
-                ctx.restore()
-            curx += Loop.BEAT*beats
-
-
-        #-- draw tail -----------------------------------------
-
-        if curx < stopX:
-            x = max( startX, curx )
-            endX = min( stopX, self.endX )
-            width = endX - x
-            ctx.save()
-            # draw border
-            #self.gc.set_clip_origin( curx-Loop.MASK_TAIL, self.y )
-            ctx.rectangle(x, y, width, height)
-            ctx.fill()
-
-            # draw block
-            #self.gc.set_clip_origin( curx-Loop.MASK_TAIL, self.y-self.height )
-            ctx.translate(x, y)
-            ctx.set_source_surface(loop)
-            ctx.paint()
-            ctx.restore()
-
-        #-- draw key ------------------------------------------
-        if self.keyActive:
-            #self.gc.set_clip_origin( self.x+Loop.KEYRECT[0]-
-            # Block.KEYMASK_START, self.y+Loop.KEYRECT[1] )
-            ctx.save()
-            ctx.translate(self.x + Loop.KEYRECT[0], self.y + Loop.KEYRECT[1])
-            ctx.set_source_surface(self.keyImage[ self.active ])
-            ctx.paint()
-            ctx.restore()
+        ctx.save()
+        # draw block
+        ctx.translate(x, y)
+        ctx.set_source_surface(loop)
+        ctx.paint()
         ctx.restore()
 
     def drawHighlight( self, startX, startY, stopX, stopY, pixmap ):
diff --git a/Jam/JamMain.py b/Jam/JamMain.py
index ec295cb..1246710 100644
--- a/Jam/JamMain.py
+++ b/Jam/JamMain.py
@@ -1071,11 +1071,12 @@ class JamMain(Gtk.EventBox):
         height = Block.Loop.HEIGHT
         surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, width, height)
         ctx = cairo.Context(surface)
+        """
         ctx.set_source_rgb(*CairoUtil.gdk_color_to_cairo(
                 self.colors["Bg_Inactive"]))
         ctx.rectangle(0, 0, width, height)
         ctx.fill()
-
+        """
         self._drawNotes(ctx, page.beats, self.noteDB.getNotesByTrack(id, 0),
                 False)
         self.loopImage[id] = surface
diff --git a/Jam/Picker.py b/Jam/Picker.py
index 3d1288e..3b208da 100644
--- a/Jam/Picker.py
+++ b/Jam/Picker.py
@@ -330,7 +330,7 @@ class Loop( Picker ):
         self.owner.updateLoopImage( data["id"] )
         loop = self.owner.getLoopImage( data["id"] )
 
-        page = self.owner.noteDB.getPage( id )
+        page = self.owner.noteDB.getPage(id)
 
         width = Block.Loop.WIDTH[page.beats]
         height = Block.Loop.HEIGHT
@@ -339,80 +339,22 @@ class Loop( Picker ):
         ctx = cairo.Context(surface)
 
         # draw bg
+        ctx.save()
+        ctx.set_line_width(3)
         ctx.set_source_rgb(*CairoUtil.gdk_color_to_cairo(
-                self.colors["Picker_Bg"]))
-        ctx.rectangle(0, 0, width, height)
-        ctx.fill()
+                self.colors["Bg_Inactive"]))
+        CairoUtil.draw_loop_mask(ctx, 0, 0, width, height)
+        ctx.fill_preserve()
 
-        #self.gc.set_clip_mask( self.blockMask )
         ctx.set_source_rgb(*CairoUtil.gdk_color_to_cairo(
                 self.colors["Border_Inactive"]))
-
-        #-- draw head -----------------------------------------
-
-        # draw border
-        #self.gc.set_clip_origin( -Block.Loop.MASK_START, 0 )
-        ctx.rectangle(0, 0, Block.Loop.HEAD, height)
-        ctx.fill()
+        ctx.stroke()
+        ctx.restore()
 
         # draw block
-        #self.gc.set_clip_origin( -Block.Loop.MASK_START, -height )
         ctx.set_source_surface(loop)
         ctx.paint()
 
-        #-- draw beats ----------------------------------------
-
-        beats = page.beats - 1 # last beat is drawn with the tail
-        curx = Block.Loop.HEAD
-        while beats > 3:
-            # draw border
-            #self.gc.set_clip_origin( curx-Block.Loop.MASK_BEAT, 0 )
-            ctx.rectangle(curx, 0, Block.Loop.BEAT_MUL3, height)
-            ctx.fill()
-
-            # draw block
-            #self.gc.set_clip_origin( curx-Block.Loop.MASK_BEAT, -height )
-            ctx.save()
-            ctx.translate(curx, 0)
-            ctx.set_source_surface(loop)
-            ctx.paint()
-            ctx.restore()
-
-            curx += Block.Loop.BEAT_MUL3
-            beats -= 3
-
-        if beats:
-            w = Block.Loop.BEAT*beats
-
-            # draw border
-            #self.gc.set_clip_origin( curx-Block.Loop.MASK_BEAT, 0 )
-            ctx.rectangle(curx, 0, w, height)
-            ctx.fill()
-
-            # draw block
-            #self.gc.set_clip_origin( curx-Block.Loop.MASK_BEAT, -height )
-            ctx.set_source_surface(loop)
-            ctx.save()
-            ctx.translate(curx, 0)
-            ctx.set_source_surface(loop)
-            ctx.paint()
-            #pixmap.draw_drawable( self.gc, loop, curx, 0, curx, 0, w, height )
-            ctx.restore()
-
-            curx += w
-
-        #-- draw tail -----------------------------------------
-
-        # draw border
-        """
-        self.gc.set_clip_origin( curx-Block.Loop.MASK_TAIL, 0 )
-        pixmap.draw_rectangle( self.gc, True, curx, 0, Block.Loop.TAIL, height )
-
-        # draw block
-        self.gc.set_clip_origin( curx-Block.Loop.MASK_TAIL, -height )
-        pixmap.draw_drawable( self.gc, loop, curx, 0, curx, 0, Block.Loop.TAIL, height )
-        """
-
         # may be there are a better way to put the content of the surface in
         # a GtkImage
         pixbuf_data = StringIO.StringIO()
diff --git a/common/Util/CairoUtil.py b/common/Util/CairoUtil.py
index 7918210..57a05ce 100644
--- a/common/Util/CairoUtil.py
+++ b/common/Util/CairoUtil.py
@@ -8,7 +8,7 @@ def get_gdk_color(str_color):
     result, color = Gdk.Color.parse(str_color)
     return color
 
-def draw_round_rect(ctx, x, y, width, height, radio=10):
+def draw_round_rect(ctx, x, y, width, height, radio=20):
     # Move to A
     ctx.move_to(x + radio, y)
     # Straight line to B
@@ -30,15 +30,39 @@ def draw_round_rect(ctx, x, y, width, height, radio=10):
     ctx.curve_to(x, y, x, y, x + radio, y)
 
 def draw_drum_mask(ctx, x, y, size):
-    side = size / 3
+    side = size / 4
     ctx.move_to(x + side, y)
     ctx.new_path()
-    ctx.line_to(x + side * 2, y)
+    ctx.line_to(x + size - side, y)
     ctx.line_to(x + size, y + side)
-    ctx.line_to(x + size, y + side * 2)
-    ctx.line_to(x + side * 2, y + size)
+    ctx.line_to(x + size, y + size - side)
+    ctx.line_to(x + size - side, y + size)
     ctx.line_to(x + side, y + size)
-    ctx.line_to(x, y + side * 2)
+    ctx.line_to(x, y + size - side)
     ctx.line_to(x, y + side)
     ctx.line_to(x + side, y)
     ctx.close_path()
+
+def draw_loop_mask(ctx, x, y, width, height, radio=20):
+    # Move to A
+    ctx.move_to(x, y)
+    # Straight line to B
+    ctx.line_to(x + width - radio, y)
+    # Curve to C, Control points are both at Q
+    ctx.curve_to(x + width, y, x + width, y, x + width, y + radio)
+    # Move to D
+    ctx.line_to(x + width, y + height - radio)
+    # Curve to E
+    ctx.curve_to(x + width, y + height, x + width, y + height,
+            x + width - radio, y + height)
+    # Line to F
+    ctx.line_to(x, y + height)
+    radio = radio / 3
+    # Curve to G
+    ctx.curve_to(x - radio, y + height,
+                x + radio, y + height,
+                x + radio, y + height - radio)
+    # Line to H
+    ctx.line_to(x + radio, y + radio)
+    # Curve to A
+    ctx.curve_to(x + radio, y, x, y, x - radio, y)