Marching ants testing.

Author: Templarian

src/pg/inputPixelEditor/inputPixelEditor.css

@@ -3,7 +3,9 @@
 }
 
 [part="wrapper"] {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
   position: relative;
   outline: 0;
 }
@@ -21,7 +23,32 @@
 }
 
 canvas {
+  grid-column: 1;
+  grid-row: 1;
   touch-action: none;
   user-select: none;
   outline: 0;
+}
+
+svg {
+  pointer-events: none;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+path {
+  fill: none;
+  stroke: #000;
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+  stroke-dasharray: 5px;
+  animation: stroke 0.4s linear infinite;
+  shape-rendering: geometricPrecision;
+  stroke-dashoffset: 10px;
+}
+
+@keyframes stroke {
+  to {
+    stroke-dashoffset: 0;
+  }
 }

src/pg/inputPixelEditor/inputPixelEditor.html

@@ -1,3 +1,24 @@
 <div part="wrapper" tabindex="0">
   <canvas part="canvas" draggable="false"></canvas>
+  <svg part="selection" viewBox="0 0 10 10">
+    <defs>
+    <filter id="whiteOutline" x="-50%" y="-50%" width="200%" height="200%">
+      <!-- Thicken the source graphic (the original stroke path) -->
+      <feMorphology in="SourceGraphic" operator="dilate" radius="1" result="dilated" />
+
+      <!-- Flood the dilated shape with white color -->
+      <feFlood flood-color="white" result="flood" />
+
+      <!-- Composite the white color with the dilated shape to create the white outline shape -->
+      <feComposite in="flood" in2="dilated" operator="in" result="whiteOutlineShape" />
+
+      <!-- Merge the white outline shape with the original source graphic -->
+      <feMerge>
+        <feMergeNode in="whiteOutlineShape" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+    <path part="selectionPath" d="M9,7H1V1H9Z" filter="url(#whiteOutline)" />
+  </svg>
 </div>

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -98,6 +98,8 @@ export default class PgInputPixelEditor extends HTMLElement {
 
   @Part() $wrapper: HTMLDivElement;
   @Part() $canvas: HTMLCanvasElement;
+  @Part() $selection: SVGSVGElement;
+  @Part() $selectionPath: SVGPathElement;
 
   // Internal State
   #inputStamp: number[][] = [];
@@ -111,6 +113,7 @@ export default class PgInputPixelEditor extends HTMLElement {
   #y: number = -1;
   #layer: number = 0;
   #layers: Layer[] = [];
+  #selection = new Set<string>(); // 'x,y'
   #isCtrl: boolean = false;
   #isShift: boolean = false;
   #isAlt: boolean = false;
@@ -255,6 +258,9 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.dispatchEvent(new CustomEvent('change', {
       detail: { export: this.#export }
     }));
+    // temporary test
+    this.$selection.setAttribute('viewBox', `0 0 ${this.width * this.size} ${this.height * this.size}`)
+    this.$selectionPath.setAttribute('d', bitmaskToPath(this.#data[0], { scale: this.size }));
   };
 
   #delayTimerId: number = 0;
@@ -946,6 +952,18 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#clearStampPreview();
   }
 
+  inputModeSelectRectangle() {
+    this.#inputMode = InputMode.SelectRectangle;
+  }
+
+  inputModeSelectEllipse() {
+    this.#inputMode = InputMode.SelectEllipse;
+  }
+
+  inputModeSelectLasso() {
+    this.#inputMode = InputMode.SelectLasso;
+  }
+
   inputModePixel() {
     this.#inputMode = InputMode.Pixel;
   }

src/pg/inputPixelEditor/utils/inputMode.ts

@@ -1,4 +1,7 @@
 export const enum InputMode {
+  SelectRectangle,
+  SelectEllipse,
+  SelectLasso,
   Stamp,
   Pixel,
   Line,