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

Compare commits

base: emma:0.0.9d
Branches Tags
emma:main
emma:0.1.1 emma:0.1.0a emma:0.1.0 emma:0.0.9d emma:0.0.9c emma:0.0.9b emma:0.0.9a emma:0.0.9 emma:0.0.8e emma:0.0.8d emma:0.0.8c emma:0.0.8b emma:0.0.8a emma:0.0.8 emma:0.0.7a emma:0.0.7 emma:0.0.6 emma:0.0.5b emma:0.0.5a emma:0.0.5 emma:0.0.4a emma:0.0.4 emma:0.0.3a emma:0.0.3 emma:0.0.2 emma:0.0.1
..
compare: emma:0.0.9b
Branches Tags
emma:main
emma:0.1.1 emma:0.1.0a emma:0.1.0 emma:0.0.9d emma:0.0.9c emma:0.0.9b emma:0.0.9a emma:0.0.9 emma:0.0.8e emma:0.0.8d emma:0.0.8c emma:0.0.8b emma:0.0.8a emma:0.0.8 emma:0.0.7a emma:0.0.7 emma:0.0.6 emma:0.0.5b emma:0.0.5a emma:0.0.5 emma:0.0.4a emma:0.0.4 emma:0.0.3a emma:0.0.3 emma:0.0.2 emma:0.0.1

1 Commits
0.0.9d ... 0.0.9b

Author SHA1 Message Date
Emma
374d11b141 post init 2023-10-26 01:14:35 -06:00
5 changed files with 68 additions and 176 deletions
Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -20,6 +20,5 @@
}, },
"peacock.remoteColor": "aa11aa", "peacock.remoteColor": "aa11aa",
"deno.enable": true, "deno.enable": true,
"deno.unstable": true, "deno.unstable": true
"liveServer.settings.port": 5501
} }

138
bundle.js
View File

