Merge branch 'develop' into ssd1306-platform

src/core/layers/rectangle.layer.ts

@@ -17,14 +17,19 @@ export class RectangleLayer extends AbstractLayer {
 
  @mapping('s', 'point') public size: Point = new Point();
 
+ @mapping('r') public radius: number = 0;
+
  @mapping('f') public fill: boolean = false;
 
+ get minLen(): number {
+ return this.radius * 2 + 2;
+ }
+
  modifiers: TLayerModifiers = {
  x: {
  getValue: () => this.position.x,
  setValue: (v: number) => {
  this.position.x = v;
-
  this.updateBounds();
  this.draw();
  },
@@ -42,7 +47,7 @@ export class RectangleLayer extends AbstractLayer {
  w: {
  getValue: () => this.size.x,
  setValue: (v: number) => {
- this.size.x = v;
+ this.size.x = Math.max(v, this.minLen);
  this.updateBounds();
  this.draw();
  },
@@ -51,12 +56,23 @@ export class RectangleLayer extends AbstractLayer {
  h: {
  getValue: () => this.size.y,
  setValue: (v: number) => {
- this.size.y = v;
+ this.size.y = Math.max(v, this.minLen);
  this.updateBounds();
  this.draw();
  },
  type: TModifierType.number
  },
+ radius: {
+ getValue: () => this.radius,
+ setValue: (v: number) => {
+ this.radius = Math.max(
+ 0,
+ Math.min(v, Math.round(this.size.x / 2 - 1), Math.round(this.size.y / 2 - 1))
+ );
+ this.draw();
+ },
+ type: TModifierType.number
+ },
  fill: {
  getValue: () => this.fill,
  setValue: (v: boolean) => {
@@ -95,8 +111,16 @@ export class RectangleLayer extends AbstractLayer {
  0
  ),
  move: (offset: Point): void => {
- this.position = this.editState.position.clone().subtract(0, offset.y);
- this.size = new Point(this.editState.size.x - offset.x, this.editState.size.y + offset.y);
+ const size = new Point(this.editState.size.x - offset.x, this.editState.size.y + offset.y);
+ const position = this.editState.position.clone().subtract(0, offset.y);
+ if (size.x != this.size.x && size.x >= this.minLen) {
+ this.position.x = position.x;
+ this.size.x = size.x;
+ }
+ if (size.y != this.size.y && size.y >= this.minLen) {
+ this.position.y = position.y;
+ this.size.y = size.y;
+ }
  }
  },
  {
@@ -107,7 +131,7 @@ export class RectangleLayer extends AbstractLayer {
  new Point(3)
  ).subtract(1.5, 1.5, 0, 0),
  move: (offset: Point): void => {
- this.size = this.editState.size.clone().subtract(offset);
+ this.size = this.editState.size.clone().subtract(offset).max(new Point(this.minLen));
  }
  },
  {
@@ -120,17 +144,33 @@ export class RectangleLayer extends AbstractLayer {
  0
  ),
  move: (offset: Point): void => {
- this.position = this.editState.position.clone().subtract(offset.x, 0);
- this.size = this.editState.size.clone().add(offset.x, -offset.y);
+ const position = this.editState.position.clone().subtract(offset.x, 0);
+ const size = this.editState.size.clone().add(offset.x, -offset.y);
+ if (size.x != this.size.x && size.x >= this.minLen) {
+ this.position.x = position.x;
+ this.size.x = size.x;
+ }
+ if (size.y != this.size.y && size.y >= this.minLen) {
+ this.position.y = position.y;
+ this.size.y = size.y;
+ }
  }
  },
  {
  cursor: 'nwse-resize',
  getRect: (): Rect =>
  new Rect(new Point(this.bounds.x, this.bounds.y), new Point(3)).subtract(1.5, 1.5, 0, 0),
  move: (offset: Point): void => {
- this.position = this.editState.position.clone().subtract(offset);
- this.size = this.editState.size.clone().add(offset);
+ const position = this.editState.position.clone().subtract(offset);
+ const size = this.editState.size.clone().add(offset);
+ if (size.x != this.size.x && size.x >= this.minLen) {
+ this.position.x = position.x;
+ this.size.x = size.x;
+ }
+ if (size.y != this.size.y && size.y >= this.minLen) {
+ this.size.y = size.y;
+ this.position.y = position.y;
+ }
  }
  }
  ];
@@ -195,7 +235,7 @@ export class RectangleLayer extends AbstractLayer {
  dc.clear();
  dc.ctx.fillStyle = this.color;
  dc.ctx.strokeStyle = this.color;
- dc.rect(position, size, this.fill);
+ dc.pixelateRoundedRect(position, size, this.radius, this.fill);
  }
 
  onLoadState() {

src/core/point.ts

@@ -176,6 +176,15 @@ export class Point {
  this[y] = Math.ceil(this[y]);
  return this;
  }
+ swap(): Point {
+ const t = this[x];
+ this[x] = this[y];
+ this[y] = t;
+ return this;
+ }
+ sign(): [number, number] {
+ return [Math.sign(this[x]), Math.sign(this[y])];
+ }
  distanceTo(p: Point): number {
  return Math.hypot(this.x - p.x, this.y - p.y);
  }

src/draw/draw-context.ts

@@ -122,15 +122,49 @@ export class DrawContext {
  }
  }
  this.ctx.fill();
- if (!fill) {
+ this.ctx.closePath();
+ return this;
+ }
+
+ pixelateRectCorner(point: Point, radius: number, quadrant: number, fill: boolean): DrawContext {
+ const signs = new Point(quadrant == 0 || quadrant == 3 ? 1 : -1, quadrant == 0 || quadrant == 1 ? 1 : -1);
+ const center = point.clone().add(new Point(radius).multiply(signs));
+ for (let x = 0; x < radius; x++) {
+ let y = Math.sqrt(radius * radius - x * x);
+ let p = center.clone().subtract(new Point(x, y).multiply(signs)).round();
+ this.ctx.rect(p.x, p.y, 1, 1);
+ fill && this.ctx.fillRect(p.x, p.y, 1, signs.y * (radius - Math.abs(p.y - point.y)));
+ p = center.clone().subtract(new Point(y, x).multiply(signs)).round();
+ this.ctx.rect(p.x, p.y, 1, 1);
+ }
+ return this;
+ }
+
+ pixelateRoundedRect(position: Point, size: Point, radius: number, fill: boolean): DrawContext {
+ this.ctx.beginPath();
+ this.ctx.rect(position.x + radius, position.y, size.x - 2 * radius, 1);
+ this.ctx.rect(position.x + radius, position.y + size.y - 1, size.x - 2 * radius, 1);
+ this.ctx.rect(position.x, position.y + radius, 1, size.y - 2 * radius);
+ this.ctx.rect(position.x + size.x - 1, position.y + radius, 1, size.y - 2 * radius);
+ if (fill) {
+ this.ctx.fillRect(position.x + radius, position.y, size.x - 2 * radius, size.y);
+ this.ctx.fillRect(position.x, position.y + radius, size.x, size.y - 2 * radius);
+ }
+ this.pixelateRectCorner(position, radius + 1, 0, fill);
+ this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y), radius + 1, 1, fill);
+ this.pixelateRectCorner(new Point(position.x + size.x - 1, position.y + size.y - 1), radius + 1, 2, fill);
+ this.pixelateRectCorner(new Point(position.x, position.y + size.y - 1), radius + 1, 3, fill);
+ this.ctx.fill();
+ if (fill) {
  this.ctx.save();
  this.ctx.fillStyle = 'rgba(0,0,0,0)';
  this.ctx.beginPath();
- this.ctx.arc(center.x + 0.5, center.y + 0.5, radius + 0.5, 0, 2 * Math.PI);
+ this.ctx.arc(position.x + radius, position.y + radius, radius, Math.PI, 1.5 * Math.PI);
+ this.ctx.arc(position.x + size.x - radius, position.y + radius, radius, 1.5 * Math.PI, 2 * Math.PI);
+ this.ctx.arc(position.x + size.x - radius, position.y + size.y - radius, radius, 0, 0.5 * Math.PI);
+ this.ctx.arc(position.x + radius, position.y + size.y - radius, radius, 0.5 * Math.PI, Math.PI);
  this.ctx.fill();
- this.ctx.restore();
  }
- this.ctx.closePath();
  return this;
  }
 

src/platforms/__snapshots__/adafruit.test.ts.snap

@@ -22,5 +22,7 @@ display.setCursor(3, 10);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;display.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 0xF800);
+@njsoidnfijoinisn;display.fillRoundRect(10, 4, 12, 19, 3, 0x7E0);
+@jnijisniijaojosd;display.drawRoundRect(45, 20, 14, 12, 5, 0x7E0);
 "
 `;

src/platforms/__snapshots__/adafruit_mono.test.ts.snap

@@ -22,5 +22,7 @@ display.setCursor(3, 10);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;display.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 1);
+@njsoidnfijoinisn;display.fillRoundRect(10, 4, 12, 19, 3, 1);
+@jnijisniijaojosd;display.drawRoundRect(45, 20, 14, 12, 5, 1);
 "
 `;

src/platforms/__snapshots__/flipper.test.ts.snap

@@ -22,5 +22,7 @@ canvas_set_font(canvas, profont22);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;canvas_draw_xbm(canvas, 0, 0, 128, 64, image_1_bits);
+@njsoidnfijoinisn;canvas_draw_r_box(canvas, 10, 4, 12, 19, 3);
+@jnijisniijaojosd;canvas_draw_r_frame(canvas, 45, 20, 14, 12, 5);
 "
 `;

src/platforms/__snapshots__/inkplate.test.ts.snap

@@ -21,5 +21,7 @@ display.setCursor(3, 10);
 // Unknown layer type ellipse
 
 @rrsjcz4oz2ln6jx4y4;display.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 0);
+@njsoidnfijoinisn;display.fillRoundRect(10, 4, 12, 19, 3, 0);
+@jnijisniijaojosd;display.drawRoundRect(45, 20, 14, 12, 5, 0);
 "
 `;

src/platforms/__snapshots__/tft-espi.test.ts.snap

@@ -17,5 +17,7 @@ tft.setTextColor(0x0);
 @g7pk1wfbqqkln6jwxby;tft.drawRect(44, 29, 44, 28, 0x7E0);
 @u9uidj9d90fu9sj9jj9;tft.drawEllipse(@x:15, @y:36, @rx:7, @ry:7, 0x1F);
 @rrsjcz4oz2ln6jx4y4;tft.drawBitmap(0, 0, image_paint_0_bits, 128, 64, 0xF800);
+@njsoidnfijoinisn;tft.fillRoundRect(10, 4, 12, 19, 3, 0x7E0);
+@jnijisniijaojosd;tft.drawRoundRect(45, 20, 14, 12, 5, 0x7E0);
 "
 `;

src/platforms/__snapshots__/u8g2.test.ts.snap

@@ -20,6 +20,8 @@ u8g2.setFont(u8g2_font_profont22_tr);
 @g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
 @u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
 @rrsjcz4oz2ln6jx4y4;u8g2.drawXBM(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
+@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
+@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
 u8g2.sendBuffer();"
 `;
 
@@ -43,6 +45,8 @@ u8g2_SetFont(&u8g2, u8g2_font_profont22_tr);
 @g7pk1wfbqqkln6jwxby;u8g2_DrawFrame(&u8g2, 44, 29, 44, 28);
 @u9uidj9d90fu9sj9jj9;u8g2_DrawEllipse(&u8g2, 15, 36, 7, 7);
 @rrsjcz4oz2ln6jx4y4;u8g2_DrawXBM(&u8g2, 0, 0, 128, 64, image_paint_0_bits);
+@njsoidnfijoinisn;u8g2_DrawRBox(&u8g2, 10, 4, 12, 19, 3);
+@jnijisniijaojosd;u8g2_DrawRFrame(&u8g2, 45, 20, 14, 12, 5);
 u8g2_SendBuffer(&u8g2); "
 `;
 
@@ -66,5 +70,7 @@ u8g2.setFont(u8g2_font_profont22_tr);
 @g7pk1wfbqqkln6jwxby;u8g2.drawFrame(@x:44, @y:29, @w:44, @h:28);
 @u9uidj9d90fu9sj9jj9;u8g2.drawEllipse(@x:15, @y:36, @rx:7, @ry:7);
 @rrsjcz4oz2ln6jx4y4;u8g2.drawXBM(@x:0, @y:0, @w:128, @h:64, @image:image_paint_0_bits);
+@njsoidnfijoinisn;u8g2.drawRBox(@x:10, @y:4, @w:12, @h:19, @r:3);
+@jnijisniijaojosd;u8g2.drawRFrame(@x:45, @y:20, @w:14, @h:12, @r:5);
 u8g2.sendBuffer();"
 `;

src/platforms/layers.mock.ts

@@ -158,6 +158,28 @@ export const layersMock: AbstractLayer[] = [
  rx: 7,
  ry: 7,
  f: false
+ },
+ {
+ n: 'box_njsoidnfijoinisn',
+ t: 'rect',
+ c: '#00FF00',
+ r: 3,
+ f: true,
+ i: 15,
+ p: [10, 4],
+ u: 'njsoidnfijoinisn',
+ s: [12, 19]
+ },
+ {
+ n: 'box_jnijisniijaojosd',
+ t: 'rect',
+ c: '#00FF00',
+ r: 5,
+ f: false,
+ i: 16,
+ p: [45, 20],
+ u: 'jnijisniijaojosd',
+ s: [14, 12]
  }
 ].map((l) => {
  const type: ELayerType = l.t as any;

src/platforms/templates/adafruit/default.pug

@@ -19,8 +19,8 @@ each layer in layers
  when 'line'
  | @!{layer.uid};!{pad}display.drawLine(!{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]}, !{packColor(layer.color)});
  when 'rect'
- - var func = layer.fill ? 'fillRect' : 'drawRect'
- | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+ - var func = (layer.fill ? 'fill' : 'draw') + (layer.radius? 'Round' : '') + 'Rect'
+ | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''}, !{packColor(layer.color)});
  when 'circle'
  - var func = layer.fill ? 'fillCircle' : 'drawCircle'
  | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius}, !{packColor(layer.color)});

