Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vighnesh153/drawing-app

Package Overview
Dependencies
Maintainers
0
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vighnesh153/drawing-app - npm Package Compare versions

Comparing version 0.4.8 to 0.4.9

6

dist/main.js

@@ -1,5 +0,5 @@

import { Stack, Queue, not } from '@vighnesh153/tools';
import { Stack, not, Queue } from '@vighnesh153/tools';
var Y=(r=>(r[r.xs=5]="xs",r[r.sm=10]="sm",r[r.md=15]="md",r[r.lg=20]="lg",r[r.xl=25]="xl",r))(Y||{});var D=class{canvas;canvasContext;get width(){return this.canvas.width}get height(){return this.canvas.height}constructor(e,{width:n=window.innerWidth,height:o=window.innerHeight}={}){e.style.width=`${n}px`,e.style.height=`${o}px`;let i=1;e.width=n*i,e.height=o*i;let r=e.getContext("2d",{willReadFrequently:!0,desynchronized:!0});if(r===null)throw new Error("canvasContext shoudn't be null");r.imageSmoothingEnabled=!1,this.canvas=e,this.canvasContext=r,this.reset();}reset(){this.canvasContext.setTransform(1,0,0,1,0,0);}getBoundingClientRect(){return this.canvas.getBoundingClientRect()}getImageData(e,n,o,i,r){return this.canvasContext.getImageData(e,n,o,i,r)}putImageData(e,n,o){this.canvasContext.putImageData(e,n,o);}drawFilledRect(e,n,o,i,r){this.canvasContext.fillStyle=r,this.canvasContext.fillRect(e,n,o,i);}drawLine(e,n,o,i,r,s){this.canvasContext.save(),this.canvasContext.beginPath(),this.canvasContext.lineWidth=r,this.canvasContext.lineCap="round",this.canvasContext.strokeStyle=s,this.canvasContext.moveTo(e,n),this.canvasContext.lineTo(o,i),this.canvasContext.stroke(),this.canvasContext.restore();}drawFilledCircle(e,n,o,i){this.canvasContext.beginPath(),this.canvasContext.fillStyle=i,this.canvasContext.arc(e,n,o,0,2*Math.PI,!0),this.canvasContext.fill();}translate(e,n){this.canvasContext.translate(e,n);}rotate(e){this.canvasContext.rotate(e);}pushState(){this.canvasContext.save();}popState(){this.canvasContext.restore();}};var v={Black:{hsl:"hsl(0, 0%, 0%)",rgba:{r:0,g:0,b:0,a:1},rgbaString:""},Gray:{hsl:"hsl(0, 0%, 34%)",rgba:{r:87,g:87,b:87,a:1},rgbaString:""},LightGray:{hsl:"hsl(0, 0%, 63%)",rgba:{r:161,g:161,b:161,a:1},rgbaString:""},Purple:{hsl:"hsl(291, 64%, 42%)",rgba:{r:155,g:39,b:176,a:1},rgbaString:""},LightBlue:{hsl:"hsl(229, 100%, 81%)",rgba:{r:158,g:176,b:255,a:1},rgbaString:""},DarkBlue:{hsl:"hsl(229, 68%, 50%)",rgba:{r:41,g:73,b:214,a:1},rgbaString:""},SkyBlue:{hsl:"hsl(180, 67%, 49%)",rgba:{r:41,g:209,b:209,a:1},rgbaString:""},LightGreen:{hsl:"hsl(114, 39%, 63%)",rgba:{r:131,g:197,b:124,a:1},rgbaString:""},Green:{hsl:"hsl(122, 39%, 49%)",rgba:{r:76,g:174,b:79,a:1},rgbaString:""},LimeGreen:{hsl:"hsl(73, 100%, 50%)",rgba:{r:200,g:255,b:0,a:1},rgbaString:""},Yellow:{hsl:"hsl(55, 100%, 60%)",rgba:{r:255,g:238,b:51,a:1},rgbaString:""},Orange:{hsl:"hsl(28, 100%, 60%)",rgba:{r:255,g:146,b:51,a:1},rgbaString:""},Peach:{hsl:"hsl(46, 51%, 82%)",rgba:{r:233,g:222,b:186,a:1},rgbaString:""},Brown:{hsl:"hsl(28, 68%, 30%)",rgba:{r:129,g:73,b:24,a:1},rgbaString:""},Pink:{hsl:"hsl(339, 81%, 85%)",rgba:{r:248,g:186,b:207,a:1},rgbaString:""},Red:{hsl:"hsl(4, 90%, 58%)",rgba:{r:244,g:64,b:52,a:1},rgbaString:""},DarkRed:{hsl:"hsl(0, 66%, 41%)",rgba:{r:174,g:36,b:36,a:1},rgbaString:""},White:{hsl:"hsl(0, 0%, 100%)",rgba:{r:255,g:255,b:255,a:1},rgbaString:""}};Object.keys(v).forEach(t=>{let e=v[t],{r:n,g:o,b:i,a:r}=e.rgba;e.rgbaString=`rgba(${n}, ${o}, ${i}, ${r})`;});function p(){return Math.random().toString(16).slice(2)}function J(t){return {type:"point",eventId:p(),...t}}function F(t){return {type:"fill",eventId:p(),...t}}function x(t){return {type:"line",eventId:p(),...t}}function L(t){return {type:"clear",eventId:p(),...t}}function C(){return {type:"commit",eventId:p()}}function w(t){return t?.type==="commit"}function nt(){return {undoEventsStack:new Stack,redoEventsStack:new Stack,pendingQueue:new Queue}}function $(t){return t.undoEventsStack.size>0}function z(t){return t.redoEventsStack.size>0}function ot(t){not($(t));let e=!0;for(;t.undoEventsStack.size>0;){let n=t.undoEventsStack.pop();if(w(n)&&not(e)){t.undoEventsStack.push(n);break}w(n)&&(e=!1),t.redoEventsStack.push(n);}return t.pendingQueue=new Queue(L({color:v.White}),...t.undoEventsStack.toArray()),!0}function rt(t){for(not(z(t));t.redoEventsStack.size>0;){let e=t.redoEventsStack.pop();if(t.undoEventsStack.push(e),w(e))break;t.pendingQueue.pushRight(e);}return !0}function h(t,e){t.undoEventsStack.push(...e),t.redoEventsStack=new Stack,t.pendingQueue.pushRight(...e);}var I=1e4,S=1e3;function b(t,e){return t*I+e}function A(t,e,n){let o=t*4;return n*o+e*4}function M(t,e,n){let o=A(t.width,e,n),i=o+1,r=o+2,s=o+3,a=t.data[o],u=t.data[i],d=t.data[r],g=t.data[s];return ((a*S+u)*S+d)*S+g}function X(t,e){return t===e}function B(t,e){let{color:n,brushThickness:o,point:i}=e;t.drawFilledCircle(i.x,i.y,o/2,n.rgbaString);}function H(t,e){let{color:n,brushThickness:o,startPoint:i,endPoint:r}=e;t.drawLine(i.x,i.y,r.x,r.y,o,n.rgbaString);}function U(t,e){let{color:n}=e;t.drawFilledRect(0,0,t.width,t.height,n.rgbaString);}function W(t,e){let{color:n,startPoint:{x:o,y:i}}=e,r=Math.round(o),s=Math.round(i),a=t.getImageData(0,0,t.width,t.height),u=M(a,r,s),d=n.rgba;d.a*=255;let g={},E=new Queue(b(r,s));for(;not(E.isEmpty);){let k=E.popLeft(),l=k%I,c=(k-l)/I,m=A(a.width,c,l),O=m+1,T=m+2,Q=m+3;c<0||c>=a.width||l<0||l>=a.height||not(X(M(a,c,l),u))||g[c]?.[l]||(g[c]??={},g[c][l]=!0,a.data[m]=d.r,a.data[O]=d.g,a.data[T]=d.b,a.data[Q]=d.a,E.pushRight(b(c+1,l),b(c-1,l),b(c,l+1),b(c,l-1)));}t.putImageData(a,0,0);}function st(t,e){for(;not(e.isEmpty);){let n=e.popLeft();n.type==="point"?B(t,n):n.type==="line"?H(t,n):n.type==="fill"?W(t,n):n.type==="clear"?U(t,n):n.type;}}function pt(){return {state:"idle",location:{x:0,y:0}}}function gt(t,e,n){let o=n.getBoundingClientRect(),i={x:e.clientX-o.left,y:e.clientY-o.top};t.state="pressed",t.location=i;}function bt(t,e,n,o,i){let r=i.getBoundingClientRect(),s={x:o.clientX-r.left,y:o.clientY-r.top};if(t.state!=="idle"&&n.mode!=="fill"){let a=x({color:n.color,brushThickness:n.brushThickness,startPoint:t.location,endPoint:s});h(e,[a]),t.state="drag";}t.location=s;}function mt(t,e,n,o,i){if(t.state==="idle")return;let r=i.getBoundingClientRect(),s={x:o.clientX-r.left,y:o.clientY-r.top},a=t.location,u=t.state;if(t.state="idle",t.location=s,n.mode==="draw"){(u==="drag"||u==="pressed")&&h(e,[x({brushThickness:n.brushThickness,color:n.color,startPoint:a,endPoint:s}),C()]);return}if(n.mode==="fill"){u==="pressed"&&h(e,[F({color:n.color,startPoint:s}),C()]);return}throw new Error("We should never reach here.")}
var Y=(r=>(r[r.xs=5]="xs",r[r.sm=10]="sm",r[r.md=15]="md",r[r.lg=20]="lg",r[r.xl=25]="xl",r))(Y||{});var k=class{canvas;canvasContext;get width(){return this.canvas.width}get height(){return this.canvas.height}constructor(e,{width:n=window.innerWidth,height:o=window.innerHeight}={}){e.style.width=`${n}px`,e.style.height=`${o}px`;let i=1;e.width=n*i,e.height=o*i;let r=e.getContext("2d",{willReadFrequently:!0,desynchronized:!0});if(r===null)throw new Error("canvasContext shoudn't be null");r.imageSmoothingEnabled=!1,this.canvas=e,this.canvasContext=r,this.reset();}reset(){this.canvasContext.setTransform(1,0,0,1,0,0);}getBoundingClientRect(){return this.canvas.getBoundingClientRect()}getImageData(e,n,o,i,r){return this.canvasContext.getImageData(e,n,o,i,r)}putImageData(e,n,o){this.canvasContext.putImageData(e,n,o);}drawFilledRect(e,n,o,i,r){this.canvasContext.fillStyle=r,this.canvasContext.fillRect(e,n,o,i);}drawLine(e,n,o,i,r,s){this.canvasContext.save(),this.canvasContext.beginPath(),this.canvasContext.lineWidth=r,this.canvasContext.lineCap="round",this.canvasContext.strokeStyle=s,this.canvasContext.moveTo(e,n),this.canvasContext.lineTo(o,i),this.canvasContext.stroke(),this.canvasContext.restore();}drawFilledCircle(e,n,o,i){this.canvasContext.beginPath(),this.canvasContext.fillStyle=i,this.canvasContext.arc(e,n,o,0,2*Math.PI,!0),this.canvasContext.fill();}translate(e,n){this.canvasContext.translate(e,n);}rotate(e){this.canvasContext.rotate(e);}pushState(){this.canvasContext.save();}popState(){this.canvasContext.restore();}};var m={Black:{hsl:"hsl(0, 0%, 0%)",rgba:{r:0,g:0,b:0,a:1},rgbaString:""},Gray:{hsl:"hsl(0, 0%, 34%)",rgba:{r:87,g:87,b:87,a:1},rgbaString:""},LightGray:{hsl:"hsl(0, 0%, 63%)",rgba:{r:161,g:161,b:161,a:1},rgbaString:""},Purple:{hsl:"hsl(291, 64%, 42%)",rgba:{r:155,g:39,b:176,a:1},rgbaString:""},LightBlue:{hsl:"hsl(229, 100%, 81%)",rgba:{r:158,g:176,b:255,a:1},rgbaString:""},DarkBlue:{hsl:"hsl(229, 68%, 50%)",rgba:{r:41,g:73,b:214,a:1},rgbaString:""},SkyBlue:{hsl:"hsl(180, 67%, 49%)",rgba:{r:41,g:209,b:209,a:1},rgbaString:""},LightGreen:{hsl:"hsl(114, 39%, 63%)",rgba:{r:131,g:197,b:124,a:1},rgbaString:""},Green:{hsl:"hsl(122, 39%, 49%)",rgba:{r:76,g:174,b:79,a:1},rgbaString:""},LimeGreen:{hsl:"hsl(73, 100%, 50%)",rgba:{r:200,g:255,b:0,a:1},rgbaString:""},Yellow:{hsl:"hsl(55, 100%, 60%)",rgba:{r:255,g:238,b:51,a:1},rgbaString:""},Orange:{hsl:"hsl(28, 100%, 60%)",rgba:{r:255,g:146,b:51,a:1},rgbaString:""},Peach:{hsl:"hsl(46, 51%, 82%)",rgba:{r:233,g:222,b:186,a:1},rgbaString:""},Brown:{hsl:"hsl(28, 68%, 30%)",rgba:{r:129,g:73,b:24,a:1},rgbaString:""},Pink:{hsl:"hsl(339, 81%, 85%)",rgba:{r:248,g:186,b:207,a:1},rgbaString:""},Red:{hsl:"hsl(4, 90%, 58%)",rgba:{r:244,g:64,b:52,a:1},rgbaString:""},DarkRed:{hsl:"hsl(0, 66%, 41%)",rgba:{r:174,g:36,b:36,a:1},rgbaString:""},White:{hsl:"hsl(0, 0%, 100%)",rgba:{r:255,g:255,b:255,a:1},rgbaString:""}};Object.keys(m).forEach(t=>{let e=m[t],{r:n,g:o,b:i,a:r}=e.rgba;e.rgbaString=`rgba(${n}, ${o}, ${i}, ${r})`;});function d(){return Math.random().toString(16).slice(2)}function J(t){return {type:"point",eventId:d(),...t}}function D(t){return {type:"fill",eventId:d(),...t}}function f(t){return {type:"line",eventId:d(),...t}}function F(t){return {type:"clear",eventId:d(),...t}}function C(){return {type:"commit",eventId:d()}}var y=1e4,x=1e3;function g(t,e){return t*y+e}function M(t,e,n){let o=t*4;return n*o+e*4}function L(t,e,n){let o=M(t.width,e,n),i=o+1,r=o+2,s=o+3,a=t.data[o],p=t.data[i],u=t.data[r],b=t.data[s];return ((a*x+p)*x+u)*x+b}function z(t,e){return t===e}function G(t,e){let{color:n,brushThickness:o,point:i}=e;t.drawFilledCircle(i.x,i.y,o/2,n.rgbaString);}function X(t,e){let{color:n,brushThickness:o,startPoint:i,endPoint:r}=e;t.drawLine(i.x,i.y,r.x,r.y,o,n.rgbaString);}function B(t,e){let{color:n}=e;t.drawFilledRect(0,0,t.width,t.height,n.rgbaString);}function H(t,e){let{color:n,startPoint:{x:o,y:i}}=e,r=Math.round(o),s=Math.round(i),a=t.getImageData(0,0,t.width,t.height),p=L(a,r,s),u=n.rgba;u.a*=255;let b={},E=new Queue(g(r,s));for(;not(E.isEmpty);){let I=E.popLeft(),l=I%y,c=(I-l)/y,v=M(a.width,c,l),O=v+1,T=v+2,W=v+3;c<0||c>=a.width||l<0||l>=a.height||not(z(L(a,c,l),p))||b[c]?.[l]||(b[c]??={},b[c][l]=!0,a.data[v]=u.r,a.data[O]=u.g,a.data[T]=u.b,a.data[W]=u.a,E.pushRight(g(c+1,l),g(c-1,l),g(c,l+1),g(c,l-1)));}t.putImageData(a,0,0);}function R(t,e){e.type==="point"?G(t,e):e.type==="line"?X(t,e):e.type==="fill"?H(t,e):e.type==="clear"?B(t,e):e.type;}function P(t){return t?.type==="commit"}function it(t){return {undoEventsStack:new Stack,redoEventsStack:new Stack,onAppEvent:e=>R(t,e)}}function U(t){return t.undoEventsStack.size>0}function _(t){return t.redoEventsStack.size>0}function at(t){not(U(t));let e=!0;for(;t.undoEventsStack.size>0;){let o=t.undoEventsStack.pop();if(P(o)&&not(e)){t.undoEventsStack.push(o);break}P(o)&&(e=!1),t.redoEventsStack.push(o);}let n=[F({color:m.White}),...t.undoEventsStack.toArray()];for(let o of n)t.onAppEvent(o);return !0}function st(t){for(not(_(t));t.redoEventsStack.size>0;){let e=t.redoEventsStack.pop();if(t.undoEventsStack.push(e),P(e))break;t.onAppEvent(e);}return !0}function h(t,e){t.undoEventsStack.push(...e),t.redoEventsStack=new Stack;for(let n of e)t.onAppEvent(n);}function dt(){return {state:"idle",location:{x:0,y:0}}}function bt(t,e,n){let o=n.getBoundingClientRect(),i={x:e.clientX-o.left,y:e.clientY-o.top};t.state="pressed",t.location=i;}function gt(t,e,n,o,i){let r=i.getBoundingClientRect(),s={x:o.clientX-r.left,y:o.clientY-r.top};if(t.state!=="idle"&&n.mode!=="fill"){let a=f({color:n.color,brushThickness:n.brushThickness,startPoint:t.location,endPoint:s});h(e,[a]),t.state="drag";}t.location=s;}function vt(t,e,n,o,i){if(t.state==="idle")return;let r=i.getBoundingClientRect(),s={x:o.clientX-r.left,y:o.clientY-r.top},a=t.location,p=t.state;if(t.state="idle",t.location=s,n.mode==="draw"){(p==="drag"||p==="pressed")&&h(e,[f({brushThickness:n.brushThickness,color:n.color,startPoint:a,endPoint:s}),C()]);return}if(n.mode==="fill"){p==="pressed"&&h(e,[D({color:n.color,startPoint:s}),C()]);return}throw new Error("We should never reach here.")}
export { Y as BrushThickness, D as CanvasWrapperImpl, v as Color, L as buildClearScreenEvent, C as buildCommitEvent, x as buildDrawLineEvent, J as buildDrawPointEvent, nt as buildEventsManager, F as buildFloodFillEvent, pt as buildMouseHandlerStore, gt as handleMouseDown, bt as handleMouseMove, mt as handleMouseUp, z as isRedoAvailable, $ as isUndoAvailable, st as processAppEvent, h as publishEvents, rt as redo, ot as undo };
export { Y as BrushThickness, k as CanvasWrapperImpl, m as Color, F as buildClearScreenEvent, C as buildCommitEvent, f as buildDrawLineEvent, J as buildDrawPointEvent, it as buildEventsManager, D as buildFloodFillEvent, dt as buildMouseHandlerStore, bt as handleMouseDown, gt as handleMouseMove, vt as handleMouseUp, _ as isRedoAvailable, U as isUndoAvailable, R as processAppEvent, h as publishEvents, st as redo, at as undo };