@@ -276,25 +276,24 @@ class Doodler {
draggables = []; draggables = [];
clickables = []; clickables = [];
dragTarget; dragTarget;
constructor({ width, height, canvas, bg, framerate }, postInit){ constructor({ width , height , canvas , bg , framerate }){
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;
canvas.height = height; canvas.height = height;
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;
postInit?.(this.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();
} }
timer; timer;
@@ -302,12 +301,10 @@ class Doodler {
this.timer = setInterval(()=>this.draw(), 1000 / this.framerate); this.timer = setInterval(()=>this.draw(), 1000 / this.framerate);
} }
draw() { draw() {
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.fillStyle = this.bg; this.ctx.fillStyle = this.bg;
this.ctx.fillRect(0, 0, this.width, this.height); this.ctx.fillRect(0, 0, this.width, this.height);
for (const [i, l] of (this.layers || []).entries()){ for (const [i, l] of (this.layers || []).entries()){
l(this.ctx, i); l(this.ctx, i);
this.drawDeferred();
} }
this.drawUI(); this.drawUI();
} }
@@ -407,67 +404,25 @@ class Doodler {
cb(); cb();
this.ctx.restore(); this.ctx.restore();
} }
drawWithAlpha(alpha, cb) {
this.ctx.save();
this.ctx.globalAlpha = Math.min(Math.max(alpha, 0), 1);
cb();
this.ctx.restore();
}
drawImage(img, at, w, h) { drawImage(img, at, w, h) {
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);
} }
drawImageWithOutline(img, at, w, h, style) {
this.ctx.save();
const s = (typeof w === "number" || !w ? style?.weight : w.weight) || 1;
this.ctx.shadowColor = (typeof w === "number" || !w ? style?.color || style?.fillColor : w.color || w.strokeColor) || "red";
this.ctx.shadowBlur = 0;
for(let x = -s; x <= s; x++){
for(let y = -s; y <= s; y++){
this.ctx.shadowOffsetX = x;
this.ctx.shadowOffsetY = y;
typeof w === "number" && h ? this.ctx.drawImage(img, at.x, at.y, w, h) : this.ctx.drawImage(img, at.x, at.y);
}
}
this.ctx.restore();
}
drawSprite(img, spritePos, sWidth, sHeight, at, width, height) { drawSprite(img, spritePos, sWidth, sHeight, at, width, height) {
this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, width, height); this.ctx.drawImage(img, spritePos.x, spritePos.y, sWidth, sHeight, at.x, at.y, width, height);
} }
deferredDrawings = [];
deferDrawing(cb) {
this.deferredDrawings.push(cb);
}
drawDeferred() {
while(this.deferredDrawings.length){
this.deferredDrawings.pop()?.();
}
}
setStyle(style) { setStyle(style) {
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;
ctx.textAlign = style?.textAlign || ctx.textAlign;
ctx.textBaseline = style?.textBaseline || ctx.textBaseline;
}
fillText(text, pos, maxWidth, style) {
this.setStyle(style);
this.ctx.fillText(text, pos.x, pos.y, maxWidth);
}
strokeText(text, pos, maxWidth, style) {
this.setStyle(style);
this.ctx.strokeText(text, pos.x, pos.y, maxWidth);
}
clearRect(at, width, height) {
this.ctx.clearRect(at.x, at.y, width, height);
} }
mouseX = 0; mouseX = 0;
mouseY = 0; mouseY = 0;
registerDraggable(point, radius, style) { registerDraggable(point, radius, style) {
if (this.draggables.find((d)=>d.point === point)) return; if (this.draggables.find((d)=>d.point === point)) return;
const id = this.addUIElement("circle", point, radius, { const id = this.addUIElement('circle', point, radius, {
fillColor: "#5533ff50", fillColor: '#5533ff50',
strokeColor: "#5533ff50" strokeColor: '#5533ff50'
}); });
this.draggables.push({ this.draggables.push({
point, point,
@@ -594,34 +549,34 @@ class ZoomableDoodler extends Doodler {
y: 0 y: 0
}; };
maxScale = 4; maxScale = 4;
constructor(options, postInit){ constructor(options){
super(options, postInit); super(options);
this._canvas.addEventListener("wheel", (e)=>{ this._canvas.addEventListener('wheel', (e)=>{
this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9); this.scaleAtMouse(e.deltaY < 0 ? 1.1 : .9);
if (this.scale === 1) { if (this.scale === 1) {
this.origin.x = 0; this.origin.x = 0;
this.origin.y = 0; this.origin.y = 0;
} }
}); });
this._canvas.addEventListener("dblclick", (e)=>{ this._canvas.addEventListener('dblclick', (e)=>{
e.preventDefault(); e.preventDefault();
this.scale = 1; this.scale = 1;
this.origin.x = 0; this.origin.x = 0;
this.origin.y = 0; this.origin.y = 0;
this.ctx.setTransform(1, 0, 0, 1, 0, 0); this.ctx.setTransform(1, 0, 0, 1, 0, 0);
}); });
this._canvas.addEventListener("mousedown", (e)=>{ this._canvas.addEventListener('mousedown', (e)=>{
e.preventDefault(); e.preventDefault();
this.dragging = true; this.dragging = true;
}); });
this._canvas.addEventListener("mouseup", (e)=>{ this._canvas.addEventListener('mouseup', (e)=>{
e.preventDefault(); e.preventDefault();
this.dragging = false; this.dragging = false;
}); });
this._canvas.addEventListener("mouseleave", (e)=>{ this._canvas.addEventListener('mouseleave', (e)=>{
this.dragging = false; this.dragging = false;
}); });
this._canvas.addEventListener("mousemove", (e)=>{ this._canvas.addEventListener('mousemove', (e)=>{
const prev = this.mouse; const prev = this.mouse;
this.mouse = { this.mouse = {
x: e.offsetX, x: e.offsetX,
@@ -629,7 +584,7 @@ class ZoomableDoodler extends Doodler {
}; };
if (this.dragging && !this.dragTarget) this.drag(prev); if (this.dragging && !this.dragTarget) this.drag(prev);
}); });
this._canvas.addEventListener("touchstart", (e)=>{ this._canvas.addEventListener('touchstart', (e)=>{
e.preventDefault(); e.preventDefault();
if (e.touches.length === 1) { if (e.touches.length === 1) {
const t1 = e.touches.item(0); const t1 = e.touches.item(0);
@@ -643,7 +598,7 @@ class ZoomableDoodler extends Doodler {
clearTimeout(this.touchTimer); clearTimeout(this.touchTimer);
} }
}); });
this._canvas.addEventListener("touchend", (e)=>{ this._canvas.addEventListener('touchend', (e)=>{
if (e.touches.length !== 2) { if (e.touches.length !== 2) {
this.previousTouchLength = undefined; this.previousTouchLength = undefined;
} }
@@ -652,14 +607,14 @@ class ZoomableDoodler extends Doodler {
break; break;
case 0: case 0:
if (!this.zooming) { if (!this.zooming) {
this.events.get("touchend")?.map((cb)=>cb(e)); this.events.get('touchend')?.map((cb)=>cb(e));
} }
break; break;
} }
this.dragging = e.touches.length === 1; this.dragging = e.touches.length === 1;
clearTimeout(this.touchTimer); clearTimeout(this.touchTimer);
}); });
this._canvas.addEventListener("touchmove", (e)=>{ this._canvas.addEventListener('touchmove', (e)=>{
e.preventDefault(); e.preventDefault();
if (e.touches.length === 2) { if (e.touches.length === 2) {
const t1 = e.touches.item(0); const t1 = e.touches.item(0);
@@ -684,18 +639,18 @@ class ZoomableDoodler extends Doodler {
} }
if (e.touches.length === 1) { if (e.touches.length === 1) {
this.dragging === true; this.dragging === true;
const t1 = e.touches.item(0); const t11 = e.touches.item(0);
if (t1) { if (t11) {
const prev = this.mouse; const prev = this.mouse;
this.mouse = this.getTouchOffset({ this.mouse = this.getTouchOffset({
x: t1.clientX, x: t11.clientX,
y: t1.clientY y: t11.clientY
}); });
this.drag(prev); this.drag(prev);
} }
} }
}); });
this._canvas.addEventListener("touchstart", (e)=>{ this._canvas.addEventListener('touchstart', (e)=>{
if (e.touches.length !== 1) return false; if (e.touches.length !== 1) return false;
if (!this.hasDoubleTapped) { if (!this.hasDoubleTapped) {
this.hasDoubleTapped = true; this.hasDoubleTapped = true;
@@ -710,12 +665,10 @@ class ZoomableDoodler extends Doodler {
this.frameCounter = 0; this.frameCounter = 0;
this.zoomDirection = 1; this.zoomDirection = 1;
} }
if (this.zoomDirection > 0) { if (this.zoomDirection > 0) this.scaleAround = {
this.scaleAround = {
...this.mouse ...this.mouse
}; };
} this.events.get('doubletap')?.map((cb)=>cb(e));
this.events.get("doubletap")?.map((cb)=>cb(e));
}); });
} }
worldToScreen(x, y) { worldToScreen(x, y) {
@@ -817,51 +770,46 @@ class ZoomableDoodler extends Doodler {
events.push(cb); events.push(cb);
} }
} }
const init = (opt, zoomable, postInit)=>{ const init = (opt, zoomable)=>{
if (window.doodler) { if (window.doodler) throw 'Doodler has already been initialized in this window';
throw "Doodler has already been initialized in this window"; window.doodler = zoomable ? new ZoomableDoodler(opt) : new Doodler(opt);
}
window.doodler = zoomable ? new ZoomableDoodler(opt, postInit) : new Doodler(opt, postInit);
window.doodler.init(); window.doodler.init();
}; };
init({ init({
width: 400, width: 400,
height: 400 height: 400
}, true, (ctx)=>{ }, true);
ctx.imageSmoothingEnabled = false;
});
new Vector(100, 300); new Vector(100, 300);
const v = new Vector(30, 30); const v = new Vector(30, 30);
doodler.registerDraggable(v, 20); doodler.registerDraggable(v, 20);
const img = new Image(); const img = new Image();
img.src = "./skeleton.png"; img.src = './EngineSprites.png';
img.hidden; img.hidden;
document.body.append(img); document.body.append(img);
const p = new Vector(200, 200); const p = new Vector(200, 200);
doodler.createLayer(()=>{ doodler.createLayer(()=>{
doodler.drawImageWithOutline(img, new Vector(60, 60));
doodler.drawScaled(1.5, ()=>{ doodler.drawScaled(1.5, ()=>{
doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), { doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
color: "grey", color: 'grey',
weight: 2 weight: 2
}); });
doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), { doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
color: "grey", color: 'grey',
weight: 2 weight: 2
}); });
doodler.line(p, p.copy().add(0, 12), { doodler.line(p, p.copy().add(0, 12), {
color: "brown", color: 'brown',
weight: 4 weight: 4
}); });
doodler.line(p, p.copy().add(0, -12), { doodler.line(p, p.copy().add(0, -12), {
color: "brown", color: 'brown',
weight: 4 weight: 4
}); });
}); });
}); });
document.addEventListener("keyup", (e)=>{ document.addEventListener('keyup', (e)=>{
e.preventDefault(); e.preventDefault();
if (e.key === " ") { if (e.key === ' ') {
doodler.unregisterDraggable(v); doodler.unregisterDraggable(v);
} }
}); });