src/platforms/templates/adafruit/inkplate.pug

@@ -19,8 +19,8 @@ each layer in layers
  when 'line'
  | @!{layer.uid};!{pad}display.drawLine(!{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]}, !{packColor(layer.color)});
  when 'rect'
- - var func = layer.fill ? 'fillRect' : 'drawRect'
- | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+ - var func = (layer.fill ? 'fill' : 'draw') + (layer.radius? 'Round' : '') + 'Rect'
+ | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''}, !{packColor(layer.color)});
  when 'circle'
  - var func = layer.fill ? 'fillCircle' : 'drawCircle'
  | @!{layer.uid};!{pad}display.!{func}(!{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius}, !{packColor(layer.color)});

src/platforms/templates/flipper/default.pug

@@ -17,8 +17,8 @@ each layer in layers
  when 'line'
  | @!{layer.uid};canvas_draw_line(canvas, !{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]});
  when 'rect'
- - var func = layer.fill ? 'canvas_draw_box' : 'canvas_draw_frame'
- | @!{layer.uid};!{func}(canvas, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]});
+ - var func = `canvas_draw_${layer.radius? 'r_': ''}${layer.fill ? 'box' : 'frame'}`;
+ | @!{layer.uid};!{func}(canvas, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''});
  when 'circle'
  - var func = layer.fill ? 'canvas_draw_disc' : 'canvas_draw_circle'
  | @!{layer.uid};!{func}(canvas, !{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius});

