Add offset to grid, add docs pages

api/lib/src/models/tool.dart

@@ -205,6 +205,8 @@ sealed class Tool with _$Tool {
     @Default(SRGBColor.black) @ColorJsonConverter() SRGBColor color,
     @Default(20) double xSize,
     @Default(20) double ySize,
+    @Default(0) double xOffset,
+    @Default(0) double yOffset,
   }) = GridTool;
 
   factory Tool.eyeDropper({

api/lib/src/models/tool.freezed.dart

@@ -2933,7 +2933,9 @@ abstract class _$$GridToolImplCopyWith<$Res> implements $ToolCopyWith<$Res> {
       String displayIcon,
       @ColorJsonConverter() SRGBColor color,
       double xSize,
-      double ySize});
+      double ySize,
+      double xOffset,
+      double yOffset});
 }
 
 /// @nodoc
@@ -2954,6 +2956,8 @@ class __$$GridToolImplCopyWithImpl<$Res>
     Object? color = null,
     Object? xSize = null,
     Object? ySize = null,
+    Object? xOffset = null,
+    Object? yOffset = null,
   }) {
     return _then(_$GridToolImpl(
       name: null == name
@@ -2976,6 +2980,14 @@ class __$$GridToolImplCopyWithImpl<$Res>
           ? _value.ySize
           : ySize // ignore: cast_nullable_to_non_nullable
               as double,
+      xOffset: null == xOffset
+          ? _value.xOffset
+          : xOffset // ignore: cast_nullable_to_non_nullable
+              as double,
+      yOffset: null == yOffset
+          ? _value.yOffset
+          : yOffset // ignore: cast_nullable_to_non_nullable
+              as double,
     ));
   }
 }
@@ -2989,6 +3001,8 @@ class _$GridToolImpl extends GridTool {
       @ColorJsonConverter() this.color = SRGBColor.black,
       this.xSize = 20,
       this.ySize = 20,
+      this.xOffset = 0,
+      this.yOffset = 0,
       final String? $type})
       : $type = $type ?? 'grid',
         super._();
@@ -3012,13 +3026,19 @@ class _$GridToolImpl extends GridTool {
   @override
   @JsonKey()
   final double ySize;
+  @override
+  @JsonKey()
+  final double xOffset;
+  @override
+  @JsonKey()
+  final double yOffset;
 
   @JsonKey(name: 'type')
   final String $type;
 
   @override
   String toString() {
-    return 'Tool.grid(name: $name, displayIcon: $displayIcon, color: $color, xSize: $xSize, ySize: $ySize)';
+    return 'Tool.grid(name: $name, displayIcon: $displayIcon, color: $color, xSize: $xSize, ySize: $ySize, xOffset: $xOffset, yOffset: $yOffset)';
   }
 
   /// Create a copy of Tool
@@ -3043,7 +3063,9 @@ abstract class GridTool extends Tool {
       final String displayIcon,
       @ColorJsonConverter() final SRGBColor color,
       final double xSize,
-      final double ySize}) = _$GridToolImpl;
+      final double ySize,
+      final double xOffset,
+      final double yOffset}) = _$GridToolImpl;
   GridTool._() : super._();
 
   factory GridTool.fromJson(Map<String, dynamic> json) =