44
canvas.ts
View File

@@ -8,7 +8,7 @@ import { ZoomableDoodler } from "./zoomableCanvas.ts";
export const init = ( export const init = (
opt: IDoodlerOptions, opt: IDoodlerOptions,
zoomable: boolean, zoomable: boolean,
postInit?: postInit, postInit: postInit,
) => { ) => {
if (window.doodler) { if (window.doodler) {
throw "Doodler has already been initialized in this window"; throw "Doodler has already been initialized in this window";
@@ -222,48 +222,6 @@ export class Doodler {
? 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); : this.ctx.drawImage(img, at.x, at.y);
} }
drawImageWithOutline(img: HTMLImageElement, at: Vector, style?: IStyle): void;
drawImageWithOutline(
img: HTMLImageElement,
at: Vector,
w: number,
h: number,
style?: IStyle,
): void;
drawImageWithOutline(
img: HTMLImageElement,
at: Vector,
w?: number | IStyle,
h?: number,
style?: IStyle,
) {
this.ctx.save();
const s = (typeof w === "number" || !w ? style?.weight : w.weight) || 1; // thickness scale
this.ctx.shadowColor =
(typeof w === "number" || !w
? style?.color || style?.fillColor
: w.color || w.strokeColor) || "red";
this.ctx.shadowBlur = 0;
// X offset loop
for (let x = -s; x <= s; x++) {
// Y offset loop
for (let y = -s; y <= s; y++) {
// Set shadow offset
this.ctx.shadowOffsetX = x;
this.ctx.shadowOffsetY = y;
// Draw image with shadow
typeof w === "number" && h
? this.ctx.drawImage(img, at.x, at.y, w, h)
: this.ctx.drawImage(img, at.x, at.y);
}
}
this.ctx.restore();
}
drawSprite( drawSprite(
img: HTMLImageElement, img: HTMLImageElement,
spritePos: Vector, spritePos: Vector,

47
main.ts
View File

@@ -1,31 +1,25 @@
/// <reference types="./global.d.ts" /> /// <reference types="./global.d.ts" />
import { initializeDoodler, Vector } from "./mod.ts"; import { Vector, initializeDoodler } from './mod.ts'
initializeDoodler( initializeDoodler({
{
width: 400, width: 400,
height: 400, height: 400
}, }, true);
true,
(ctx) => {
ctx.imageSmoothingEnabled = false;
},
);
const movingVector = new Vector(100, 300); const movingVector = new Vector(100, 300);
let angleMultiplier = 0; let angleMultiplier = 0;
const v = new Vector(30, 30); const v = new Vector(30, 30);
doodler.registerDraggable(v, 20); doodler.registerDraggable(v, 20)
const img = new Image(); const img = new Image();
img.src = "./skeleton.png"; img.src = './EngineSprites.png'
img.hidden; img.hidden
document.body.append(img); document.body.append(img)
const p = new Vector(200, 200); const p = new Vector(200, 200);
doodler.createLayer(() => { doodler.createLayer(() => {
doodler.drawImageWithOutline(img, new Vector(60, 60));
// doodler.line(new Vector(100, 100), new Vector(200, 200)) // doodler.line(new Vector(100, 100), new Vector(200, 200))
// doodler.dot(new Vector(300, 300)) // doodler.dot(new Vector(300, 300))
// doodler.fillCircle(movingVector, 6, { color: 'red' }); // doodler.fillCircle(movingVector, 6, { color: 'red' });
@@ -41,28 +35,21 @@ doodler.createLayer(() => {
// doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20) // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
// }) // })
// movingVector.set((movingVector.x + 1) % 400, movingVector.y); // movingVector.set((movingVector.x + 1) % 400, movingVector.y);
// angleMultiplier += .001; // angleMultiplier += .001;
// doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20) // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
doodler.drawScaled(1.5, () => { doodler.drawScaled(1.5, () => {doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), { doodler.line(p.copy().add(-8,-10), p.copy().add(8,-10), {color: 'grey', weight: 2})
color: "grey", doodler.line(p, p.copy().add(0,12), {color: 'brown', weight: 4})
weight: 2, doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})})
});
doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
color: "grey",
weight: 2,
});
doodler.line(p, p.copy().add(0, 12), { color: "brown", weight: 4 });
doodler.line(p, p.copy().add(0, -12), { color: "brown", weight: 4 });
});
}); });
document.addEventListener("keyup", (e) => { document.addEventListener('keyup', e => {
e.preventDefault(); e.preventDefault();
if (e.key === " ") { if (e.key === ' ') {
doodler.unregisterDraggable(v); doodler.unregisterDraggable(v);
} }
}); })

BIN
skeleton.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 795 B