src/platforms/templates/tft-espi/default.pug

@@ -19,8 +19,8 @@ each layer in layers
  when 'line'
  | @!{layer.uid};!{pad}tft.drawLine(!{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]}, !{packColor(layer.color)});
  when 'rect'
- - var func = layer.fill ? 'fillRect' : 'drawRect'
- | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}, !{packColor(layer.color)});
+ - var func = (layer.fill ? 'fill' : 'draw') + (layer.radius? 'Round' : '') + 'Rect'
+ | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''}, !{packColor(layer.color)});
  when 'circle'
  - var func = layer.fill ? 'fillCircle' : 'drawCircle'
  | @!{layer.uid};!{pad}tft.!{func}(!{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius}, !{packColor(layer.color)});

src/platforms/templates/u8g2/c_esp_idf.pug

@@ -32,8 +32,8 @@ each layer in layers
  when 'line'
  | @!{layer.uid};!{pad}u8g2_DrawLine(&u8g2, !{layer.p1[0]}, !{layer.p1[1]}, !{layer.p2[0]}, !{layer.p2[1]});
  when 'rect'
- - var func = layer.fill ? 'DrawBox' : 'DrawFrame'
- | @!{layer.uid};!{pad}u8g2_!{func}(&u8g2, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]});
+ - var func = 'Draw' + (layer.radius? 'R': '') + (layer.fill ? 'Box' : 'Frame')
+ | @!{layer.uid};!{pad}u8g2_!{func}(&u8g2, !{layer.position[0]}, !{layer.position[1]}, !{layer.size[0]}, !{layer.size[1]}!{layer.radius? `, ${layer.radius}`: ''});
  when 'circle'
  - var func = layer.fill ? 'DrawDisc' : 'DrawCircle'
  | @!{layer.uid};!{pad}u8g2_!{func}(&u8g2, !{layer.position[0] + layer.radius}, !{layer.position[1] + layer.radius}, !{layer.radius});