@@ -3057,6 +3079,8 @@ abstract class GridTool extends Tool {
   SRGBColor get color;
   double get xSize;
   double get ySize;
+  double get xOffset;
+  double get yOffset;
 
   /// Create a copy of Tool
   /// with the given fields replaced by the non-null parameter values.

app/lib/handlers/grid.dart

@@ -16,10 +16,13 @@ class GridHandler extends Handler<GridTool> with PointerManipulationHandler {
 
   @override
   Offset getPointerPosition(Offset position, Size viewportSize) {
-    return Offset(
-      (position.dx / data.xSize).round() * data.xSize,
-      (position.dy / data.ySize).round() * data.ySize,
-    );
+    final xSize = data.xSize;
+    final ySize = data.ySize;
+    final xOffset = data.xOffset;
+    final yOffset = data.yOffset;
+    final x = (position.dx - xOffset) / xSize;
+    final y = (position.dy - yOffset) / ySize;
+    return Offset(x.round() * xSize + xOffset, y.round() * ySize + yOffset);
   }
 }
 
@@ -31,7 +34,7 @@ class GridRenderer extends Renderer<GridTool> {
       DocumentInfo info, CameraTransform transform,
       [ColorScheme? colorScheme, bool foreground = false]) {
     if (element.xSize > 0) {
-      double x = 0;
+      double x = -element.xSize + element.xOffset % element.xSize;
       while (x < size.width) {
         final localX = x / transform.size;
         canvas.drawLine(
@@ -46,7 +49,7 @@ class GridRenderer extends Renderer<GridTool> {
       }
     }
     if (element.ySize > 0) {
-      double y = 0;
+      double y = -element.ySize + element.yOffset % element.ySize;
       while (y < size.height) {
         final localY = y / transform.size;
         canvas.drawLine(

app/lib/l10n/app_en.arb

@@ -636,5 +636,6 @@
   "confirmPassword": "Confirm password",
   "passwordMismatch": "The passwords do not match",
   "action": "Action",
-  "svgText": "SVG Text"
+  "svgText": "SVG Text",
+  "offset": "Offset"
 }

app/lib/selections/properties/pen.dart

@@ -19,6 +19,7 @@ class PenPropertySelection extends PropertySelection<PenProperty>
               property.copyWith(color: value.withValues(a: property.color.a))),
           title: Text(LeapLocalizations.of(context).color),
         ),
+        const SizedBox(height: 4),
         ExactSlider(
           value: property.color.a.toDouble(),
           header: Text(AppLocalizations.of(context).alpha),

app/lib/selections/tools/grid.dart

@@ -19,6 +19,17 @@ class GridToolSelection extends ToolSelection<GridTool> {
         ),
       ),
       const SizedBox(height: 8),
+      OffsetPropertyView(
+        title: Text(AppLocalizations.of(context).offset),
+        value: Offset(selected.first.xOffset, selected.first.yOffset),
+        onChanged: (value) => update(
+          context,
+          selected
+              .map((e) => e.copyWith(xOffset: value.dx, yOffset: value.dy))
+              .toList(),
+        ),
+      ),
+      const SizedBox(height: 8),
       ColorField(
         value: selected.first.color,
         onChanged: (value) => update(

docs/astro.config.mjs

@@ -86,6 +86,10 @@ export default defineConfig({
               ...getSidebarTranslatedLabel("Add"),
               link: "/docs/v2/add/",
             },
+            {
+              ...getSidebarTranslatedLabel("Utilities"),
+              link: "/docs/v2/utilities/",
+            },
             {
               ...getSidebarTranslatedLabel("Collaboration"),
               link: "/docs/v2/collaboration/",
@@ -169,6 +173,14 @@ export default defineConfig({
                   ...getSidebarTranslatedLabel("Presentation"),
                   link: "/docs/v2/tools/presentation/",
                 },
+                {
+                  ...getSidebarTranslatedLabel("Ruler"),
+                  link: "/docs/v2/tools/ruler/",
+                },
+                {
+                  ...getSidebarTranslatedLabel("Grid"),
+                  link: "/docs/v2/tools/grid/",
+                },
               ],
             },
           ],

docs/src/content/docs/docs/v2/tools/grid.md

@@ -0,0 +1,21 @@
+---
+title: Grid tool
+---
+
+:::note[🔘 Toggleable tool]
+
+This is a special tool.
+You can't select it and it gets toggled if you click on it.
+
+:::
+
+With this tool you can show a grid over the canvas.
+Inputs get snapped to the grid.
+
+## Configuration
+
+| Property | Default  | Description            |
+| -------: | :------: | :--------------------- |
+|     Size | (20, 20) | The size of grid cells |
+|   Offset |  (0, 0)  | The offset of the grid |
+|    Color |  Black   | The color of the grid  |

docs/src/content/docs/docs/v2/tools/ruler.md

@@ -0,0 +1,20 @@
+---
+title: Ruler tool
+---
+
+:::note[🔘 Toggleable tool]
+
+This is a special tool.
+You can't select it and it gets toggled if you click on it.
+
+:::
+
+With this tool you can show a ruler over the canvas.
+Inputs get snapped to the ruler.
+
+## Configuration
+
+| Property |  Default  | Description                                                  |
+| -------: | :-------: | :----------------------------------------------------------- |
+|     Size |    100    | The size of the ruler                                        |
+|    Color | *Not set* | The color of the ruler. If not set, it uses the theme color. |

docs/src/content/docs/docs/v2/utilities.md

@@ -15,6 +15,16 @@ Here are all page specific properties. Currently you can find the background set
 
 ## View
 
+:::note
+
+This tab was removed in the nightly release.
+Please visit the tools for more information:
+
+- [Grid](/docs/v2/tools/grid)
+- [Ruler](/docs/v2/tools/ruler)
+
+:::
+
 ### Grid
 
 The grid allows you to exactly position elements. You can use it to move elements or create shapes.

docs/src/translations/en.json

@@ -44,5 +44,8 @@
   "faq": "FAQ",
   "versions": "Versions",
   "nightly": "Nightly",
-  "privacy_policy": "Privacy policy"
+  "privacy_policy": "Privacy policy",
+  "ruler": "Ruler",
+  "grid": "Grid",
+  "utilities": "Utilities"
 }

metadata/en-US/changelogs/127.txt

@@ -5,7 +5,9 @@
 * Add toggleable tools
 * Move ruler into own tool
   * Add color property
+  * Add size property
 * Move grid into own tool
+  * Add offset property
 * Add password protected notes ([#771](https://github.com/LinwoodDev/Butterfly/issues/771))
 * Add option to import svg as text ([#596](https://github.com/LinwoodDev/Butterfly/issues/596))
 * Fix undo/redo tools not showing status correctly