Spainter. Web browSer painter

DEMO spainter.akoidan.com

Integrating into you server:

• If you use bundler like webpack:

npm i spainter lines-logger

import Painter from 'spainter';
import 'spainter/index.sass'; // you can import index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
import {LoggerFactory} from 'lines-logger'; // yarn install lines-logger
const containerPainter = document.createElement('div');
document.body.appendChild(containerPainter);
const p = new Painter(containerPainter, {logger: new LoggerFactory().getLogger('spainter')});

If you use fontello in your server, you can generate single font importing no-fonts.sass, joining it with config.json

• If you use server rendering and cdn:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/index.css"/>
<div id="containerPainter"></div>
<script>
var p = new Painter(containerPainter);
</script>

Target the latest version instead of 1.2.10

• You can find an example on pychat

• Additional parameters

new Painter(containerPainer, {
  textClass: 'input-txt-class', // set class for all input[type=text] elements
  buttonClass: 'input-button-class', // set class for all input[type=button] elements
  rangeClass: 'input-range-class', // set class for all input[type=range]elements
  rangeFactory: (parentElement) => { // use this div for input[range], e.g. you can use material-design
    var input = document.createElement('input');
    input.type = 'range';
    // you can also do parentElement.
    return input;
  },
  onBlobPaste: function(blob) { // example of uploading image to server
    var formData = new FormData();
    formData.append('file', blob, 'specifyFileNameHereIfNeeded.png');
    fetch(`${host}/upload_file`, {
      method: "POST",
      body: formData,
    }).then(e => {
      console.log('server response', e);
    });
  },
  logger: { // better use lines-logger instead this constructions. If you don't wanna install it, use this ugly construction below
    debug: function log() {
      var args = Array.prototype.slice.call(arguments);
      var parts = args.shift().split('{}');
      var params = [window.console, '%c' + 'painter', 'red'];
      for (var i = 0; i < parts.length; i++) {
        params.push(parts[i]);
        if (typeof args[i] !== 'undefined') {
          params.push(args[i])
        }
      }
      return Function.prototype.bind.apply(console.log, params);
    }
  }
})

CAUTION

Spainter uses flexbox if you need to support browsers like IE 9 and below, you're free to create a pull request to remove flexbox.

Contribute

To build spainter you need

• yarn run build
• Open index.html in browser To modify icons use bash generate-fontello.sh. it will show you help. node sass requires a lot of libs to build as well as NODE max version of 14, you can use dockerfile inside docker directory if it's much of a pain.

I also intentionally leaved styles empty so you can easily override them according to your website design. If you want to prettify it a bit, you're wellcome to create a separate .css file with styles.

spainter.pychat.org

• update npm package to upload new code. It should be updatged manually with npm publish

• worked that upload/stores files with cloudflare workers

• update index.html manually from cloudflare dashboard -> workers & pages -> settings -> variables and secrets Cloudflare workers js file should contain all the css/html/js. There's no way to pull data from local fs according to this answer. This is why static files are served with cdnjs

• Go to main page, 'Worker & Pages' -> Create application, router spainter.pychat.org/* Note star in the end.

• Go to your dns settings and create 'A' record pointing to any ip with a proxy status.

put this envs for local debugging CF_API_KEY can be got from Profile -> Api Tokens -. Api Keys Global API KEY

yarn global add wrangler@2
export CF_API_KEY=
export [email protected]
wrangler dev

Now you can debug in Webstorm by pressing debug on package.json dev script. In ordet for debug to work switch to local mode by pressing l

CSS compile

Either use yarn build

Webstorm

For webstorm you can setup File-watcher -> sass

• Program: ~/.nvm/versions/node/v18.13.0/bin/node
• arguments: node_modules/.bin/node-sass index.sass index.css
• output files to refresh: index.css

Terraform

cd terraform
terraform apply
# enter token by instruction

Some actions are not doable via CF api. We have to do them manually: GO to CloudFlare Dashboard. From Home menu -> R2 -> Overview -> Select Spainter bucket -> Settings:

• Custom Domains -> Connect Domain -> img.spainter.akoidan.com -> Continue -> Connect Domain
• Object lifecycle rules -> Default Multipart Abort Rule -> Edit -> Set high number, e.g. 3650 days (10 years)
• CORS Policy -> Add Cors policy ->

{
  "AllowedOrigins": [
    "https://spainter.akoidan.com"
  ]
}