Variables
Const ARROW_DOWN
ARROW_DOWN: "ArrowDown" = "ArrowDown"
Const ARROW_LEFT
ARROW_LEFT: "ArrowLeft" = "ArrowLeft"
Const ARROW_RIGHT
ARROW_RIGHT: "ArrowRight" = "ArrowRight"
Const ARROW_UP
ARROW_UP: "ArrowUp" = "ArrowUp"
Const Arrow
Arrow: any = fabric.util.createClass(fabric.Line, {type: 'arrow',superType: 'drawing',initialize(points: any, options: any) {if (!points) {const { x1, x2, y1, y2 } = options;points = [x1, y1, x2, y2];}options = options || {};this.callSuper('initialize', points, options);},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);ctx.save();const xDiff = this.x2 - this.x1;const yDiff = this.y2 - this.y1;const angle = Math.atan2(yDiff, xDiff);ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);ctx.rotate(angle);ctx.beginPath();// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)ctx.moveTo(5, 0);ctx.lineTo(-5, 5);ctx.lineTo(-5, -5);ctx.closePath();ctx.fillStyle = this.stroke;ctx.fill();ctx.restore();},})
Const BACKSPACE
BACKSPACE: "Backspace" = "Backspace"
Const Canvas
Canvas
: React.FC<CanvasProps> = React.forwardRef<CanvasInstance, CanvasProps>((props, ref) => {const canvasRef = useRef<InternalCanvas>();React.useImperativeHandle(ref, () => ({handler: canvasRef.current.handler,canvas: canvasRef.current.canvas,container: canvasRef.current.container,}));return <InternalCanvas ref={canvasRef} {...props} />;})Const Chart
Chart: any = fabric.util.createClass(fabric.Rect, {type: 'chart',superType: 'element',hasRotatingPoint: false,initialize(chartOption: echarts.EChartOption, options: any) {options = options || {};this.callSuper('initialize', options);this.set({chartOption,fill: 'rgba(255, 255, 255, 0)',stroke: 'rgba(255, 255, 255, 0)',});},setSource(source: echarts.EChartOption | string) {if (typeof source === 'string') {this.setChartOptionStr(source);} else {this.setChartOption(source);}},setChartOptionStr(chartOptionStr: string) {this.set({chartOptionStr,});},setChartOption(chartOption: echarts.EChartOption) {this.set({chartOption,});this.distroyChart();this.createChart(chartOption);},createChart(chartOption: echarts.EChartOption) {this.instance = echarts.init(this.element);if (!chartOption) {this.instance.setOption({xAxis: {},yAxis: {},series: [{type: 'line',data: [[0, 1],[1, 2],[2, 3],[3, 4],],},],});} else {this.instance.setOption(chartOption);}},distroyChart() {if (this.instance) {this.instance.dispose();}},toObject(propertiesToInclude: string[]) {return toObject(this, propertiesToInclude, {chartOption: this.get('chartOption'),container: this.get('container'),editable: this.get('editable'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);if (!this.instance) {const { id, scaleX, scaleY, width, height, angle, editable, chartOption } = this;const zoom = this.canvas.getZoom();const left = this.calcCoords().tl.x;const top = this.calcCoords().tl.y;const padLeft = (width * scaleX * zoom - width) / 2;const padTop = (height * scaleY * zoom - height) / 2;this.element = fabric.util.makeElement('div', {id: `${id}_container`,style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});width: ${width}px;height: ${height}px;left: ${left + padLeft}px;top: ${top + padTop}px;position: absolute;user-select: ${editable ? 'none' : 'auto'};pointer-events: ${editable ? 'none' : 'auto'};`,}) as HTMLDivElement;this.createChart(chartOption);const container = document.getElementById(this.container);container.appendChild(this.element);}},})
Const CirclePort
CirclePort: any = fabric.util.createClass(fabric.Circle, {type: 'port',superType: 'port',initialize(options: any) {options = options || {};this.callSuper('initialize', options);},toObject() {return fabric.util.object.extend(this.callSuper('toObject'), {id: this.get('id'),superType: this.get('superType'),enabled: this.get('enabled'),nodeId: this.get('nodeId'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);},})
Const Cube
Cube: any = fabric.util.createClass(fabric.Object, {type: 'cube',superType: 'shape',initialize(options: any) {options = options || {};this.callSuper('initialize', options);},shadeColor(color: any, percent: number) {color = color.substr(1);const num = parseInt(color, 16);const amt = Math.round(2.55 * percent);const R = (num >> 16) + amt;const G = ((num >> 8) & 0x00ff) + amt;const B = (num & 0x0000ff) + amt;return ('#' +(0x1000000 +(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +(G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +(B < 255 ? (B < 1 ? 0 : B) : 255)).toString(16).slice(1));},_render(ctx: CanvasRenderingContext2D) {const { width, height, fill } = this;const wx = width / 2;const wy = width / 2;const h = height / 2;const x = 0;const y = wy;ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x - wx, y - wx * 0.5);ctx.lineTo(x - wx, y - h - wx * 0.5);ctx.lineTo(x, y - h * 1);ctx.closePath();ctx.fillStyle = this.shadeColor(fill, -10);ctx.strokeStyle = fill;ctx.stroke();ctx.fill();ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x + wy, y - wy * 0.5);ctx.lineTo(x + wy, y - h - wy * 0.5);ctx.lineTo(x, y - h * 1);ctx.closePath();ctx.fillStyle = this.shadeColor(fill, 10);ctx.strokeStyle = this.shadeColor(fill, 50);ctx.stroke();ctx.fill();ctx.beginPath();ctx.moveTo(x, y - h);ctx.lineTo(x - wx, y - h - wx * 0.5);ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));ctx.lineTo(x + wy, y - h - wy * 0.5);ctx.closePath();ctx.fillStyle = this.shadeColor(fill, 20);ctx.strokeStyle = this.shadeColor(fill, 60);ctx.stroke();ctx.fill();ctx.restore();},})
Const CurvedLink
CurvedLink: any = fabric.util.createClass(Link, {type: 'curvedLink',superType: 'link',initialize(fromNode: Partial<NodeObject>,fromPort: Partial<PortObject>,toNode: Partial<NodeObject>,toPort: Partial<PortObject>,options: Partial<LinkObject>,) {options = options || {};this.callSuper('initialize', fromNode, fromPort, toNode, toPort, options);},_render(ctx: CanvasRenderingContext2D) {// Drawing curved linkconst { x1, y1, x2, y2 } = this;ctx.lineWidth = this.strokeWidth;ctx.strokeStyle = this.stroke;const fp = { x: (x1 - x2) / 2, y: (y1 - y2) / 2 };const sp = { x: (x2 - x1) / 2, y: (y2 - y1) / 2 };ctx.beginPath();ctx.moveTo(fp.x, fp.y);ctx.bezierCurveTo(fp.x, sp.y, sp.x, fp.y, sp.x, sp.y);ctx.stroke();ctx.save();const xDiff = x2 - x1;const yDiff = y2 - y1;const angle = Math.atan2(yDiff, xDiff);ctx.translate((x2 - x1) / 2, (y2 - y1) / 2);ctx.rotate(angle >= 0 ? 1.57 : -1.57);ctx.beginPath();if (this.arrow) {// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)ctx.moveTo(5, 0);ctx.lineTo(-5, 5);ctx.lineTo(-5, -5);}ctx.closePath();ctx.fillStyle = this.stroke;ctx.fill();ctx.restore();},})
Const DELETE
DELETE: "Delete" = "Delete"
Const EMBOSS_MATRIX
EMBOSS_MATRIX: number[] = [1, 1, 1, 1, 0.7, -1, -1, -1, -1]
Const EQUAL
EQUAL: "Equal" = "Equal"
Const ESCAPE
ESCAPE: "Escape" = "Escape"
Const Element
Element: any = fabric.util.createClass(fabric.Rect, {type: 'element',superType: 'element',hasRotatingPoint: false,initialize(code = initialCode, options: any) {options = options || {};this.callSuper('initialize', options);this.set({code,fill: 'rgba(255, 255, 255, 0)',stroke: 'rgba(255, 255, 255, 0)',});},setSource(source: any) {this.setCode(source);},setCode(code = initialCode) {this.set({code,});const { css, js, html } = code;this.styleEl.innerHTML = css;this.scriptEl.innerHTML = js;this.element.innerHTML = html;},toObject(propertiesToInclude: string[]) {return toObject(this, propertiesToInclude, {code: this.get('code'),container: this.get('container'),editable: this.get('editable'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);if (!this.element) {const { id, scaleX, scaleY, width, height, angle, editable, code } = this;const zoom = this.canvas.getZoom();const left = this.calcCoords().tl.x;const top = this.calcCoords().tl.y;const padLeft = (width * scaleX * zoom - width) / 2;const padTop = (height * scaleY * zoom - height) / 2;this.element = fabric.util.makeElement('div', {id: `${id}_container`,style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});width: ${width}px;height: ${height}px;left: ${left + padLeft}px;top: ${top + padTop}px;position: absolute;user-select: ${editable ? 'none' : 'auto'};pointer-events: ${editable ? 'none' : 'auto'};`,}) as HTMLDivElement;const { html, css, js } = code;this.styleEl = document.createElement('style');this.styleEl.id = `${id}_style`;this.styleEl.type = 'text/css';this.styleEl.innerHTML = css;document.head.appendChild(this.styleEl);this.scriptEl = document.createElement('script');this.scriptEl.id = `${id}_script`;this.scriptEl.type = 'text/javascript';this.scriptEl.innerHTML = js;document.head.appendChild(this.scriptEl);const container = document.getElementById(this.container);container.appendChild(this.element);this.element.innerHTML = html;}},})
Const FILTER_TYPES
FILTER_TYPES: string[] = ['grayscale','invert','remove-color','sepia','brownie','brightness','contrast','saturation','noise','vintage','pixelate','blur','sharpen','emboss','technicolor','polaroid','blend-color','gamma','kodachrome','blackwhite','blend-image','hue','resize','tint','mask','multiply','sepia2',]
Const Gif
Gif: any = fabric.util.createClass(fabric.Image, {type: 'gif',superType: 'image',gifCanvas: null,gifler: undefined,isStarted: false,initialize(options: any) {options = options || {};this.gifCanvas = document.createElement('canvas');this.callSuper('initialize', this.gifCanvas, options);},drawFrame(ctx: CanvasRenderingContext2D, frame: any) {// update canvas sizethis.gifCanvas.width = frame.width;this.gifCanvas.height = frame.height;// update canvas that we are using for fabric.jsctx.drawImage(frame.buffer, 0, 0);this.canvas?.renderAll();},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);this.dirty = true;if (!this.isStarted) {this.isStarted = true;this.gifler = window// @ts-ignore.gifler('https://themadcreator.github.io/gifler/assets/gif/nyan.gif')// .gifler('./images/sample/earth.gif').frames(this.gifCanvas, (context: CanvasRenderingContext2D, frame: any) => {this.isStarted = true;this.drawFrame(context, frame);});}},})
Const Iframe
Iframe: any = fabric.util.createClass(fabric.Rect, {type: 'iframe',superType: 'element',hasRotatingPoint: false,initialize(src: string = '', options: any) {options = options || {};this.callSuper('initialize', options);this.set({src,fill: 'rgba(255, 255, 255, 0)',stroke: 'rgba(255, 255, 255, 0)',});},setSource(source: any) {this.setSrc(source);},setSrc(src: string) {this.set({src,});this.iframeElement.src = src;},toObject(propertiesToInclude: string[]) {return toObject(this, propertiesToInclude, {src: this.get('src'),container: this.get('container'),editable: this.get('editable'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);if (!this.element) {const { id, scaleX, scaleY, width, height, angle, editable, src } = this;const zoom = this.canvas.getZoom();const left = this.calcCoords().tl.x;const top = this.calcCoords().tl.y;const padLeft = (width * scaleX * zoom - width) / 2;const padTop = (height * scaleY * zoom - height) / 2;this.iframeElement = fabric.util.makeElement('iframe', {id,src,width: '100%',height: '100%',});this.element = fabric.util.wrapElement(this.iframeElement, 'div', {id: `${id}_container`,style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});width: ${width}px;height: ${height}px;left: ${left + padLeft}px;top: ${top + padTop}px;position: absolute;user-select: ${editable ? 'none' : 'auto'};pointer-events: ${editable ? 'none' : 'auto'};`,}) as HTMLDivElement;const container = document.getElementById(this.container);container.appendChild(this.element);}},})
Const KEY_A
KEY_A: "KeyA" = "KeyA"
Const KEY_C
KEY_C: "KeyC" = "KeyC"
Const KEY_O
KEY_O: "KeyO" = "KeyO"
Const KEY_P
KEY_P: "KeyP" = "KeyP"
Const KEY_Q
KEY_Q: "KeyQ" = "KeyQ"
Const KEY_V
KEY_V: "KeyV" = "KeyV"
Const KEY_W
KEY_W: "KeyW" = "KeyW"
Const KEY_X
KEY_X: "KeyX" = "KeyX"
Const KEY_Y
KEY_Y: "KeyY" = "KeyY"
Const KEY_Z
KEY_Z: "KeyZ" = "KeyZ"
Const Line
Line: any = fabric.util.createClass(fabric.Line, {type: 'line',superType: 'drawing',initialize(points: any, options: any) {if (!points) {const { x1, x2, y1, y2 } = options;points = [x1, y1, x2, y2];}options = options || {};this.callSuper('initialize', points, options);},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);},})
Const Link
Link: any = fabric.util.createClass(fabric.Line, {type: 'link',superType: 'link',initialize(fromNode: Partial<NodeObject>,fromPort: Partial<PortObject>,toNode: Partial<NodeObject>,toPort: Partial<PortObject>,options: Partial<LinkObject>,) {options = options || {};const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];Object.assign(options, {strokeWidth: 4,id: options.id || uuid(),originX: 'center',originY: 'center',lockScalingX: true,lockScalingY: true,lockRotation: true,hasRotatingPoint: false,hasControls: false,hasBorders: false,perPixelTargetFind: true,lockMovementX: true,lockMovementY: true,selectable: false,fromNode,fromPort,toNode,toPort,hoverCursor: 'pointer',});this.callSuper('initialize', coords, options);},setPort(fromNode: NodeObject, fromPort: PortObject, _toNode: NodeObject, toPort: PortObject) {if (fromNode.type === 'BroadcastNode') {fromPort = fromNode.fromPort[0];}fromPort.links.push(this);toPort.links.push(this);this.setPortEnabled(fromNode, fromPort, false);},setPortEnabled(node: NodeObject, port: PortObject, enabled: boolean) {if (node.descriptor.outPortType !== OUT_PORT_TYPE.BROADCAST) {port.set({enabled,fill: enabled ? port.originFill : port.selectFill,});} else {if (node.toPort.id === port.id) {return;}port.links.forEach((link, index) => {link.set({fromPort: port,fromPortIndex: index,});});node.set({configuration: {outputCount: port.links.length,},});}},toObject() {return fabric.util.object.extend(this.callSuper('toObject'), {id: this.get('id'),name: this.get('name'),superType: this.get('superType'),configuration: this.get('configuration'),fromNode: this.get('fromNode'),fromPort: this.get('fromPort'),toNode: this.get('toNode'),toPort: this.get('toPort'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);ctx.save();const xDiff = this.x2 - this.x1;const yDiff = this.y2 - this.y1;const angle = Math.atan2(yDiff, xDiff);ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);ctx.rotate(angle);ctx.beginPath();if (this.arrow) {// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)ctx.moveTo(5, 0);ctx.lineTo(-5, 5);ctx.lineTo(-5, -5);}ctx.closePath();ctx.lineWidth = this.strokeWidth;ctx.fillStyle = this.stroke;ctx.fill();ctx.restore();},})
Const MINUS
MINUS: "Minus" = "Minus"
Const Node
Node: any = fabric.util.createClass(fabric.Group, {type: 'node',superType: 'node',initialize(options: any) {options = options || {};const icon = new fabric.IText(options.icon || '\uE174', {fontFamily: 'Font Awesome 5 Free',fontWeight: 900,fontSize: 20,fill: 'rgba(255, 255, 255, 0.8)',});let name = 'Default Node';if (options.name) {name = getEllipsis(options.name, 18);}this.label = new fabric.Text(name || 'Default Node', {fontSize: 16,fontFamily: 'polestar',fontWeight: 500,fill: 'rgba(255, 255, 255, 0.8)',});const rect = new fabric.Rect({rx: 10,ry: 10,width: 200,height: 40,fill: options.fill || 'rgba(0, 0, 0, 0.3)',stroke: options.stroke || 'rgba(0, 0, 0, 0)',strokeWidth: 2,});this.errorFlag = new fabric.IText('\uf071', {fontFamily: 'Font Awesome 5 Free',fontWeight: 900,fontSize: 14,fill: 'rgba(255, 0, 0, 0.8)',visible: options.errors,});const node = [rect, icon, this.label, this.errorFlag];const option = Object.assign({}, options, {id: options.id || uuid(),width: 200,height: 40,originX: 'left',originY: 'top',hasRotatingPoint: false,hasControls: false,});this.callSuper('initialize', node, option);icon.set({top: icon.top + 10,left: icon.left + 10,});this.label.set({top: this.label.top + this.label.height / 2 + 4,left: this.label.left + 35,});this.errorFlag.set({left: rect.left,top: rect.top,visible: options.errors,});},toObject() {return fabric.util.object.extend(this.callSuper('toObject'), {id: this.get('id'),name: this.get('name'),icon: this.get('icon'),description: this.get('description'),superType: this.get('superType'),configuration: this.get('configuration'),nodeClazz: this.get('nodeClazz'),descriptor: this.get('descriptor'),borderColor: this.get('borderColor'),borderScaleFactor: this.get('borderScaleFactor'),dblclick: this.get('dblclick'),deletable: this.get('deletable'),cloneable: this.get('cloneable'),fromPort: this.get('fromPort'),toPort: this.get('toPort'),});},defaultPortOption() {const { type }: { type: NodeType } = this.descriptor as any;return {nodeId: this.id,hasBorders: false,hasControls: false,hasRotatingPoint: false,selectable: false,originX: 'center',originY: 'center',lockScalingX: true,lockScalingY: true,superType: 'port',originFill: 'rgba(0, 0, 0, 0.1)',hoverFill: 'rgba(0, 0, 0, 0.1)',selectFill: 'rgba(0, 0, 0, 0.1)',fill: 'rgba(0, 0, 0, 0.1)',hoverCursor: 'pointer',strokeWidth: 2,stroke: this.descriptor ? NODE_COLORS[type].border : 'rgba(0, 0, 0, 1)',width: 10,height: 10,links: [] as LinkObject[],enabled: true,};},toPortOption() {return {...this.defaultPortOption(),};},fromPortOption() {return {...this.defaultPortOption(),angle: 45,};},createToPort(left: number, top: number) {if (this.descriptor.inEnabled) {this.toPort = new Port({id: 'defaultInPort',type: 'toPort',...this.toPortOption(),left,top,});}return this.toPort;},createFromPort(left: number, top: number) {if (this.descriptor.outPortType === OUT_PORT_TYPE.BROADCAST) {this.fromPort = this.broadcastPort({ ...this.fromPortOption(), left, top });} else if (this.descriptor.outPortType === OUT_PORT_TYPE.STATIC) {this.fromPort = this.staticPort({ ...this.fromPortOption(), left, top });} else if (this.descriptor.outPortType === OUT_PORT_TYPE.DYNAMIC) {this.fromPort = this.dynamicPort({ ...this.fromPortOption(), left, top });} else if (this.descriptor.outPortType === OUT_PORT_TYPE.NONE) {this.fromPort = [];} else {this.fromPort = this.singlePort({ ...this.fromPortOption(), left, top });}return this.fromPort;},singlePort(portOption: any) {const fromPort = new Port({id: 'defaultFromPort',type: 'fromPort',...portOption,});return [fromPort];},staticPort(portOption: any) {return this.descriptor.outPorts.map((outPort: any, i: number) => {return new Port({id: outPort,type: 'fromPort',...portOption,left: i === 0 ? portOption.left - 20 : portOption.left + 20,top: portOption.top,leftDiff: i === 0 ? -20 : 20,fill: i === 0 ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)',originFill: i === 0 ? 'rgba(0, 255, 0, 0.3)' : 'rgba(255, 0, 0, 0.3)',hoverFill: i === 0 ? 'rgba(0, 255, 0, 1)' : 'rgba(255, 0, 0, 1)',});});},dynamicPort(_portOption: any): any[] {return [];},broadcastPort(portOption: any) {return this.singlePort(portOption);},setErrors(errors: any) {this.set({errors,});if (errors) {this.errorFlag.set({visible: true,});} else {this.errorFlag.set({visible: false,});}},duplicate() {const options = this.toObject();options.id = uuid();options.name = `${options.name}_clone`;return new Node(options);},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);},})
Const OrthogonalLink
OrthogonalLink: any = fabric.util.createClass(Link, {type: 'OrthogonalLink',superType: 'link',initialize(fromNode: Partial<NodeObject>,fromPort: Partial<PortObject>,toNode: Partial<NodeObject>,toPort: Partial<PortObject>,options: Partial<LinkObject>,) {options = options || {};this.callSuper('initialize', fromNode, fromPort, toNode, toPort, options);},_render(ctx: CanvasRenderingContext2D) {// Drawing orthogonal linkconst { x1, y1, x2, y2 } = this;ctx.lineWidth = this.strokeWidth;ctx.strokeStyle = this.stroke;const fp = { x: (x1 - x2) / 2, y: (y1 - y2) / 2 };const sp = { x: (x2 - x1) / 2, y: (y2 - y1) / 2 };ctx.lineJoin = 'round';ctx.beginPath();ctx.moveTo(fp.x, fp.y);ctx.lineTo(fp.x, sp.y / 2);ctx.lineTo(sp.x, sp.y / 2);ctx.lineTo(sp.x, sp.y);ctx.stroke();ctx.save();const xDiff = this.x2 - this.x1;const yDiff = this.y2 - this.y1;const angle = Math.atan2(yDiff, xDiff);ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);ctx.rotate(angle >= 0 ? 1.57 : -1.57);ctx.beginPath();if (this.arrow) {// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)ctx.moveTo(5, 0);ctx.lineTo(-5, 5);ctx.lineTo(-5, -5);}ctx.closePath();ctx.fillStyle = this.stroke;ctx.fill();ctx.restore();},})
Const Port
Port: any = fabric.util.createClass(fabric.Rect, {type: 'port',superType: 'port',initialize(options: any) {options = options || {};this.callSuper('initialize', options);},toObject() {return fabric.util.object.extend(this.callSuper('toObject'), {id: this.get('id'),superType: this.get('superType'),enabled: this.get('enabled'),nodeId: this.get('nodeId'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);},})
Const SHARPEN_MATRIX
SHARPEN_MATRIX: number[] = [0, -1, 0, -1, 5, -1, 0, -1, 0]
Const Svg
Svg: any = fabric.util.createClass(fabric.Group, {type: 'svg',initialize(option: SvgOption = {}) {this.callSuper('initialize', [], option);this.loadSvg(option);},addSvgElements(objects: FabricObject[], options: SvgOption) {const createdObj = fabric.util.groupSVGElements(objects, options) as SvgObject;const { height, scaleY } = this;const scale = height ? (height * scaleY) / createdObj.height : createdObj.scaleY;this.set({ ...options, scaleX: scale, scaleY: scale });if (this._objects?.length) {(this as FabricGroup).getObjects().forEach(obj => {this.remove(obj);});}if (createdObj.getObjects) {(createdObj as FabricGroup).getObjects().forEach(obj => {this.add(obj);if (options.fill) {obj.set('fill', options.fill);}if (options.stroke) {obj.set('stroke', options.stroke);}});} else {createdObj.set({originX: 'center',originY: 'center',});if (options.fill) {createdObj.set({fill: options.fill,});}if (options.stroke) {createdObj.set({stroke: options.stroke,});}if (this._objects?.length) {(this as FabricGroup)._objects.forEach(obj => this.remove(obj));}this.add(createdObj);}this.setCoords();if (this.canvas) {this.canvas.requestRenderAll();}return this;},loadSvg(option: SvgOption) {const { src, svg, loadType, fill, stroke } = option;return new Promise<SvgObject>(resolve => {if (loadType === 'svg') {fabric.loadSVGFromString(svg || src, (objects, options) => {resolve(this.addSvgElements(objects, { ...options, fill, stroke }));});} else {fabric.loadSVGFromURL(svg || src, (objects, options) => {resolve(this.addSvgElements(objects, { ...options, fill, stroke }));});}});},setFill(value: any, filter: (obj: FabricObject) => boolean = () => true) {this.getObjects().filter(filter).forEach((obj: FabricObject) => obj.set('fill', value));this.canvas.requestRenderAll();return this;},setStroke(value: any, filter: (obj: FabricObject) => boolean = () => true) {this.getObjects().filter(filter).forEach((obj: FabricObject) => obj.set('stroke', value));this.canvas.requestRenderAll();return this;},toObject(propertiesToInclude: string[]) {return toObject(this, propertiesToInclude, {src: this.get('src'),loadType: this.get('loadType'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);},})
Const Video
Video: any = fabric.util.createClass(fabric.Rect, {type: 'video',superType: 'element',hasRotatingPoint: false,initialize(source: string | File, options: any) {options = options || {};this.callSuper('initialize', options);if (source instanceof File) {this.set({file: source,src: null,});} else {this.set({file: null,src: source,});}this.set({fill: 'rgba(255, 255, 255, 0)',stroke: 'rgba(255, 255, 255, 0)',});},setSource(source: any) {if (source instanceof File) {this.setFile(source);} else {this.setSrc(source);}},setFile(file: File) {this.set({file,src: null,});const reader = new FileReader();reader.onload = () => {this.player.setSrc(reader.result);};reader.readAsDataURL(file);},setSrc(src: string) {this.set({file: null,src,});this.player.setSrc(src);},toObject(propertiesToInclude: string[]) {return toObject(this, propertiesToInclude, {src: this.get('src'),file: this.get('file'),container: this.get('container'),editable: this.get('editable'),});},_render(ctx: CanvasRenderingContext2D) {this.callSuper('_render', ctx);if (!this.element) {const { id, scaleX, scaleY, width, height, angle, editable, src, file, autoplay, muted, loop } = this;const zoom = this.canvas.getZoom();const left = this.calcCoords().tl.x;const top = this.calcCoords().tl.y;const padLeft = (width * scaleX * zoom - width) / 2;const padTop = (height * scaleY * zoom - height) / 2;this.videoElement = fabric.util.makeElement('video', {id,autoplay: editable ? false : autoplay,muted: editable ? false : muted,loop: editable ? false : loop,preload: 'none',controls: false,});this.element = fabric.util.wrapElement(this.videoElement, 'div', {id: `${id}_container`,style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});width: ${width}px;height: ${height}px;left: ${left + padLeft}px;top: ${top + padTop}px;position: absolute;user-select: ${editable ? 'none' : 'auto'};pointer-events: ${editable ? 'none' : 'auto'};`,}) as HTMLDivElement;const container = document.getElementById(this.container);container.appendChild(this.element);this.player = new MediaElementPlayer(id, {pauseOtherPlayers: false,videoWidth: '100%',videoHeight: '100%',success: (_mediaeElement: any, _originalNode: any, instance: any) => {if (editable) {instance.pause();}},});this.player.setPlayerSize(width, height);if (src) {this.setSrc(src);} else if (file) {this.setFile(file);}}},})
Const propertiesToInclude
propertiesToInclude: string[] = ['id', 'name', 'locked', 'editable']
toObject util