Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-paint - npm Package Compare versions
Comparing version 0.3.1 to 0.4.0
| { | ||
| "name": "vue-paint", | ||
| "version": "0.3.1", | ||
| "version": "0.4.0", | ||
| "private": false, | ||
@@ -35,8 +35,8 @@ "type": "module", | ||
| "scripts": { | ||
| "dev": "vite --config vite.demo-config.ts", | ||
| "build": "run-p type-check \"build-only {@}\" --", | ||
| "dev": "vite", | ||
| "build": "run-p type-check \"build:lib {@}\" --", | ||
| "preview": "vite preview", | ||
| "test:unit": "vitest --typecheck", | ||
| "build-only": "vite build", | ||
| "build:demo": "vite build --config vite.demo-config.ts", | ||
| "build:lib": "vite build --config vite.lib-config.ts", | ||
| "build:demo": "vite build", | ||
| "type-check": "vue-tsc --build --force", | ||
@@ -43,0 +43,0 @@ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" |
@@ -52,4 +52,44 @@ # vue-paint | ||
| ## Project Setup | ||
| ## Deeper concepts | ||
| ### Tools | ||
| vue-paint provides a bunch of tools that you can import. Only the tools imported will be available in the editor. Every tool may or may not produce a shape that is pushed to the [history](#history). | ||
| A shape is a plain javascript object that keeps all information needed about that specific action. The shapes can then be rendered by the tool if it is providing an ShapeSvgComponent. Some tools | ||
| may not render a component for every shape, but rather one per history. Take the crop tool for example, where it makes sense to only render one crop overlay per image. It is therefore providing a | ||
| ToolSvgComponent instead to handle that scenario once. | ||
| Note that you need to import the same tools every time you edit an image, otherwise there would be no way to render the shapes that might have already been pushed to the history. | ||
| ### History | ||
| The history of an image is basically every shape and action the user has made to the image in a sequence. So to undo a shape, you just pop the last item of the history array. This also means you can | ||
| push any new shapes or actions to the history programmatically like `history.push({ type: 'eraser', id: 'eraseline', targets: ['ka9v1sl'] })` (which will erase a shape earlier in the history with id ka9v1sl). | ||
| Since the user might want to undo the erase, it is actually just a new object pushed to the history that can be undone. The eraser tool is then responsible to do the actual cleanup in it's simplifyHistory | ||
| method. So if you ever want the simplified version of a history (where deleted shapes are actually removed, and moved objects are actually moved, and so on), you can use the composable useSimplifiedHistory like so: | ||
| ``` | ||
| const simplifiedHistory = useSimplifiedHistory({ history, tools, activeShape, includeActiveShape: false }) | ||
| ``` | ||
| Each editor writes to and reads from your ImageHistory, which is passed to the editor with `v-model:history="history"`. If you don't want the image to be editable, you can pass the history to the component VpImage | ||
| like this instead `<vp-image :history="history" :tools="tools" :width="1280" :height="720" />`. | ||
| ### Settings | ||
| The editor needs a settings object to work properly. This object contains information about the selected tool, current color and thickness. These values can be changed by the user through the toolbar, | ||
| or programmatically by changing the values respectively. Note that changing the settings does not affect the [history](#history) of the image, only new shapes. | ||
| ### Theming | ||
| To use the default theme you can import it like `import "vue-paint/themes/default.css"`. There's not that much styling going on, most of it relates to the toolbar. More themes are welcome, just open a PR! | ||
| If you want to skip the theme completely and write your own css, that's of course an option as well. | ||
| ### Saving and exporting images | ||
| There is a save button in the toolbar and it's completely up to you what you want to do with the save event. Either just store the [history](#history) somewhere to be picked up later, or export it to another format. | ||
| The image is based on svg, so the default export function would be exportSvg or downloadSvg, but you may also export it to a canvas. All available export functions are | ||
| [found here](https://github.com/robertrosman/vue-paint/tree/main/src/utils/export). | ||
| ## Development | ||
| ```sh | ||
@@ -56,0 +96,0 @@ npm install |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by85.7%
7129
- Number of lines in readme file
- increased by51.28%
118
No dependency changes