src/platforms/templates/u8g2/default.pug

@@ -32,8 +32,8 @@ each layer in layers
  when 'line'
  | @!{layer.uid};!{pad}u8g2.drawLine(@x1:!{layer.p1[0]}, @y1:!{layer.p1[1]}, @x2:!{layer.p2[0]}, @y2:!{layer.p2[1]});
  when 'rect'
- - var func = layer.fill ? 'drawBox' : 'drawFrame'
- | @!{layer.uid};!{pad}u8g2.!{func}(@x:!{layer.position[0]}, @y:!{layer.position[1]}, @w:!{layer.size[0]}, @h:!{layer.size[1]});
+ - var func = 'draw' + (layer.radius? 'R': '') + (layer.fill ? 'Box' : 'Frame')
+ | @!{layer.uid};!{pad}u8g2.!{func}(@x:!{layer.position[0]}, @y:!{layer.position[1]}, @w:!{layer.size[0]}, @h:!{layer.size[1]}!{layer.radius? `, @r:${layer.radius}`: ''});
  when 'circle'
  - var func = layer.fill ? 'drawDisc' : 'drawCircle'
  | @!{layer.uid};!{pad}u8g2.!{func}(@x:!{layer.position[0] + layer.radius}, @y:!{layer.position[1] + layer.radius}, @r:!{layer.radius});