Skip to content

Commit

Permalink
fix: default value for dragStartLocation
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabienwnklr
fabienwnklr committed Jan 16, 2024
1 parent 3879659 commit b649182
Showing 1 changed file with 28 additions and 31 deletions.
59 changes: 28 additions & 31 deletions src/Drawer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { SettingsModal } from './ui/SettingsModal';
import { version } from '../package.json';
import { Toolbar } from './ui/Toolbar';
import { EllipseIcon } from './icons/ellipse';
import { ConfirmModal } from './ui/ConfirmModal';

declare global {
interface HTMLCanvasElement {
Expand Down Expand Up @@ -65,7 +66,7 @@ class Drawer extends History {
declare $canvas: HTMLCanvasElement;
$sourceElement: HTMLElement;
$drawerContainer!: HTMLDivElement;
#dragStartLocation!: Position | undefined;
#dragStartLocation: Position = { x: 0, y: 0 };
#snapshot!: ImageData;
#availableShape: Array<keyof typeof DrawTools> = [
'rect',
Expand All @@ -79,6 +80,7 @@ class Drawer extends History {
'polygon',
];
settingModal!: SettingsModal;
clearModal!: ConfirmModal;
gridActive!: boolean;
VERSION = version;
toolbar: Toolbar;
Expand Down Expand Up @@ -651,7 +653,7 @@ class Drawer extends History {
this.ctx.fillStyle = this.options.color; // passing selectedColor as fill style
this.ctx.lineCap = this.options.cap;
const angle =
(Math.atan2(this.#dragStartLocation!.y - position.y, this.#dragStartLocation!.x - position.x) * 20) / Math.PI;
(Math.atan2(this.#dragStartLocation.y - position.y, this.#dragStartLocation.x - position.x) * 20) / Math.PI;

switch (this.activeTool) {
case 'brush':
Expand Down Expand Up @@ -690,12 +692,7 @@ class Drawer extends History {
break;
}

if (
this.options.fill &&
this.activeTool !== 'eraser' &&
this.activeTool !== 'brush' &&
this.activeTool !== 'text'
) {
if (this.options.fill && this.isShape()) {
this.ctx.fill();
} else {
this.ctx.stroke();
Expand All @@ -709,33 +706,33 @@ class Drawer extends History {

private _drawLine({ x, y }: Position) {
this.ctx.beginPath();
this.ctx.moveTo(this.#dragStartLocation!.x, this.#dragStartLocation!.y);
this.ctx.moveTo(this.#dragStartLocation.x, this.#dragStartLocation.y);
this.ctx.lineTo(x, y);
this.ctx.stroke();
}

private _drawRect({ x, y }: Position) {
const w = x - this.#dragStartLocation!.x;
const h = y - this.#dragStartLocation!.y;
const w = x - this.#dragStartLocation.x;
const h = y - this.#dragStartLocation.y;
this.ctx.beginPath();
this.ctx.rect(this.#dragStartLocation!.x, this.#dragStartLocation!.y, w, h);
this.ctx.rect(this.#dragStartLocation.x, this.#dragStartLocation.y, w, h);
}

private _drawCircle({ x, y }: Position) {
const radius = Math.sqrt(Math.pow(this.#dragStartLocation!.x - x, 2) + Math.pow(this.#dragStartLocation!.y - y, 2));
const radius = Math.sqrt(Math.pow(this.#dragStartLocation.x - x, 2) + Math.pow(this.#dragStartLocation.y - y, 2));
this.ctx.beginPath();
this.ctx.arc(this.#dragStartLocation!.x, this.#dragStartLocation!.y, radius, 0, 2 * Math.PI);
this.ctx.arc(this.#dragStartLocation.x, this.#dragStartLocation.y, radius, 0, 2 * Math.PI);
}

private _drawArrow({ x, y }: Position) {
const angle = Math.atan2(y - this.#dragStartLocation!.y, x - this.#dragStartLocation!.x);
const angle = Math.atan2(y - this.#dragStartLocation.y, x - this.#dragStartLocation.x);
const hyp = Math.sqrt(
(x - this.#dragStartLocation!.x) * (x - this.#dragStartLocation!.x) +
(y - this.#dragStartLocation!.y) * (y - this.#dragStartLocation!.y)
(x - this.#dragStartLocation.x) * (x - this.#dragStartLocation.x) +
(y - this.#dragStartLocation.y) * (y - this.#dragStartLocation.y)
);

this.ctx.save();
this.ctx.translate(this.#dragStartLocation!.x, this.#dragStartLocation!.y);
this.ctx.translate(this.#dragStartLocation.x, this.#dragStartLocation.y);
this.ctx.rotate(angle);

// line
Expand All @@ -760,14 +757,14 @@ class Drawer extends History {
}

private _drawEllipse({ x, y }: Position) {
const w = x - this.#dragStartLocation!.x;
const h = y - this.#dragStartLocation!.y;
const w = x - this.#dragStartLocation.x;
const h = y - this.#dragStartLocation.y;
const angle = Math.atan2(y - 100, x - 100);
this.ctx.beginPath();

this.ctx.ellipse(
this.#dragStartLocation!.x,
this.#dragStartLocation!.y,
this.#dragStartLocation.x,
this.#dragStartLocation.y,
Math.abs(w),
Math.abs(h),
angle,
Expand All @@ -793,12 +790,12 @@ class Drawer extends History {

private _drawPolygon({ x, y }: Position, sides: number, angle: number) {
const coordinates = [],
radius = Math.sqrt(Math.pow(this.#dragStartLocation!.x - x, 2) + Math.pow(this.#dragStartLocation!.y - y, 2));
radius = Math.sqrt(Math.pow(this.#dragStartLocation.x - x, 2) + Math.pow(this.#dragStartLocation.y - y, 2));

for (let index = 0; index < sides; index++) {
coordinates.push({
x: this.#dragStartLocation!.x + radius * Math.cos(angle),
y: this.#dragStartLocation!.y - radius * Math.sin(angle),
x: this.#dragStartLocation.x + radius * Math.cos(angle),
y: this.#dragStartLocation.y - radius * Math.sin(angle),
});
angle += (2 * Math.PI) / sides;
}
Expand Down Expand Up @@ -879,20 +876,20 @@ class Drawer extends History {
*/
private _drawRubberBandReference({ x, y }: Position) {
const rubberBandRect: any = {};
if (this.#dragStartLocation!.x < x) {
rubberBandRect.left = this.#dragStartLocation!.x;
if (this.#dragStartLocation.x < x) {
rubberBandRect.left = this.#dragStartLocation.x;
} else {
rubberBandRect.left = x;
}

if (this.#dragStartLocation!.y < y) {
rubberBandRect.top = this.#dragStartLocation!.y;
if (this.#dragStartLocation.y < y) {
rubberBandRect.top = this.#dragStartLocation.y;
} else {
rubberBandRect.top = y;
}

rubberBandRect.width = Math.abs(this.#dragStartLocation!.x - x);
rubberBandRect.height = Math.abs(this.#dragStartLocation!.y - y);
rubberBandRect.width = Math.abs(this.#dragStartLocation.x - x);
rubberBandRect.height = Math.abs(this.#dragStartLocation.y - y);
this.ctx.save();
this.ctx.strokeStyle = 'black';
this.ctx.lineWidth = 1;
Expand Down

0 comments on commit b649182

Please sign in to comment.