Add mouse drag panning support and align wheel behavior with KiCad (#85)

* Add mouse drag panning support and align wheel behavior with KiCad

* Clean up unnecessary code and comments

src/base/dom/pan-and-zoom.ts

@@ -5,13 +5,15 @@
 */
 
 import { BBox, Camera2, Vec2 } from "../math";
+import { Preferences } from "../../kicanvas/preferences";
 
 const line_delta_multiplier = 8;
 const page_delta_multiplier = 24;
 const zoom_speed = 0.005;
 const pan_speed = 1;
 
 export type PanAndZoomCallback = () => void;
+const prefs = Preferences.INSTANCE;
 
 /**
  * Interactive Pan and Zoom helper
@@ -84,6 +86,38 @@ export class PanAndZoom {
  startDistance = null;
  startPosition = null;
  });
+
+ let dragStartPosition: Vec2 | null = null;
+ let dragging = false;
+
+ this.target.addEventListener("mousedown", (e: MouseEvent) => {
+ if (e.button === 1 || e.button === 2) {
+ e.preventDefault();
+ dragging = true;
+ dragStartPosition = new Vec2(e.clientX, e.clientY);
+ }
+ });
+
+ this.target.addEventListener("mousemove", (e: MouseEvent) => {
+ if (dragging && dragStartPosition !== null) {
+ const currentPosition = new Vec2(e.clientX, e.clientY);
+ const delta = currentPosition.sub(dragStartPosition);
+ this.#handle_pan(-delta.x, -delta.y);
+ dragStartPosition = currentPosition;
+ }
+ });
+
+ this.target.addEventListener("mouseup", (e: MouseEvent) => {
+ if (e.button === 1 || e.button === 2) {
+ dragging = false;
+ dragStartPosition = null;
+ }
+ });
+
+ // Prevent the browser's default context menu.
+ this.target.addEventListener("contextmenu", (e) => {
+ e.preventDefault();
+ });
  }
 
  #getDistanceBetweenTouches(touches: TouchList) {
@@ -102,8 +136,14 @@ export class PanAndZoom {
  let dy = e.deltaY;
 
  // shift modifier flips the X and Y axes (horizontal scroll)
- if (dx == 0 && e.shiftKey) {
- [dx, dy] = [dy, dx];
+ if (!prefs.alignControlsWithKiCad) {
+ if (dx == 0 && e.shiftKey) {
+ [dx, dy] = [dy, dx];
+ }
+ } else {
+ if (dx == 0 && e.ctrlKey) {
+ [dx, dy] = [dy, dx];
+ }
  }
 
  // work around line/page scrolling
@@ -119,14 +159,25 @@ export class PanAndZoom {
  dx = Math.sign(dx) * Math.min(page_delta_multiplier, Math.abs(dx));
  dy = Math.sign(dy) * Math.min(page_delta_multiplier, Math.abs(dy));
 
- // pinch zoom
- if (e.ctrlKey) {
- this.#rect = this.target.getBoundingClientRect();
- this.#handle_zoom(dy, this.#relative_mouse_pos(e));
- }
- // pan
- else {
- this.#handle_pan(dx, dy);
+ if (!prefs.alignControlsWithKiCad) {
+ // pinch zoom
+ if (e.ctrlKey) {
+ this.#rect = this.target.getBoundingClientRect();
+ this.#handle_zoom(dy, this.#relative_mouse_pos(e));
+ }
+ // pan
+ else {
+ this.#handle_pan(dx, dy);
+ }
+ } else {
+ if (e.shiftKey || e.ctrlKey) {
+ this.#handle_pan(-dx, dy);
+ }
+ // pinch zoom
+ else {
+ this.#rect = this.target.getBoundingClientRect();
+ this.#handle_zoom(dy, this.#relative_mouse_pos(e));
+ }
  }
 
  this.target.dispatchEvent(

src/kicanvas/elements/common/preferences-panel.ts

@@ -63,7 +63,14 @@ export class KCPreferencesPanel extends KCUIElement {
 
  override initialContentCallback() {
  this.renderRoot.addEventListener("input", (e) => {
- prefs.theme = themes.by_name(this.theme_control.value);
+ const target = e.target as HTMLInputElement;
+
+ if (target.name === "theme") {
+ prefs.theme = themes.by_name(this.theme_control.value);
+ }
+ if (target.name === "align-controls-kicad") {
+ prefs.alignControlsWithKiCad = target.checked;
+ }
  prefs.save();
  });
  }
@@ -89,6 +96,15 @@ export class KCPreferencesPanel extends KCUIElement {
  </select>
  </kc-ui-control>
  </kc-ui-control-list>
+ <kc-ui-control>
+ <label>
+ <input
+ type="checkbox"
+ name="align-controls-kicad"
+ checked="${prefs.alignControlsWithKiCad}" />
+ Align controls with KiCad
+ </label>
+ </kc-ui-control>
  </kc-ui-panel-body>
  </kc-ui-panel>
  `;

src/kicanvas/preferences.ts

@@ -17,16 +17,22 @@ export class Preferences extends EventTarget {
  private storage = new LocalStorage("kc:prefs");
 
  public theme: Theme = themes.default;
+ public alignControlsWithKiCad: boolean = true;
 
  public save() {
  this.storage.set("theme", this.theme.name);
+ this.storage.set("alignControlsWithKiCad", this.alignControlsWithKiCad);
  this.dispatchEvent(new PreferencesChangeEvent({ preferences: this }));
  }
 
  public load() {
  this.theme = themes.by_name(
  this.storage.get("theme", themes.default.name),
  );
+ this.alignControlsWithKiCad = this.storage.get(
+ "alignControlsWithKiCad",
+ false,
+ );
  }
 }