emma/doodler
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 26 Wiki Activity

text drawing

Browse Source
This commit is contained in:
Emmaline Autumn 2023-10-23 04:35:03 -06:00
parent 76f07625dd
commit e4de886646
1 changed files with 109 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
canvas.ts
View File

@ -1,15 +1,16 @@
/// <reference types="./global.d.ts" />
import { Constants } from "./geometry/constants.ts";
import { Vector } from "./geometry/vector.ts";
import { ZoomableDoodler } from "./zoomableCanvas.ts";
export const init = (opt: IDoodlerOptions, zoomable: boolean) => {
if (window.doodler) throw 'Doodler has already been initialized in this window'
if (window.doodler) {
throw "Doodler has already been initialized in this window";
}
window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
window.doodler.init();
}
};
export interface IDoodlerOptions {
width: number;
@ -47,14 +48,14 @@ export class Doodler {
height,
canvas,
bg,
framerate
framerate,
}: IDoodlerOptions) {
if (!canvas) {
canvas = document.createElement('canvas');
canvas = document.createElement("canvas");
document.body.append(canvas);
}
this.bg = bg || 'white';
this.bg = bg || "white";
this.framerate = framerate || 60;
canvas.width = width;
@ -62,15 +63,15 @@ export class Doodler {
this._canvas = canvas;
const ctx = canvas.getContext('2d');
if (!ctx) throw 'Unable to initialize Doodler: Canvas context not found';
const ctx = canvas.getContext("2d");
if (!ctx) throw "Unable to initialize Doodler: Canvas context not found";
this.ctx = ctx;
}
init() {
this._canvas.addEventListener('mousedown', e => this.onClick(e));
this._canvas.addEventListener('mouseup', e => this.offClick(e));
this._canvas.addEventListener('mousemove', e => this.onDrag(e));
this._canvas.addEventListener("mousedown", (e) => this.onClick(e));
this._canvas.addEventListener("mouseup", (e) => this.offClick(e));
this._canvas.addEventListener("mousemove", (e) => this.onDrag(e));
this.startDrawLoop();
}
@ -98,11 +99,11 @@ export class Doodler {
}
deleteLayer(layer: layer) {
this.layers = this.layers.filter(l => l !== layer);
this.layers = this.layers.filter((l) => l !== layer);
}
moveLayer(layer: layer, index: number) {
let temp = this.layers.filter(l => l !== layer);
let temp = this.layers.filter((l) => l !== layer);
temp = [...temp.slice(0, index), layer, ...temp.slice(index)];
@ -119,7 +120,7 @@ export class Doodler {
this.ctx.stroke();
}
dot(at: Vector, style?: IStyle) {
this.setStyle({ ...style, weight: 1 })
this.setStyle({ ...style, weight: 1 });
this.ctx.beginPath();
this.ctx.arc(at.x, at.y, style?.weight || 1, 0, Constants.TWO_PI);
@ -199,29 +200,66 @@ export class Doodler {
drawImage(img: HTMLImageElement, at: Vector): void;
drawImage(img: HTMLImageElement, at: Vector, w: number, h: number): void;
drawImage(img: HTMLImageElement, at: Vector, w?: number, h?: number) {
w && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
w && h
? this.ctx.drawImage(img, at.x, at.y, w, h)
: this.ctx.drawImage(img, at.x, at.y);
}
drawSprite(img: HTMLImageElement, spritePos: Vector, sWidth: number, sHeight: number, at: Vector, width: number, height: number) {
this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, width, height);
drawSprite(
img: HTMLImageElement,
spritePos: Vector,
sWidth: number,
sHeight: number,
at: Vector,
width: number,
height: number,
) {
this.ctx.drawImage(
img,
spritePos.x,
spritePos.y,
sWidth,
sHeight,
at.x,
at.y,
width,
height,
);
}
setStyle(style?: IStyle) {
const ctx = this.ctx;
ctx.fillStyle = style?.color || style?.fillColor || 'black';
ctx.strokeStyle = style?.color || style?.strokeColor || 'black';
ctx.fillStyle = style?.color || style?.fillColor || "black";
ctx.strokeStyle = style?.color || style?.strokeColor || "black";
ctx.lineWidth = style?.weight || 1;
}
fillText(text: string, pos: Vector, maxWidth: number, style?: IStyle) {
this.setStyle(style);
// TODO: add text alignment to style
this.ctx.fillText(text, pos.x, pos.y, maxWidth);
}
strokeText(text: string, pos: Vector, maxWidth: number, style?: IStyle) {
this.setStyle(style);
// TODO: add text alignment to style
this.ctx.strokeText(text, pos.x, pos.y, maxWidth);
}
// Interaction
mouseX = 0;
mouseY = 0;
registerDraggable(point: Vector, radius: number, style?: IStyle & { shape: 'square' | 'circle' }) {
if (this.draggables.find(d => d.point === point)) return;
const id = this.addUIElement('circle', point, radius, { fillColor: '#5533ff50', strokeColor: '#5533ff50' })
registerDraggable(
point: Vector,
radius: number,
style?: IStyle & { shape: "square" | "circle" },
) {
if (this.draggables.find((d) => d.point === point)) return;
const id = this.addUIElement("circle", point, radius, {
fillColor: "#5533ff50",
strokeColor: "#5533ff50",
});
this.draggables.push({ point, radius, style, id });
}
unregisterDraggable(point: Vector) {
@ -230,7 +268,7 @@ export class Doodler {
this.removeUIElement(d.id);
}
}
this.draggables = this.draggables.filter(d => d.point !== point);
this.draggables = this.draggables.filter((d) => d.point !== point);
}
registerClickable(p1: Vector, p2: Vector, cb: () => void) {
@ -241,21 +279,27 @@ export class Doodler {
this.clickables.push({
onClick: cb,
checkBound: (p) => p.y >= top && p.x >= left && p.y <= bottom && p.x <= right
})
checkBound: (p) =>
p.y >= top && p.x >= left && p.y <= bottom && p.x <= right,
});
}
unregisterClickable(cb: () => void) {
this.clickables = this.clickables.filter(c => c.onClick !== cb);
this.clickables = this.clickables.filter((c) => c.onClick !== cb);
}
addDragEvents({
onDragEnd,
onDragStart,
onDrag,
point
}: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void, onDrag?: (movement: { x: number, y: number }) => void }) {
const d = this.draggables.find(d => d.point === point);
point,
}: {
point: Vector;
onDragEnd?: () => void;
onDragStart?: () => void;
onDrag?: (movement: { x: number; y: number }) => void;
}) {
const d = this.draggables.find((d) => d.point === point);
if (d) {
d.onDragEnd = onDragEnd;
d.onDragStart = onDragStart;
@ -264,7 +308,7 @@ export class Doodler {
}
onClick(e: MouseEvent) {
const mouse = new Vector(this.mouseX, this.mouseY)
const mouse = new Vector(this.mouseX, this.mouseY);
for (const d of this.draggables) {
if (d.point.dist(mouse) <= d.radius) {
d.beingDragged = true;
@ -295,8 +339,8 @@ export class Doodler {
// this.mouseX = e.clientX - rect.left;
// this.mouseY = e.clientY - rect.top;
for (const d of this.draggables.filter(d => d.beingDragged)) {
d.point.add(e.movementX, e.movementY)
for (const d of this.draggables.filter((d) => d.beingDragged)) {
d.point.add(e.movementX, e.movementY);
d.onDrag && d.onDrag({ x: e.movementX, y: e.movementY });
}
}
@ -305,28 +349,44 @@ export class Doodler {
uiElements: Map<string, [keyof uiDrawing, ...any]> = new Map();
private uiDrawing: uiDrawing = {
rectangle: (...args: any[]) => {
!args[3].noFill && this.fillRect(args[0], args[1], args[2], args[3])
!args[3].noStroke && this.drawRect(args[0], args[1], args[2], args[3])
!args[3].noFill && this.fillRect(args[0], args[1], args[2], args[3]);
!args[3].noStroke && this.drawRect(args[0], args[1], args[2], args[3]);
},
square: (...args: any[]) => {
!args[2].noFill && this.fillSquare(args[0], args[1], args[2])
!args[2].noStroke && this.drawSquare(args[0], args[1], args[2])
!args[2].noFill && this.fillSquare(args[0], args[1], args[2]);
!args[2].noStroke && this.drawSquare(args[0], args[1], args[2]);
},
circle: (...args: any[]) => {
!args[2].noFill && this.fillCircle(args[0], args[1], args[2])
!args[2].noStroke && this.drawCircle(args[0], args[1], args[2])
!args[2].noFill && this.fillCircle(args[0], args[1], args[2]);
!args[2].noStroke && this.drawCircle(args[0], args[1], args[2]);
},
}
};
private drawUI() {
for (const [shape, ...args] of this.uiElements.values()) {
this.uiDrawing[shape].apply(null, args as [])
this.uiDrawing[shape].apply(null, args as []);
}
}
addUIElement(shape: 'rectangle', at: Vector, width: number, height: number, style?: IStyle): string;
addUIElement(shape: 'square', at: Vector, size: number, style?: IStyle): string;
addUIElement(shape: 'circle', at: Vector, radius: number, style?: IStyle): string;
addUIElement(
shape: "rectangle",
at: Vector,
width: number,
height: number,
style?: IStyle,
): string;
addUIElement(
shape: "square",
at: Vector,
size: number,
style?: IStyle,
): string;
addUIElement(
shape: "circle",
at: Vector,
radius: number,
style?: IStyle,
): string;
addUIElement(shape: keyof uiDrawing, ...args: any[]) {
const id = crypto.randomUUID();
for (const arg of args) {
@ -358,21 +418,21 @@ interface IDrawable {
type Draggable = {
point: Vector;
radius: number;
style?: IStyle & { shape: 'square' | 'circle' };
style?: IStyle & { shape: "square" | "circle" };
beingDragged?: boolean;
id: string;
onDragStart?: () => void;
onDragEnd?: () => void;
onDrag?: (dragDistance: { x: number, y: number }) => void;
}
onDrag?: (dragDistance: { x: number; y: number }) => void;
};
type Clickable = {
onClick: () => void;
checkBound: (p: Vector) => boolean;
}
};
type uiDrawing = {
circle: () => void;
square: () => void;
rectangle: () => void;
}
};