From b641fa8f5c2eee72c97c2e56bb93edc8faad2500 Mon Sep 17 00:00:00 2001 From: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Fri, 26 Aug 2022 08:54:22 +0300 Subject: [PATCH 001/126] Update README.md --- README.md | 240 +++++++++++++----------------------------------------- 1 file changed, 58 insertions(+), 182 deletions(-) diff --git a/README.md b/README.md index 8c134beef02..16b22d5d214 100644 --- a/README.md +++ b/README.md @@ -2,82 +2,85 @@ -FabricJS.com is a **simple and powerful Javascript HTML5 canvas library**. It is also an **SVG-to-canvas parser**. +A **simple and powerful Javascript HTML5 canvas library**. + -[![Build Status](https://secure.travis-ci.org/fabricjs/fabric.js.svg?branch=master)](http://travis-ci.org/#!/kangax/fabric.js) +[![Build Status](https://secure.travis-ci.org/fabricjs/fabric.js.svg?branch=master)](http://travis-ci.org/#!/fabricjs/fabric.js) [![Code Climate](https://d3s6mut3hikguw.cloudfront.net/github/kangax/fabric.js/badges/gpa.svg)](https://codeclimate.com/github/kangax/fabric.js) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/fabricjs/fabric.js) [![CDNJS version](https://img.shields.io/cdnjs/v/fabric.js.svg)](https://cdnjs.com/libraries/fabric.js) +[![CDNJS](https://data.jsdelivr.com/v1/package/npm/fabric/badge)](https://www.jsdelivr.com/package/npm/fabric) + [![NPM version](https://badge.fury.io/js/fabric.svg)](http://badge.fury.io/js/fabric) [![Downloads per month](https://img.shields.io/npm/dm/fabric.svg)](https://www.npmjs.org/package/fabric) [![Bower version](https://badge.fury.io/bo/fabric.svg)](http://badge.fury.io/bo/fabric) -## Features -- drag-n-drop objects on canvas, -- scale, move, rotate and group objects with mouse, -- use predefined shapes or create custom objects, -- works super-fast with many objects, -- supports JPG, PNG, JSON and SVG formats, -- ready-to-use image filters, -- create animations, -- and much more! +--- -
+[![](https://img.shields.io/static/v1?label=Sponsor%20asturur&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/asturur) +[![](https://img.shields.io/static/v1?label=Sponsor%20melchiar&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/melchiar) +[![](https://img.shields.io/static/v1?label=Sponsor%20ShaMan123&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/ShaMan123) +[![](https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet)](https://www.patreon.com/fabricJS) -Introduction -  •   -Docs -  •   -Demos -  •   -Kitchensink -  •   -Benchmarks -  •   -Contribution -
+----- -
+## Features +- Interactive + - drag-n-drop objects on canvas + - scale, move, rotate and group objects with mouse + - built in controls and animations +- use predefined shapes or create custom objects +- works super-fast with many objects +- supports JPG, PNG, JSON and SVG formats +- ready-to-use image filters +- create animations +- and much more! -## Quick Start -``` +## Installation + +```bash $ npm install fabric --save +// or +$ yarn add fabric ``` -After this, you can import fabric like so: +```js -``` +// es6 imports +import { fabric } from "fabric"; + +// cjs const fabric = require("fabric").fabric; + ``` -Or you can use this instead if your build pipeline supports ES6 imports: +### Node.js +If you are using Fabric.js in a Node.js script, you will depend on [node-canvas](https://github.com/Automattic/node-canvas) for a canvas implementation (`HTMLCanvasElement` replacement) and [jsdom](https://github.com/jsdom/jsdom) for a `window` implementation. +Follow these [instructions](https://github.com/Automattic/node-canvas#compiling) to get `node-canvas` up and running. -``` -import { fabric } from "fabric"; -``` +### Browser es6 +see [browser modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) for using es6 imports in the browser or use a dedicated bundler. -NOTE: If you are using Fabric.js in a Node.js script, you will depend on [node-canvas](https://github.com/Automattic/node-canvas). `node-canvas` is an HTML canvas replacement that works on top of native libraries. Please [follow the instructions](https://github.com/Automattic/node-canvas#compiling) to get it up and running. +### CDN -NOTE: es6 imports won't work in browser or with bundlers which expect es6 module like vite. Use commonjs syntax instead. +[cdnjs](https://cdnjs.com/libraries/fabric.js), [jsdelivr](https://www.jsdelivr.com/package/npm/fabric) -## Usage +## Qucik Start ### Plain HTML ```html - - + ``` -### ReactJS +#### ReactJS ```tsx import React, { useEffect, useRef } from 'react'; @@ -115,47 +120,66 @@ export const FabricJSCanvas = () => { ``` -## Contributing - -See the [Contribution Guide](/CONTRIBUTING.md) - - -## Goals +#### Node.js -- Unit tested -- Modular -- Cross-browser -- [Fast](https://github.com/kangax/fabric.js/wiki/Focus-on-speed) -- No browser sniffing for critical functionality -- Runs under es6 strict mode -- Runs on a server under [Node.js](http://nodejs.org/) (active stable releases and latest of current) (see [Node.js limitations](https://github.com/fabricjs/fabric.js/wiki/Fabric-limitations-in-node.js)) -- Follows [Semantic Versioning](http://semver.org/) +```js +const http = require('http'); +const { fabric } = require('fabric'); + +const port = 8080; + +http + .createServer((req, res) => { + const canvas = new fabric.Canvas(null, { width: 100, height: 100 }); + const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' }); + const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 }); + canvas.add(rect, text); + canvas.renderAll(); + if (req.url === '/download') { + canvas.createPNGStream().pipe(res); + } + else { + const imageData = canvas.toDataURL(); + res.writeHead(200, '', { 'Content-Type': 'text/html' }); + res.write(``); + res.end(); + } + }) + .listen(port, (err) => { + if (err) throw err; + console.log(`> Ready on http://localhost:${port}`); + }); +``` -## Supported browsers +## Supported Browsers - Firefox 4+ - Safari 5+ - Opera 9.64+ - Chrome (all versions) - Edge (chromium based, all versions) -- IE11 and Edge legacy, not supported + +IE11 and Edge legacy are **not** supported + + +## Contributing, Developing and More + +Follow the [Contribution Guide](/CONTRIBUTING.md) -## More resources +## More Resources - [Fabric.js on Twitter](https://twitter.com/fabricjs) - [Fabric.js on CodeTriage](https://www.codetriage.com/kangax/fabric.js) - [Fabric.js on Stackoverflow](https://stackoverflow.com/questions/tagged/fabricjs) - [Fabric.js on jsfiddle](https://jsfiddle.net/user/fabricjs/fiddles/) - [Fabric.js on Codepen.io](https://codepen.io/tag/fabricjs) -- [Presentation from BK.js](http://www.slideshare.net/kangax/fabricjs-building-acanvaslibrarybk) -- [Presentation from Falsy Values](http://www.slideshare.net/kangax/fabric-falsy-values-8067834) ## Credits - [@kangax](https://twitter.com/kangax) -- [Andrea Bogazzi](https://twitter.com/AndreaBogazzi) +- [asturur](https://github.com/asturur), [Andrea Bogazzi](https://twitter.com/AndreaBogazzi) - [melchiar](https://github.com/melchiar) - [ShaMan123](https://github.com/ShaMan123) - Ernest Delgado for the original idea of [manipulating images on canvas](http://www.ernestdelgado.com/archive/canvas/) @@ -163,5 +187,5 @@ See the [Contribution Guide](/CONTRIBUTING.md) - [Sergey Nisnevich](http://nisnya.com) for help with geometry logic - [Stefan Kienzle](https://twitter.com/kienzle_s) for help with bugs, features, documentation, GitHub issues - [Shutterstock](http://www.shutterstock.com/jobs) for the time and resources invested in using and improving Fabric.js -- [and all the other GitHub contributors](https://github.com/fabricjs/fabric.js/graphs/contributors) +- [and all the other contributors](https://github.com/fabricjs/fabric.js/graphs/contributors) From f52628f8313cb5914064717e35eada7863e0f8c8 Mon Sep 17 00:00:00 2001 From: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Fri, 26 Aug 2022 10:23:59 +0300 Subject: [PATCH 004/126] Update README.md --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3a143980864..609661ad817 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,7 @@ See [browser modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Gu ```html - + ``` @@ -130,7 +129,7 @@ export const FabricJSCanvas = () => { canvas.dispose(); } }, []); - + return () }); @@ -155,11 +154,9 @@ http res.setHeader('Content-Type', 'image/png'); res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"'); canvas.createPNGStream().pipe(res); - } - else if (req.url === '/view') { + } else if (req.url === '/view') { canvas.createPNGStream().pipe(res); - } - else { + } else { const imageData = canvas.toDataURL(); res.writeHead(200, '', { 'Content-Type': 'text/html' }); res.write(``); @@ -168,7 +165,9 @@ http }) .listen(port, (err) => { if (err) throw err; - console.log(`> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`); + console.log( + `> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download` + ); }); ``` @@ -176,14 +175,13 @@ http ## Other Solutions -| Project | Description | Demo | -| ------------- | ------------- | :-------------: | -| [Three.js](https://github.com/mrdoob/three.js/) | 3D graphics | -| [PixiJS](https://github.com/pixijs/pixijs) | WebGL renderer | -| [Konva](https://github.com/konvajs/konva) | *Competition* | ❌ | -| [Canvas2PDF](https://github.com/joshua-gould/canvas2pdf) | PDF renderer | -| [html-to-image](https://github.com/bubkoo/html-to-image) | HTML to image/canvas | - +| Project | Description | Demo | +| -------------------------------------------------------- | -------------------- | :--: | +| [Three.js](https://github.com/mrdoob/three.js/) | 3D graphics | +| [PixiJS](https://github.com/pixijs/pixijs) | WebGL renderer | +| [Konva](https://github.com/konvajs/konva) | _Competition_ | ❌ | +| [Canvas2PDF](https://github.com/joshua-gould/canvas2pdf) | PDF renderer | +| [html-to-image](https://github.com/bubkoo/html-to-image) | HTML to image/canvas | ## More Resources @@ -193,12 +191,11 @@ http - [Fabric.js on jsfiddle](https://jsfiddle.net/user/fabricjs/fiddles/) - [Fabric.js on Codepen.io](https://codepen.io/tag/fabricjs) - ## Credits [![Patreon](https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet)](https://www.patreon.com/fabricJS) - [@kangax](https://twitter.com/kangax) -- [asturur](https://github.com/asturur), [Andrea Bogazzi](https://twitter.com/AndreaBogazzi) -[![Sponsor asturur](https://img.shields.io/static/v1?label=Sponsor%20asturur&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/asturur) +- [asturur](https://github.com/asturur), [Andrea Bogazzi](https://twitter.com/AndreaBogazzi) + [![Sponsor asturur](https://img.shields.io/static/v1?label=Sponsor%20asturur&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/asturur) - [melchiar](https://github.com/melchiar) [![Sponsor melchiar](https://img.shields.io/static/v1?label=Sponsor%20melchiar&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/melchiar) - [ShaMan123](https://github.com/ShaMan123) [![Sponsor ShaMan123](https://img.shields.io/static/v1?label=Sponsor%20ShaMan123&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/ShaMan123) - Ernest Delgado for the original idea of [manipulating images on canvas](http://www.ernestdelgado.com/archive/canvas/) @@ -207,4 +204,3 @@ http - [Stefan Kienzle](https://twitter.com/kienzle_s) for help with bugs, features, documentation, GitHub issues - [Shutterstock](http://www.shutterstock.com/jobs) for the time and resources invested in using and improving Fabric.js - [and all the other contributors](https://github.com/fabricjs/fabric.js/graphs/contributors) - From fa6a899579329e39c98682d7a10d099c04e47e2b Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 13 Oct 2022 16:52:48 +0300 Subject: [PATCH 090/126] prettier --- src/LICENSE.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/LICENSE.md b/src/LICENSE.md index cf89a9a20e4..adb89c4a243 100644 --- a/src/LICENSE.md +++ b/src/LICENSE.md @@ -1,4 +1,3 @@ - Copyright (c) 2008-2015 Printio (Juriy Zaytsev, Maxim Chernyak) Permission is hereby granted, free of charge, to any person obtaining a copy @@ -14,4 +13,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. From 0f3f500cd757c66a93644794aee4c7602cf9908a Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 13 Oct 2022 17:05:25 +0300 Subject: [PATCH 091/126] bye google group --- CONTRIBUTING.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 972553c9741..162a785bda3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -5,8 +5,7 @@ Questions are legit but that doesn't make them bug reports...\ Please refer to available resources (read below) and refrain from opening an issue in such a case. -To find an answer first [search the repository](https://github.com/fabricjs/fabric.js/search?q=&type=Issues), it contains a lot of useful threads.\ -Refer to `Fabric's google group`, `StackOverflow` and [`Fabric's IRC channel`](irc://irc.freenode.net/#fabric.js) as well.\ +To find an answer, first [search the repository](https://github.com/fabricjs/fabric.js/search?q=&type=Issues). It contains a lot of useful threads.\ See [Links](#-links). Questions might inspire you to [improve the docs](#-improving-docs) 🌈 Please do 🌟. @@ -36,7 +35,7 @@ Demos and examples 🤓 can be found on [fabricjs.com](http://fabricjs.com/demos **These are minimal requirements. Without them issues shall be ⛔.** -If it's not a bug **OR** if you're unsure, start a 🤠 [discussion](https://github.com/fabricjs/fabric.js/discussions) or create a post ✉️ on [Fabric's google group](https://groups.google.com/g/fabricjs) where someone might clarify some of the things. +If it's not a bug **OR** if you're unsure, start a 🤠 [discussion](https://github.com/fabricjs/fabric.js/discussions). Check out [**Helping Out**](#%EF%B8%8F-helping-out). @@ -132,8 +131,7 @@ Answering questions and addressing issues is a great way to start contributing t - [Issues](../../issues) - [Discussions](../../discussions) -- [Google group](https://groups.google.com/g/fabricjs) -- [Stackoverflow](http://stackoverflow.com/questions/tagged/fabricjs) +- [StackOverflow](http://stackoverflow.com/questions/tagged/fabricjs) ## 🚀 Pull Requests @@ -214,7 +212,6 @@ Options: For news about Fabric you can follow [@fabric.js], [@AndreaBogazzi], [@kangax], or [@kienzle_s] on Twitter. -- [Fabric's google group](https://groups.google.com/forum/#!forum/fabricjs) - [stackoverflow](http://stackoverflow.com/questions/tagged/fabricjs) - [@fabric.js](https://twitter.com/fabricjs) - [@AndreaBogazzi](https://twitter.com/AndreaBogazzi) @@ -223,6 +220,4 @@ For news about Fabric you can follow [@fabric.js], [@AndreaBogazzi], [@kangax], - [jsfiddle](http://jsfiddle.net/user/fabricjs/fiddles) - [codepen.io](http://codepen.io/tag/fabricjs) - [fabricjs.com](http://fabricjs.com/demos) -- [fabricjs.com/docs](http://fabricjs.com/docs) -- [JSDoc 3](http://usejsdoc.org/) - [issue](https://github.com/fabric/fabric.js/issues) From 129541a78788c7ec320c4522fdc8bf2958399eb8 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 13 Oct 2022 17:07:14 +0300 Subject: [PATCH 092/126] Update CONTRIBUTING.md --- CONTRIBUTING.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 162a785bda3..405ec8a3eeb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -131,7 +131,6 @@ Answering questions and addressing issues is a great way to start contributing t - [Issues](../../issues) - [Discussions](../../discussions) -- [StackOverflow](http://stackoverflow.com/questions/tagged/fabricjs) ## 🚀 Pull Requests From 59685afafdbb9de6a98c582368de21d3d9de735c Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 13 Oct 2022 17:14:20 +0300 Subject: [PATCH 093/126] contributing rearrange --- CONTRIBUTING.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 405ec8a3eeb..bf6f7466770 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -114,23 +114,25 @@ Improving **DOCS** is **SUPER** important for everyone.\ Even if it's a small fix it is valuable 💎... **don't hestitate**!\ We plan on building a brand new website, stay tuned. -### ~~`fabricjs.com`~~ (_deprecated_) +## ❤️ Helping Out -To develop fabric's site you need to clone [`fabricjs.com`](https://github.com/fabricjs/fabricjs.com) in the same parent folder of [`fabric.js`](https://github.com/fabricjs/fabric.js), so that `fabric.js` and `fabricjs.com` are siblings. -To start the dev server run `npm start:dev` inside the `fabricjs.com` directory (after installing dependecies). -If you are working on windows, check out [`jekyll` docs](https://jekyllrb.com/docs/installation/) for futher instructions. +Answering questions and addressing issues is a great way to start contributing to fabric. + +- [Issues](../../issues) +- [Discussions](../../discussions) -### ~~Adding a DEMO~~ (_deprecated_) +### Adding a DEMO Take a look at an existing [demo file](https://github.com/fabricjs/fabricjs.com/blob/gh-pages/posts/demos/_posts/2020-2-15-custom-control-render.md). -Create a new file in the same directory (`posts/demos/_posts`) and you're good to go. +Create a new file in the same directory (`posts/demos/_posts`) and follow [**developing the website**](#fabricjscom-deprecated). -## ❤️ Helping Out +### ~~`fabricjs.com`~~ (_deprecated_) -Answering questions and addressing issues is a great way to start contributing to fabric. +To develop fabric's site you need to clone [`fabricjs.com`](https://github.com/fabricjs/fabricjs.com) in the same parent folder of [`fabric.js`](https://github.com/fabricjs/fabric.js), so that `fabric.js` and `fabricjs.com` are siblings. -- [Issues](../../issues) -- [Discussions](../../discussions) +To start the dev server run `npm start:dev` inside the `fabricjs.com` directory (after installing dependencies). + +If you are working on windows, check out [`jekyll` docs](https://jekyllrb.com/docs/installation/) for further instructions or use [WSL](https://learn.microsoft.com/en-us/windows/wsl/). ## 🚀 Pull Requests From 461fd94b75d9bcdd2510e44ce46a01e15194b0ff Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 13 Oct 2022 17:51:13 +0300 Subject: [PATCH 094/126] refactor contributing expel links --- CONTRIBUTING.md | 170 ++++++++++++++++++++++++++---------------------- README.md | 13 ++-- 2 files changed, 98 insertions(+), 85 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bf6f7466770..bd9ff9991f3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,12 +1,15 @@ # 🎉 Contributing to Fabric 🥳 +This guide covers all you need to know from the start up. + +--- + ## 🧐 Questions?!? Questions are legit but that doesn't make them bug reports...\ Please refer to available resources (read below) and refrain from opening an issue in such a case. -To find an answer, first [search the repository](https://github.com/fabricjs/fabric.js/search?q=&type=Issues). It contains a lot of useful threads.\ -See [Links](#-links). +To find an answer, first [search the repository](https://github.com/fabricjs/fabric.js/search?q=&type=Issues). It contains a lot of useful threads. Questions might inspire you to [improve the docs](#-improving-docs) 🌈 Please do 🌟. @@ -39,79 +42,20 @@ If it's not a bug **OR** if you're unsure, start a 🤠 [discussion](https://git Check out [**Helping Out**](#%EF%B8%8F-helping-out). -## 🚧🎢 Developing 💡✨ - -### Getting Started - -#### Setting up locally - -1. 🍴 Fork the repository -1. 💾 Clone your 🍴 to your 💻 -1. Install dependencies 🕹️ `npm i --include=dev` -1. Next Up [Prototyping](#-prototyping) & [Testing](#-testing) - -#### Online - -[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/) - -Gitpod will start the [prototyping](#-prototyping) apps and expose them as endpoints. -`A service is available on port ...` popups will show up. - -### 🧭 Prototyping - -[`.codesandbox/templates`](.codesandbox/templates) contains templates for **INSTANT** out-of-the-box prototyping **👍 Try it out** - -```bash - -npm run sandbox build next [/path/to/sandbox] -> building next app at /path/to/sandbox - -npm run sandbox start -> starting dev server - -npm run sandbox deploy -> created codesandbox https://codesandbox.io/s/fgh476 - -npm run sandbox deploy -- --template node -> created codesandbox https://codesandbox.io/s/fgh476 - -npm run sandbox -- --help - -> Usage: fabric.js sandbox [options] [command] - -> sandbox commands - -Options: - -h, --help display help for command - -Commands: - deploy [options] [path] deploy a sandbox to codesandbox - build