7

dist/src/events-manager.d.ts

@@ -1,9 +0,10 @@

import { Queue, Stack } from "@vighnesh153/tools";
import { Stack } from "@vighnesh153/tools";
import { type AppEvent } from "./events.ts";
import { CanvasWrapper } from "./CanvasWrapper.ts";
export type EventsManager = {
undoEventsStack: Stack<AppEvent>;
redoEventsStack: Stack<AppEvent>;
pendingQueue: Queue<AppEvent>;
onAppEvent: (event: AppEvent) => void;
};
export declare function buildEventsManager(): EventsManager;
export declare function buildEventsManager(canvasWrapper: CanvasWrapper): EventsManager;
export declare function isUndoAvailable(eventsManager: EventsManager): boolean;

@@ -10,0 +11,0 @@ export declare function isRedoAvailable(eventsManager: EventsManager): boolean;

3

dist/src/events-processor.d.ts

@@ -1,4 +0,3 @@

import { Queue } from "@vighnesh153/tools";
import type { AppEvent } from "./events.ts";
import { CanvasWrapper } from "./CanvasWrapper.ts";
export declare function processAppEvent(canvasWrapper: CanvasWrapper, eventsQueue: Queue<AppEvent>): void;
export declare function processAppEvent(canvasWrapper: CanvasWrapper, event: AppEvent): void;

2

package.json
{
"name": "@vighnesh153/drawing-app",
"private": false,
"version": "0.4.8",
"version": "0.4.9",
"type": "module",

@@ -6,0 +6,0 @@ "publishConfig": {

dist/src/events-manager.test.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc