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

On Drag event

Browse Source
This commit is contained in:
Emma 2023-02-12 19:57:12 -07:00
parent 3d366a1a6c
commit c7ff737690
3 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
bundle.js
View File

@ -502,35 +502,31 @@ init({
width: 400, width: 400,
height: 400 height: 400
}); });
const movingVector = new Vector(100, 300); new Vector(100, 300);
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 = './EngineSprites.png'; img.src = './EngineSprites.png';
img.hidden; img.hidden;
document.body.append(img); document.body.append(img);
const p = new Vector(200, 200);
doodler.createLayer(()=>{ doodler.createLayer(()=>{
doodler.line(new Vector(100, 100), new Vector(200, 200)); doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
doodler.dot(new Vector(300, 300)); color: 'grey',
doodler.fillCircle(movingVector, 6, { weight: 2
color: 'red'
}); });
doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y); doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
doodler.fillRect(new Vector(200, 250), 30, 10); color: 'grey',
doodler.drawCenteredSquare(new Vector(200, 200), 40, { weight: 2
color: 'purple',
weight: 5
}); });
doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250)); doodler.line(p, p.copy().add(0, 12), {
let rotatedOrigin = new Vector(200, 200); color: 'brown',
doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, ()=>{ weight: 4
doodler.drawCenteredSquare(rotatedOrigin, 30); });
doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20); doodler.line(p, p.copy().add(0, -12), {
color: 'brown',
weight: 4
}); });
movingVector.set((movingVector.x + 1) % 400, movingVector.y);
angleMultiplier += .001;
doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20);
}); });
document.addEventListener('keyup', (e)=>{ document.addEventListener('keyup', (e)=>{
e.preventDefault(); e.preventDefault();

6
canvas.ts
View File

@ -75,6 +75,7 @@ export class Doodler {
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});
} }
}) })
this.startDrawLoop(); this.startDrawLoop();
@ -251,12 +252,14 @@ export class Doodler {
addDragEvents({ addDragEvents({
onDragEnd, onDragEnd,
onDragStart, onDragStart,
onDrag,
point point
}: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void }) { }: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void, onDrag?: () => void }) {
const d = this.draggables.find(d => d.point === point); 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;
d.onDrag = onDrag;
} }
} }
@ -345,6 +348,7 @@ type Draggable = {
id: string; id: string;
onDragStart?: () => void; onDragStart?: () => void;
onDragEnd?: () => void; onDragEnd?: () => void;
onDrag?: (dragDistance?: {x: number, y: number}) => void;
} }
type Clickable = { type Clickable = {

37
main.ts
View File

@ -16,28 +16,35 @@ img.src = './EngineSprites.png'
img.hidden img.hidden
document.body.append(img) document.body.append(img)
const p = new Vector(200, 200);
doodler.createLayer(() => { doodler.createLayer(() => {
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' });
doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y); // doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
doodler.fillRect(new Vector(200, 250), 30, 10) // doodler.fillRect(new Vector(200, 250), 30, 10)
doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 }) // doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250)) // doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
let rotatedOrigin = new Vector(200, 200) // let rotatedOrigin = new Vector(200, 200)
doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => { // doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
doodler.drawCenteredSquare(rotatedOrigin, 30) // doodler.drawCenteredSquare(rotatedOrigin, 30)
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.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), {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 => {