improved design, improved select tool

data/style-dark.css

@@ -6,8 +6,8 @@
     background: transparent;
     background-size: 12px 24px;
     background-image:
-        linear-gradient(to right, #333333 1px, transparent 1px),
-        linear-gradient(to bottom, #333333 1px, transparent 1px);
+        linear-gradient(to right, #444444 1px, transparent 1px),
+        linear-gradient(to bottom, #444444 1px, transparent 1px);
     box-shadow:
         inset 0px 0px 0px 1px #555555,
         0px 0px 6px 6px @headerbar_shade_color;

data/style.css

@@ -37,5 +37,22 @@
 .switcher button {
     margin-left:3px;
     margin-right:3px;
-    transition: background-color 0ms linear;
+    transition: background-color 200ms linear;
+    background-color: transparent;
+}
+
+.switcher button:hover {
+  background-color: alpha(@window_fg_color, 0.05);
+}
+
+.switcher button:checked {
+  background-color: alpha(@window_fg_color, 0.08);
+}
+
+.switcher button:checked:hover {
+  background-color: alpha(@window_fg_color, 0.1);
+}
+
+.selection {
+    border: 2px dashed #0099ff;
 }

data/ui/canvas.ui

@@ -31,7 +31,9 @@ canvas-shadow</property>
               </object>
             </child>
             <child type="overlay">
-              <object class="GtkDrawingArea" id="drawing_area"/>
+              <object class="GtkFixed" id="fixed">
+                <property name="overflow">visible</property>
+              </object>
             </child>
           </object>
         </child>

data/ui/window.ui

@@ -46,12 +46,12 @@
     </child>
     <child>
       <object class="AdwOverlaySplitView" id="overlay_split_view">
-        <property name="max-sidebar-width">360.0</property>
+        <property name="max-sidebar-width">440.0</property>
         <property name="min-sidebar-width">300.0</property>
         <property name="show-sidebar" bind-source="sidebar_show_button" bind-property="active" bind-flags="bidirectional">True</property>
         <property name="sidebar-position">end</property>
         <property name="sidebar-width-fraction">0.45</property>
-        <property name="sidebar-width-unit">px</property>
+        <!-- <property name="sidebar-width-unit">px</property> -->
         <property name="content">
               <object class="AdwToolbarView" id="toolbar_view">
                 <property name="content">

src/canvas.py

@@ -42,9 +42,9 @@ def __repr__(self):
 @Gtk.Template(resource_path='/io/github/nokse22/asciidraw/ui/canvas.ui')
 class Canvas(Adw.Bin):
     __gtype_name__ = 'Canvas'
-    drawing_area = Gtk.Template.Child()
     draw_drawing_area = Gtk.Template.Child()
     preview_drawing_area = Gtk.Template.Child()
+    fixed = Gtk.Template.Child()
 
     __gsignals__ = {
         'undo-added': (GObject.SignalFlags.RUN_FIRST, None, (str,)),
@@ -70,17 +70,17 @@ def __init__(self, _styles, _flip):
         self.drag_gesture = Gtk.GestureDrag()
         self.drag_gesture.set_propagation_phase(Gtk.PropagationPhase.CAPTURE)
         self.drag_gesture.set_button(0)
-        self.drawing_area.add_controller(self.drag_gesture)
+        self.fixed.add_controller(self.drag_gesture)
 
         self.click_gesture = Gtk.GestureClick()
         self.click_gesture.set_propagation_phase(Gtk.PropagationPhase.CAPTURE)
         self.click_gesture.set_button(0)
-        self.drawing_area.add_controller(self.click_gesture)
+        self.fixed.add_controller(self.click_gesture)
 
         self.zoom_gesture = Gtk.GestureZoom()
         self.zoom_gesture.set_propagation_phase(Gtk.PropagationPhase.CAPTURE)
         self.zoom_gesture.connect("scale-changed", self.on_scale_changed)
-        self.drawing_area.add_controller(self.zoom_gesture)
+        self.fixed.add_controller(self.zoom_gesture)
 
         self.draw_drawing_area.set_draw_func(self.drawing_function, None)
         self.preview_drawing_area.set_draw_func(self.preview_drawing_function, None)
@@ -225,7 +225,7 @@ def add_undo_action(self, undo_name):
         self.is_saved = False
 
     def get_char_at(self, x: int, y: int, draw=True):
-        if y >= len(self.drawing) or x >= len(self.drawing[0]): return
+        if y >= len(self.drawing) or x >= len(self.drawing[0]) or x < 0 or y < 0: return
         if draw:
             return self.drawing[int(y)][int(x)]
         return self.preview[int(y)][int(x)]

src/tools/line.py

@@ -71,9 +71,6 @@ def active(self, value):
         self._active = value
         self.notify('active')
 
-        # if value:
-        #     self.canvas.drawing_area.set_draw_func(self.drawing_function, None)
-
     @GObject.Property(type=bool, default=False)
     def arrow(self):
         return self._arrow
@@ -143,8 +140,6 @@ def on_drag_follow(self, gesture, end_x, end_y):
 
         self.prev_line_pos = [end_x, end_y]
 
-        self.canvas.drawing_area.queue_draw()
-
     def on_drag_end(self, gesture, delta_x, delta_y):
         if not self._active: return
 

src/tools/select.py

@@ -36,6 +36,11 @@ def __init__(self, *args, **kwargs):
         self.canvas.click_gesture.connect("released", self.on_click_released)
         self.canvas.click_gesture.connect("stopped", self.on_click_stopped)
 
+        self.selection = Adw.Bin(
+            css_classes=["selection"],
+            cursor=Gdk.Cursor.new_from_name("move")
+        )
+
         self.x_mul = 12
         self.y_mul = 24
 
@@ -58,25 +63,6 @@ def __init__(self, *args, **kwargs):
 
         self.click_released = False
 
-    @GObject.Property(type=bool, default=False)
-    def active(self):
-        return self._active
-
-    @active.setter
-    def active(self, value):
-        self._active = value
-        self.notify('active')
-        if value:
-            self.canvas.drawing_area.set_draw_func(self.drawing_function, None)
-        else:
-            self.selection_start_x_char = -1
-            self.selection_start_y_char = -1
-
-            self.selection_delta_char_x = 0
-            self.selection_delta_char_y = 0
-
-            self.canvas.drawing_area.queue_draw()
-
     @GObject.Property(type=str, default='#')
     def style(self):
         return self._style
@@ -86,6 +72,9 @@ def style(self, value):
         self._style = value
         self.notify('style')
 
+    def on_active_changed(self, value):
+        self.selection.set_visible(value)
+
     def on_drag_begin(self, gesture, this_x, this_y):
         if not self._active: return
 
@@ -111,10 +100,6 @@ def on_drag_begin(self, gesture, this_x, this_y):
             for y in range(1, int(height)):
                 for x in range(1, int(width)):
                     self.canvas.set_char_at(start_x_char + x, start_y_char + y, ' ', True)
-
-            # start_x_char, start_y_char, width, height = self.translate(self.selection_start_x_char, self.selection_start_y_char, self.selection_delta_char_x, self.selection_delta_char_y)
-            # self.canvas.draw_text(start_x_char + 1, start_y_char + 1, self.moved_text, True, False)
-            # self.canvas.update()
         else:
             self.selection_start_x_char = this_x // self.x_mul
             self.selection_start_y_char = this_y // self.y_mul
@@ -127,6 +112,8 @@ def on_drag_begin(self, gesture, this_x, this_y):
     def on_drag_follow(self, gesture, delta_x, delta_y):
         if not self._active: return
 
+        self.selection.set_visible(True)
+
         if self.is_dragging:
             new_delta_x = (self.drag_start_x + delta_x) // self.x_mul - self.drag_start_x // self.x_mul
             new_delta_y = (self.drag_start_y + delta_y) // self.y_mul - self.drag_start_y // self.y_mul
@@ -142,13 +129,13 @@ def on_drag_follow(self, gesture, delta_x, delta_y):
                 self.canvas.draw_text(start_x_char + self.dragging_delta_char_x + 1,
                                 start_y_char + self.dragging_delta_char_y + 1, self.moved_text, True, False)
 
-                self.canvas.drawing_area.queue_draw()
+                self.update_selection()
                 self.canvas.update()
         else:
             self.selection_delta_char_x = (self.drag_start_x + delta_x) // self.x_mul - self.drag_start_x // self.x_mul
             self.selection_delta_char_y = (self.drag_start_y + delta_y) // self.y_mul - self.drag_start_y // self.y_mul
 
-            self.canvas.drawing_area.queue_draw()
+            self.update_selection()
 
     def on_drag_end(self, gesture, delta_x, delta_y):
         if not self._active: return
@@ -204,32 +191,24 @@ def on_click_stopped(self, click):
 
         self.click_released = False
 
-        self.canvas.drawing_area.queue_draw()
+        self.selection.set_visible(False)
 
-    def drawing_function(self, area, cr, width, height, data):
-        # cr.save()
-        cr.set_source_rgb(0.208, 0.518, 0.894)
-        cr.set_dash([5], 0)
+    def update_selection(self):
+        if self.selection.get_parent() is None:
+            self.canvas.fixed.put(self.selection, 0, 0)
 
         start_x_char, start_y_char, width, height = self.translate(self.selection_start_x_char, self.selection_start_y_char, self.selection_delta_char_x, self.selection_delta_char_y)
 
-        cr.rectangle((start_x_char + self.dragging_delta_char_x + 1) * self.x_mul, # + self.x_mul/2,
-                            (start_y_char + self.dragging_delta_char_y + 1) * self.y_mul, # + self.y_mul/2,
-                            (width - 1) * self.x_mul,
-                            (height - 1) * self.y_mul)
-
-        # TEST
-        # cr.set_source_rgb (0.0, 0.0, 0.0)
-        # cr.select_font_face ("Monospace")
-        # cr.set_font_size (20)
-        # cr.move_to ((width - 1) * self.x_mul, (height - 1) * self.y_mul)
-        # cr.show_text("Hello everybodyHello everybodyHello everybodyHello everybodyHello everybodyHello everybodyHello everybodyHello everybodyHello everybodyHello everybodyHello everybody")
-
-        # cr.move_to (0, 50)
-        # cr.show_text("Hello nobody!")
+        self.canvas.fixed.move(
+            self.selection,
+            (start_x_char + self.dragging_delta_char_x + 1) * self.x_mul,
+            (start_y_char + self.dragging_delta_char_y + 1) * self.y_mul
+        )
 
-        cr.stroke()
-        # cr.restore()
+        self.selection.set_size_request(
+            (width - 1) * self.x_mul,
+            (height - 1) * self.y_mul
+        )
 
     def translate(self, start_x, start_y, width, height):
         if width < 0:

src/tools/tool.py

@@ -52,6 +52,8 @@ def active(self, value):
             self._stack_page.set_visible(value)
         self.notify('active')
 
+        self.on_active_changed(value)
+
     @GObject.Property(type=str, default='#')
     def style(self):
         return self._style
@@ -61,6 +63,9 @@ def style(self, value):
         self._style = value
         self.notify('style')
 
+    def on_active_changed(self, value):
+        pass
+
     def add_sidebar_to(self, stack):
         if self._sidebar is None:
             return