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