docs: erasing demo

[ShaMan123]

Adding DEMO for erasing

https://codepen.io/shaman123/pen/MWpEarw?editors=1010

For the codepen to work in the website the fabric build must include erasing.
I have no idea how to do that.

[asturur]

hi @ShaMan123 thanks for starting this.
So to have it running with the build you can simple add the file from the CDN in your codepen, i think we need to change this file a bit:
https://github.com/fabricjs/fabricjs.com/blob/gh-pages/_includes/codepen.html
in order to have fabricjs file unshifted to the list of scripts rather than pushed on top of it.
So that fabricJS is the first one loaded.

Here there is an explanation of how you can add an extra script to the codepen:

https://blog.codepen.io/documentation/prefill-embeds/

<div 
  class="codepen" 
  data-prefill='{
    "title": "React Basics Demo",
    "description": "Shows how to use React and React DOM to render a module with props onto the page",
    "tags": ["react", "react-docs-demo"],
    "html_classes": ["loading", "no-js"],
    "head": "&lt;meta name=&#x27;viewport&#x27; content=&#x27;width=device-width, initial-scale=1&#x27;&gt;",
    "stylesheets": "https://unpkg.com/[email protected]/normalize.css",
    "scripts": ["https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js", "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"]
  }'
  style="height: 400px; overflow: auto;"
  data-height="400" 
  data-theme-id="31205"
  data-default-tab="js,result" 
  data-editable="true"     
>

We should find the eraser file here:

https://unpkg.com/[email protected]/src/mixins/eraser_brush.mixin.js

[asturur]

Demo looks nice so far!

[ShaMan123]

DONE

[asturur]

i don't think so. the cdn is just a mirror of the npm package files

…

On Sun, 6 Jun 2021 at 11:50, Shachar ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In _includes/codepen.html <#306 (comment)>: > @@ -1,5 +1,5 @@ <script type="text/javascript"> - var currentScript = ***@***.***/dist/fabric.js'; + var currentScript = ***@***.***/dist/fabric.js'; BTW I was thinking of the CDN. Can it accept params? ***@***.***/dist/fabric.js?include=erasing — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#306 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJDQQCDDCCWSCJZBOYUKLLTRNAGDANCNFSM45V6FLXA> .

[ShaMan123]

What if the cdn will point to a file that appends scripts from the cdn?

const include=querySearchParams.get('include').split(',')
if(include.indexOf('erasing') {
    const script=docuemnt.createElement('script');
    script.src='https://unpkg.com/fabric@latest/src/mixins/eraser_brush.mixin.js'
   document.head.apprend(script)
}

This is in essence a dynamic custom build

[ShaMan123]

This can work with npm as well, using resolve and baseUrl

const include=querySearchParams.get('include').split(',')  // this will need a different approach for node
const baseUrl = ENV==='node'? require.resolve('fabric') : 'https://unpkg.com/fabric@latest';
scripts = [];
if(include.indexOf('erasing') {
   scripts.push(path.resolve(baseUrl,'/src/mixins/eraser_brush.mixin.js'))
}
scripts.map(path => {
if(ENV === 'node') {
    require(path);
  } else {
    const script=docuemnt.createElement('script');
    script.src= path;
    document.head.apprend(script)
  }
});

[asturur]

Hi @ShaMan123 sorry if i m being so late on this. I have not been able to do much lately.

[asturur]

i ll merge it now, if then there is something to fix, we can fix it after.