{"id":15882463,"url":"https://github.com/ph1p/paintable-core","last_synced_at":"2025-04-02T05:43:55.596Z","repository":{"id":57134858,"uuid":"330498407","full_name":"ph1p/paintable-core","owner":"ph1p","description":"The paintable core module","archived":false,"fork":false,"pushed_at":"2021-01-27T22:40:59.000Z","size":1256,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T06:34:23.439Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"paintable-core-git-master.ph1p.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ph1p.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-17T22:21:46.000Z","updated_at":"2024-09-04T20:55:36.000Z","dependencies_parsed_at":"2022-09-04T10:01:07.934Z","dependency_job_id":null,"html_url":"https://github.com/ph1p/paintable-core","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fpaintable-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fpaintable-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fpaintable-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ph1p%2Fpaintable-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ph1p","download_url":"https://codeload.github.com/ph1p/paintable-core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246763861,"owners_count":20829798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-06T04:03:33.015Z","updated_at":"2025-04-02T05:43:55.568Z","avatar_url":"https://github.com/ph1p.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @paintable/core\n\nThis is the core module.\nAnd you can use it inside your webpage, if you want\n\n**Demo:** [https://paintable-core.vercel.app](https://paintable-core.vercel.app) (`npm run vercel-build`)\n\n```bash\nnpm install @paintable/core\n```\n\n### How to use\n\nImport library:\n\n```javascript\nimport { Paintable } from '@paintable/core';\n```\n\nor load from a CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@paintable/core\"\u003e\u003c/script\u003e\n```\n\nand create an instance with\n\n```javascript\nconst paintable = new Paintable(/*\n  OPTIONS { scope: 'the-name' }\n*/);\n```\n\nFirst of all, you need to know all about the `properties` and `methods` of the `paintable` instance.\n\n#### Instance properities\n\nThese are the properties of the paintable. You can pass them initially as an object to the constructor or/and set them with an appropriate `method`. For example if you want to set the `canvas` asynchronously.\n\n| Value/Key | Method         | Type              | Description                             | Default   | Required |\n| --------- | -------------- | ----------------- | --------------------------------------- | --------- | -------- |\n| scope     | setScope()     | string            | A unqiue \"scope\" name for your painting | paintable | -        |\n| color     | setColor()     | string            | Drawing color                           | #000000   | -        |\n| accuracy  | setAccuracy()  | number            | Line accuracy. higher = better curves   | 4         | -        |\n| lineWidth | setLineWidth() | number            | Size of line                            | 5         | -        |\n| threshold | setThreshold() | number            | Distance after line starts              | 0         | -        |\n| factor    | setFactor()    | number            | Sacling factor                          | 1         | -        |\n| isEraser  | setEraser()    | boolean           | Indicator if eraser is active           | false     | -        |\n| isActive  | setActive()    | boolean           | Indicator if paint is activated         | false     | -        |\n| canvas    | setCanvas()    | HTMLCanvasElement | The canvas element                      | null      | x        |\n\n#### Instance methods to handle the canvas\n\n| Method                                            | Description                                                                                                                                                                     | Only | Only if `isActive` is `true` |\n| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------- |\n| undo()                                            | Undo step                                                                                                                                                                       |      | x                            |\n| redo()                                            | Redo step                                                                                                                                                                       |      | x                            |\n| cancel()                                          | Cancel draw                                                                                                                                                                     |      | x                            |\n| save()                                            | Save the current image                                                                                                                                                          |      | x                            |\n| clear(`keepHistory` = `false`, `force` = `false`) | You can set a `keepHistory` to `true` if you want to keep everything previously painted in history. Set `force` to `true`, to clear everything no matter if it is active or not |      | /                            |\n\n#### Example\n\nThis is the smallest example. It uses a CDN to load the library.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003cbody\u003e\n    \u003ccanvas id=\"canvas\" height=\"500\" width=\"500\"\u003e\u003c/canvas\u003e\u003cbr /\u003e\n\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@paintable/core\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      // create instance\n      const paintable = new Paintable();\n\n      // set the canvas element\n      paintable.setCanvas(document.querySelector('#canvas'));\n\n      // activate paintable\n      paintable.setActive(true);\n\n      // OR with initial values --------------\n\n      // create instance\n      const paintable = new Paintable({\n        // used to identify the paintable\n        scope: 'a-unique-identifier',\n        // set the canvas element\n        canvas: document.querySelector('#canvas'),\n        color: '#000000',\n        active: true\n        accuracy: 6\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Overwrite methods\n\nYou can simply overwrite methods of the paintable, if you want.\nSome methods you may want to override: `moveEvent`, `startEvent` and `stopEvent`\n\n```javascript\nconst paintable = new Paintable();\n\n// the old event\nconst moveEvent = paintable.moveEvent;\n\n// overwrite it\npaintable.moveEvent = function () {\n  // call old event to ensure functionality\n  moveEvent.apply(this, arguments);\n\n  // your code\n};\n```\n\n### Development\n\n```bash\nnpm run install\nnpm run serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fph1p%2Fpaintable-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fph1p%2Fpaintable-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fph1p%2Fpaintable-core/lists"}