fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
1 lines • 6.26 kB
Source Map (JSON)
{"version":3,"file":"CircleBrush.min.mjs","sources":["../../../src/brushes/CircleBrush.ts"],"sourcesContent":["import { Color } from '../color/Color';\nimport type { Point } from '../Point';\nimport { Shadow } from '../Shadow';\nimport { Circle } from '../shapes/Circle';\nimport { Group } from '../shapes/Group';\nimport { getRandomInt } from '../util/internals/getRandomInt';\nimport type { Canvas } from '../canvas/Canvas';\nimport { BaseBrush } from './BaseBrush';\nimport type { CircleBrushPoint } from './typedefs';\nimport { CENTER } from '../constants';\n\nexport class CircleBrush extends BaseBrush {\n /**\n * Width of a brush\n * @type Number\n * @default\n */\n width = 10;\n\n declare points: CircleBrushPoint[];\n\n constructor(canvas: Canvas) {\n super(canvas);\n this.points = [];\n }\n\n /**\n * Invoked inside on mouse down and mouse move\n * @param {Point} pointer\n */\n drawDot(pointer: Point) {\n const point = this.addPoint(pointer),\n ctx = this.canvas.contextTop;\n this._saveAndTransform(ctx);\n this.dot(ctx, point);\n ctx.restore();\n }\n\n dot(ctx: CanvasRenderingContext2D, point: CircleBrushPoint) {\n ctx.fillStyle = point.fill;\n ctx.beginPath();\n ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);\n ctx.closePath();\n ctx.fill();\n }\n\n /**\n * Invoked on mouse down\n */\n onMouseDown(pointer: Point) {\n this.points = [];\n this.canvas.clearContext(this.canvas.contextTop);\n this._setShadow();\n this.drawDot(pointer);\n }\n\n /**\n * Render the full state of the brush\n * @private\n */\n _render() {\n const ctx = this.canvas.contextTop,\n points = this.points;\n this._saveAndTransform(ctx);\n for (let i = 0; i < points.length; i++) {\n this.dot(ctx, points[i]);\n }\n ctx.restore();\n }\n\n /**\n * Invoked on mouse move\n * @param {Point} pointer\n */\n onMouseMove(pointer: Point) {\n if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) {\n return;\n }\n if (this.needsFullRender()) {\n this.canvas.clearContext(this.canvas.contextTop);\n this.addPoint(pointer);\n this._render();\n } else {\n this.drawDot(pointer);\n }\n }\n\n /**\n * Invoked on mouse up\n */\n onMouseUp() {\n const originalRenderOnAddRemove = this.canvas.renderOnAddRemove;\n this.canvas.renderOnAddRemove = false;\n\n const circles: Circle[] = [];\n\n for (let i = 0; i < this.points.length; i++) {\n const point = this.points[i],\n circle = new Circle({\n radius: point.radius,\n left: point.x,\n top: point.y,\n originX: CENTER,\n originY: CENTER,\n fill: point.fill,\n });\n\n this.shadow && (circle.shadow = new Shadow(this.shadow));\n\n circles.push(circle);\n }\n const group = new Group(circles, { canvas: this.canvas });\n\n this.canvas.fire('before:path:created', { path: group });\n this.canvas.add(group);\n this.canvas.fire('path:created', { path: group });\n\n this.canvas.clearContext(this.canvas.contextTop);\n this._resetShadow();\n this.canvas.renderOnAddRemove = originalRenderOnAddRemove;\n this.canvas.requestRenderAll();\n }\n\n /**\n * @param {Object} pointer\n * @return {Point} Just added pointer point\n */\n addPoint({ x, y }: Point) {\n const pointerPoint: CircleBrushPoint = {\n x,\n y,\n radius: getRandomInt(Math.max(0, this.width - 20), this.width + 20) / 2,\n fill: new Color(this.color).setAlpha(getRandomInt(0, 100) / 100).toRgba(),\n };\n\n this.points.push(pointerPoint);\n\n return pointerPoint;\n }\n}\n"],"names":["CircleBrush","BaseBrush","constructor","canvas","super","_defineProperty","this","points","drawDot","pointer","point","addPoint","ctx","contextTop","_saveAndTransform","dot","restore","fillStyle","fill","beginPath","arc","x","y","radius","Math","PI","closePath","onMouseDown","clearContext","_setShadow","_render","i","length","onMouseMove","limitedToCanvasSize","_isOutSideCanvas","needsFullRender","onMouseUp","originalRenderOnAddRemove","renderOnAddRemove","circles","circle","Circle","left","top","originX","CENTER","originY","shadow","Shadow","push","group","Group","fire","path","add","_resetShadow","requestRenderAll","_ref","pointerPoint","getRandomInt","max","width","Color","color","setAlpha","toRgba"],"mappings":"kbAWO,MAAMA,UAAoBC,EAU/BC,WAAAA,CAAYC,GACVC,MAAMD,GAVRE,eAKQ,IAMNC,KAAKC,OAAS,EAChB,CAMAC,OAAAA,CAAQC,GACN,MAAMC,EAAQJ,KAAKK,SAASF,GAC1BG,EAAMN,KAAKH,OAAOU,WACpBP,KAAKQ,kBAAkBF,GACvBN,KAAKS,IAAIH,EAAKF,GACdE,EAAII,SACN,CAEAD,GAAAA,CAAIH,EAA+BF,GACjCE,EAAIK,UAAYP,EAAMQ,KACtBN,EAAIO,YACJP,EAAIQ,IAAIV,EAAMW,EAAGX,EAAMY,EAAGZ,EAAMa,OAAQ,EAAa,EAAVC,KAAKC,IAAQ,GACxDb,EAAIc,YACJd,EAAIM,MACN,CAKAS,WAAAA,CAAYlB,GACVH,KAAKC,OAAS,GACdD,KAAKH,OAAOyB,aAAatB,KAAKH,OAAOU,YACrCP,KAAKuB,aACLvB,KAAKE,QAAQC,EACf,CAMAqB,OAAAA,GACE,MAAMlB,EAAMN,KAAKH,OAAOU,WACtBN,EAASD,KAAKC,OAChBD,KAAKQ,kBAAkBF,GACvB,IAAK,IAAImB,EAAI,EAAGA,EAAIxB,EAAOyB,OAAQD,IACjCzB,KAAKS,IAAIH,EAAKL,EAAOwB,IAEvBnB,EAAII,SACN,CAMAiB,WAAAA,CAAYxB,IACuB,IAA7BH,KAAK4B,qBAAgC5B,KAAK6B,iBAAiB1B,KAG3DH,KAAK8B,mBACP9B,KAAKH,OAAOyB,aAAatB,KAAKH,OAAOU,YACrCP,KAAKK,SAASF,GACdH,KAAKwB,WAELxB,KAAKE,QAAQC,GAEjB,CAKA4B,SAAAA,GACE,MAAMC,EAA4BhC,KAAKH,OAAOoC,kBAC9CjC,KAAKH,OAAOoC,mBAAoB,EAEhC,MAAMC,EAAoB,GAE1B,IAAK,IAAIT,EAAI,EAAGA,EAAIzB,KAAKC,OAAOyB,OAAQD,IAAK,CAC3C,MAAMrB,EAAQJ,KAAKC,OAAOwB,GACxBU,EAAS,IAAIC,EAAO,CAClBnB,OAAQb,EAAMa,OACdoB,KAAMjC,EAAMW,EACZuB,IAAKlC,EAAMY,EACXuB,QAASC,EACTC,QAASD,EACT5B,KAAMR,EAAMQ,OAGhBZ,KAAK0C,SAAWP,EAAOO,OAAS,IAAIC,EAAO3C,KAAK0C,SAEhDR,EAAQU,KAAKT,EACf,CACA,MAAMU,EAAQ,IAAIC,EAAMZ,EAAS,CAAErC,OAAQG,KAAKH,SAEhDG,KAAKH,OAAOkD,KAAK,sBAAuB,CAAEC,KAAMH,IAChD7C,KAAKH,OAAOoD,IAAIJ,GAChB7C,KAAKH,OAAOkD,KAAK,eAAgB,CAAEC,KAAMH,IAEzC7C,KAAKH,OAAOyB,aAAatB,KAAKH,OAAOU,YACrCP,KAAKkD,eACLlD,KAAKH,OAAOoC,kBAAoBD,EAChChC,KAAKH,OAAOsD,kBACd,CAMA9C,QAAAA,CAAQ+C,GAAkB,IAAjBrC,EAAEA,EAACC,EAAEA,GAAUoC,EACtB,MAAMC,EAAiC,CACrCtC,IACAC,IACAC,OAAQqC,EAAapC,KAAKqC,IAAI,EAAGvD,KAAKwD,MAAQ,IAAKxD,KAAKwD,MAAQ,IAAM,EACtE5C,KAAM,IAAI6C,EAAMzD,KAAK0D,OAAOC,SAASL,EAAa,EAAG,KAAO,KAAKM,UAKnE,OAFA5D,KAAKC,OAAO2C,KAAKS,GAEVA,CACT"}