├── .eslintrc
├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── workflows
    │   ├── build.yml
    │   ├── codeql-analysis.yml
    │   └── pull-request.yml
├── .gitignore
├── .husky
    ├── .gitignore
    ├── commit-msg
    └── pre-push
├── LICENSE
├── README.md
├── assets
    ├── logo.png
    └── logo.svg
├── babel.config.js
├── build
    └── global.ts
├── commitlint.config.js
├── cypress.config.ts
├── cypress
    ├── assets
    │   ├── cat.jpg
    │   └── cat.small.jpg
    ├── e2e
    │   ├── crop
    │   │   └── crop.cy.ts
    │   ├── draw
    │   │   └── shapes
    │   │   │   ├── arrow.cy.ts
    │   │   │   ├── background.cy.ts
    │   │   │   ├── circle.cy.ts
    │   │   │   ├── ellipse.cy.ts
    │   │   │   ├── line.cy.ts
    │   │   │   ├── pencil.cy.ts
    │   │   │   ├── polygon.cy.ts
    │   │   │   ├── rect.cy.ts
    │   │   │   └── triangle.cy.ts
    │   ├── rotation
    │   │   └── rotation.cy.ts
    │   └── selection
    │   │   └── selection.cy.ts
    ├── fixtures
    │   └── lib.json
    ├── plugins
    │   └── index.js
    ├── support
    │   ├── commands.js
    │   ├── e2e.js
    │   ├── index.d.ts
    │   └── utils
    │   │   ├── draw.ts
    │   │   ├── get-editor.ts
    │   │   ├── load-asset.ts
    │   │   ├── load-image.ts
    │   │   └── mouse-trigger.ts
    └── tsconfig.json
├── jest.config.ts
├── jest
    ├── fixtures
    │   └── json-exported.json
    ├── setup.ts
    └── utils
    │   ├── create-editor
    │       └── index.ts
    │   ├── create-element
    │       └── index.ts
    │   └── create-shapes
    │       └── index.ts
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
    ├── Background
    │   └── index.ts
    ├── Board
    │   └── index.ts
    ├── Cropper
    │   ├── BaseCropper
    │   │   └── index.ts
    │   ├── FixedCircularCropper
    │   │   └── index.ts
    │   ├── FixedCropper
    │   │   └── index.ts
    │   ├── FixedRectangleCropper
    │   │   └── index.ts
    │   ├── FlexibleCircularCropper
    │   │   └── index.ts
    │   ├── FlexibleCropper
    │   │   └── index.ts
    │   ├── FlexibleRectangleCropper
    │   │   └── index.ts
    │   └── index.ts
    ├── Events
    │   ├── index.test.ts
    │   └── index.ts
    ├── Export
    │   ├── Image
    │   │   └── index.ts
    │   ├── Json
    │   │   └── index.ts
    │   └── index.ts
    ├── Filter
    │   └── index.ts
    ├── Flip
    │   └── index.ts
    ├── History
    │   ├── index.test.ts
    │   └── index.ts
    ├── Import
    │   └── index.ts
    ├── Rotation
    │   └── index.ts
    ├── Selection
    │   └── index.ts
    ├── SnapGrid
    │   └── index.ts
    ├── Tag
    │   └── index.ts
    ├── constants
    │   └── index.ts
    ├── defaultSettings.ts
    ├── grouping
    │   ├── Groups
    │   │   └── index.ts
    │   └── GroupsManager
    │   │   └── index.ts
    ├── index.all.ts
    ├── index.node.all.ts
    ├── index.ts
    ├── shape
    │   ├── ShapeDrawer
    │   │   └── index.ts
    │   ├── ShapeModel
    │   │   └── index.ts
    │   ├── drawers
    │   │   ├── ArrowDrawer
    │   │   │   └── index.ts
    │   │   ├── CircleDrawer
    │   │   │   └── index.ts
    │   │   ├── EllipseDrawer
    │   │   │   └── index.ts
    │   │   ├── ImageDrawer
    │   │   │   └── index.ts
    │   │   ├── LabelDrawer
    │   │   │   └── index.ts
    │   │   ├── LineDrawer
    │   │   │   └── index.ts
    │   │   ├── PencilDrawer
    │   │   │   └── index.ts
    │   │   ├── PolygonDrawer
    │   │   │   └── index.ts
    │   │   ├── RectDrawer
    │   │   │   └── index.ts
    │   │   ├── SvgDrawer
    │   │   │   └── index.ts
    │   │   ├── TextDrawer
    │   │   │   └── index.ts
    │   │   └── TriangleDrawer
    │   │   │   └── index.ts
    │   └── models
    │   │   ├── ArrowModel
    │   │       └── index.ts
    │   │   ├── CircleModel
    │   │       └── index.ts
    │   │   ├── EllipseModel
    │   │       └── index.ts
    │   │   ├── GroupModel
    │   │       └── index.ts
    │   │   ├── ImageModel
    │   │       └── index.ts
    │   │   ├── LabelModel
    │   │       └── index.ts
    │   │   ├── LineModel
    │   │       └── index.ts
    │   │   ├── PolygonModel
    │   │       └── index.ts
    │   │   ├── RectModel
    │   │       └── index.ts
    │   │   ├── SvgModel
    │   │       └── index.ts
    │   │   ├── TextModel
    │   │       └── index.ts
    │   │   └── TriangleModel
    │   │       └── index.ts
    ├── types
    │   ├── background.ts
    │   ├── common.ts
    │   ├── cropper.ts
    │   ├── drawing.ts
    │   ├── events.ts
    │   ├── export.ts
    │   ├── filters.ts
    │   ├── group.ts
    │   ├── history.ts
    │   ├── index.ts
    │   ├── settings.ts
    │   ├── shapes.ts
    │   └── snap-grid.ts
    └── utils
    │   ├── create-image-from-url
    │       └── index.ts
    │   ├── degree-to-radian
    │       ├── index.test.ts
    │       └── index.ts
    │   ├── detect-environment
    │       └── index.ts
    │   ├── get-center-point
    │       ├── index.test.ts
    │       └── index.ts
    │   ├── get-points-distance
    │       ├── index.test.ts
    │       └── index.ts
    │   ├── get-rotated-point
    │       ├── index.test.ts
    │       └── index.ts
    │   ├── html-to-text
    │       ├── index.test.ts
    │       └── index.ts
    │   ├── image-to-url
    │       ├── index.test.ts
    │       └── index.ts
    │   ├── merge-settings
    │       ├── index.test.ts
    │       └── index.ts
    │   ├── omit
    │       ├── index.test.ts
    │       └── index.ts
    │   └── rotate-around-center
    │       ├── index.test.ts
    │       └── index.ts
├── tests
    └── integration
    │   ├── background
    │       └── index.test.ts
    │   ├── crop
    │       └── index.test.ts
    │   ├── export
    │       └── index.test.ts
    │   ├── filter
    │       └── index.test.ts
    │   ├── flip
    │       └── index.test.ts
    │   ├── grouping
    │       ├── grouping-core.test.ts
    │       ├── grouping-flip.test.ts
    │       ├── grouping-history.test.ts
    │       └── grouping-rotation.test.ts
    │   ├── import
    │       └── index.test.ts
    │   ├── node-env
    │       └── index.test.ts
    │   ├── rotation
    │       └── index.test.ts
    │   ├── selection
    │       └── index.test.ts
    │   ├── shapes
    │       ├── image
    │       │   └── index.test.ts
    │       ├── label
    │       │   └── index.test.ts
    │       └── triangle
    │       │   └── index.test.ts
    │   ├── snap-grid
    │       └── index.test.ts
    │   └── tag
    │       └── index.test.ts
├── tsconfig.json
└── typedoc.json


/.eslintrc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "env": {
  3 |     "browser": true,
  4 |     "es2020": true
  5 |   },
  6 |   "extends": [
  7 |     "prettier",
  8 |     "plugin:prettier/recommended",
  9 |     "plugin:import/errors",
 10 |     "plugin:import/warnings",
 11 |     "plugin:import/typescript"
 12 |   ],
 13 |   "parser": "@typescript-eslint/parser",
 14 |   "parserOptions": {
 15 |     "ecmaFeatures": {},
 16 |     "ecmaVersion": 11,
 17 |     "sourceType": "module"
 18 |   },
 19 |   "plugins": [
 20 |     "import",
 21 |     "prettier",
 22 |     "@typescript-eslint"
 23 |   ],
 24 |   "settings": {
 25 |     "import/resolver": {
 26 |       "node": {
 27 |         "import/extensions": [
 28 |           ".js",
 29 |           ".ts",
 30 |           ".d.ts",
 31 |           ".json"
 32 |         ]
 33 |       },
 34 |       "typescript": {}
 35 |     }
 36 |   },
 37 |   "rules": {
 38 |     "prettier/prettier": [
 39 |       "error",
 40 |       {
 41 |         "semi": false,
 42 |         "singleQuote": true,
 43 |         "printWidth": 80,
 44 |         "trailingComma": "none",
 45 |         "arrowParens": "avoid",
 46 |         "endOfLine": "auto"
 47 |       }
 48 |     ],
 49 |     "import/prefer-default-export": "off",
 50 |     "import/extensions": "off",
 51 |     "import/no-unresolved": [
 52 |       2,
 53 |       {
 54 |         "commonjs": true,
 55 |         "amd": true
 56 |       }
 57 |     ],
 58 |     "no-shadow": "off",
 59 |     "no-underscore-dangle": "off",
 60 |     "import/no-extraneous-dependencies": "off",
 61 |     "no-console": "off",
 62 |     "func-names": "off",
 63 |     "import/named": 2,
 64 |     "import/namespace": 2,
 65 |     "import/default": 2,
 66 |     "import/export": 2,
 67 |     "@typescript-eslint/member-ordering": [
 68 |       2,
 69 |       {}
 70 |     ],
 71 |     "import/order": [
 72 |       "error",
 73 |       {
 74 |         "newlines-between": "always-and-inside-groups",
 75 |         "groups": [
 76 |           "builtin",
 77 |           "external",
 78 |           "internal",
 79 |           [
 80 |             "sibling",
 81 |             "parent"
 82 |           ],
 83 |           "index"
 84 |         ]
 85 |       }
 86 |     ]
 87 |   },
 88 |   "overrides": [
 89 |     {
 90 |       "files": [
 91 |         "**/*.ts",
 92 |         "**/*.tsx"
 93 |       ],
 94 |       "rules": {
 95 |         "no-unused-vars": [
 96 |           "off"
 97 |         ],
 98 |         "no-undef": [
 99 |           "off"
100 |         ],
101 |         "@typescript-eslint/no-unused-vars": [
102 |           2,
103 |           {
104 |             "args": "none"
105 |           }
106 |         ]
107 |       }
108 |     },
109 |     {
110 |       "files": [
111 |         "**/*.d.ts"
112 |       ]
113 |     }
114 |   ]
115 | }


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: https://revolut.me/raminmo
2 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: bug
 6 | assignees: raminious
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **How To Reproduce**
14 | Provide the steps to reproduce the bug.
15 | 
16 | **Expected behavior**
17 | A clear and concise description of what you expected to happen.
18 | 
19 | **Screenshots**
20 | If applicable, add screenshots or a short video recording to help explain your problem.
21 | 
22 | **Additional context**
23 | Add any other context about the problem here.
24 | 
25 | **Version**
26 | Specify the version.
27 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: feature
 6 | assignees: raminious
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is.
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Test/Build/Publish
 2 | on:
 3 |   push:
 4 |     branches: [ master ]
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |     - uses: actions/checkout@v2
10 |     - uses: actions/setup-node@v1
11 |       with:
12 |         node-version: 18
13 |     - run: npm install
14 |     - run: npm run typecheck
15 |     - run: npm test
16 |     - run: npm run build
17 |     - run: npm run coverage
18 |     - uses: JS-DevTools/npm-publish@v1
19 |       with:
20 |         token: ${{ secrets.NPM_TOKEN }}
21 |     - uses: actions/upload-artifact@v2
22 |       with:
23 |         name: Pikaso Bundles
24 |         path: |
25 |           umd
26 |           lib
27 |           esm
28 |     - uses: codacy/codacy-coverage-reporter-action@v1
29 |       with:
30 |         name: Codacy Coverage Reporter
31 |         coverage-reports: coverage/lcov.info
32 |         project-token: ${{ secrets.CODACY_TOKEN }}


--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
 1 | name: "CodeQL"
 2 | on:
 3 |   push:
 4 |     branches: [ master ]
 5 |   pull_request:
 6 |     branches: [ master ]
 7 |   schedule:
 8 |     - cron: '18 0 * * 3'
 9 | jobs:
10 |   analyze:
11 |     name: Analyze
12 |     runs-on: ubuntu-latest
13 |     strategy:
14 |       fail-fast: false
15 |       matrix:
16 |         language: [ 'javascript' ]
17 |     steps:
18 |     - name: Checkout repository
19 |       uses: actions/checkout@v2
20 |     - name: Initialize CodeQL
21 |       uses: github/codeql-action/init@v1
22 |       with:
23 |         languages: ${{ matrix.language }}
24 |     - name: Autobuild
25 |       uses: github/codeql-action/autobuild@v1
26 |     - name: Perform CodeQL Analysis
27 |       uses: github/codeql-action/analyze@v1
28 | 


--------------------------------------------------------------------------------
/.github/workflows/pull-request.yml:
--------------------------------------------------------------------------------
 1 | name: Pull Request
 2 | on:
 3 |   pull_request:
 4 |     branches: [ master ]
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |     - uses: actions/checkout@v2
10 |     - uses: actions/setup-node@v1
11 |       with:
12 |         node-version: 14
13 |     - run: npm install
14 |     - run: npm run typecheck
15 |     - run: npm test
16 |     - run: npm run build


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | .cache/
 3 | .nyc_output
 4 | coverage/
 5 | dist/*
 6 | !dist/index.html
 7 | node_modules/
 8 | *.log
 9 | lib
10 | cjs
11 | esm
12 | es
13 | umd
14 | cypress/videos
15 | instrumented
16 | coverage
17 | api
18 | 
19 | 
20 | # OS generated files
21 | .DS_Store
22 | .DS_Store?
23 | ._*
24 | .Spotlight-V100
25 | .Trashes
26 | ehthumbs.db
27 | Thumbs.db
28 | pikaso.min.js
29 | 


--------------------------------------------------------------------------------
/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname $0)/_/husky.sh"
3 | 
4 | npm run commitlint -- --edit $1


--------------------------------------------------------------------------------
/.husky/pre-push:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname $0)/_/husky.sh"
3 | 
4 | npm run typecheck && npm test


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Ramin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | <div align="center">
  4 |   <img src="https://user-images.githubusercontent.com/334716/158897748-f5cd569b-64b6-4551-be30-2d020b9efbde.svg" />
  5 |   
  6 |   <h3>Pikaso</h3>
  7 |   <p>Seamless, Fully-typed and Fully-tested HTML5 Canvas Library</p>
  8 |   <a href="https://pikaso.app"><strong>Learn more »</strong></a>
  9 |   <br />
 10 |   <br />
 11 |   
 12 |   <a href="https://pikaso.app">Website</a> ·
 13 |   <a href="https://pikaso.app/api/classes/Pikaso.html">API Documentation</a> ·
 14 |   <a href="https://github.com/pikasojs/pikaso/issues">Issues</a> . 
 15 |   <a href="https://github.com/pikasojs/pikaso/discussions">Discussion</a>
 16 |   
 17 |   <br />
 18 |   <br />
 19 |   
 20 |   ![Language](https://badgen.net/badge/icon/typescript?icon=typescript&label=Language)
 21 |   ![Test, Build and Publish](https://github.com/pikasojs/pikaso/workflows/Test/Build/Publish/badge.svg)
 22 |   ![npm](https://badgen.net/npm/v/pikaso)
 23 |   ![bundle](https://badgen.net/bundlephobia/minzip/pikaso)
 24 |   [![quality](https://app.codacy.com/project/badge/Grade/f16b7c57dbbd4cdfa02b05f5ca04750a)](https://www.codacy.com/gh/pikasojs/pikaso/dashboard)
 25 |   [![coverage](https://app.codacy.com/project/badge/Coverage/f16b7c57dbbd4cdfa02b05f5ca04750a)](https://www.codacy.com/gh/pikasojs/pikaso/dashboard) 
 26 |   <br />
 27 |   <br />
 28 | </div>
 29 | 
 30 | 
 31 | 
 32 | ![2](https://user-images.githubusercontent.com/334716/158895397-e23b5d01-fd63-4db4-8f5d-174d9ddcac33.gif)
 33 | 
 34 | ## Install   
 35 | 
 36 | #### NPM
 37 | 
 38 | Pikaso provides both ES module and CommonJS bundles, which is easy to use with the popular bundlers
 39 | 
 40 | ```js
 41 | npm install pikaso --save
 42 | ```
 43 | 
 44 | #### Yarn
 45 | ```js
 46 | yarn add pikaso
 47 | ```
 48 | 
 49 | 
 50 | #### <script> tag
 51 | 
 52 | Pikaso also supports UMD loading
 53 | 
 54 | ```js
 55 | <srcipt src="https://cdn.jsdelivr.net/npm/pikaso@latest/umd/pikaso.min.js" type="text/javascript" />
 56 | ```
 57 | 
 58 | 
 59 | ## Getting Started
 60 | 
 61 | ```js
 62 | import Pikaso from 'pikaso'
 63 | 
 64 | const editor = new Pikaso({
 65 |   container: document.getElementById('<YOUR_DIV_ID>'),
 66 | })
 67 | ```
 68 | 
 69 | ## React 
 70 | This is possible to directly import the library or reuse the official hook   
 71 | https://github.com/pikasojs/pikaso-react-hook
 72 | 
 73 | ## NodeJs
 74 | Pikaso comes with support for NodeJs out of the box.   
 75 | Using Pikaso in a NodeJs environment is similar to using it in a browser.   
 76 | 
 77 | [https://pikaso.app/#/advanced/nodejs](https://pikaso.app/#/advanced/nodejs)
 78 | 
 79 | 
 80 | 
 81 | ## Features
 82 | 
 83 | - [Fully Typed](https://github.com/pikasojs/pikaso/tree/master/src/types)
 84 | - [Global Configurations](https://pikaso.app/#/getting-started/configuration)
 85 | - [Fully Customizable Cropping](https://pikaso.app/#/core/cropper)
 86 | - [Rotation and Transformation](https://pikaso.app/#/core/rotation)
 87 | - [Shape and FreeStyle Drawing](https://pikaso.app/#/core/drawing)
 88 | - [Built-in Shapes](https://pikaso.app/#/core/shapes)
 89 | - [Groups](https://pikaso.app/#/core/groups)
 90 | - [Interactive Text Editing](https://pikaso.app/#/core/label)
 91 | - [Customizable Shapes](https://pikaso.app/#/advanced/create-custom-shapes)
 92 | - [Image and SVG](https://pikaso.app/#/core/image)
 93 | - [Background Image](https://pikaso.app/#/core/background)
 94 | - [Event Management](https://pikaso.app/#/core/events)
 95 | - [State Management (Undo/Redo)](https://pikaso.app/#/core/history)
 96 | - [Flipping  ](https://pikaso.app/#/core/flip)
 97 | - [Interactive Selection Management](https://pikaso.app/#/core/selection)
 98 | - [Snap to Grid](https://pikaso.app/#/core/snap-grid)
 99 | - [Measurement Tag](https://pikaso.app/#/core/measurement-tag)
100 | - [Export to PNG and JPEG](https://pikaso.app/#/core/import-export)
101 | - [Import/Export JSON](https://pikaso.app/#/core/import-export)
102 | - [Filters](https://pikaso.app/#/core/filters)
103 | - [Custom Filters](https://pikaso.app/#/advanced/create-custom-filters)
104 | - [NodeJs](https://pikaso.app/#/advanced/nodejs)
105 | 
106 |   
107 | ## Documentation
108 | [Full Documentation](https://pikaso.app)
109 |   
110 | ## API references
111 | [Full API references](https://pikaso.app/api)
112 |   
113 | ## Demos
114 | [React Setup](https://codesandbox.io/s/pikaso-react-hook-example-i0uwg)   
115 | [Vue 3 Setup](https://codesandbox.io/s/vue3-example-o3cig)   
116 | [Svelte Setup](https://svelte.dev/repl/b3e372de4b404f67b70ce047623f0efc?version=3.46.4)    
117 | [All Demos](https://pikaso.app)
118 | 
119 |   
120 | ### Pikaso vs. Konva
121 | [Konva](https://konvajs.org/docs/index.html) is a great HTML5 Canvas TypeScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.  
122 | 
123 | Pikaso is built on top of Konva to provide a couple of advanced features that Konva doesn't support out of the box.
124 | 
125 | | Library |  |
126 | | - | - |
127 | | HTML5 Canvas | Provides low level APIs to draw graphics |
128 | | Konva | Provides Shapes, Dragging, Styling, Events, Transformation and Filters features to HTML5 canvas  |
129 | | Pikaso | Adds a lot of Simplicity and provides Free style and Shape Drawing, Advanced Shapes and Groups, State Management (Undo/Redo/Reset), JSON Import/Export, Text Editing, Cropping, Rotation, Transformation, Event Manager, Snap to Grid, Advanced Transformation and Selection, Flipping, Background Image and Background Overlay management, Filter Management to Konva |
130 | 
131 | 
132 | ## Supporters
133 | [![Stargazers repo roster for @pikasojs/pikaso](https://reporoster.com/stars/pikasojs/pikaso)](https://github.com/pikasojs/pikaso/stargazers)
134 | 
135 |   
136 | ## License
137 | According to the terms of the [MIT license](LICENSE), Pikaso is freely distributable.
138 | 
139 | [![FOSSA Status][fossa-large-image]][fossa-large-url]
140 |   
141 | [fossa-large-image]: https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fpikasojs%2Fpikaso.svg?type=large
142 | [fossa-large-url]: https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fpikasojs%2Fpikaso?ref=badge_large
143 | 


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pikasojs/pikaso/5e59981d38e2f627a9133543397a48fd6a67702f/assets/logo.png


--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 3 | 	 viewBox="0 0 1200 1200">
 4 | 		<path fill="#2a033a" d="M593.3,0H294.2h-41C114.2,0,0,112.9,0,251.9v694.9c0,139,112.9,253.2,253.2,253.2h41V469.1
 5 | 				C294.3,261.8,415.9,83.1,593.3,0z"/>
 6 | 	<path fill="#2a033a"  d="M858.9,93.1c-14.9-1.2-31-2.5-45.9-2.5c-208.5,0-378.5,170-378.5,378.5v65.8v328.9H813
 7 | 				c213.4,0,387.2-173.7,387.2-387.2C1198.9,280.4,1051.2,116.6,858.9,93.1z" />
 8 | 
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     test: {
4 |       presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/build/global.ts:
--------------------------------------------------------------------------------
1 | if (global === undefined) {
2 |   var global = globalThis || window || {}
3 | }
4 | 
5 | export default global
6 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@commitlint/config-conventional']
3 | }
4 | 


--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'cypress'
2 | 
3 | export default defineConfig({
4 |   e2e: {
5 |     // baseUrl: 'http://localhost:1234',
6 |     video: false
7 |   }
8 | })
9 | 


--------------------------------------------------------------------------------
/cypress/assets/cat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pikasojs/pikaso/5e59981d38e2f627a9133543397a48fd6a67702f/cypress/assets/cat.jpg


--------------------------------------------------------------------------------
/cypress/assets/cat.small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pikasojs/pikaso/5e59981d38e2f627a9133543397a48fd6a67702f/cypress/assets/cat.small.jpg


--------------------------------------------------------------------------------
/cypress/e2e/crop/crop.cy.ts:
--------------------------------------------------------------------------------
  1 | /// <reference types="cypress" />
  2 | /// <reference path="../../support/index.d.ts" />
  3 | 
  4 | describe('Crop', () => {
  5 |   beforeEach(() => {
  6 |     cy.reload()
  7 |   })
  8 | 
  9 |   it('should create a flexible-rect cropper and crop the board', () => {
 10 |     cy.getEditor().then(editor => {
 11 |       editor.shapes.circle.insert({
 12 |         x: 300,
 13 |         y: 200,
 14 |         radius: 150,
 15 |         fill: 'red'
 16 |       })
 17 |       editor.cropper.start({
 18 |         x: 0,
 19 |         y: 0,
 20 |         width: 300,
 21 |         height: 300
 22 |       })
 23 |       editor.cropper.crop()
 24 |       expect(editor.board.stage.attrs.width).equal(500)
 25 |       expect(editor.board.stage.attrs.height).equal(500)
 26 |     })
 27 |   })
 28 | 
 29 |   it('should create a fixed-rect cropper and crop the board', () => {
 30 |     cy.getEditor().then(editor => {
 31 |       editor.shapes.circle.insert({
 32 |         x: 300,
 33 |         y: 200,
 34 |         radius: 150,
 35 |         fill: 'red'
 36 |       })
 37 | 
 38 |       editor.cropper.start({
 39 |         x: 0,
 40 |         y: 0,
 41 |         width: 300,
 42 |         height: 300,
 43 |         fixed: true
 44 |       })
 45 | 
 46 |       editor.cropper.crop()
 47 | 
 48 |       expect(editor.board.stage.attrs.width).equal(500)
 49 |       expect(editor.board.stage.attrs.height).equal(500)
 50 |     })
 51 |   })
 52 | 
 53 |   it('should create a flexible-circular cropper and crop the board', () => {
 54 |     cy.getEditor().then(editor => {
 55 |       editor.shapes.circle.insert({
 56 |         x: 300,
 57 |         y: 200,
 58 |         radius: 150,
 59 |         fill: 'red'
 60 |       })
 61 | 
 62 |       editor.cropper.start({
 63 |         x: 0,
 64 |         y: 0,
 65 |         radius: 200,
 66 |         circular: true
 67 |       })
 68 | 
 69 |       editor.cropper.crop()
 70 | 
 71 |       expect(editor.board.stage.attrs.width).equal(500)
 72 |       expect(editor.board.stage.attrs.height).equal(500)
 73 |     })
 74 |   })
 75 | 
 76 |   it('should create a fixed-circular cropper and crop the board', () => {
 77 |     cy.getEditor().then(editor => {
 78 |       editor.shapes.circle.insert({
 79 |         x: 300,
 80 |         y: 200,
 81 |         radius: 150,
 82 |         fill: 'red'
 83 |       })
 84 | 
 85 |       editor.cropper.start({
 86 |         x: 0,
 87 |         y: 0,
 88 |         radius: 200,
 89 |         circular: true,
 90 |         fixed: true
 91 |       })
 92 | 
 93 |       editor.cropper.crop()
 94 | 
 95 |       expect(editor.board.stage.attrs.width).equal(500)
 96 |       expect(editor.board.stage.attrs.height).equal(500)
 97 |     })
 98 |   })
 99 | })
100 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/arrow.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Arrow', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should insert an arrow', () => {
10 |     cy.getEditor().then(editor => {
11 |       expect(editor.board.activeShapes.length).equal(0)
12 | 
13 |       editor.shapes.arrow.insert({
14 |         stroke: 'red',
15 |         points: [50, 50, 400, 400],
16 |         strokeWidth: 15
17 |       })
18 | 
19 |       expect(editor.board.activeShapes.length).equal(1)
20 |     })
21 |   })
22 | 
23 |   it('should draw an arrow', () => {
24 |     cy.getEditor().then(editor => {
25 |       editor.shapes.arrow.draw({
26 |         fill: '#ccc'
27 |       })
28 | 
29 |       cy.draw([300, 300], [400, 400]).then(() => {
30 |         expect(editor.board.activeShapes.length).equal(1)
31 |       })
32 |     })
33 |   })
34 | 
35 |   it('should select the arrow after creation', () => {
36 |     cy.getEditor().then(editor => {
37 |       const arrow = editor.shapes.arrow.insert({
38 |         stroke: 'red',
39 |         points: [50, 50, 400, 400],
40 |         strokeWidth: 15
41 |       })
42 | 
43 |       cy.mouseTrigger('mousedown', [200, 200], {
44 |         delay: 1000
45 |       }).then(() => {
46 |         expect(editor.selection.transformer.attrs.visible).equal(true)
47 | 
48 |         expect(
49 |           editor.board.selection.transformer.nodes().indexOf(arrow.node)
50 |         ).equal(0)
51 |       })
52 |     })
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/background.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Background', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should change the background color', () => {
10 |     cy.getEditor().then(editor => {
11 |       editor.board.background.fill('rgba(255, 0, 0, 0.5)')
12 | 
13 |       expect(editor.board.background.overlay.node.attrs.fill).equal(
14 |         'rgba(255, 0, 0, 0.5)'
15 |       )
16 |     })
17 |   })
18 | 
19 |   it('should change the background image', () => {
20 |     cy.loadImage('cat.jpg').then(url => {
21 |       cy.getEditor().then(editor => {
22 |         editor.board.background.setImageFromUrl(url).then(() => {
23 |           expect(editor.board.background.image.node.attrs.image.src).equal(url)
24 |         })
25 |       })
26 |     })
27 |   })
28 | })
29 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/circle.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Circle', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should insert a circle', () => {
10 |     cy.getEditor().then(editor => {
11 |       expect(editor.board.activeShapes.length).equal(0)
12 | 
13 |       editor.shapes.circle.insert({
14 |         x: 50,
15 |         y: 50,
16 |         radius: 20,
17 |         fill: 'red'
18 |       })
19 | 
20 |       expect(editor.board.activeShapes.length).equal(1)
21 |     })
22 |   })
23 | 
24 |   it('should draw a circle', () => {
25 |     cy.getEditor().then(editor => {
26 |       editor.shapes.circle.draw({
27 |         fill: '#ccc'
28 |       })
29 | 
30 |       cy.draw([300, 300], [400, 400]).then(() => {
31 |         expect(editor.board.activeShapes.length).equal(1)
32 |       })
33 |     })
34 |   })
35 | 
36 |   it('should select the circle after creation', () => {
37 |     cy.getEditor().then(editor => {
38 |       const circle = editor.shapes.circle.insert({
39 |         x: 200,
40 |         y: 200,
41 |         radius: 100,
42 |         fill: '#ccc'
43 |       })
44 | 
45 |       cy.mouseTrigger('mousedown', [200, 200], {
46 |         delay: 1000
47 |       }).then(() => {
48 |         expect(editor.selection.transformer.attrs.visible).equal(true)
49 | 
50 |         expect(
51 |           editor.board.selection.transformer.nodes().indexOf(circle.node)
52 |         ).equal(0)
53 |       })
54 |     })
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/ellipse.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Ellipse', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should insert a ellipse', () => {
10 |     cy.getEditor().then(editor => {
11 |       expect(editor.board.activeShapes.length).equal(0)
12 | 
13 |       editor.shapes.ellipse.insert({
14 |         x: 50,
15 |         y: 50,
16 |         radiusX: 20,
17 |         radiusY: 30,
18 |         fill: 'red'
19 |       })
20 | 
21 |       expect(editor.board.activeShapes.length).equal(1)
22 |     })
23 |   })
24 | 
25 |   it('should draw a ellipse', () => {
26 |     cy.getEditor().then(editor => {
27 |       editor.shapes.ellipse.draw({
28 |         fill: '#ccc'
29 |       })
30 | 
31 |       cy.draw([300, 300], [400, 400]).then(() => {
32 |         expect(editor.board.activeShapes.length).equal(1)
33 |       })
34 |     })
35 |   })
36 | 
37 |   it('should select the ellipse after creation', () => {
38 |     cy.getEditor().then(editor => {
39 |       const ellipse = editor.shapes.ellipse.insert({
40 |         x: 200,
41 |         y: 200,
42 |         radiusX: 100,
43 |         radiusY: 50,
44 |         fill: '#ccc'
45 |       })
46 | 
47 |       cy.mouseTrigger('mousedown', [200, 200], {
48 |         delay: 1000
49 |       }).then(() => {
50 |         expect(editor.selection.transformer.attrs.visible).equal(true)
51 |         expect(
52 |           editor.board.selection.transformer.nodes().indexOf(ellipse.node)
53 |         ).equal(0)
54 |       })
55 |     })
56 |   })
57 | })
58 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/line.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Line', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should insert an line', () => {
10 |     cy.getEditor().then(editor => {
11 |       expect(editor.board.activeShapes.length).equal(0)
12 | 
13 |       editor.shapes.line.insert({
14 |         stroke: 'red',
15 |         points: [50, 50, 400, 400],
16 |         strokeWidth: 15
17 |       })
18 | 
19 |       expect(editor.board.activeShapes.length).equal(1)
20 |     })
21 |   })
22 | 
23 |   it('should draw an line', () => {
24 |     cy.getEditor().then(editor => {
25 |       editor.shapes.line.draw({
26 |         fill: '#ccc'
27 |       })
28 | 
29 |       cy.draw([300, 300], [400, 400]).then(() => {
30 |         expect(editor.board.activeShapes.length).equal(1)
31 |       })
32 |     })
33 |   })
34 | 
35 |   it('should select the line after creation', () => {
36 |     cy.getEditor().then(editor => {
37 |       const line = editor.shapes.line.insert({
38 |         stroke: 'red',
39 |         points: [50, 50, 400, 400],
40 |         strokeWidth: 15
41 |       })
42 | 
43 |       cy.mouseTrigger('mousedown', [200, 200], {
44 |         delay: 1000
45 |       }).then(() => {
46 |         expect(editor.selection.transformer.attrs.visible).equal(true)
47 | 
48 |         expect(
49 |           editor.board.selection.transformer.nodes().indexOf(line.node)
50 |         ).equal(0)
51 |       })
52 |     })
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/pencil.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Pencil', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should free draw a line', () => {
10 |     cy.getEditor().then(editor => {
11 |       editor.shapes.pencil.draw({
12 |         stroke: 'red',
13 |         strokeWidth: 10
14 |       })
15 | 
16 |       return cy
17 |         .get('canvas')
18 |         .trigger('mousedown', {
19 |           clientX: 100,
20 |           clientY: 100
21 |         })
22 |         .trigger('mousemove', {
23 |           clientX: 110,
24 |           clientY: 110
25 |         })
26 |         .trigger('mousemove', {
27 |           clientX: 100,
28 |           clientY: 210
29 |         })
30 |         .trigger('mousemove', {
31 |           clientX: 500,
32 |           clientY: 300
33 |         })
34 |         .trigger('mouseup', { force: true })
35 |         .then(() => {
36 |           expect(editor.board.activeShapes.length).equal(1)
37 |         })
38 |     })
39 |   })
40 | 
41 |   it('should continue free drawing after finishing the previous drawing', () => {
42 |     cy.getEditor().then(editor => {
43 |       editor.shapes.pencil.draw({
44 |         stroke: 'red',
45 |         strokeWidth: 15
46 |       })
47 | 
48 |       cy.draw([100, 100], [500, 500]).then(() => {
49 |         cy.mouseTrigger('mousedown', [200, 200], {
50 |           delay: 1000
51 |         }).then(() => {
52 |           expect(editor.selection.transformer.attrs.visible).equal(false)
53 |         })
54 |       })
55 |     })
56 |   })
57 | })
58 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/polygon.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Polygon', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should insert a polygon', () => {
10 |     cy.getEditor().then(editor => {
11 |       editor.shapes.polygon.insert({
12 |         x: 100,
13 |         y: 100,
14 |         radius: 10,
15 |         sides: 4,
16 |         fill: '#ccc'
17 |       })
18 | 
19 |       expect(editor.board.activeShapes.length).equal(1)
20 |     })
21 |   })
22 | 
23 |   it('should draw a polygon', () => {
24 |     cy.getEditor().then(editor => {
25 |       editor.shapes.polygon.draw({
26 |         fill: '#ccc'
27 |       })
28 | 
29 |       cy.draw([300, 300], [400, 400]).then(() => {
30 |         expect(editor.board.activeShapes.length).equal(1)
31 |       })
32 |     })
33 |   })
34 | 
35 |   it('should select the polygon after creation', () => {
36 |     cy.getEditor().then(editor => {
37 |       const polygon = editor.shapes.polygon.insert({
38 |         x: 200,
39 |         y: 200,
40 |         radius: 100,
41 |         sides: 8,
42 |         fill: '#ccc'
43 |       })
44 | 
45 |       cy.mouseTrigger('mousedown', [200, 200], {
46 |         delay: 1000
47 |       }).then(() => {
48 |         expect(editor.board.selection.transformer.attrs.visible).equal(true)
49 | 
50 |         expect(
51 |           editor.board.selection.transformer.nodes().indexOf(polygon.node)
52 |         ).equal(0)
53 |       })
54 |     })
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/rect.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Rect', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should insert a rect', () => {
10 |     cy.getEditor().then(editor => {
11 |       editor.shapes.rect.insert({
12 |         x: 100,
13 |         y: 100,
14 |         width: 50,
15 |         height: 50,
16 |         fill: '#ccc'
17 |       })
18 | 
19 |       expect(editor.board.activeShapes.length).equal(1)
20 |     })
21 |   })
22 | 
23 |   it('should draw a rect', () => {
24 |     cy.getEditor().then(editor => {
25 |       editor.shapes.rect.draw({
26 |         fill: '#ccc'
27 |       })
28 | 
29 |       cy.draw([300, 300], [400, 400]).then(() => {
30 |         expect(editor.board.activeShapes.length).equal(1)
31 |       })
32 |     })
33 |   })
34 | 
35 |   it('should select the rect after creation', () => {
36 |     cy.getEditor().then(editor => {
37 |       const rect = editor.shapes.rect.insert({
38 |         x: 100,
39 |         y: 100,
40 |         width: 50,
41 |         height: 50,
42 |         fill: '#ccc'
43 |       })
44 | 
45 |       cy.mouseTrigger('mousedown', [120, 120], {
46 |         delay: 1000
47 |       }).then(() => {
48 |         expect(editor.board.selection.transformer.attrs.visible).equal(true)
49 | 
50 |         expect(
51 |           editor.board.selection.transformer.nodes().indexOf(rect.node)
52 |         ).equal(0)
53 |       })
54 |     })
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/cypress/e2e/draw/shapes/triangle.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../../support/index.d.ts" />
 3 | 
 4 | describe('Shapes -> Triangle', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should insert a triangle', () => {
10 |     cy.getEditor().then(editor => {
11 |       editor.shapes.triangle.insert({
12 |         x: 100,
13 |         y: 100,
14 |         radius: 10,
15 |         fill: '#ccc'
16 |       })
17 | 
18 |       expect(editor.board.activeShapes.length).equal(1)
19 |     })
20 |   })
21 | 
22 |   it('should draw a triangle', () => {
23 |     cy.getEditor().then(editor => {
24 |       editor.shapes.triangle.draw({
25 |         fill: '#ccc'
26 |       })
27 | 
28 |       cy.draw([300, 300], [400, 400]).then(() => {
29 |         expect(editor.board.activeShapes.length).equal(1)
30 |       })
31 |     })
32 |   })
33 | 
34 |   it('should select the triangle after creation', () => {
35 |     cy.getEditor().then(editor => {
36 |       const triangle = editor.shapes.triangle.insert({
37 |         x: 200,
38 |         y: 200,
39 |         radius: 100,
40 |         fill: '#ccc'
41 |       })
42 | 
43 |       cy.mouseTrigger('mousedown', [200, 200], {
44 |         delay: 1000
45 |       }).then(() => {
46 |         expect(editor.board.selection.transformer.attrs.visible).equal(true)
47 | 
48 |         expect(
49 |           editor.board.selection.transformer.nodes().indexOf(triangle.node)
50 |         ).equal(0)
51 |       })
52 |     })
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/cypress/e2e/rotation/rotation.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../support/index.d.ts" />
 3 | 
 4 | describe('Rotation', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should transform rotate all the shapes in the board', () => {
10 |     cy.loadImage('cat.jpg').then(url => {
11 |       cy.getEditor().then(editor => {
12 |         editor.shapes.rect.insert({
13 |           x: 500,
14 |           y: 500,
15 |           width: 550,
16 |           height: 400,
17 |           fill: 'red'
18 |         })
19 | 
20 |         editor.board.background.setImageFromUrl(url).then(() => {
21 |           editor.rotation.transform(30)
22 | 
23 |           editor.board.getNodes().forEach(node => {
24 |             expect(node.rotation()).equal(30)
25 |             expect(Number(node.scale().x.toFixed(2))).equal(0.62)
26 |             expect(Number(node.scale().y.toFixed(2))).equal(0.62)
27 |           })
28 |         })
29 |       })
30 |     })
31 |   })
32 | 
33 |   it('should spin all the shapes in the board', () => {
34 |     cy.loadImage('cat.jpg').then(url => {
35 |       cy.getEditor().then(editor => {
36 |         editor.shapes.rect.insert({
37 |           x: 500,
38 |           y: 500,
39 |           width: 550,
40 |           height: 400,
41 |           fill: 'red'
42 |         })
43 | 
44 |         editor.board.background.setImageFromUrl(url).then(() => {
45 |           editor.rotation.straighten(30)
46 | 
47 |           editor.board.getNodes().forEach(node => {
48 |             expect(node.rotation()).equal(30)
49 |             expect(Number(node.scale().x.toFixed(2))).equal(1)
50 |             expect(Number(node.scale().y.toFixed(2))).equal(1)
51 |           })
52 |         })
53 |       })
54 |     })
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/cypress/e2e/selection/selection.cy.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | /// <reference path="../../support/index.d.ts" />
 3 | 
 4 | describe('Selection', () => {
 5 |   beforeEach(() => {
 6 |     cy.reload()
 7 |   })
 8 | 
 9 |   it('should select the shape after creation', () => {
10 |     cy.getEditor().then(editor => {
11 |       expect(editor.selection.shapes.length).eq(0)
12 | 
13 |       editor.shapes.circle.insert({
14 |         name: 'circle',
15 |         x: 250,
16 |         y: 250,
17 |         radius: 50,
18 |         fill: '#ccc'
19 |       })
20 | 
21 |       cy.mouseTrigger('mousedown', [220, 220], {
22 |         delay: 1000
23 |       }).then(() => {
24 |         expect(editor.selection.shapes.length).eq(1)
25 |         expect(editor.selection.getTransformer().nodes().length).eq(1)
26 |       })
27 |     })
28 |   })
29 | 
30 |   it('should select the shape with dragging zone', () => {
31 |     cy.getEditor().then(editor => {
32 |       expect(editor.selection.shapes.length).eq(0)
33 | 
34 |       editor.shapes.circle.insert({
35 |         name: 'circle',
36 |         x: 250,
37 |         y: 250,
38 |         radius: 50,
39 |         fill: '#ccc'
40 |       })
41 | 
42 |       cy.draw([200, 200], [300, 300]).then(() => {
43 |         expect(editor.selection.shapes.length).eq(1)
44 |         expect(editor.selection.getTransformer().nodes().length).eq(1)
45 |       })
46 |     })
47 |   })
48 | 
49 |   it('should not select the shape when is outside of dragging zone', () => {
50 |     cy.getEditor().then(editor => {
51 |       expect(editor.selection.shapes.length).eq(0)
52 | 
53 |       editor.shapes.circle.insert({
54 |         name: 'circle',
55 |         x: 250,
56 |         y: 250,
57 |         radius: 50,
58 |         fill: '#ccc'
59 |       })
60 | 
61 |       cy.draw([350, 350], [400, 400]).then(() => {
62 |         expect(editor.selection.shapes.length).eq(0)
63 |         expect(editor.selection.getTransformer().nodes().length).eq(0)
64 |       })
65 |     })
66 |   })
67 | 
68 |   it('should select multi shapes when are in dragging zone', () => {
69 |     cy.getEditor().then(editor => {
70 |       expect(editor.selection.shapes.length).eq(0)
71 | 
72 |       editor.shapes.circle.insert({
73 |         name: 'circle',
74 |         x: 250,
75 |         y: 250,
76 |         radius: 30,
77 |         fill: '#ccc'
78 |       })
79 | 
80 |       editor.shapes.circle.insert({
81 |         name: 'circle',
82 |         x: 300,
83 |         y: 300,
84 |         radius: 30,
85 |         fill: '#ccc'
86 |       })
87 | 
88 |       cy.draw([500, 500], [100, 100]).then(() => {
89 |         expect(editor.selection.shapes.length).eq(2)
90 |         expect(editor.selection.getTransformer().nodes().length).eq(2)
91 |       })
92 |     })
93 |   })
94 | })
95 | 


--------------------------------------------------------------------------------
/cypress/fixtures/lib.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | module.exports = (on, config) => {
2 |   return config
3 | }
4 | 


--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
 1 | import { draw } from './utils/draw'
 2 | import { loadAsset } from './utils/load-asset'
 3 | import { loadImage } from './utils/load-image'
 4 | import { mouseTrigger } from './utils/mouse-trigger'
 5 | import { getEditor } from './utils/get-editor'
 6 | 
 7 | Cypress.Commands.add('draw', draw)
 8 | Cypress.Commands.add('getEditor', getEditor)
 9 | Cypress.Commands.add('loadAsset', loadAsset)
10 | Cypress.Commands.add('loadImage', loadImage)
11 | Cypress.Commands.add('mouseTrigger', mouseTrigger)
12 | 


--------------------------------------------------------------------------------
/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | import './commands'
2 | 


--------------------------------------------------------------------------------
/cypress/support/index.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-unused-vars */
 2 | 
 3 | /// <reference types="cypress" />
 4 | 
 5 | declare namespace Cypress {
 6 |   interface Chainable {
 7 |     draw(
 8 |       from: [number, number],
 9 |       to: [number, number]
10 |     ): Cypress.Chainable<Element>
11 |     mouseTrigger(
12 |       name: 'mousedown' | 'mousemove' | 'mouseup',
13 |       point: [number, number],
14 |       options?: {
15 |         delay: number
16 |       }
17 |     ): Cypress.Chainable<Element>
18 |     loadAsset(
19 |       fileName: string,
20 |       encoding: Encodings,
21 |       options?: Partial<Cypress.Loggable & Cypress.Timeoutable>
22 |     ): Cypress.Chainable<string>
23 |     loadImage(fileName: string, mimeType?: string): Cypress.Chainable<string>
24 |     getEditor(): PromiseLike<import('../../src').default>
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/cypress/support/utils/draw.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | 
 3 | export function draw(from: [number, number], to: [number, number]) {
 4 |   return cy
 5 |     .get('canvas')
 6 |     .trigger('mousedown', {
 7 |       clientX: from[0],
 8 |       clientY: from[1]
 9 |     })
10 |     .trigger('mousemove', {
11 |       clientX: to[0],
12 |       clientY: to[1]
13 |     })
14 |     .trigger('mouseup', { force: true })
15 | }
16 | 


--------------------------------------------------------------------------------
/cypress/support/utils/get-editor.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | import { Pikaso } from '../../../src/index.all'
 3 | 
 4 | export function getEditor() {
 5 |   return cy.document().then(async doc => {
 6 |     Object.assign(doc.body.style, {
 7 |       margin: 0,
 8 |       padding: 0,
 9 |       overflow: 'hidden'
10 |     })
11 | 
12 |     let element = document.getElementById('frame')
13 | 
14 |     if (!element) {
15 |       element = doc.createElement('div')
16 | 
17 |       Object.assign(element.style, {
18 |         width: '600px',
19 |         height: '500px',
20 |         border: '1px dashed #ccc',
21 |         background: '#f4f4f4'
22 |       })
23 | 
24 |       element.setAttribute('id', 'frame')
25 |       doc.body.appendChild(element)
26 |     }
27 | 
28 |     const editor = new Pikaso({
29 |       container: element as HTMLDivElement
30 |     })
31 | 
32 |     return editor
33 |   })
34 | }
35 | 


--------------------------------------------------------------------------------
/cypress/support/utils/load-asset.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | 
 3 | export function loadAsset(
 4 |   fileName: string,
 5 |   encoding: Cypress.Encodings,
 6 |   options?: Partial<Cypress.Loggable & Cypress.Timeoutable>
 7 | ) {
 8 |   return cy.readFile(`${__dirname}/../../assets/${fileName}`, encoding, options)
 9 | }
10 | 


--------------------------------------------------------------------------------
/cypress/support/utils/load-image.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | 
 3 | import { loadAsset } from './load-asset'
 4 | 
 5 | export function loadImage(fileName: string, mimeType: string = 'image/jpg') {
 6 |   return loadAsset(fileName, 'base64').then(image => {
 7 |     return `data:${mimeType};base64,${image}`
 8 |   })
 9 | }
10 | 


--------------------------------------------------------------------------------
/cypress/support/utils/mouse-trigger.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | 
 3 | export function mouseTrigger(
 4 |   name: 'mousedown' | 'mousemove' | 'mouseup',
 5 |   point: [number, number],
 6 |   options = {
 7 |     delay: 0
 8 |   }
 9 | ) {
10 |   return cy.wait(options.delay).then(() => {
11 |     return cy.get('canvas').trigger(name, {
12 |       clientX: point[0],
13 |       clientY: point[1],
14 |       force: true
15 |     })
16 |   })
17 | }
18 | 


--------------------------------------------------------------------------------
/cypress/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "ES2015",
 5 |     "lib": [
 6 |       "ES2015",
 7 |       "dom"
 8 |     ],
 9 |     "types": [
10 |       "node",
11 |       "cypress"
12 |     ]
13 |   },
14 |   "include": [
15 |     "**/*.ts"
16 |   ]
17 | }


--------------------------------------------------------------------------------
/jest/setup.ts:
--------------------------------------------------------------------------------
 1 | if (global.document) {
 2 |   global.document.createElement = (function (create) {
 3 |     return function () {
 4 |       const element: HTMLElement = create.apply(this, arguments)
 5 | 
 6 |       if (element.tagName === 'IMG') {
 7 |         setTimeout(() => {
 8 |           let src = element.getAttribute('src') || ''
 9 | 
10 |           if (/\d+x\d+/gm.test(src) === false) {
11 |             src = '1200x800'
12 |           }
13 | 
14 |           const [width, height] = src.split('x')
15 | 
16 |           element.setAttribute('width', width)
17 |           element.setAttribute('naturalWidth', width)
18 |           element.setAttribute('height', height)
19 |           element.setAttribute('naturalHeight', height)
20 | 
21 |           element.onload!(new Event('load'))
22 |         }, 100)
23 |       }
24 | 
25 |       return element
26 |     }
27 |   })(document.createElement)
28 | }
29 | 


--------------------------------------------------------------------------------
/jest/utils/create-editor/index.ts:
--------------------------------------------------------------------------------
 1 | import Pikaso from '../../../src'
 2 | import { Settings } from '../../../src/types'
 3 | 
 4 | export function createEditor(options?: Partial<Settings>) {
 5 |   const width = 1280
 6 |   const height = 720
 7 | 
 8 |   document.body.style.margin = '0'
 9 |   document.body.style.padding = '0'
10 | 
11 |   const element = document.createElement('div')
12 |   element.style.width = `${width}px`
13 |   element.style.height = `${height}px`
14 | 
15 |   return new Pikaso({
16 |     container: element,
17 |     width,
18 |     height,
19 |     ...options
20 |   })
21 | }
22 | 


--------------------------------------------------------------------------------
/jest/utils/create-element/index.ts:
--------------------------------------------------------------------------------
1 | export function createElement(): HTMLDivElement {
2 |   const element = document.createElement('div')
3 |   element.style.width = '1280px'
4 |   element.style.height = '720px'
5 | 
6 |   return element
7 | }
8 | 


--------------------------------------------------------------------------------
/jest/utils/create-shapes/index.ts:
--------------------------------------------------------------------------------
 1 | import Pikaso from '../../../src'
 2 | 
 3 | export function createShapes(editor: Pikaso, count = 2) {
 4 |   return new Array(count).fill(null).map(() =>
 5 |     editor.shapes.circle.insert({
 6 |       x: random(100, 1000),
 7 |       y: random(100, 700),
 8 |       radius: random(20, 30),
 9 |       fill: 'red'
10 |     })
11 |   )
12 | }
13 | 
14 | function random(min: number, max: number) {
15 |   return Math.floor(Math.random() * (max - min) + min)
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "pikaso",
  3 |   "version": "2.8.3",
  4 |   "description": "Seamless, Fully-typed and Fully-tested HTML5 Canvas Library",
  5 |   "author": "Ramin Mousavi <ramin@pikaso.app> (http://github.com/raminious)",
  6 |   "license": "MIT",
  7 |   "scripts": {
  8 |     "typecheck": "tsc",
  9 |     "commitlint": "commitlint",
 10 |     "typedoc": "typedoc",
 11 |     "test": "npm-run-all test:unit test:e2e --parallel",
 12 |     "test:unit": "jest",
 13 |     "test:e2e": "cypress run",
 14 |     "coverage": "jest --coverage",
 15 |     "_postinstall": "husky install",
 16 |     "prepublish": "pinst --disable",
 17 |     "postpublish": "pinst --enable",
 18 |     "clean": "rimraf lib && rimraf esm && rimraf umd",
 19 |     "build": "npm run clean && rollup -c --bundleConfigAsCjs"
 20 |   },
 21 |   "dependencies": {
 22 |     "deepmerge": "^4.3.1",
 23 |     "konva": "^9.3.6",
 24 |     "typescript": "^5.4.5"
 25 |   },
 26 |   "devDependencies": {
 27 |     "@babel/preset-env": "^7.24.5",
 28 |     "@commitlint/cli": "^19.3.0",
 29 |     "@commitlint/config-conventional": "^19.2.2",
 30 |     "@rollup/plugin-commonjs": "^25.0.7",
 31 |     "@rollup/plugin-inject": "^5.0.5",
 32 |     "@rollup/plugin-node-resolve": "^15.2.3",
 33 |     "@rollup/plugin-terser": "^0.4.4",
 34 |     "@rollup/plugin-typescript": "^11.1.6",
 35 |     "@types/jest": "^29.5.12",
 36 |     "@types/jsdom": "^21.1.6",
 37 |     "@types/node": "^20.12.8",
 38 |     "@typescript-eslint/eslint-plugin": "^7.8.0",
 39 |     "@typescript-eslint/parser": "^7.8.0",
 40 |     "babel-jest": "^29.7.0",
 41 |     "canvas": "^2.11.2",
 42 |     "cypress": "^13.8.1",
 43 |     "datauri": "^4.1.0",
 44 |     "eslint": "^8.56.0",
 45 |     "eslint-config-prettier": "^9.1.0",
 46 |     "eslint-import-resolver-webpack": "^0.13.8",
 47 |     "eslint-plugin-import": "^2.29.1",
 48 |     "eslint-plugin-jest": "^28.5.0",
 49 |     "eslint-plugin-jsx-a11y": "^6.8.0",
 50 |     "eslint-plugin-prettier": "^5.1.3",
 51 |     "husky": "^9.0.11",
 52 |     "jest": "^29.7.0",
 53 |     "jest-canvas-mock": "^2.5.2",
 54 |     "jest-environment-jsdom": "^29.7.0",
 55 |     "jsdom": "^24.0.0",
 56 |     "npm-run-all": "^4.1.5",
 57 |     "pinst": "^3.0.0",
 58 |     "prettier": "^3.2.5",
 59 |     "rimraf": "^5.0.5",
 60 |     "rollup": "^4.17.2",
 61 |     "rollup-plugin-ignore": "^1.0.10",
 62 |     "ts-jest": "^29.1.2",
 63 |     "ts-node": "^10.9.2",
 64 |     "tslib": "^2.6.2",
 65 |     "typedoc": "^0.25.13"
 66 |   },
 67 |   "keywords": [
 68 |     "canvas",
 69 |     "drawing",
 70 |     "graphic",
 71 |     "crop",
 72 |     "rotate",
 73 |     "shape",
 74 |     "draw",
 75 |     "flip",
 76 |     "text",
 77 |     "pencil",
 78 |     "konva",
 79 |     "fabric"
 80 |   ],
 81 |   "browser": {
 82 |     "canvas": false,
 83 |     "jsdom": false
 84 |   },
 85 |   "bugs": {
 86 |     "url": "https://github.com/pikasojs/pikaso/issues"
 87 |   },
 88 |   "homepage": "https://pikaso.app",
 89 |   "readmeFilename": "README.md",
 90 |   "repository": {
 91 |     "type": "git",
 92 |     "url": "git://github.com/pikasojs/pikaso.git"
 93 |   },
 94 |   "typings": "esm/index.all.d.ts",
 95 |   "module": "esm/index.all.js",
 96 |   "main": "lib/index.node.all.js",
 97 |   "unpkg": "umd/pikaso.min.js",
 98 |   "sideEffects": false,
 99 |   "files": [
100 |     "esm",
101 |     "lib",
102 |     "umd",
103 |     "LICENSE",
104 |     "README"
105 |   ]
106 | }
107 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | 
 3 | import typescript from '@rollup/plugin-typescript'
 4 | import commonjs from '@rollup/plugin-commonjs'
 5 | import { nodeResolve } from '@rollup/plugin-node-resolve'
 6 | import terser from '@rollup/plugin-terser'
 7 | import ignore from 'rollup-plugin-ignore'
 8 | import inject from '@rollup/plugin-inject'
 9 | 
10 | import pkg from './package.json'
11 | 
12 | const banner = `/* Pikaso v${pkg.version} by [${
13 |   pkg.author
14 | }] * ${new Date().toDateString()} */`
15 | 
16 | export default [
17 |   {
18 |     plugins: [
19 |       ignore(['canvas']),
20 |       nodeResolve(),
21 |       commonjs({
22 |         exclude: '/node_modules/'
23 |       }),
24 |       typescript({
25 |         declaration: true,
26 |         outDir: 'esm',
27 |         declarationDir: 'esm'
28 |       }),
29 |       inject({
30 |         global: path.resolve('./build/global')
31 |       }),
32 |       terser()
33 |     ],
34 |     input: 'src/index.all.ts',
35 |     preserveModules: false,
36 |     output: {
37 |       banner,
38 |       dir: 'esm',
39 |       format: 'esm'
40 |     }
41 |   },
42 |   {
43 |     plugins: [
44 |       ignore(['canvas']),
45 |       nodeResolve(),
46 |       commonjs({
47 |         exclude: '/node_modules/'
48 |       }),
49 |       typescript({
50 |         declaration: true,
51 |         outDir: 'lib',
52 |         declarationDir: 'lib'
53 |       }),
54 |       terser()
55 |     ],
56 |     input: 'src/index.node.all.ts',
57 |     output: {
58 |       banner,
59 |       dir: 'lib',
60 |       format: 'cjs',
61 |       exports: 'named'
62 |     }
63 |   },
64 |   {
65 |     plugins: [
66 |       ignore(['canvas']),
67 |       nodeResolve(),
68 |       commonjs({
69 |         exclude: '/node_modules/'
70 |       }),
71 |       typescript(),
72 |       inject({
73 |         global: path.resolve('./build/global')
74 |       }),
75 |       terser()
76 |     ],
77 |     input: 'src/index.ts',
78 |     output: {
79 |       name: 'Pikaso',
80 |       file: pkg.unpkg,
81 |       format: 'iife',
82 |       freeze: false,
83 |       sourcemap: true
84 |     }
85 |   }
86 | ]
87 | 


--------------------------------------------------------------------------------
/src/Background/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { imageToDataUrl } from '../utils/image-to-url'
  4 | import { createImageFromUrl } from '../utils/create-image-from-url'
  5 | 
  6 | import { Board } from '../Board'
  7 | 
  8 | import { ImageModel } from '../shape/models/ImageModel'
  9 | import { RectModel } from '../shape/models/RectModel'
 10 | 
 11 | import type { BackgroundOptions } from '../types'
 12 | 
 13 | export class Background {
 14 |   /**
 15 |    * Represents the background [[Image | image]]
 16 |    */
 17 |   public image: ImageModel
 18 | 
 19 |   /**
 20 |    * Represents the background [[Rect | overlay]]
 21 |    */
 22 |   public overlay: RectModel
 23 | 
 24 |   /**
 25 |    * Represents the [[Board]]
 26 |    */
 27 |   private board: Board
 28 | 
 29 |   /**
 30 |    * Creates a new background image and overlay
 31 |    *
 32 |    * @param board The [[Board]]
 33 |    */
 34 |   constructor(board: Board) {
 35 |     this.board = board
 36 | 
 37 |     const image = new Konva.Image({
 38 |       image: undefined
 39 |     })
 40 |     const overlay = new Konva.Rect()
 41 | 
 42 |     this.image = new ImageModel(board, image, {
 43 |       internal: true,
 44 |       selectable: false,
 45 |       history: false
 46 |     })
 47 | 
 48 |     this.overlay = new RectModel(board, overlay, {
 49 |       internal: true,
 50 |       selectable: false,
 51 |       history: false
 52 |     })
 53 |   }
 54 | 
 55 |   /**
 56 |    * Returns background nodes which includes image and overlay
 57 |    */
 58 |   public get nodes() {
 59 |     return [this.image.node, this.overlay.node]
 60 |   }
 61 | 
 62 |   /**
 63 |    * Returns current position of background
 64 |    */
 65 |   public getPosition() {
 66 |     return {
 67 |       x: this.image.node.x() || this.overlay.node.x(),
 68 |       y: this.image.node.y() || this.overlay.node.y()
 69 |     }
 70 |   }
 71 | 
 72 |   /**
 73 |    * Loads the background image from given file
 74 |    *
 75 |    * @param file The image file
 76 |    * @param options The background options
 77 |    */
 78 |   public async setImageFromFile(
 79 |     file: File,
 80 |     options?: Partial<BackgroundOptions>
 81 |   ) {
 82 |     const url = await imageToDataUrl(file)
 83 | 
 84 |     this.setImageFromUrl(url, options)
 85 |   }
 86 | 
 87 |   /**
 88 |    * Loads the background image from url
 89 |    *
 90 |    * @param url The image url
 91 |    * @param options The background options
 92 |    */
 93 |   public async setImageFromUrl(
 94 |     url: string,
 95 |     options: Partial<BackgroundOptions> = {
 96 |       size: 'resize'
 97 |     }
 98 |   ) {
 99 |     this.board.history.create(
100 |       this.board.layer,
101 |       [this.board.stage, this.image.node, this.overlay.node],
102 |       this.board.rescale.bind(this)
103 |     )
104 | 
105 |     const background = await createImageFromUrl(url)
106 | 
107 |     let width = background.width()
108 |     let height = background.height()
109 | 
110 |     const ratios = {
111 |       width: this.board.stage.width() / width,
112 |       height: this.board.stage.height() / height
113 |     }
114 | 
115 |     if (options.size === 'cover') {
116 |       const ratio = Math.max(ratios.width, ratios.height)
117 |       width *= ratio
118 |       height *= ratio
119 |     }
120 | 
121 |     if (options.size === 'contain') {
122 |       const ratio = Math.min(ratios.width, ratios.height)
123 |       width *= ratio
124 |       height *= ratio
125 |     }
126 | 
127 |     if (options.size === 'resize') {
128 |       this.board.stage.setAttrs({
129 |         width,
130 |         height
131 |       })
132 |     }
133 | 
134 |     if (options.size === 'stretch') {
135 |       width = this.board.stage.width()
136 |       height = this.board.stage.height()
137 |     }
138 | 
139 |     this.image.node.setAttrs({
140 |       width,
141 |       height,
142 |       image: background.image(),
143 |       x: options.x ?? background.x(),
144 |       y: options.y ?? background.y()
145 |     })
146 | 
147 |     this.overlay.node.setAttrs({
148 |       width,
149 |       height
150 |     })
151 |   }
152 | 
153 |   /**
154 |    * Updates color of overlay
155 |    *
156 |    * @param color The given color in Hex or RGB
157 |    */
158 |   public fill(color: string) {
159 |     this.board.history.create(this.board.layer, this.overlay.node)
160 | 
161 |     this.overlay.node.setAttrs({
162 |       width: this.board.stage.width(),
163 |       height: this.board.stage.height(),
164 |       fill: color
165 |     })
166 |   }
167 | }
168 | 


--------------------------------------------------------------------------------
/src/Cropper/FixedCircularCropper/index.ts:
--------------------------------------------------------------------------------
 1 | import { Context } from 'konva/lib/Context'
 2 | 
 3 | import { FixedCropper } from '../FixedCropper'
 4 | import { Board } from '../../Board'
 5 | 
 6 | import type { CircularCropperOptions, Point, Dimensions } from '../../types'
 7 | 
 8 | /**
 9 |  * @internal
10 |  */
11 | export class FixedCircularCropper extends FixedCropper {
12 |   constructor(board: Board, options: Partial<CircularCropperOptions>) {
13 |     super(board, {
14 |       ...options,
15 |       keepRatio: true
16 |     })
17 | 
18 |     this.setupOverlay()
19 |   }
20 | 
21 |   /**
22 |    * Returns the rect bound of the cropping area
23 |    */
24 |   public getRect(): (Point & Dimensions) | null {
25 |     const options = <CircularCropperOptions>this.options
26 | 
27 |     const scaleX = this.draggable.width() / this.layer.width()
28 |     const scaleY = this.draggable.height() / this.layer.height()
29 | 
30 |     return {
31 |       x: (options.x - options.radius - this.draggable.x()) / scaleX,
32 |       y: (options.y - options.radius - this.draggable.y()) / scaleY,
33 |       width: (options.radius * 2) / scaleX,
34 |       height: (options.radius * 2) / scaleY
35 |     }
36 |   }
37 | 
38 |   /**
39 |    * Setups the overlay
40 |    */
41 |   protected setupOverlay() {
42 |     const options = <CircularCropperOptions>this.options
43 | 
44 |     this.overlay.sceneFunc(
45 |       (
46 |         ctx: Context & {
47 |           fillStyle?: string
48 |         },
49 |         shape
50 |       ) => {
51 |         ctx.beginPath()
52 | 
53 |         ctx.arc(options.x, options.y, options.radius, 0, 2 * Math.PI, false)
54 |         ctx.clip()
55 |         ctx.clearRect(
56 |           options.x - options.radius,
57 |           options.y - options.radius,
58 |           options.radius * 2,
59 |           options.radius * 2
60 |         )
61 | 
62 |         ctx.closePath()
63 |         ctx.fillStrokeShape(shape)
64 |       }
65 |     )
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/Cropper/FixedCropper/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { BaseCropper } from '../BaseCropper'
  4 | import { Board } from '../../Board'
  5 | 
  6 | import type { CropperOptions, Point } from '../../types'
  7 | 
  8 | /**
  9 |  * @internal
 10 |  */
 11 | export abstract class FixedCropper extends BaseCropper {
 12 |   /**
 13 |    * Represents the draggable overlay for the fixed cropper
 14 |    */
 15 |   public readonly draggable: Konva.Rect
 16 | 
 17 |   /**
 18 |    * Creates a fixed cropper
 19 |    *
 20 |    * @param board The [[Board]]
 21 |    * @param options The [[CropperOptions | Cropper Options]]
 22 |    */
 23 |   constructor(board: Board, options: Partial<CropperOptions>) {
 24 |     super(board, options)
 25 | 
 26 |     this.draggable = this.createDraggableOverlay()
 27 |     this.layer.add(this.draggable)
 28 | 
 29 |     this.setupCropzone()
 30 | 
 31 |     this.board.stage.add(this.layer)
 32 |   }
 33 | 
 34 |   /**
 35 |    * Zooms on the background
 36 |    *
 37 |    * @param scale The scaling value
 38 |    */
 39 |   public zoom(scale: number) {
 40 |     this.board.layer.scale({
 41 |       x: scale,
 42 |       y: scale
 43 |     })
 44 | 
 45 |     const width = this.board.layer.width() * scale
 46 |     const height = this.board.layer.height() * scale
 47 |     const center = [this.draggable.width() / 2, this.draggable.height() / 2]
 48 |     const nextCenter = [width / 2, height / 2]
 49 | 
 50 |     this.draggable.width(width)
 51 |     this.draggable.height(height)
 52 | 
 53 |     const { x, y } = this.getDraggableOverlayBoundRect({
 54 |       x: this.draggable.x() + center[0] - nextCenter[0],
 55 |       y: this.draggable.y() + center[1] - nextCenter[1]
 56 |     })
 57 | 
 58 |     this.draggable.x(x)
 59 |     this.draggable.y(y)
 60 | 
 61 |     this.board.layer.x(this.draggable.x())
 62 |     this.board.layer.y(this.draggable.y())
 63 | 
 64 |     this.board.draw()
 65 |   }
 66 | 
 67 |   /**
 68 |    * Updates position of the cropzone
 69 |    *
 70 |    * @param point The Point
 71 |    */
 72 |   public setDraggableOverlayPosition({ x, y }: Point) {
 73 |     const { x: left, y: top } = this.getDraggableOverlayBoundRect({
 74 |       x,
 75 |       y
 76 |     })
 77 | 
 78 |     this.draggable.x(left)
 79 |     this.board.layer.x(left)
 80 | 
 81 |     this.draggable.y(top)
 82 |     this.board.layer.y(top)
 83 | 
 84 |     this.board.draw()
 85 |   }
 86 | 
 87 |   /**
 88 |    * Setups the cropzone
 89 |    */
 90 |   protected setupCropzone() {
 91 |     this.cropzone.draggable(false)
 92 |   }
 93 | 
 94 |   /**
 95 |    * Returns the rect bound of the draggable overlay
 96 |    *
 97 |    * @param pos The [[Point]]
 98 |    */
 99 |   private getDraggableOverlayBoundRect(pos: Point) {
100 |     const node = this.draggable
101 | 
102 |     const width = this.options.circular
103 |       ? this.options.radius * 2
104 |       : this.options.width
105 | 
106 |     const height = this.options.circular
107 |       ? this.options.radius * 2
108 |       : this.options.height
109 | 
110 |     const left = this.options.circular
111 |       ? this.options.x - this.options.radius
112 |       : this.options.x
113 | 
114 |     const top = this.options.circular
115 |       ? this.options.y - this.options.radius
116 |       : this.options.y
117 | 
118 |     const right = left + width - node.width()
119 |     const bottom = top + height - node.height()
120 | 
121 |     let { x, y } = pos
122 | 
123 |     if (x >= left) {
124 |       x = left
125 |     } else if (x <= right) {
126 |       x = right
127 |     }
128 | 
129 |     if (y >= top) {
130 |       y = top
131 |     } else if (y <= bottom) {
132 |       y = bottom
133 |     }
134 | 
135 |     return { x, y }
136 |   }
137 | 
138 |   /**
139 |    * Creates the draggable overlay. for fixed croppers, the cropzone has a
140 |    * fixed position and the overlay is draggable instead
141 |    */
142 |   private createDraggableOverlay() {
143 |     const rect = new Konva.Rect({
144 |       x: 0,
145 |       y: 0,
146 |       width: this.board.stage.width(),
147 |       height: this.board.stage.height(),
148 |       fill: 'transparent',
149 |       opacity: 0,
150 |       draggable: true,
151 |       dragBoundFunc: pos => {
152 |         const { x, y } = this.getDraggableOverlayBoundRect(pos)
153 | 
154 |         this.board.layer.x(x)
155 |         this.board.layer.y(y)
156 |         this.board.draw()
157 | 
158 |         return {
159 |           x,
160 |           y
161 |         }
162 |       }
163 |     })
164 | 
165 |     this.getCursorEvents().forEach(({ name, cursor }) => {
166 |       rect.on(name, () => {
167 |         this.board.stage.container().style.cursor = cursor
168 |       })
169 |     })
170 | 
171 |     return rect
172 |   }
173 | }
174 | 


--------------------------------------------------------------------------------
/src/Cropper/FixedRectangleCropper/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Context } from 'konva/lib/Context'
 2 | 
 3 | import { FixedCropper } from '../FixedCropper'
 4 | import { Board } from '../../Board'
 5 | 
 6 | import type { Point, Dimensions, RectangleCropperOptions } from '../../types'
 7 | 
 8 | /**
 9 |  * @internal
10 |  */
11 | export class FixedRectangleCropper extends FixedCropper {
12 |   constructor(board: Board, options: Partial<RectangleCropperOptions>) {
13 |     super(board, options)
14 | 
15 |     this.setupOverlay()
16 |   }
17 | 
18 |   /**
19 |    * Returns the rect bound of the cropping area
20 |    */
21 |   public getRect(): (Point & Dimensions) | null {
22 |     const options = <RectangleCropperOptions>this.options
23 | 
24 |     const scaleX = this.draggable.width() / this.layer.width()
25 |     const scaleY = this.draggable.height() / this.layer.height()
26 | 
27 |     return {
28 |       x: (options.x - this.draggable.x()) / scaleX,
29 |       y: (options.y - this.draggable.y()) / scaleY,
30 |       width: options.width / scaleX,
31 |       height: options.height / scaleY
32 |     }
33 |   }
34 | 
35 |   /**
36 |    * Setups the overlay
37 |    */
38 |   protected setupOverlay() {
39 |     const options = <RectangleCropperOptions>this.options
40 | 
41 |     this.overlay.sceneFunc(
42 |       (
43 |         ctx: Context & {
44 |           fillStyle?: string
45 |         },
46 |         shape
47 |       ) => {
48 |         ctx.beginPath()
49 | 
50 |         ctx.clearRect(options.x, options.y, options.width, options.height)
51 | 
52 |         ctx.closePath()
53 |         ctx.fillStrokeShape(shape)
54 |       }
55 |     )
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/Cropper/FlexibleCircularCropper/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Context } from 'konva/lib/Context'
 2 | 
 3 | import { Board } from '../../Board'
 4 | import { FlexibleCropper } from '../FlexibleCropper'
 5 | 
 6 | import type { CircularCropperOptions } from '../../types'
 7 | 
 8 | /**
 9 |  * @internal
10 |  */
11 | export class FlexibleCircularCropper extends FlexibleCropper {
12 |   /**
13 |    * Creates a flexible circular instance
14 |    *
15 |    * @param board The [[Board]]
16 |    * @param options The [[RectangleCropperOptions]]
17 |    */
18 |   constructor(board: Board, options: Partial<CircularCropperOptions>) {
19 |     super(board, {
20 |       ...options,
21 |       circular: true,
22 |       keepRatio: true
23 |     })
24 | 
25 |     this.setupOverlay()
26 |   }
27 | 
28 |   /**
29 |    * Setups the overlay
30 |    */
31 |   protected setupOverlay() {
32 |     this.overlay.sceneFunc(
33 |       (
34 |         ctx: Context & {
35 |           fillStyle?: string
36 |         },
37 |         shape
38 |       ) => {
39 |         ctx.beginPath()
40 | 
41 |         const radius = this.transformer.width() / 2
42 | 
43 |         ctx.arc(
44 |           this.cropzone.x(),
45 |           this.cropzone.y(),
46 |           radius,
47 |           0,
48 |           2 * Math.PI,
49 |           false
50 |         )
51 |         ctx.clip()
52 |         ctx.clearRect(
53 |           this.cropzone.x() - radius,
54 |           this.cropzone.y() - radius,
55 |           radius * 2,
56 |           radius * 2
57 |         )
58 | 
59 |         ctx.closePath()
60 |         ctx.fillStrokeShape(shape)
61 |       }
62 |     )
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/src/Cropper/FlexibleCropper/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { BaseCropper } from '../BaseCropper'
  4 | import { Board } from '../../Board'
  5 | 
  6 | import type { CropperOptions, Point, Dimensions } from '../../types'
  7 | 
  8 | /**
  9 |  * @internal
 10 |  */
 11 | export abstract class FlexibleCropper extends BaseCropper {
 12 |   /**
 13 |    * Represents the draggable cropzone
 14 |    */
 15 |   protected readonly transformer: Konva.Transformer
 16 | 
 17 |   /**
 18 |    * Creates a flexible cropzone
 19 |    *
 20 |    * @param board The [[Board]]
 21 |    * @param options The [[CropperOptions | Cropper Options]]
 22 |    */
 23 |   constructor(board: Board, options: Partial<CropperOptions>) {
 24 |     super(board, options)
 25 | 
 26 |     this.transformer = this.createTransformer()
 27 |     this.layer.add(this.transformer)
 28 | 
 29 |     this.setupCropzone()
 30 | 
 31 |     this.board.stage.add(this.layer)
 32 |   }
 33 | 
 34 |   /**
 35 |    * Updates the cropzone position
 36 |    *
 37 |    * @param point The [[Point]]
 38 |    */
 39 |   public setPosition(
 40 |     { x, y }: Point = { x: this.options.x, y: this.options.y }
 41 |   ) {
 42 |     const { x: left, y: top } = this.getCropzoneBoundRect({ x, y })
 43 | 
 44 |     this.cropzone.x(left)
 45 |     this.cropzone.y(top)
 46 | 
 47 |     this.layer.batchDraw()
 48 |   }
 49 | 
 50 |   /**
 51 |    * Returns current rect bound of the cropzone
 52 |    */
 53 |   public getRect(): (Point & Dimensions) | null {
 54 |     return {
 55 |       x: this.transformer.x(),
 56 |       y: this.transformer.y(),
 57 |       width: this.transformer.width(),
 58 |       height: this.transformer.height()
 59 |     }
 60 |   }
 61 | 
 62 |   /**
 63 |    * Setups the cropzone
 64 |    */
 65 |   protected setupCropzone() {
 66 |     this.cropzone.draggable(true)
 67 |     this.cropzone.dragBoundFunc(pos => this.getCropzoneBoundRect(pos))
 68 |   }
 69 | 
 70 |   /**
 71 |    * Returns the bound rect of the cropzone transformer
 72 |    *
 73 |    * @param pos The [[Point]]
 74 |    */
 75 |   private getCropzoneBoundRect(pos: Point): Point {
 76 |     const borderWidth = this.options.transformer.borderStrokeWidth!
 77 | 
 78 |     const minX =
 79 |       (this.options.circular ? this.transformer.width() / 2 : 0) + borderWidth
 80 | 
 81 |     const minY =
 82 |       (this.options.circular ? this.transformer.height() / 2 : 0) + borderWidth
 83 | 
 84 |     const maxX =
 85 |       (this.options.circular
 86 |         ? this.board.stage.width() - this.transformer.width() / 2
 87 |         : this.board.stage.width() - this.transformer.width()) - borderWidth
 88 | 
 89 |     const maxY =
 90 |       (this.options.circular
 91 |         ? this.board.stage.height() - this.transformer.height() / 2
 92 |         : this.board.stage.height() - this.transformer.height()) - borderWidth
 93 | 
 94 |     const x = pos.x <= minX ? Math.max(pos.x, minX) : Math.min(pos.x, maxX)
 95 |     const y = pos.y <= minY ? Math.max(pos.y, minY) : Math.min(pos.y, maxY)
 96 | 
 97 |     return { x, y }
 98 |   }
 99 | 
100 |   /**
101 |    * Creates the draggable cropzone transformer
102 |    */
103 |   private createTransformer() {
104 |     return new Konva.Transformer({
105 |       nodes: [this.cropzone],
106 |       keepRatio: this.options.keepRatio,
107 |       rotateEnabled: false,
108 |       ...this.options.transformer,
109 |       enabledAnchors: [
110 |         'top-left',
111 |         'top-right',
112 |         'bottom-left',
113 |         'bottom-right',
114 |         ...(!this.options.keepRatio ? ['top-center', 'bottom-center'] : [])
115 |       ],
116 |       boundBoxFunc: (oldBox, newBox) => {
117 |         if (Math.ceil(newBox.x) < -1 || Math.ceil(newBox.y) < -1) {
118 |           return oldBox
119 |         }
120 | 
121 |         if (
122 |           newBox.width < this.options.minWidth ||
123 |           newBox.height < this.options.minHeight ||
124 |           newBox.width >= this.board.stage.width() ||
125 |           newBox.height >= this.board.stage.height() ||
126 |           newBox.x + newBox.width >= this.board.stage.width() ||
127 |           newBox.y + newBox.height >= this.board.stage.height()
128 |         ) {
129 |           return oldBox
130 |         }
131 | 
132 |         return newBox
133 |       }
134 |     })
135 |   }
136 | }
137 | 


--------------------------------------------------------------------------------
/src/Cropper/FlexibleRectangleCropper/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Context } from 'konva/lib/Context'
 2 | 
 3 | import { Board } from '../../Board'
 4 | import { FlexibleCropper } from '../FlexibleCropper'
 5 | 
 6 | import type { RectangleCropperOptions } from '../../types'
 7 | 
 8 | /**
 9 |  * @internal
10 |  */
11 | export class FlexibleRectangleCropper extends FlexibleCropper {
12 |   /**
13 |    * Creates a flexible rectanglular instance
14 |    *
15 |    * @param board The [[Board]]
16 |    * @param options The [[RectangleCropperOptions]]
17 |    */
18 |   constructor(board: Board, options: Partial<RectangleCropperOptions>) {
19 |     super(board, options)
20 | 
21 |     this.setupOverlay()
22 |   }
23 | 
24 |   /**
25 |    * Setups the overlay
26 |    */
27 |   protected setupOverlay() {
28 |     this.overlay.sceneFunc(
29 |       (
30 |         ctx: Context & {
31 |           fillStyle?: string
32 |         },
33 |         shape
34 |       ) => {
35 |         ctx.beginPath()
36 |         ctx.clearRect(
37 |           this.cropzone.x(),
38 |           this.cropzone.y(),
39 |           this.transformer.width(),
40 |           this.transformer.height()
41 |         )
42 |         ctx.closePath()
43 |         ctx.fillStrokeShape(shape)
44 |       }
45 |     )
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/Events/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { Events } from './index'
 2 | 
 3 | describe('Events', () => {
 4 |   const obj = {
 5 |     name: '',
 6 |     data: {}
 7 |   }
 8 | 
 9 |   const callback = jest.fn((data: object) => {
10 |     expect(data).toMatchObject(obj)
11 |   })
12 | 
13 |   it('should emit an event', () => {
14 |     const event = new Events()
15 | 
16 |     event.on('shape:move', callback)
17 |     event.emit('shape:move', obj)
18 | 
19 |     expect(callback).toBeCalledTimes(1)
20 |   })
21 | 
22 |   it('should emit an event two times', () => {
23 |     const event = new Events()
24 | 
25 |     event.on('shape:create', callback)
26 |     event.emit('shape:create', obj)
27 |     event.emit('shape:create', obj)
28 | 
29 |     expect(callback).toBeCalledTimes(2)
30 |   })
31 | 
32 |   it('should work with a multi event callback', () => {
33 |     const event = new Events()
34 | 
35 |     event.on(['shape:create', 'shape:move'], callback)
36 | 
37 |     event.emit('shape:create', obj)
38 |     event.emit('shape:move', obj)
39 | 
40 |     expect(callback).toBeCalledTimes(2)
41 |   })
42 | 
43 |   it('should unsubscribe from the events', () => {
44 |     const event = new Events()
45 | 
46 |     event.on('shape:create', callback)
47 | 
48 |     event.emit('shape:create', obj)
49 |     expect(callback).toBeCalledTimes(1)
50 | 
51 |     event.off('shape:create', callback)
52 | 
53 |     event.emit('shape:create', obj)
54 |     expect(callback).toBeCalledTimes(1)
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/src/Events/index.ts:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   EventListenerCallbackEvent,
 3 |   EventListenerNames,
 4 |   ListenerCallback
 5 | } from '../types'
 6 | 
 7 | interface EventListeners {
 8 |   [key: string]: ListenerCallback[]
 9 | }
10 | 
11 | export class Events {
12 |   /**
13 |    * Represents the list of all event listeneres
14 |    */
15 |   private listeners: EventListeners = {}
16 | 
17 |   /**
18 |    * Subscribes to one or multiple events
19 |    *
20 |    * @param eventName The event name or array of event names. it can be one of [[EventListenerNames]]
21 |    * @param callback The callback [[EventListenerCallbackEvent]]
22 |    */
23 |   public on(
24 |     eventName: EventListenerNames | EventListenerNames[],
25 |     callback: ListenerCallback
26 |   ) {
27 |     const list = Array.isArray(eventName) ? eventName : [eventName]
28 | 
29 |     list.forEach(name => {
30 |       if (!this.listeners[name]) {
31 |         this.listeners[name] = []
32 |       }
33 | 
34 |       this.listeners[name].push(callback)
35 |     })
36 |   }
37 | 
38 |   /**
39 |    * UnSubscribes from one or multiple events
40 |    *
41 |    * @param eventName The event name. it can be one of [[EventListenerNames]]
42 |    * @param callback The callback [[EventListenerCallbackEvent]]
43 |    */
44 |   public off(
45 |     eventName: EventListenerNames | EventListenerNames[],
46 |     callback: ListenerCallback
47 |   ) {
48 |     const list = Array.isArray(eventName) ? eventName : [eventName]
49 | 
50 |     list.forEach(name => {
51 |       if (!this.listeners[name]) {
52 |         return
53 |       }
54 | 
55 |       const index = this.listeners[name].indexOf(callback)
56 |       if (index > -1) {
57 |         this.listeners[name].splice(index, 1)
58 |       }
59 |     })
60 |   }
61 | 
62 |   /**
63 |    * Emits an event to all subscribers of that event
64 |    *
65 |    * @param eventName The event Name [[EventListenerNames]]
66 |    * @param data The event data [[EventListenerCallbackEvent]]
67 |    */
68 |   public emit(
69 |     eventName: EventListenerNames,
70 |     data?: EventListenerCallbackEvent
71 |   ) {
72 |     if (!this.listeners[eventName] && !this.listeners['*']) {
73 |       return
74 |     }
75 | 
76 |     const events = ['*', eventName]
77 | 
78 |     events.forEach(name => {
79 |       this.listeners[name]?.forEach(fn => {
80 |         fn({
81 |           name: eventName,
82 |           ...data
83 |         })
84 |       })
85 |     })
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/src/Export/Image/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../Board'
 4 | 
 5 | import type { ExportImageConfig } from '../../types'
 6 | 
 7 | /**
 8 |  * @internal
 9 |  */
10 | export class ImageExport {
11 |   /**
12 |    * Represents the [[Board]]
13 |    */
14 |   private readonly board: Board
15 | 
16 |   constructor(board: Board) {
17 |     this.board = board
18 |   }
19 | 
20 |   /**
21 |    * Exports the current workspace to image
22 |    *
23 |    * @returns The exported image data url
24 |    * @param config The [[ExportImageConfig | config]]
25 |    */
26 |   export(config?: Partial<ExportImageConfig>) {
27 |     // find visible transformers to exclude them from the exported image
28 |     const transformers = this.board.stage.children?.flatMap(layer => {
29 |       return layer.children?.filter(
30 |         node =>
31 |           node.getClassName() === 'Transformer' &&
32 |           (node as Konva.Transformer).nodes().length > 0
33 |       )
34 |     })
35 | 
36 |     // hide visible transformers
37 |     transformers?.forEach(node => node?.hide())
38 | 
39 |     const url = this.board.stage.toDataURL(config)
40 | 
41 |     // revert transformers to their previous state
42 |     transformers?.forEach(node => node?.show())
43 | 
44 |     return url
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/Export/Json/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { Board } from '../../Board'
  4 | import { omit } from '../../utils/omit'
  5 | import { NODE_GROUP_ATTRIBUTE } from '../../constants'
  6 | 
  7 | import type { JsonData } from '../../types'
  8 | 
  9 | /**
 10 |  * @internal
 11 |  */
 12 | export class JsonExport {
 13 |   /**
 14 |    * Represents the [[Board]]
 15 |    */
 16 |   private readonly board: Board
 17 | 
 18 |   constructor(board: Board) {
 19 |     this.board = board
 20 |   }
 21 | 
 22 |   /**
 23 |    * Exports the current workspace to JSON format
 24 |    */
 25 |   export(): JsonData {
 26 |     const stage = this.nodeToObject(this.board.stage, [
 27 |       'container',
 28 |       'children',
 29 |       'zIndex'
 30 |     ])
 31 |     const layer = this.nodeToObject(this.board.layer, ['children', 'zIndex'])
 32 | 
 33 |     const shapes = this.board.activeShapes.map(shape => {
 34 |       return {
 35 |         ...this.nodeToObject(shape.node, []),
 36 |         group: shape.group
 37 |       }
 38 |     })
 39 | 
 40 |     const background = {
 41 |       image: {
 42 |         ...this.nodeToObject(this.board.background.image.node),
 43 |         group: this.board.background.image.group
 44 |       },
 45 |       overlay: {
 46 |         ...this.nodeToObject(this.board.background.overlay.node),
 47 |         group: this.board.background.overlay.group
 48 |       }
 49 |     }
 50 | 
 51 |     return {
 52 |       stage,
 53 |       layer,
 54 |       background,
 55 |       shapes
 56 |     }
 57 |   }
 58 | 
 59 |   /**
 60 |    * Converts node to object
 61 |    * @param node The node
 62 |    */
 63 |   private nodeToObject(
 64 |     node: Konva.Stage | Konva.Layer | Konva.Node,
 65 |     exclude: string[] = []
 66 |   ) {
 67 |     const data = node.toObject()
 68 | 
 69 |     if (data.className === 'Image' && node.attrs.image) {
 70 |       data.attrs.url = node.attrs.image.src
 71 |     }
 72 | 
 73 |     const filters = (node.filters() || []).map(filter => {
 74 |       return Object.keys(Konva.Filters).find(
 75 |         (name: keyof typeof Konva.Filters) => Konva.Filters[name] === filter
 76 |       )
 77 |     }) as string[]
 78 | 
 79 |     const attrs = omit(
 80 |       {
 81 |         ...data.attrs,
 82 |         ...Object.entries({
 83 |           x: node.x() ?? undefined,
 84 |           y: node.y() ?? undefined,
 85 |           width: node.width() || undefined,
 86 |           height: node.height() || undefined
 87 |         }).reduce(
 88 |           (acc, [key, value]) => ({
 89 |             ...acc,
 90 |             [key]: value ? Number(value?.toFixed(2)) : value
 91 |           }),
 92 |           {}
 93 |         )
 94 |       },
 95 |       ['draggable', 'filters', NODE_GROUP_ATTRIBUTE, ...exclude]
 96 |     )
 97 | 
 98 |     return {
 99 |       attrs,
100 |       filters,
101 |       className: data.className,
102 |       ...(!exclude.includes('zIndex') && { zIndex: node.zIndex() }),
103 |       ...(['Label'].includes(data.className) && { children: data.children })
104 |     }
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/src/Export/index.ts:
--------------------------------------------------------------------------------
 1 | import { Board } from '../Board'
 2 | import { Cropper } from '../Cropper'
 3 | 
 4 | import { ImageExport } from './Image'
 5 | import { JsonExport } from './Json'
 6 | 
 7 | import type { ExportImageConfig } from '../types'
 8 | 
 9 | export class Export {
10 |   /**
11 |    * Represents the [[Board]]
12 |    */
13 |   private readonly board: Board
14 | 
15 |   /**
16 |    * Represents the [[Cropper]]
17 |    */
18 |   private readonly cropper: Cropper
19 | 
20 |   /**
21 |    * Represents the [[ImageExport]]
22 |    */
23 |   private readonly image: ImageExport
24 | 
25 |   /**
26 |    * Represents the [[JsonExport]]
27 |    */
28 |   private readonly json: JsonExport
29 | 
30 |   constructor(board: Board, cropper: Cropper) {
31 |     this.board = board
32 |     this.cropper = cropper
33 | 
34 |     this.image = new ImageExport(this.board)
35 |     this.json = new JsonExport(this.board)
36 |   }
37 | 
38 |   /**
39 |    * Exports the current workspace to image
40 |    *
41 |    * @param config The export options
42 |    * @returns The exported image data url
43 |    */
44 |   public toImage(config?: Partial<ExportImageConfig>) {
45 |     this.cropper.stop()
46 | 
47 |     return this.image.export(config)
48 |   }
49 | 
50 |   /**
51 |    * Exports the current workspace to json string
52 |    *
53 |    * @returns The exported JSON object
54 |    */
55 |   public toJson() {
56 |     return this.json.export()
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/Filter/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { Board } from '../Board'
  4 | import { ShapeModel } from '../shape/ShapeModel'
  5 | 
  6 | import type { FilterFunctions, Filters, HistoryState } from '../types'
  7 | 
  8 | export class Filter {
  9 |   /**
 10 |    * Represents the [[Board]]
 11 |    */
 12 |   private board: Board
 13 | 
 14 |   /**
 15 |    * Creates a filter instance that lets apply various filters
 16 |    * on every shape that extends the class.
 17 |    *
 18 |    * Basically every [[ShapeModel]] has exposed [[ShapeModel.addFilter]] and
 19 |    * [[ShapeModel.removeFilter]] to work with filters
 20 |    *
 21 |    * @param board The [[Board]]
 22 |    *
 23 |    * @example
 24 |    * Adds a blur filter to background image
 25 |    * ```ts
 26 |    * editor.board.background.image.addFilter({
 27 |    *  name: 'Blur',
 28 |    *  options: {
 29 |    *    blurRadius: 20
 30 |    *  }
 31 |    * })
 32 |    * ```
 33 |    *
 34 |    * @example
 35 |    * Adds blur and contrast filters to background image
 36 |    * ```ts
 37 |    * editor.board.background.image.addFilter([
 38 |    *  {
 39 |    *    name: 'Blur',
 40 |    *    options: {
 41 |    *      blurRadius: 20
 42 |    *    }
 43 |    *  },
 44 |    *  {
 45 |    *    name: 'Contrast',
 46 |    *    options: {
 47 |    *      contrast: 30
 48 |    *    }
 49 |    *  }
 50 |    * ])
 51 |    * ```
 52 |    *
 53 |    * @example
 54 |    * Adds a contrast filter to all selected shapes
 55 |    * ```ts
 56 |    * editor.selection.addFilter({
 57 |    *  name: 'Contrast',
 58 |    *  options: {
 59 |    *    contrast: 30
 60 |    *  }
 61 |    * })
 62 |    * ```
 63 |    *
 64 |    * @example
 65 |    * Remove contrast filter of selected items
 66 |    * ```ts
 67 |    * editor.selection.removeFilter({ name: Contrast' })
 68 |    * ```
 69 |    *
 70 |    * @example
 71 |    * Remove multiple filters
 72 |    * ```ts
 73 |    * editor.selection.removeFilter([
 74 |    *  { name: Contrast' },
 75 |    *  { customFn: theFunction },
 76 |    *  { name: 'Contrast' }
 77 |    * ])
 78 |    * ```
 79 |    *
 80 |    * @example
 81 |    * Adds a custom filter to background image
 82 |    * ```ts
 83 |    * editor.selection.addFilter({
 84 |    *  customFn: imageData => theCustomFunction(imageData),
 85 |    * })
 86 |    * ```
 87 |    *
 88 |    * @example
 89 |    * Directly access to filters
 90 |    *
 91 |    * ```ts
 92 |    * editor.filters.apply([editor.board.background.image], {
 93 |    *  name: 'Grayscale',
 94 |    * })
 95 |    * ```
 96 |    */
 97 |   constructor(board: Board) {
 98 |     this.board = board
 99 |   }
100 | 
101 |   /**
102 |    * Applies a filter to the given shapes
103 |    *
104 |    * @param shapes List of the [[ShapeModel | Shapes]]
105 |    * @param filters The list of given [[Filters | Filter]]
106 |    */
107 |   public apply(shapes: ShapeModel[], filters: Filters | Filters[]) {
108 |     this.board.history.create(
109 |       this.board.layer,
110 |       shapes.map(shape => shape.node),
111 |       {
112 |         undo: (states: HistoryState[]) => this.clearCache(states),
113 |         redo: (states: HistoryState[]) => this.addCache(states)
114 |       }
115 |     )
116 | 
117 |     shapes.forEach(shape => {
118 |       shape.node.cache()
119 | 
120 |       const list = Array.isArray(filters) ? filters : [filters]
121 | 
122 |       list.forEach(filter => {
123 |         if ('options' in filter) {
124 |           shape.node.setAttrs(filter.options)
125 |         }
126 | 
127 |         const nodeFilters = shape.node.filters() || []
128 |         const filterFn = this.getFilterFunction(filter)
129 | 
130 |         if (nodeFilters.includes(filterFn) === false) {
131 |           shape.node.filters([...nodeFilters, filterFn])
132 |         }
133 |       })
134 |     })
135 | 
136 |     this.board.events.emit('filter:add', {
137 |       shapes,
138 |       data: {
139 |         filters
140 |       }
141 |     })
142 |   }
143 | 
144 |   /**
145 |    * Remove filters of the given shapes
146 |    *
147 |    * @param shapes List of the [[ShapeModel | Shapes]]
148 |    * @param filters The [[Filters | filter]] list
149 |    */
150 |   public remove(
151 |     shapes: ShapeModel[],
152 |     filters: FilterFunctions | FilterFunctions[]
153 |   ) {
154 |     this.board.history.create(
155 |       this.board.layer,
156 |       shapes.map(shape => shape.node),
157 |       {
158 |         undo: (states: HistoryState[]) => this.addCache(states),
159 |         redo: (states: HistoryState[]) => this.clearCache(states)
160 |       }
161 |     )
162 | 
163 |     shapes.forEach(shape => {
164 |       if (!shape.node.filters()) {
165 |         return
166 |       }
167 | 
168 |       const list = Array.isArray(filters)
169 |         ? filters.map(this.getFilterFunction)
170 |         : [this.getFilterFunction(filters)]
171 | 
172 |       const nextFilters = shape.node
173 |         .filters()
174 |         .filter(filter => !list.includes(filter))
175 | 
176 |       if (nextFilters.length === 0) {
177 |         shape.node.clearCache()
178 |       }
179 | 
180 |       shape.node.filters(nextFilters)
181 |     })
182 | 
183 |     this.board.events.emit('filter:remove', {
184 |       shapes,
185 |       data: {
186 |         filters
187 |       }
188 |     })
189 |   }
190 | 
191 |   /**
192 |    * Caches the state
193 |    *
194 |    * The main purpose of this function is make the filters working
195 |    * with Konva library. basically when an Undo happens the [[History]]
196 |    * component tries to apply previous attributes but it doesn't know
197 |    * about methods. so this function does the job
198 |    *
199 |    * @param states The history state
200 |    */
201 |   private addCache(states: HistoryState[]) {
202 |     states.forEach(({ nodes }) =>
203 |       nodes.forEach(node => {
204 |         if (!node.isCached() && node.filters()?.length) {
205 |           node.cache()
206 |         }
207 |       })
208 |     )
209 | 
210 |     this.board.selection.reselect()
211 |   }
212 | 
213 |   /**
214 |    * Removes the cache of the states
215 |    *
216 |    * @see [[Filter.addCache]]
217 |    *
218 |    * @param states The history state
219 |    */
220 |   private clearCache(states: HistoryState[]) {
221 |     states.forEach(({ nodes }) =>
222 |       nodes.forEach(node => {
223 |         if (node.isCached() && !node.filters()?.length) {
224 |           node.clearCache()
225 |         }
226 |       })
227 |     )
228 | 
229 |     this.board.selection.reselect()
230 |   }
231 | 
232 |   /**
233 |    * Returns filter processor function
234 |    *
235 |    * @param filter The [[Filters | filter]]
236 |    * @returns filter function
237 |    */
238 |   private getFilterFunction(filter: Filters) {
239 |     return 'customFn' in filter ? filter.customFn : Konva.Filters[filter.name]
240 |   }
241 | }
242 | 


--------------------------------------------------------------------------------
/src/Flip/index.ts:
--------------------------------------------------------------------------------
  1 | import { Board } from '../Board'
  2 | import { ShapeModel } from '../shape/ShapeModel'
  3 | 
  4 | export class Flip {
  5 |   /**
  6 |    * Reperesents the [[Board]]
  7 |    */
  8 |   private readonly board: Board
  9 | 
 10 |   /**
 11 |    * Lets the shapes to get flipped vertically and horizontally
 12 |    *
 13 |    * @example
 14 |    * Flips everything in the board horizontally
 15 |    * ```ts
 16 |    * editor.board.flip.horizontal()
 17 |    * ```
 18 |    *
 19 |    * @example
 20 |    * Flips everything in the board vertically
 21 |    *```ts
 22 |    * editor.board.flip.vertical()
 23 |    * ```
 24 |    *
 25 |    * @example
 26 |    * Flips selected shapes horizontally
 27 |    * ```ts
 28 |    * editor.board.flip.vertical(this.board.selection.shapes)
 29 |    * ```
 30 |    *
 31 |    * @param board The [[Board]]
 32 |    */
 33 |   constructor(board: Board) {
 34 |     this.board = board
 35 |   }
 36 | 
 37 |   /**
 38 |    * Flips the given shapes horizontally
 39 |    *
 40 |    * @param shapes List of the [[ShapeModel | Shapes]]
 41 |    */
 42 |   public horizontal(shapes?: ShapeModel[]) {
 43 |     const list = (
 44 |       shapes ?? [...this.board.activeShapes, this.board.background.image]
 45 |     ).filter(shape => !shape.hasGroup())
 46 | 
 47 |     this.board.history.create(
 48 |       this.board.layer,
 49 |       list.map(shape => shape.node)
 50 |     )
 51 | 
 52 |     list.forEach(shape => {
 53 |       const node = shape.node
 54 | 
 55 |       const rect = node.getClientRect()
 56 | 
 57 |       node.scaleX(node.scaleX() * -1)
 58 | 
 59 |       const newRect = node.getClientRect()
 60 | 
 61 |       node.setAttrs({
 62 |         x: node.x() + (rect.x - newRect.x),
 63 |         y: node.y() + (rect.y - newRect.y)
 64 |       })
 65 |     })
 66 | 
 67 |     this.board.events.emit('flip:x', {
 68 |       shapes: list
 69 |     })
 70 |   }
 71 | 
 72 |   /**
 73 |    * Flips the given shapes vertically
 74 |    *
 75 |    * @param shapes List of the [[ShapeModel | Shapes]]
 76 |    */
 77 |   public vertical(shapes?: ShapeModel[]) {
 78 |     const list = (
 79 |       shapes ?? [...this.board.activeShapes, this.board.background.image]
 80 |     ).filter(shape => !shape.hasGroup())
 81 | 
 82 |     this.board.history.create(
 83 |       this.board.layer,
 84 |       list.map(shape => shape.node)
 85 |     )
 86 | 
 87 |     list.forEach(shape => {
 88 |       const node = shape.node
 89 | 
 90 |       const rect = node.getClientRect()
 91 | 
 92 |       node.scaleY(node.scaleY() * -1)
 93 | 
 94 |       const newRect = node.getClientRect()
 95 | 
 96 |       node.setAttrs({
 97 |         x: node.x() + (rect.x - newRect.x),
 98 |         y: node.y() + (rect.y - newRect.y)
 99 |       })
100 |     })
101 | 
102 |     this.board.events.emit('flip:y', {
103 |       shapes: list
104 |     })
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/src/History/index.test.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Events } from '../Events'
 4 | 
 5 | import { History } from './index'
 6 | 
 7 | describe('History', () => {
 8 |   it('should create a new record when given state is not array', () => {
 9 |     const { history, layer, node } = createState()
10 | 
11 |     history.create(layer, node)
12 | 
13 |     expect(history.getList().length).toBe(1)
14 |   })
15 | 
16 |   it('should create a new record when given state is array', () => {
17 |     const { history, layer, node } = createState()
18 | 
19 |     history.create(layer, [node])
20 | 
21 |     expect(history.getList().length).toBe(1)
22 |   })
23 | 
24 |   it('should undo the state', () => {
25 |     const { history, layer, node } = createState()
26 | 
27 |     history.create(layer, node)
28 | 
29 |     expect(history.getList().length).toBe(1)
30 |     expect(history.getStep()).toBe(0)
31 | 
32 |     history.undo()
33 | 
34 |     expect(history.getList().length).toBe(1)
35 |     expect(history.getStep()).toBe(-1)
36 |     expect(history.getState()).toBe(undefined)
37 |   })
38 | 
39 |   it('should not undo the state', () => {
40 |     const { history } = createState()
41 | 
42 |     history.undo()
43 | 
44 |     expect(history.getList().length).toBe(0)
45 |     expect(history.getStep()).toBe(-1)
46 |     expect(history.getState()).toBe(undefined)
47 |   })
48 | 
49 |   it('should redo the state', () => {
50 |     const { history, layer, node } = createState()
51 | 
52 |     history.create(layer, node)
53 | 
54 |     expect(history.getList().length).toBe(1)
55 |     expect(history.getStep()).toBe(0)
56 | 
57 |     history.undo()
58 | 
59 |     expect(history.getList().length).toBe(1)
60 |     expect(history.getStep()).toBe(-1)
61 |     expect(history.getState()).toBe(undefined)
62 | 
63 |     history.redo()
64 | 
65 |     expect(history.getList().length).toBe(1)
66 |     expect(history.getStep()).toBe(0)
67 |     expect(history.getState()).not.toBe(undefined)
68 |   })
69 | 
70 |   it('should not redo the state', () => {
71 |     const { history } = createState()
72 | 
73 |     history.redo()
74 | 
75 |     expect(history.getList().length).toBe(0)
76 |     expect(history.getStep()).toBe(-1)
77 |     expect(history.getState()).toBe(undefined)
78 |   })
79 | })
80 | 
81 | function createState() {
82 |   const shapeConfig = {
83 |     x: 0,
84 |     y: 0,
85 |     width: 100,
86 |     height: 100
87 |   }
88 | 
89 |   const history = new History({}, new Events())
90 |   const layer = new Konva.Layer()
91 |   const node = new Konva.Rect(shapeConfig)
92 | 
93 |   return { history, layer, node }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/Import/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { omit } from '../utils/omit'
  4 | 
  5 | import { Board } from '../Board'
  6 | import { ShapeModel } from '../shape/ShapeModel'
  7 | 
  8 | import type { JsonData, BaseShapes } from '../types'
  9 | 
 10 | /**
 11 |  * @internal
 12 |  */
 13 | export class Import {
 14 |   /**
 15 |    * Represents the [[Board]]
 16 |    */
 17 |   private readonly board: Board
 18 | 
 19 |   /**
 20 |    * Represents the [[ShapeModel | Shapes]]
 21 |    */
 22 |   private readonly shapes: BaseShapes
 23 | 
 24 |   constructor(board: Board, shapes: BaseShapes) {
 25 |     this.board = board
 26 |     this.shapes = shapes
 27 |   }
 28 | 
 29 |   /**
 30 |    * Loads the given JSON object
 31 |    *
 32 |    * @param data The [[JsonData | data]]
 33 |    */
 34 |   public async json({ stage, layer, background, shapes }: JsonData) {
 35 |     this.board.background.overlay.update(background.overlay)
 36 | 
 37 |     if (background.image.attrs.url) {
 38 |       await this.board.background.setImageFromUrl(
 39 |         background.image.attrs.url as string
 40 |       )
 41 | 
 42 |       this.board.background.image.update(omit(background.image.attrs, ['url']))
 43 |     }
 44 | 
 45 |     // update layer attributes
 46 |     this.board.layer.setAttrs(omit(layer.attrs, ['width', 'height']))
 47 | 
 48 |     // update stage attributes
 49 |     this.board.stage.setAttrs(stage.attrs)
 50 | 
 51 |     // create groups instances
 52 |     shapes.forEach(json => {
 53 |       if (json.className === 'Group') {
 54 |         this.board.groups.create(json.attrs.name, json.attrs)
 55 |       }
 56 |     })
 57 | 
 58 |     // create shape instances
 59 |     await Promise.all(
 60 |       shapes.map(async json => {
 61 |         let instance: ShapeModel | undefined
 62 | 
 63 |         switch (json.className) {
 64 |           case 'Image':
 65 |             instance = await this.shapes.image.insert(
 66 |               json.attrs.url as string,
 67 |               omit(json.attrs, ['url'])
 68 |             )
 69 |             break
 70 | 
 71 |           case 'Label':
 72 |             instance = this.shapes.label.insert({
 73 |               container: json.attrs as Konva.LabelConfig,
 74 |               tag: json.children![0].attrs as Konva.TagConfig,
 75 |               text: json.children![1].attrs as Konva.TextConfig
 76 |             })
 77 |             break
 78 | 
 79 |           case 'Text':
 80 |             instance = this.shapes.text.insert(json.attrs as Konva.TextConfig)
 81 |             break
 82 | 
 83 |           case 'Line':
 84 |             instance = this.shapes.line.insert(json.attrs as Konva.LineConfig)
 85 |             break
 86 | 
 87 |           case 'Arrow':
 88 |             instance = this.shapes.arrow.insert(json.attrs as Konva.ArrowConfig)
 89 |             break
 90 | 
 91 |           case 'Circle':
 92 |             instance = this.shapes.circle.insert(
 93 |               json.attrs as Konva.CircleConfig
 94 |             )
 95 |             break
 96 | 
 97 |           case 'Ellipse':
 98 |             instance = this.shapes.ellipse.insert(
 99 |               json.attrs as Konva.EllipseConfig
100 |             )
101 |             break
102 | 
103 |           case 'RegularPolygon':
104 |             instance = this.shapes.polygon.insert(
105 |               json.attrs as Konva.RegularPolygonConfig
106 |             )
107 |             break
108 | 
109 |           case 'Rect':
110 |             instance = this.shapes.rect.insert(json.attrs as Konva.RectConfig)
111 |             break
112 | 
113 |           case 'Path':
114 |             instance = this.shapes.svg.insert(json.attrs as Konva.PathConfig)
115 |             break
116 | 
117 |           case 'Group':
118 |             instance = this.board.groups.find(json.attrs.name)?.container
119 |             break
120 |         }
121 | 
122 |         if (instance) {
123 |           instance.group = json.group
124 |           instance.node.zIndex(json.zIndex ?? 0)
125 |         }
126 | 
127 |         if (
128 |           instance &&
129 |           Array.isArray(json.filters) &&
130 |           json.filters?.length > 0
131 |         ) {
132 |           json.filters.forEach((name: keyof typeof Konva.Filters) => {
133 |             instance!.node.filters([
134 |               ...(instance?.node.filters() || []),
135 |               Konva.Filters[name]
136 |             ])
137 |           })
138 | 
139 |           instance.node.cache()
140 |         }
141 |       })
142 |     )
143 |   }
144 | }
145 | 


--------------------------------------------------------------------------------
/src/Rotation/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { convertDegreeToRadian } from '../utils/degree-to-radian'
  4 | import { rotateAroundCenter } from '../utils/rotate-around-center'
  5 | import { getRotatedPoint } from '../utils/get-rotated-point'
  6 | 
  7 | import { RectModel } from '../shape/models/RectModel'
  8 | import { ImageModel } from '../shape/models/ImageModel'
  9 | import { Board } from '../Board'
 10 | 
 11 | export class Rotation {
 12 |   /**
 13 |    * Represents the [[Board]]
 14 |    */
 15 |   private readonly board: Board
 16 | 
 17 |   /**
 18 |    * Rotates shapes and background
 19 |    *
 20 |    * @example
 21 |    * ```ts
 22 |    * editor.rotation.transform(30)
 23 |    * ```
 24 |    *
 25 |    * @example
 26 |    * ```ts
 27 |    * editor.rotation.straighten(-30)
 28 |    * ```
 29 |    *
 30 |    * @param board The [[Board]]
 31 |    */
 32 |   constructor(board: Board) {
 33 |     this.board = board
 34 |   }
 35 | 
 36 |   /**
 37 |    * Rotates the board with its shapes around their center
 38 |    * with scaling and transforming
 39 |    *
 40 |    * @param theta The rotation angle
 41 |    *
 42 |    * @example
 43 |    * ```ts
 44 |    * editor.rotation.transform(30)
 45 |    * ```
 46 |    */
 47 |   public transform(theta: number) {
 48 |     this.board.history.create(this.board.stage, [
 49 |       this.board.stage,
 50 |       ...this.board.getNodes()
 51 |     ])
 52 | 
 53 |     const radian = convertDegreeToRadian(Number(theta))
 54 | 
 55 |     const { width, height } = this.board.getDimensions()
 56 | 
 57 |     const rcos = Math.abs(Math.cos(radian))
 58 |     const rsin = Math.abs(Math.sin(radian))
 59 | 
 60 |     const scaledWidth = width * rcos + height * rsin
 61 |     const scaledHeight = height * rcos + width * rsin
 62 | 
 63 |     // stage's height is fixed and width is changing based on the ratio
 64 |     const stageHeight = height
 65 |     const stageWidth = (height / scaledHeight) * scaledWidth
 66 |     const stageScale = stageWidth / scaledWidth
 67 | 
 68 |     // find the new center point
 69 |     const center = getRotatedPoint(
 70 |       {
 71 |         x: (width * stageScale) / 2,
 72 |         y: (height * stageScale) / 2
 73 |       },
 74 |       radian
 75 |     )
 76 | 
 77 |     this.board.stage.setAttrs({
 78 |       width: stageWidth,
 79 |       height: stageHeight
 80 |     })
 81 | 
 82 |     const backgroundShapes = [
 83 |       this.board.background.image,
 84 |       this.board.background.overlay
 85 |     ].filter(shape => shape.isSelectable === false)
 86 | 
 87 |     backgroundShapes.forEach((shape: ImageModel | RectModel) => {
 88 |       const node = shape.node
 89 | 
 90 |       node.scale({
 91 |         x: stageScale,
 92 |         y: stageScale
 93 |       })
 94 |       node.rotation(Number(theta))
 95 |       node.x(stageWidth / 2 - center.x)
 96 |       node.y(stageHeight / 2 - center.y)
 97 |     })
 98 | 
 99 |     this.board.activeShapes.forEach(shape => {
100 |       if (shape.hasGroup()) {
101 |         return
102 |       }
103 | 
104 |       const scaleX = shape.node.attrs.originalScaleX ?? shape.node.scaleX()
105 |       const scaleY = shape.node.attrs.originalScaleY ?? shape.node.scaleY()
106 |       const x = shape.node.attrs.originalX ?? shape.node.x()
107 |       const y = shape.node.attrs.originalY ?? shape.node.y()
108 | 
109 |       const center = getRotatedPoint(
110 |         {
111 |           x,
112 |           y
113 |         },
114 |         convertDegreeToRadian(theta)
115 |       )
116 | 
117 |       shape.node.setAttrs({
118 |         originalX: x,
119 |         originalY: y,
120 |         originalScaleX: scaleX,
121 |         originalScaleY: scaleY,
122 |         rotation: Number(theta),
123 |         x: center.x * stageScale + this.board.background.getPosition().x,
124 |         y: center.y * stageScale + this.board.background.getPosition().y,
125 |         scaleX: scaleX * stageScale,
126 |         scaleY: scaleY * stageScale
127 |       })
128 |     })
129 | 
130 |     this.board.events.emit('rotation:transform')
131 |   }
132 | 
133 |   /**
134 |    * Rotates the board with its shapes around their center without transforming
135 |    * @param theta The rotation angle
136 |    *
137 |    * @example
138 |    * ```
139 |    * editor.rotation.straighten(30)
140 |    * ```
141 |    *
142 |    * @example
143 |    * ```
144 |    * editor.rotation.straighten(-50)
145 |    * ```
146 |    */
147 |   public straighten(theta: number) {
148 |     this.board.background.nodes.forEach((node: Konva.Shape) => {
149 |       rotateAroundCenter(node, theta)
150 |     })
151 | 
152 |     this.board.activeShapes.forEach(shape => {
153 |       if (shape.hasGroup()) {
154 |         return
155 |       }
156 | 
157 |       shape.rotate(theta)
158 |     })
159 | 
160 |     this.board.events.emit('rotation:straighten')
161 |   }
162 | }
163 | 


--------------------------------------------------------------------------------
/src/Tag/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { Board } from '../Board'
  4 | import { defaultTransformerSettings } from '../defaultSettings'
  5 | import { Dimensions, Nullable, Point } from '../types'
  6 | 
  7 | /**
  8 |  * This is a light implementation of [[LabelModel]] for internal use
  9 |  * The tag is mostly used to display measurements and sizes
 10 |  */
 11 | export class Tag {
 12 |   /**
 13 |    * Represents the main container that includes background and text nodes
 14 |    */
 15 |   public node: Konva.Label
 16 | 
 17 |   /**
 18 |    * Represents the [[Board]]
 19 |    */
 20 |   private board: Board
 21 | 
 22 |   /**
 23 |    * Represents the background node
 24 |    */
 25 |   private backgroundNode: Konva.Tag
 26 | 
 27 |   /**
 28 |    * Represents the text node
 29 |    */
 30 |   private textNode: Konva.Text
 31 | 
 32 |   /**
 33 |    * Creates a new tag object
 34 |    *
 35 |    * @param board The [[Board]]
 36 |    * @param defaultVisible Indicates whether a tag is visible by default or not
 37 |    */
 38 |   constructor(board: Board, defaultVisible = false) {
 39 |     this.board = board
 40 | 
 41 |     this.node = new Konva.Label()
 42 |     this.backgroundNode = new Konva.Tag(
 43 |       this.board.settings.measurement?.background
 44 |     )
 45 |     this.textNode = new Konva.Text({
 46 |       text: ' ',
 47 |       ...this.board.settings.measurement?.text
 48 |     })
 49 | 
 50 |     this.node.add(this.backgroundNode, this.textNode)
 51 | 
 52 |     if (defaultVisible === false) {
 53 |       this.hide()
 54 |     }
 55 | 
 56 |     this.board.layer.add(this.node)
 57 |   }
 58 | 
 59 |   /**
 60 |    * Updates the position of the tag
 61 |    */
 62 |   public set position(point: Point) {
 63 |     this.node.setAttrs({
 64 |       x: point.x,
 65 |       y: point.y
 66 |     })
 67 | 
 68 |     this.node.moveToTop()
 69 |   }
 70 | 
 71 |   /**
 72 |    * Updates the text value of the tag
 73 |    */
 74 |   public set text(value: string) {
 75 |     this.textNode.setAttr('text', value)
 76 |   }
 77 | 
 78 |   /**
 79 |    * Displays the tag node
 80 |    */
 81 |   public show(): void {
 82 |     if (this.node.isVisible()) {
 83 |       return
 84 |     }
 85 | 
 86 |     this.node.clearCache()
 87 |     this.node.show()
 88 |   }
 89 | 
 90 |   /**
 91 |    * Hides the tag node
 92 |    */
 93 |   public hide(): void {
 94 |     if (this.node.isVisible() === false) {
 95 |       return
 96 |     }
 97 | 
 98 |     this.node.hide()
 99 |     this.node.cache()
100 |   }
101 | 
102 |   /**
103 |    * Updates position and text of the tag
104 |    * Based on the given shape, the position is calculated automatically
105 |    *
106 |    * @param node The target node
107 |    */
108 |   public measure(
109 |     node: Nullable<Konva.Shape | Konva.Group | Konva.Transformer>,
110 |     rect?: Dimensions & Point
111 |   ): void {
112 |     if (!node || !this.board.settings.measurement) {
113 |       return
114 |     }
115 | 
116 |     const margin = Math.max(
117 |       this.board.settings.measurement.margin ?? 0,
118 |       this.board.settings.transformer?.anchorSize ?? 0,
119 |       defaultTransformerSettings.anchorSize ?? 0
120 |     )
121 | 
122 |     const containerRect = rect ?? node.getClientRect()
123 | 
124 |     this.text = `${containerRect.width.toFixed(
125 |       0
126 |     )} × ${containerRect.height.toFixed(0)}`
127 | 
128 |     let x = containerRect.x + containerRect.width / 2 - this.node.width() / 2
129 |     let y = containerRect.y + containerRect.height + margin
130 | 
131 |     if (y + this.node.height() > this.board.getDimensions().height) {
132 |       y = containerRect.y + node.height() - this.node.height() * 2 - margin
133 |     }
134 | 
135 |     this.position = {
136 |       x,
137 |       y
138 |     }
139 | 
140 |     if (this.node.isVisible() === false) {
141 |       this.show()
142 |     }
143 |   }
144 | }
145 | 


--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | export const NODE_GROUP_ATTRIBUTE = '__group__'
2 | 


--------------------------------------------------------------------------------
/src/defaultSettings.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Settings } from './types'
 4 | 
 5 | export const defaultTransformerSettings: Partial<Konva.TransformerConfig> = {
 6 |   borderDash: [15, 10],
 7 |   borderStroke: '#fff',
 8 |   borderStrokeWidth: 3,
 9 |   anchorSize: 15,
10 |   anchorFill: '#fff',
11 |   anchorStroke: '#fff',
12 |   anchorStrokeWidth: 1,
13 |   anchorCornerRadius: 30
14 | }
15 | 
16 | export const defaultSettings: Omit<Settings, 'container' | 'width' | 'height'> =
17 |   {
18 |     disableCanvasContextMenu: true,
19 |     containerClassName: 'pikaso',
20 |     transformer: defaultTransformerSettings,
21 |     snapToGrid: null,
22 |     cropper: {
23 |       transformer: defaultTransformerSettings,
24 |       circular: false,
25 |       fixed: false,
26 |       keepRatio: true,
27 |       aspectRatio: 1,
28 |       minWidth: 100,
29 |       minHeight: 100,
30 |       marginRatio: 1.1,
31 |       overlay: {
32 |         color: '#262626',
33 |         opacity: 0.5
34 |       },
35 |       guides: {
36 |         show: true,
37 |         count: 3,
38 |         color: '#fff',
39 |         width: 1,
40 |         dash: [15, 10]
41 |       }
42 |     },
43 |     drawing: {
44 |       autoSelect: false,
45 |       keyboard: {
46 |         cancelOnEscape: true
47 |       }
48 |     },
49 |     selection: {
50 |       interactive: true,
51 |       keyboard: {
52 |         enabled: true,
53 |         movingSpaces: 5,
54 |         map: {
55 |           delete: ['Backspace', 'Delete'],
56 |           moveLeft: ['ArrowLeft'],
57 |           moveRight: ['ArrowRight'],
58 |           moveUp: ['ArrowUp'],
59 |           moveDown: ['ArrowDown'],
60 |           deselect: ['Escape']
61 |         }
62 |       },
63 |       transformer: {
64 |         ...defaultTransformerSettings,
65 |         borderDash: [0, 0]
66 |       },
67 |       zone: {
68 |         fill: 'rgba(105, 105, 105, 0.7)',
69 |         stroke: '#dbdbdb'
70 |       }
71 |     },
72 |     history: {
73 |       keyboard: {
74 |         enabled: true
75 |       }
76 |     },
77 |     measurement: null
78 |   }
79 | 


--------------------------------------------------------------------------------
/src/grouping/Groups/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { ShapeModel } from '../../shape/ShapeModel'
  4 | import { GroupsManager } from '../GroupsManager'
  5 | import type { Group } from '../../types'
  6 | 
  7 | export class Groups extends GroupsManager {
  8 |   /**
  9 |    * Creates a new group
 10 |    *
 11 |    * @param groupName The group name
 12 |    * @param config The group configurations
 13 |    * @returns The created [[Group]]
 14 |    */
 15 |   public create(groupName: string, config: Konva.ContainerConfig = {}): Group {
 16 |     return this.createGroup(groupName, config)
 17 |   }
 18 | 
 19 |   /**
 20 |    * Searches for a group by the given name.
 21 |    * If nothing is found, it will return undefinedit will return undefined if nothing is found
 22 |    *
 23 |    * @param groupName The name of the group
 24 |    * @returns The found [[Group]]
 25 |    */
 26 |   public find(groupName: string): Group | undefined {
 27 |     return this.findGroup(groupName)
 28 |   }
 29 | 
 30 |   /**
 31 |    * Searches a group by its name
 32 |    * If nothing is found, it will create a new group
 33 |    *
 34 |    * @param groupName The group name
 35 |    * @param config The group configurations
 36 |    * @returns The created group
 37 |    */
 38 |   public findOrCreate(
 39 |     groupName: string,
 40 |     config: Konva.ContainerConfig = {}
 41 |   ): Group {
 42 |     return this.findOrCreateGroup(groupName, config)
 43 |   }
 44 | 
 45 |   /**
 46 |    * Deletes a group based on the give name
 47 |    * Undoing this action is possible
 48 |    *
 49 |    * @param groupName The group name
 50 |    */
 51 |   public delete(groupName: string): void {
 52 |     this.deleteGroup(groupName)
 53 |   }
 54 | 
 55 |   /**
 56 |    * Restores a group based on the given name
 57 |    *
 58 |    * @param groupName The group name
 59 |    */
 60 |   public undelete(groupName: string): void {
 61 |     this.undeleteGroup(groupName)
 62 |   }
 63 | 
 64 |   /**
 65 |    * Destory a group.
 66 |    * Undoing this action is impossible
 67 |    *
 68 |    * @param groupName The group name
 69 |    */
 70 |   public destroy(groupName: string): void {
 71 |     this.destroyGroup(groupName)
 72 |   }
 73 | 
 74 |   /**
 75 |    * Splits the shapes of the given group and removes the group
 76 |    * Groups that are cached cannot be split
 77 |    *
 78 |    * @param groupName The group name
 79 |    */
 80 |   public ungroup(groupName: string): void {
 81 |     this.splitGroup(groupName)
 82 |   }
 83 | 
 84 |   /**
 85 |    * Adds a list of the given shapes to the group
 86 |    * Whenever a group doesn't exist, it automatically creates one
 87 |    *
 88 |    * @param shapes The array of [[ShapeModel]]
 89 |    * @param groupName The group name
 90 |    * @returns The created [[Group]]
 91 |    */
 92 |   public attach(shapes: ShapeModel[], groupName: string): Group {
 93 |     return this.addToGroup(shapes, groupName)
 94 |   }
 95 | 
 96 |   /**
 97 |    * Removes list of the given shapes from the group
 98 |    * The group won't be removed if it remains empty
 99 |    *
100 |    * @param shapes The array of [[ShapeModel]]
101 |    * @param groupName The group name
102 |    */
103 |   public detach(shapes: ShapeModel[], groupName: string): void {
104 |     this.removeFromGroup(shapes, groupName)
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/src/index.all.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import Pikaso from '.'
 4 | 
 5 | export * from './types'
 6 | 
 7 | export { Board } from './Board'
 8 | export { Events } from './Events'
 9 | export { History } from './History'
10 | export { Export } from './Export'
11 | export { Import } from './Import'
12 | export { Flip } from './Flip'
13 | export { Filter } from './Filter'
14 | export { Cropper } from './Cropper'
15 | export { Rotation } from './Rotation'
16 | export { Selection } from './Selection'
17 | export { Background } from './Background'
18 | export { SnapGrid } from './SnapGrid'
19 | export { Tag } from './Tag'
20 | 
21 | export { Groups } from './grouping/Groups'
22 | export { GroupsManager } from './grouping/GroupsManager'
23 | 
24 | export { ShapeModel } from './shape/ShapeModel'
25 | export { ShapeDrawer } from './shape/ShapeDrawer'
26 | 
27 | export { ArrowDrawer } from './shape/drawers/ArrowDrawer'
28 | export { CircleDrawer } from './shape/drawers/CircleDrawer'
29 | export { EllipseDrawer } from './shape/drawers/EllipseDrawer'
30 | export { ImageDrawer } from './shape/drawers/ImageDrawer'
31 | export { LabelDrawer } from './shape/drawers/LabelDrawer'
32 | export { LineDrawer } from './shape/drawers/LineDrawer'
33 | export { PencilDrawer } from './shape/drawers/PencilDrawer'
34 | export { PolygonDrawer } from './shape/drawers/PolygonDrawer'
35 | export { RectDrawer } from './shape/drawers/RectDrawer'
36 | export { SvgDrawer } from './shape/drawers/SvgDrawer'
37 | export { TextDrawer } from './shape/drawers/TextDrawer'
38 | export { TriangleDrawer } from './shape/drawers/TriangleDrawer'
39 | 
40 | export { ArrowModel } from './shape/models/ArrowModel'
41 | export { CircleModel } from './shape/models/CircleModel'
42 | export { EllipseModel } from './shape/models/EllipseModel'
43 | export { GroupModel } from './shape/models/GroupModel'
44 | export { ImageModel } from './shape/models/ImageModel'
45 | export { LabelModel } from './shape/models/LabelModel'
46 | export { LineModel } from './shape/models/LineModel'
47 | export { PolygonModel } from './shape/models/PolygonModel'
48 | export { RectModel } from './shape/models/RectModel'
49 | export { SvgModel } from './shape/models/SvgModel'
50 | export { TextModel } from './shape/models/TextModel'
51 | export { TriangleModel } from './shape/models/TriangleModel'
52 | 
53 | export { createImageFromUrl } from './utils/create-image-from-url'
54 | export { convertDegreeToRadian } from './utils/degree-to-radian'
55 | export { getRotateCenterPoint } from './utils/get-center-point'
56 | export { getPointsDistance } from './utils/get-points-distance'
57 | export { getRotatedPoint } from './utils/get-rotated-point'
58 | export { convertHtmlToText } from './utils/html-to-text'
59 | export { imageToDataUrl } from './utils/image-to-url'
60 | export { mergeSettings } from './utils/merge-settings'
61 | export { rotateAroundCenter } from './utils/rotate-around-center'
62 | export { omit } from './utils/omit'
63 | 
64 | export { NODE_GROUP_ATTRIBUTE } from './constants'
65 | 
66 | export { defaultSettings, defaultTransformerSettings } from './defaultSettings'
67 | 
68 | export { Konva }
69 | export { Pikaso }
70 | 
71 | export default Pikaso
72 | 


--------------------------------------------------------------------------------
/src/index.node.all.ts:
--------------------------------------------------------------------------------
 1 | import { Konva } from './index.all'
 2 | import { isNode } from './utils/detect-environment'
 3 | 
 4 | if (isNode()) {
 5 |   const canvas = require('canvas')
 6 | 
 7 |   global.DOMMatrix = canvas.DOMMatrix
 8 | 
 9 |   Konva.Util.createCanvasElement = () => {
10 |     const node = new canvas.Canvas()
11 |     node.style = {}
12 | 
13 |     return node
14 |   }
15 | 
16 |   Konva.Util.createImageElement = () => {
17 |     const node = new canvas.Image()
18 | 
19 |     return node
20 |   }
21 | }
22 | 
23 | export * from './index.all'
24 | 


--------------------------------------------------------------------------------
/src/shape/drawers/ArrowDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../../Board'
 4 | 
 5 | import { ShapeDrawer } from '../../ShapeDrawer'
 6 | import { ArrowModel } from '../../models/ArrowModel'
 7 | 
 8 | import { DrawType } from '../../../types'
 9 | 
10 | export class ArrowDrawer extends ShapeDrawer<Konva.Arrow, Konva.ArrowConfig> {
11 |   /**
12 |    * Demonstrates the arrow node that is being created
13 |    */
14 |   public node: Konva.Arrow
15 | 
16 |   /**
17 |    * Creates a new arrow builder component
18 |    *
19 |    * @param board The [[Board]]
20 |    */
21 |   constructor(board: Board) {
22 |     super(board, DrawType.Arrow)
23 |   }
24 | 
25 |   /**
26 |    * @inheritdoc
27 |    * @override
28 |    */
29 |   public insert(config: Konva.ArrowConfig): ArrowModel {
30 |     return super.insert(config)
31 |   }
32 | 
33 |   /**
34 |    * @inheritdoc
35 |    * @override
36 |    */
37 |   public draw(config: Partial<Konva.ArrowConfig> = {}) {
38 |     super.draw(config)
39 |   }
40 | 
41 |   /**
42 |    * @inheritdoc
43 |    * @override
44 |    */
45 |   protected createShape(config: Konva.ArrowConfig): ArrowModel {
46 |     this.node = new Konva.Arrow(config)
47 | 
48 |     return new ArrowModel(this.board, this.node)
49 |   }
50 | 
51 |   /**
52 |    * Starts drawing an arrow shape
53 |    */
54 |   protected onStartDrawing() {
55 |     super.onStartDrawing()
56 | 
57 |     if (!this.isDrawing) {
58 |       return
59 |     }
60 | 
61 |     this.createShape({
62 |       globalCompositeOperation: 'source-over',
63 |       points: [this.startPoint.x, this.startPoint.y],
64 |       ...this.config
65 |     })
66 |   }
67 | 
68 |   /**
69 |    * Continues arrow drawing by concating the first point and
70 |    * current point together
71 |    */
72 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
73 |     super.onDrawing(e)
74 | 
75 |     if (!this.node) {
76 |       return
77 |     }
78 | 
79 |     const point = this.board.stage.getPointerPosition()!
80 |     this.node.points([...this.node.points().slice(0, 2), point.x, point.y])
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/src/shape/drawers/CircleDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { getPointsDistance } from '../../../utils/get-points-distance'
 4 | 
 5 | import { Board } from '../../../Board'
 6 | 
 7 | import { ShapeDrawer } from '../../ShapeDrawer'
 8 | import { CircleModel } from '../../models/CircleModel'
 9 | 
10 | import { DrawType } from '../../../types'
11 | 
12 | export class CircleDrawer extends ShapeDrawer<
13 |   Konva.Circle,
14 |   Konva.CircleConfig
15 | > {
16 |   /**
17 |    * Demonstrates the circle node that is being created
18 |    */
19 |   public node: Konva.Circle
20 | 
21 |   /**
22 |    * Creates a new circle builder component
23 |    *
24 |    * @param board The [[Board]]
25 |    */
26 |   constructor(board: Board) {
27 |     super(board, DrawType.Circle)
28 |   }
29 | 
30 |   /**
31 |    * @inheritdoc
32 |    * @override
33 |    */
34 |   public insert(config: Konva.CircleConfig): CircleModel {
35 |     return super.insert(config)
36 |   }
37 | 
38 |   /**
39 |    * @inheritdoc
40 |    * @override
41 |    */
42 |   public draw(config: Partial<Konva.CircleConfig> = {}) {
43 |     super.draw(config)
44 |   }
45 | 
46 |   /**
47 |    * @inheritdoc
48 |    * @override
49 |    */
50 |   protected createShape(config: Konva.CircleConfig): CircleModel {
51 |     this.node = new Konva.Circle(config)
52 | 
53 |     return new CircleModel(this.board, this.node)
54 |   }
55 | 
56 |   /**
57 |    * Starts drawing a circle shape
58 |    */
59 |   protected onStartDrawing() {
60 |     super.onStartDrawing()
61 | 
62 |     if (!this.isDrawing) {
63 |       return
64 |     }
65 | 
66 |     this.createShape({
67 |       x: this.startPoint.x,
68 |       y: this.startPoint.y,
69 |       radius: 0,
70 |       ...this.config
71 |     })
72 |   }
73 | 
74 |   /**
75 |    * Continues drawing the circle by changing its radius
76 |    */
77 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
78 |     super.onDrawing(e)
79 | 
80 |     if (!this.node) {
81 |       return
82 |     }
83 | 
84 |     const point = this.board.stage.getPointerPosition()!
85 | 
86 |     this.node.setAttrs({
87 |       radius: getPointsDistance(point, this.getShapePosition())
88 |     })
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/src/shape/drawers/EllipseDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../../Board'
 4 | 
 5 | import { ShapeDrawer } from '../../ShapeDrawer'
 6 | import { EllipseModel } from '../../models/EllipseModel'
 7 | 
 8 | import { DrawType } from '../../../types'
 9 | 
10 | export class EllipseDrawer extends ShapeDrawer<
11 |   Konva.Ellipse,
12 |   Konva.EllipseConfig
13 | > {
14 |   /**
15 |    * Demonstrates the ellipse node that is being created
16 |    */
17 |   public node: Konva.Ellipse
18 | 
19 |   /**
20 |    * Creates a new ellipse builder component
21 |    *
22 |    * @param board The [[Board]
23 |    */
24 |   constructor(board: Board) {
25 |     super(board, DrawType.Ellipse)
26 |   }
27 | 
28 |   /**
29 |    * @inheritdoc
30 |    * @override
31 |    */
32 |   public insert(config: Konva.EllipseConfig): EllipseModel {
33 |     return super.insert(config)
34 |   }
35 | 
36 |   /**
37 |    * @inheritdoc
38 |    * @override
39 |    */
40 |   public draw(config: Partial<Konva.EllipseConfig> = {}) {
41 |     super.draw(config)
42 |   }
43 | 
44 |   /**
45 |    * @inheritdoc
46 |    * @override
47 |    */
48 |   protected createShape(config: Konva.EllipseConfig): EllipseModel {
49 |     this.node = new Konva.Ellipse(config)
50 | 
51 |     return new EllipseModel(this.board, this.node)
52 |   }
53 | 
54 |   /**
55 |    * Starts drawing an ellipse shape
56 |    */
57 |   protected onStartDrawing() {
58 |     super.onStartDrawing()
59 | 
60 |     if (!this.isDrawing) {
61 |       return
62 |     }
63 | 
64 |     this.createShape({
65 |       x: this.startPoint.x,
66 |       y: this.startPoint.y,
67 |       radiusX: 0,
68 |       radiusY: 0,
69 |       ...this.config
70 |     })
71 |   }
72 | 
73 |   /**
74 |    * Continues drawing the ellipse by changing its radius values
75 |    */
76 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
77 |     super.onDrawing(e)
78 | 
79 |     if (!this.node) {
80 |       return
81 |     }
82 | 
83 |     const point = this.board.stage.getPointerPosition()!
84 | 
85 |     const radiusX = Math.abs(point.x - this.node.x())
86 |     const radiusY = Math.abs(point.y - this.node.y())
87 | 
88 |     this.node.setAttrs({
89 |       radiusX,
90 |       radiusY: e.evt.shiftKey ? radiusX : radiusY
91 |     })
92 |   }
93 | }
94 | 


--------------------------------------------------------------------------------
/src/shape/drawers/ImageDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { imageToDataUrl } from '../../../utils/image-to-url'
 4 | import { createImageFromUrl } from '../../../utils/create-image-from-url'
 5 | import { isBrowser } from '../../../utils/detect-environment'
 6 | 
 7 | import { Board } from '../../../Board'
 8 | import { ImageModel } from '../../models/ImageModel'
 9 | 
10 | export class ImageDrawer {
11 |   /**
12 |    * Represents the [[Board]]
13 |    */
14 |   private board: Board
15 | 
16 |   /**
17 |    * Creates a new image builder component
18 |    *
19 |    * @param board The [[Board]
20 |    */
21 |   constructor(board: Board) {
22 |     this.board = board
23 |   }
24 | 
25 |   /**
26 |    * Inserts a new image into the board
27 |    *
28 |    * @param image The image [[File]]
29 |    * @param config The image node configuration
30 |    */
31 |   public async insert(
32 |     image: File | Konva.Image | string,
33 |     config: Partial<Konva.ImageConfig> = {}
34 |   ): Promise<ImageModel> {
35 |     let imageInstance: Konva.Image
36 | 
37 |     if (image instanceof Konva.Image) {
38 |       imageInstance = image
39 |     } else {
40 |       const url =
41 |         isBrowser() && image instanceof File
42 |           ? await imageToDataUrl(image)
43 |           : image
44 | 
45 |       imageInstance = await createImageFromUrl(url as string)
46 |     }
47 | 
48 |     const ratio = imageInstance.width() / imageInstance.height()
49 |     const defaultHeight = this.board.stage.height() / 2
50 |     const defaultWidth = defaultHeight * ratio
51 | 
52 |     imageInstance.setAttrs({
53 |       width: defaultWidth,
54 |       height: defaultHeight,
55 |       x: (this.board.stage.width() - defaultWidth) / 2,
56 |       y: (this.board.stage.height() - defaultHeight) / 2,
57 |       rotation: this.board.stage.rotation() * -1,
58 |       draggable: this.board.settings.selection?.interactive,
59 |       ...config
60 |     })
61 | 
62 |     return new ImageModel(this.board, imageInstance, {
63 |       transformer: {
64 |         keepRatio: true
65 |       }
66 |     })
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/shape/drawers/LabelDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../../Board'
 4 | import { LabelModel } from '../../models/LabelModel'
 5 | 
 6 | import type { LabelConfig } from '../../../types/shapes'
 7 | export class LabelDrawer {
 8 |   /**
 9 |    * Represents the [[Board]]
10 |    */
11 |   private readonly board: Board
12 | 
13 |   /**
14 |    * Creates a new label builder component
15 |    *
16 |    * @param board The [[Board]]
17 |    */
18 |   constructor(board: Board) {
19 |     this.board = board
20 |   }
21 | 
22 |   /**
23 |    * Inserts a new label into the board
24 |    *
25 |    * @param configuration The configuration of the label
26 |    */
27 |   public insert({
28 |     container,
29 |     text,
30 |     tag,
31 |     config
32 |   }: {
33 |     container: Konva.LabelConfig
34 |     text: Konva.TextConfig
35 |     tag?: Konva.TagConfig
36 |     config?: LabelConfig
37 |   }): LabelModel {
38 |     const label = new Konva.Label({
39 |       ...container,
40 |       draggable: this.board.settings.selection?.interactive
41 |     })
42 | 
43 |     const textNode = new Konva.Text(text)
44 |     const tagNode = new Konva.Tag(tag)
45 | 
46 |     textNode.setAttr('height', 'auto')
47 |     label.add(tagNode).add(textNode)
48 | 
49 |     return new LabelModel(this.board, label, {
50 |       ...config,
51 |       transformer: {
52 |         centeredScaling: false,
53 |         enabledAnchors: ['middle-left', 'middle-right'],
54 |         ...(config?.transformer ?? {})
55 |       }
56 |     })
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/shape/drawers/LineDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../../Board'
 4 | 
 5 | import { ShapeDrawer } from '../../ShapeDrawer'
 6 | import { LineModel } from '../../models/LineModel'
 7 | 
 8 | import { DrawType } from '../../../types'
 9 | 
10 | export class LineDrawer extends ShapeDrawer<Konva.Line, Konva.LineConfig> {
11 |   /**
12 |    * Demonstrates the line node that is being created
13 |    */
14 |   public node: Konva.Line
15 | 
16 |   /**
17 |    * Creates a new line builder component
18 |    *
19 |    * @param board The [[Board]]
20 |    */
21 |   constructor(board: Board) {
22 |     super(board, DrawType.Line)
23 |   }
24 | 
25 |   /**
26 |    *
27 |    * @param config
28 |    */
29 |   public insert(config: Konva.LineConfig): LineModel {
30 |     return super.insert(config)
31 |   }
32 | 
33 |   /**
34 |    *
35 |    * @param config
36 |    */
37 |   public draw(config: Partial<Konva.LineConfig> = {}) {
38 |     super.draw(config)
39 |   }
40 | 
41 |   /**
42 |    *
43 |    * @param config
44 |    */
45 |   protected createShape(config: Konva.LineConfig): LineModel {
46 |     this.node = new Konva.Line({
47 |       hitStrokeWidth: 15,
48 |       ...config
49 |     })
50 | 
51 |     return new LineModel(this.board, this.node)
52 |   }
53 | 
54 |   /**
55 |    * Starts drawing a line
56 |    */
57 |   protected onStartDrawing() {
58 |     super.onStartDrawing()
59 | 
60 |     if (!this.isDrawing) {
61 |       return
62 |     }
63 | 
64 |     this.createShape({
65 |       globalCompositeOperation: 'source-over',
66 |       points: [this.startPoint.x, this.startPoint.y],
67 |       ...this.config
68 |     })
69 |   }
70 | 
71 |   /**
72 |    * Continues line drawing by concating the first point and
73 |    * current point together
74 |    */
75 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
76 |     super.onDrawing(e)
77 | 
78 |     if (!this.node) {
79 |       return
80 |     }
81 | 
82 |     const point = this.board.stage.getPointerPosition()!
83 |     this.node.points([...this.node.points().slice(0, 2), point.x, point.y])
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/shape/drawers/PencilDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../../Board'
 4 | 
 5 | import { ShapeDrawer } from '../../ShapeDrawer'
 6 | import { LineModel } from '../../models/LineModel'
 7 | 
 8 | import { DrawType } from '../../../types'
 9 | 
10 | export class PencilDrawer extends ShapeDrawer<Konva.Line, Konva.LineConfig> {
11 |   /**
12 |    * Demonstrates the point (line) node that is being created
13 |    */
14 |   public node: Konva.Line
15 | 
16 |   /**
17 |    * Creates a new free drawing component
18 |    *
19 |    * @param board The [[Board]]
20 |    */
21 |   constructor(board: Board) {
22 |     super(board, DrawType.Pencil, {
23 |       measurement: false
24 |     })
25 |   }
26 | 
27 |   /**
28 |    * @inheritdoc
29 |    * @override
30 |    */
31 |   public draw(config: Partial<Konva.LineConfig> = {}) {
32 |     super.draw(config)
33 |   }
34 | 
35 |   /**
36 |    * @inheritdoc
37 |    * @override
38 |    */
39 |   protected createShape(config: Konva.LineConfig): LineModel {
40 |     this.node = new Konva.Line(config)
41 | 
42 |     return new LineModel(this.board, this.node)
43 |   }
44 | 
45 |   /**
46 |    * Starts free drawing
47 |    */
48 |   protected onStartDrawing() {
49 |     super.onStartDrawing()
50 | 
51 |     if (!this.isDrawing) {
52 |       return
53 |     }
54 | 
55 |     this.createShape({
56 |       globalCompositeOperation: 'source-over',
57 |       points: [this.startPoint.x, this.startPoint.y],
58 |       ...this.config
59 |     })
60 |   }
61 | 
62 |   /**
63 |    * Continues free drawing by concating the points together
64 |    */
65 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
66 |     super.onDrawing(e)
67 | 
68 |     if (!this.node) {
69 |       return
70 |     }
71 | 
72 |     const point = this.board.stage.getPointerPosition()!
73 |     this.node.points(this.node.points().concat([point.x, point.y]))
74 |   }
75 | 
76 |   /**
77 |    * @override
78 |    * @inheritdoc
79 |    */
80 |   protected onFinishDrawing(): void {
81 |     super.onFinishDrawing()
82 | 
83 |     // start another pencil drawing once the current one is finished
84 |     this.draw(this.config)
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/src/shape/drawers/PolygonDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { getPointsDistance } from '../../../utils/get-points-distance'
 4 | 
 5 | import { Board } from '../../../Board'
 6 | 
 7 | import { ShapeDrawer } from '../../ShapeDrawer'
 8 | import { PolygonModel } from '../../models/PolygonModel'
 9 | 
10 | import { DrawType } from '../../../types'
11 | 
12 | export class PolygonDrawer extends ShapeDrawer<
13 |   Konva.RegularPolygon,
14 |   Konva.RegularPolygonConfig
15 | > {
16 |   /**
17 |    * Demonstrates the polygon node that is being created
18 |    */
19 |   public node: Konva.RegularPolygon
20 | 
21 |   /**
22 |    * Creates a new polygon builder component
23 |    *
24 |    * @param board The [[Board]]
25 |    */
26 |   constructor(board: Board) {
27 |     super(board, DrawType.Polygon)
28 |   }
29 | 
30 |   /**
31 |    * @inheritdoc
32 |    * @override
33 |    */
34 |   public insert(config: Konva.RegularPolygonConfig): PolygonModel {
35 |     return super.insert(config)
36 |   }
37 | 
38 |   /**
39 |    * @inheritdoc
40 |    * @override
41 |    */
42 |   public draw(config: Partial<Konva.RegularPolygonConfig> = {}) {
43 |     super.draw(config)
44 |   }
45 | 
46 |   /**
47 |    * @inheritdoc
48 |    * @override
49 |    */
50 |   protected createShape(config: Konva.RegularPolygonConfig): PolygonModel {
51 |     this.node = new Konva.RegularPolygon(config)
52 | 
53 |     return new PolygonModel(this.board, this.node)
54 |   }
55 | 
56 |   /**
57 |    * Starts drawing a polygon shape
58 |    */
59 |   protected onStartDrawing() {
60 |     super.onStartDrawing()
61 | 
62 |     if (!this.isDrawing) {
63 |       return
64 |     }
65 | 
66 |     this.createShape({
67 |       x: this.startPoint.x,
68 |       y: this.startPoint.y,
69 |       radius: 0,
70 |       sides: 4,
71 |       ...this.config
72 |     })
73 |   }
74 | 
75 |   /**
76 |    * Continues drawing the polygon by changing its radius
77 |    */
78 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
79 |     super.onDrawing(e)
80 | 
81 |     if (!this.node) {
82 |       return
83 |     }
84 | 
85 |     const point = this.board.stage.getPointerPosition()!
86 | 
87 |     this.node.setAttrs({
88 |       radius: getPointsDistance(point, this.getShapePosition())
89 |     })
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/src/shape/drawers/RectDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../../Board'
 4 | 
 5 | import { ShapeDrawer } from '../../ShapeDrawer'
 6 | import { RectModel } from '../../models/RectModel'
 7 | 
 8 | import { DrawType } from '../../../types'
 9 | 
10 | export class RectDrawer extends ShapeDrawer<Konva.Rect, Konva.RectConfig> {
11 |   /**
12 |    * Demonstrates the rect node that is being created
13 |    */
14 |   public node: Konva.Rect
15 | 
16 |   /**
17 |    * Creates a new rect builder component
18 |    *
19 |    * @param board The [[Board]]
20 |    */
21 |   constructor(board: Board) {
22 |     super(board, DrawType.Rect)
23 |   }
24 | 
25 |   /**
26 |    * @inheritdoc
27 |    * @override
28 |    */
29 |   public insert(config: Konva.RectConfig): RectModel {
30 |     return super.insert(config)
31 |   }
32 | 
33 |   /**
34 |    * @inheritdoc
35 |    * @override
36 |    */
37 |   public draw(config: Partial<Konva.RectConfig> = {}) {
38 |     super.draw(config)
39 |   }
40 | 
41 |   /**
42 |    * @inheritdoc
43 |    * @override
44 |    */
45 |   protected createShape(config: Konva.RectConfig): RectModel {
46 |     this.node = new Konva.Rect(config)
47 | 
48 |     return new RectModel(this.board, this.node)
49 |   }
50 | 
51 |   /**
52 |    * Starts drawing a rectangle shape
53 |    */
54 |   protected onStartDrawing() {
55 |     super.onStartDrawing()
56 | 
57 |     if (!this.isDrawing) {
58 |       return
59 |     }
60 | 
61 |     this.createShape({
62 |       x: this.startPoint.x,
63 |       y: this.startPoint.y,
64 |       ...this.config
65 |     })
66 |   }
67 | 
68 |   /**
69 |    * Continues drawing the ellipse by changing its radius values
70 |    */
71 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
72 |     super.onDrawing(e)
73 | 
74 |     if (!this.node) {
75 |       return
76 |     }
77 | 
78 |     const point = this.board.stage.getPointerPosition()!
79 | 
80 |     const width = Math.abs(point.x - this.startPoint.x)
81 |     const height = Math.abs(point.y - this.startPoint.y)
82 | 
83 |     this.node.setAttrs({
84 |       x: Math.min(this.startPoint.x, point.x),
85 |       y: Math.min(this.startPoint.y, point.y),
86 |       width,
87 |       height: e.evt.shiftKey ? width : height
88 |     })
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/src/shape/drawers/SvgDrawer/index.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { getPointsDistance } from '../../../utils/get-points-distance'
  4 | 
  5 | import { Board } from '../../../Board'
  6 | 
  7 | import { ShapeDrawer } from '../../ShapeDrawer'
  8 | import { SvgModel } from '../../models/SvgModel'
  9 | 
 10 | import { DrawType, Point, Dimensions } from '../../../types'
 11 | 
 12 | export class SvgDrawer extends ShapeDrawer<Konva.Path, Konva.PathConfig> {
 13 |   /**
 14 |    * Demonstrates the svg node that is being created
 15 |    */
 16 |   public node: Konva.Path
 17 | 
 18 |   /**
 19 |    * The initial dimensions of the SVG path
 20 |    */
 21 |   private initialDimensions: Dimensions | undefined
 22 | 
 23 |   /**
 24 |    * Creates a new svg builder component
 25 |    *
 26 |    * @param board The [[Board]]
 27 |    */
 28 |   constructor(board: Board) {
 29 |     super(board, DrawType.Svg)
 30 |   }
 31 | 
 32 |   /**
 33 |    * @inheritdoc
 34 |    * @override
 35 |    */
 36 |   public insert(config: Konva.PathConfig): SvgModel {
 37 |     return super.insert(config)
 38 |   }
 39 | 
 40 |   /**
 41 |    * @inheritdoc
 42 |    * @override
 43 |    */
 44 |   public draw(config: Partial<Konva.PathConfig> = {}) {
 45 |     super.draw(config)
 46 |   }
 47 | 
 48 |   /**
 49 |    * @inheritdoc
 50 |    * @override
 51 |    */
 52 |   protected createShape(config: Konva.PathConfig): SvgModel {
 53 |     this.node = new Konva.Path(config)
 54 | 
 55 |     return new SvgModel(this.board, this.node)
 56 |   }
 57 | 
 58 |   /**
 59 |    * Starts drawing a svg shape
 60 |    */
 61 |   protected onStartDrawing() {
 62 |     super.onStartDrawing()
 63 | 
 64 |     if (!this.isDrawing) {
 65 |       return
 66 |     }
 67 | 
 68 |     this.createShape({
 69 |       x: this.startPoint.x,
 70 |       y: this.startPoint.y,
 71 |       scaleX: 0.001,
 72 |       scaleY: 0.001,
 73 |       ...this.config
 74 |     })
 75 | 
 76 |     /**
 77 |      * Keep track of the initial size based on 0.001 scale to be able
 78 |      * to calculate the current scale based on the mouse distance
 79 |      */
 80 |     this.initialDimensions = this.node.getClientRect()
 81 |   }
 82 | 
 83 |   /**
 84 |    * Continues drawing the svg by changing its scales
 85 |    */
 86 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
 87 |     super.onDrawing(e)
 88 | 
 89 |     if (!this.node) {
 90 |       return
 91 |     }
 92 | 
 93 |     const initialDimensions = this.initialDimensions as Dimensions
 94 |     const point = this.board.stage.getPointerPosition() as Point
 95 |     const distance = getPointsDistance(point, this.getShapePosition())
 96 | 
 97 |     if (!distance) {
 98 |       return
 99 |     }
100 | 
101 |     this.node.setAttrs({
102 |       x: point.x,
103 |       scaleX: (distance / initialDimensions.width) * 0.001,
104 |       scaleY: (distance / initialDimensions.height) * 0.001
105 |     })
106 |   }
107 | 
108 |   /**
109 |    * @override
110 |    * @inheritdoc
111 |    */
112 |   protected onFinishDrawing(): void {
113 |     super.onFinishDrawing()
114 | 
115 |     this.initialDimensions = undefined
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/shape/drawers/TextDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Board } from '../../../Board'
 4 | 
 5 | import { ShapeDrawer } from '../../ShapeDrawer'
 6 | 
 7 | import { DrawType } from '../../../types'
 8 | import { TextModel } from '../../models/TextModel'
 9 | 
10 | export class TextDrawer extends ShapeDrawer<Konva.Text, Konva.TextConfig> {
11 |   /**
12 |    * Demonstrates the text shape that is being created
13 |    */
14 |   public node: Konva.Text
15 | 
16 |   /**
17 |    * Creates a new text builder component
18 |    *
19 |    * @param board The [[Board]]
20 |    */
21 |   constructor(board: Board) {
22 |     super(board, DrawType.Text)
23 |   }
24 | 
25 |   /**
26 |    * @inheritdoc
27 |    * @override
28 |    */
29 |   public insert(config: Konva.TextConfig): TextModel {
30 |     return super.insert(config)
31 |   }
32 | 
33 |   /**
34 |    * @inheritdoc
35 |    * @override
36 |    */
37 |   public draw(config: Partial<Konva.TextConfig> = {}) {
38 |     super.draw(config)
39 |   }
40 | 
41 |   /**
42 |    * @inheritdoc
43 |    * @override
44 |    */
45 |   protected createShape(config: Konva.TextConfig): TextModel {
46 |     this.node = new Konva.Text(config)
47 | 
48 |     return new TextModel(this.board, this.node)
49 |   }
50 | 
51 |   /**
52 |    * Starts drawing a text shape
53 |    */
54 |   protected onStartDrawing() {
55 |     super.onStartDrawing()
56 | 
57 |     if (!this.isDrawing) {
58 |       return
59 |     }
60 | 
61 |     this.createShape({
62 |       x: this.startPoint.x,
63 |       y: this.startPoint.y,
64 |       ...this.config
65 |     })
66 |   }
67 | 
68 |   /**
69 |    * Continues drawing the text by changing its radius
70 |    */
71 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
72 |     super.onDrawing(e)
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/shape/drawers/TriangleDrawer/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { getPointsDistance } from '../../../utils/get-points-distance'
 4 | 
 5 | import { Board } from '../../../Board'
 6 | 
 7 | import { ShapeDrawer } from '../../ShapeDrawer'
 8 | 
 9 | import { DrawType, TriangleConfig } from '../../../types'
10 | import { TriangleModel } from '../../models/TriangleModel'
11 | 
12 | export class TriangleDrawer extends ShapeDrawer<
13 |   Konva.RegularPolygon,
14 |   TriangleConfig
15 | > {
16 |   /**
17 |    * Demonstrates the triangle (polygon) shape that is being created
18 |    */
19 |   public node: Konva.RegularPolygon
20 | 
21 |   /**
22 |    * Creates a new triangle (polygon) builder component
23 |    *
24 |    * @param board The [[Board]]
25 |    */
26 |   constructor(board: Board) {
27 |     super(board, DrawType.Triangle)
28 |   }
29 | 
30 |   /**
31 |    * @inheritdoc
32 |    * @override
33 |    */
34 |   public insert(config: TriangleConfig): TriangleModel {
35 |     return super.insert(config)
36 |   }
37 | 
38 |   /**
39 |    * @inheritdoc
40 |    * @override
41 |    */
42 |   public draw(config: Partial<TriangleConfig> = {}) {
43 |     super.draw({
44 |       ...config,
45 |       sides: 3
46 |     })
47 |   }
48 | 
49 |   /**
50 |    * @inheritdoc
51 |    * @override
52 |    */
53 |   protected createShape(config: TriangleConfig): TriangleModel {
54 |     this.node = new Konva.RegularPolygon({
55 |       radius: 10,
56 |       sides: 3,
57 |       ...config
58 |     })
59 | 
60 |     return new TriangleModel(this.board, this.node)
61 |   }
62 | 
63 |   /**
64 |    * Starts drawing a triangle (polygon) shape
65 |    */
66 |   protected onStartDrawing() {
67 |     super.onStartDrawing()
68 | 
69 |     if (!this.isDrawing) {
70 |       return
71 |     }
72 | 
73 |     this.createShape({
74 |       x: this.startPoint.x,
75 |       y: this.startPoint.y,
76 |       radius: 0,
77 |       ...this.config
78 |     })
79 |   }
80 | 
81 |   /**
82 |    * Continues drawing the triangle (polygon) by changing its radius
83 |    */
84 |   protected onDrawing(e: Konva.KonvaEventObject<MouseEvent>) {
85 |     super.onDrawing(e)
86 | 
87 |     if (!this.node) {
88 |       return
89 |     }
90 | 
91 |     const point = this.board.stage.getPointerPosition()!
92 | 
93 |     this.node.setAttrs({
94 |       radius: getPointsDistance(point, this.getShapePosition())
95 |     })
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/src/shape/models/ArrowModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '../../../utils/rotate-around-center'
 4 | 
 5 | import { ShapeModel } from '../../ShapeModel'
 6 | 
 7 | export class ArrowModel extends ShapeModel<Konva.Arrow, Konva.ArrowConfig> {
 8 |   /**
 9 |    * @inheritdoc
10 |    */
11 |   public get type(): string {
12 |     return 'arrow'
13 |   }
14 | 
15 |   /**
16 |    * @inheritdoc
17 |    * @override
18 |    */
19 |   public rotate(theta: number) {
20 |     rotateAroundCenter(this.node, theta)
21 | 
22 |     this.board.events.emit('shape:rotate', {
23 |       shapes: [this]
24 |     })
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/shape/models/CircleModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { ShapeModel } from '../../ShapeModel'
 4 | export class CircleModel extends ShapeModel<Konva.Circle, Konva.CircleConfig> {
 5 |   /**
 6 |    * @inheritdoc
 7 |    */
 8 |   public get type(): string {
 9 |     return 'circle'
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/shape/models/EllipseModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { ShapeModel } from '../../ShapeModel'
 4 | 
 5 | export class EllipseModel extends ShapeModel<
 6 |   Konva.Ellipse,
 7 |   Konva.EllipseConfig
 8 | > {
 9 |   /**
10 |    * @inheritdoc
11 |    */
12 |   public get type(): string {
13 |     return 'ellipse'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/shape/models/GroupModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '../../../utils/rotate-around-center'
 4 | 
 5 | import { ShapeModel } from '../../ShapeModel'
 6 | 
 7 | export class GroupModel extends ShapeModel<Konva.Group, Konva.ContainerConfig> {
 8 |   /**
 9 |    * @inheritdoc
10 |    */
11 |   public get type(): string {
12 |     return 'group'
13 |   }
14 | 
15 |   /**
16 |    * @inheritdoc
17 |    * @override
18 |    */
19 |   public rotate(theta: number) {
20 |     rotateAroundCenter(this.node, theta)
21 | 
22 |     this.board.events.emit('shape:rotate', {
23 |       shapes: [this]
24 |     })
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/shape/models/ImageModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '../../../utils/rotate-around-center'
 4 | 
 5 | import { ShapeModel } from '../../ShapeModel'
 6 | 
 7 | export class ImageModel extends ShapeModel<Konva.Image, Konva.ImageConfig> {
 8 |   /**
 9 |    * @inheritdoc
10 |    */
11 |   public get type(): string {
12 |     return 'image'
13 |   }
14 | 
15 |   /**
16 |    * @inheritdoc
17 |    * @override
18 |    */
19 |   public rotate(theta: number) {
20 |     rotateAroundCenter(this.node, theta)
21 | 
22 |     this.board.events.emit('shape:rotate', {
23 |       shapes: [this]
24 |     })
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/shape/models/LineModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '../../../utils/rotate-around-center'
 4 | 
 5 | import { ShapeModel } from '../../ShapeModel'
 6 | export class LineModel extends ShapeModel<Konva.Line, Konva.LineConfig> {
 7 |   /**
 8 |    * @inheritdoc
 9 |    */
10 |   public get type(): string {
11 |     return 'line'
12 |   }
13 | 
14 |   /**
15 |    * @inheritdoc
16 |    * @override
17 |    */
18 |   public rotate(theta: number) {
19 |     rotateAroundCenter(this.node, theta)
20 | 
21 |     this.board.events.emit('shape:rotate', {
22 |       shapes: [this]
23 |     })
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/shape/models/PolygonModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { ShapeModel } from '../../ShapeModel'
 4 | 
 5 | export class PolygonModel extends ShapeModel<
 6 |   Konva.RegularPolygon,
 7 |   Konva.RegularPolygonConfig
 8 | > {
 9 |   /**
10 |    * @inheritdoc
11 |    */
12 |   public get type(): string {
13 |     return 'polygon'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/shape/models/RectModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '../../../utils/rotate-around-center'
 4 | import { ShapeModel } from '../../ShapeModel'
 5 | 
 6 | export class RectModel extends ShapeModel<Konva.Rect, Konva.RectConfig> {
 7 |   /**
 8 |    * @inheritdoc
 9 |    */
10 |   public get type(): string {
11 |     return 'rect'
12 |   }
13 | 
14 |   /**
15 |    * @inheritdoc
16 |    * @override
17 |    */
18 |   public rotate(theta: number) {
19 |     rotateAroundCenter(this.node, theta)
20 | 
21 |     this.board.events.emit('shape:rotate', {
22 |       shapes: [this]
23 |     })
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/shape/models/SvgModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '../../../utils/rotate-around-center'
 4 | 
 5 | import { ShapeModel } from '../../ShapeModel'
 6 | 
 7 | export class SvgModel extends ShapeModel<Konva.Path, Konva.PathConfig> {
 8 |   /**
 9 |    * @inheritdoc
10 |    */
11 |   public get type(): string {
12 |     return 'svg'
13 |   }
14 | 
15 |   /**
16 |    * @inheritdoc
17 |    * @override
18 |    */
19 |   public width() {
20 |     return this.node.getClientRect().width
21 |   }
22 | 
23 |   /**
24 |    * @inheritdoc
25 |    * @override
26 |    */
27 |   public height() {
28 |     return this.node.getClientRect().height
29 |   }
30 | 
31 |   /**
32 |    * @inheritdoc
33 |    * @override
34 |    */
35 |   public rotate(theta: number) {
36 |     rotateAroundCenter(this.node, theta)
37 | 
38 |     this.board.events.emit('shape:rotate', {
39 |       shapes: [this]
40 |     })
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/shape/models/TextModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '../../../utils/rotate-around-center'
 4 | import { ShapeModel } from '../../ShapeModel'
 5 | 
 6 | export class TextModel extends ShapeModel<Konva.Text, Konva.TextConfig> {
 7 |   /**
 8 |    * @inheritdoc
 9 |    */
10 |   public get type(): string {
11 |     return 'text'
12 |   }
13 | 
14 |   /**
15 |    * @inheritdoc
16 |    * @override
17 |    */
18 |   public rotate(theta: number) {
19 |     rotateAroundCenter(this.node, theta)
20 | 
21 |     this.board.events.emit('shape:rotate', {
22 |       shapes: [this]
23 |     })
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/shape/models/TriangleModel/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { ShapeModel } from '../../ShapeModel'
 4 | import type { TriangleConfig } from '../../../types'
 5 | 
 6 | export class TriangleModel extends ShapeModel<
 7 |   Konva.RegularPolygon,
 8 |   TriangleConfig
 9 | > {
10 |   /**
11 |    * @inheritdoc
12 |    */
13 |   public get type(): string {
14 |     return 'triangle'
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/types/background.ts:
--------------------------------------------------------------------------------
1 | export declare interface BackgroundOptions {
2 |   size: 'auto' | 'resize' | 'cover' | 'contain' | 'stretch'
3 |   x: number
4 |   y: number
5 | }
6 | 


--------------------------------------------------------------------------------
/src/types/common.ts:
--------------------------------------------------------------------------------
 1 | export type Nullable<T> = T | null
 2 | 
 3 | export interface UnknownObject {
 4 |   [key: string]: boolean | number | string | object | null | undefined
 5 | }
 6 | 
 7 | export declare interface Dimensions {
 8 |   width: number
 9 |   height: number
10 | }
11 | 
12 | export declare interface Point {
13 |   x: number
14 |   y: number
15 | }
16 | 


--------------------------------------------------------------------------------
/src/types/cropper.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Dimensions, Point } from './common'
 4 | import { ExportImageConfig } from './export'
 5 | 
 6 | interface BaseCropOptions {
 7 |   rect: Point & Dimensions
 8 | }
 9 | export type CropOptions = BaseCropOptions & ExportImageConfig
10 | 
11 | export interface BaseCropperOptions {
12 |   x: number
13 |   y: number
14 |   keepRatio: boolean
15 |   fixed: boolean
16 |   marginRatio: number
17 |   minWidth: number
18 |   minHeight: number
19 |   overlay: Partial<{
20 |     color: string
21 |     opacity: number
22 |   }>
23 |   guides: Partial<{
24 |     show: boolean
25 |     count: number
26 |     color: string
27 |     width: number
28 |     dash: number[]
29 |   }>
30 |   transformer: Partial<Konva.TransformerConfig>
31 | }
32 | 
33 | export interface RectangleCropperOptions extends BaseCropperOptions {
34 |   circular: false
35 |   width: number
36 |   height: number
37 |   aspectRatio: number
38 | }
39 | 
40 | export interface CircularCropperOptions extends BaseCropperOptions {
41 |   circular: true
42 |   radius: number
43 |   circle: {
44 |     borderStroke?: string
45 |     borderDash?: number[]
46 |     borderStrokeWidth?: number
47 |   }
48 | }
49 | 
50 | export declare type CropperOptions =
51 |   | RectangleCropperOptions
52 |   | CircularCropperOptions
53 | 


--------------------------------------------------------------------------------
/src/types/drawing.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | export enum DrawType {
 4 |   Svg = 'Svg',
 5 |   Text = 'Text',
 6 |   Pencil = 'Pencil',
 7 |   Line = 'Line',
 8 |   Arrow = 'Arrow',
 9 |   Circle = 'Circle',
10 |   Rect = 'Rect',
11 |   Ellipse = 'Ellipse',
12 |   Polygon = 'Polygon',
13 |   Triangle = 'Triangle'
14 | }
15 | 
16 | export interface DrawingOptions {
17 |   measurement?: boolean
18 | }
19 | 
20 | export declare interface IDrawableShape {
21 |   draw: (config: Partial<Konva.ShapeConfig>) => void
22 |   stopDrawing: () => void
23 | }
24 | 
25 | export interface TriangleConfig
26 |   extends Omit<Konva.RegularPolygonConfig, 'sides'> {
27 |   sides?: 3
28 | }
29 | 


--------------------------------------------------------------------------------
/src/types/events.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { ShapeModel } from '../shape/ShapeModel'
 4 | 
 5 | import type { UnknownObject } from './common'
 6 | 
 7 | export declare type EventListenerNames =
 8 |   | '*'
 9 |   | 'board:rescale'
10 |   | 'board:change-active-drawing'
11 |   | 'shape:create'
12 |   | 'shape:move'
13 |   | 'shape:delete'
14 |   | 'shape:rotate'
15 |   | 'shape:destroy'
16 |   | 'shape:delete'
17 |   | 'shape:undelete'
18 |   | 'shape:selectable'
19 |   | 'group:create'
20 |   | 'group:delete'
21 |   | 'group:undelete'
22 |   | 'group:destroy'
23 |   | 'group:attach'
24 |   | 'group:detach'
25 |   | 'group:ungroup'
26 |   | 'label:update-text'
27 |   | 'flip:x'
28 |   | 'flip:y'
29 |   | 'history:undo'
30 |   | 'history:redo'
31 |   | 'history:reset'
32 |   | 'selection:change'
33 |   | 'selection:move'
34 |   | 'selection:dragstart'
35 |   | 'selection:dragmove'
36 |   | 'selection:dragend'
37 |   | 'selection:transformstart'
38 |   | 'selection:transform'
39 |   | 'selection:transformend'
40 |   | 'selection:delete'
41 |   | 'filter:add'
42 |   | 'filter:remove'
43 |   | 'rotation:straighten'
44 |   | 'rotation:transform'
45 |   | 'crop'
46 | 
47 | export declare type ListenerCallback = (
48 |   args: EventListenerCallbackEvent
49 | ) => void
50 | 
51 | export declare interface EventListenerCallbackEvent {
52 |   name?: string
53 |   nodes?: (Konva.Shape | Konva.Group)[]
54 |   shapes?: ShapeModel<Konva.Shape | Konva.Group>[]
55 |   data?: UnknownObject
56 | }
57 | 
58 | export interface IEmitter {
59 |   emit: (eventName: string, data: object) => void
60 | }
61 | 


--------------------------------------------------------------------------------
/src/types/export.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { Nullable, UnknownObject } from '.'
 4 | 
 5 | export declare interface JsonData {
 6 |   stage: {
 7 |     attrs: UnknownObject
 8 |     className: string
 9 |   }
10 |   layer: {
11 |     attrs: UnknownObject
12 |     className: string
13 |   }
14 |   background: {
15 |     image: {
16 |       attrs: UnknownObject
17 |       className: string
18 |     }
19 |     overlay: {
20 |       attrs: UnknownObject
21 |       className: string
22 |     }
23 |   }
24 |   shapes: {
25 |     attrs: Record<string, any>
26 |     filters?: string[]
27 |     children?: Omit<JsonData['shapes'], 'filters'>
28 |     className: string
29 |     group: Nullable<string>
30 |     zIndex?: number
31 |   }[]
32 | }
33 | 
34 | export declare type ExportImageConfig = Parameters<Konva.Stage['toDataURL']>[0]
35 | 


--------------------------------------------------------------------------------
/src/types/filters.ts:
--------------------------------------------------------------------------------
  1 | export declare type Filters =
  2 |   | {
  3 |       name: 'Blur'
  4 |       options?: Partial<{
  5 |         blurRadius: number
  6 |       }>
  7 |     }
  8 |   | {
  9 |       name: 'Contrast'
 10 |       options?: Partial<{
 11 |         contrast: number
 12 |       }>
 13 |     }
 14 |   | {
 15 |       name: 'Brighten'
 16 |       options?: Partial<{
 17 |         brightness: number
 18 |       }>
 19 |     }
 20 |   | {
 21 |       name: 'Solarize'
 22 |       options?: Partial<{
 23 |         threshold: number
 24 |       }>
 25 |     }
 26 |   | {
 27 |       name: 'Mask'
 28 |       options?: Partial<{
 29 |         threshold: number
 30 |       }>
 31 |     }
 32 |   | {
 33 |       name: 'Emboss'
 34 |       options?: Partial<{
 35 |         embossStrength: number
 36 |         embossWhiteLevel: number
 37 |         embossBlend: boolean
 38 |         embossDirection:
 39 |           | 'top-left'
 40 |           | 'top'
 41 |           | 'top-right'
 42 |           | 'right'
 43 |           | 'bottom-right'
 44 |           | 'bottom-left'
 45 |           | 'bottom'
 46 |           | 'left'
 47 |       }>
 48 |     }
 49 |   | {
 50 |       name: 'Enhance'
 51 |       options?: Partial<{
 52 |         enhance: number
 53 |       }>
 54 |     }
 55 |   | {
 56 |       name: 'HSL'
 57 |       options?: Partial<{
 58 |         luminance: number
 59 |       }>
 60 |     }
 61 |   | {
 62 |       name: 'HSV'
 63 |       options?: Partial<{
 64 |         value: number
 65 |       }>
 66 |     }
 67 |   | {
 68 |       name: 'Noise'
 69 |       options?: Partial<{
 70 |         noise: number
 71 |       }>
 72 |     }
 73 |   | {
 74 |       name: 'Pixelate'
 75 |       options?: Partial<{
 76 |         pixelSize: number
 77 |       }>
 78 |     }
 79 |   | {
 80 |       name: 'Posterize'
 81 |       options?: Partial<{
 82 |         levels: number
 83 |       }>
 84 |     }
 85 |   | {
 86 |       name: 'RGB'
 87 |       options?: Partial<{
 88 |         red: number
 89 |         green: number
 90 |         blue: number
 91 |       }>
 92 |     }
 93 |   | {
 94 |       name: 'RGBA'
 95 |       options?: Partial<{
 96 |         alpha: number
 97 |         red: number
 98 |         green: number
 99 |         blue: number
100 |       }>
101 |     }
102 |   | {
103 |       name: 'Kaleidoscope'
104 |       options?: Partial<{
105 |         kaleidoscopePower: number
106 |         kaleidoscopeAngle: number
107 |       }>
108 |     }
109 |   | {
110 |       name: 'Grayscale'
111 |       options?: {}
112 |     }
113 |   | {
114 |       name: 'Invert'
115 |       options?: {}
116 |     }
117 |   | {
118 |       name: 'Sepia'
119 |       options?: {}
120 |     }
121 |   | {
122 |       customFn: (imageData: ImageData) => void
123 |     }
124 | 
125 | export declare type FilterFunctions = Exclude<Filters, 'options'>
126 | 


--------------------------------------------------------------------------------
/src/types/group.ts:
--------------------------------------------------------------------------------
1 | import { ShapeModel } from '../shape/ShapeModel'
2 | import { GroupModel } from '../shape/models/GroupModel'
3 | 
4 | export interface Group {
5 |   container: GroupModel
6 |   children: ShapeModel[]
7 | }
8 | 


--------------------------------------------------------------------------------
/src/types/history.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { UnknownObject } from './common'
 4 | 
 5 | export type HistoryNode = Konva.Stage | Konva.Layer | Konva.Shape | Konva.Group
 6 | export type HistoryNodeWithChildren = Konva.Stage | Konva.Layer | Konva.Group
 7 | export type HistoryHookFunction = (states: HistoryState[]) => void
 8 | export interface HistoryState {
 9 |   nodes: HistoryNode[]
10 |   snapshots: UnknownObject[]
11 | }
12 | 
13 | export interface HistoryHooks {
14 |   undo?: HistoryHookFunction
15 |   redo?: HistoryHookFunction
16 |   execute?: HistoryHookFunction
17 | }
18 | 


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | export * from './common'
 2 | export * from './cropper'
 3 | export * from './drawing'
 4 | export * from './events'
 5 | export * from './export'
 6 | export * from './filters'
 7 | export * from './history'
 8 | export * from './settings'
 9 | export * from './shapes'
10 | export * from './group'
11 | export * from './background'
12 | export * from './snap-grid'
13 | 


--------------------------------------------------------------------------------
/src/types/settings.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { CropperOptions } from './cropper'
 4 | 
 5 | import { Nullable } from '.'
 6 | 
 7 | export declare interface BaseSettings {
 8 |   container?: HTMLDivElement
 9 |   width: number
10 |   height: number
11 |   disableCanvasContextMenu: boolean
12 |   containerClassName: string
13 |   transformer: Konva.TransformerConfig
14 |   cropper: Partial<CropperOptions>
15 |   snapToGrid: Nullable<Konva.LineConfig>
16 |   drawing: Partial<{
17 |     autoSelect: boolean
18 |     keyboard: {
19 |       cancelOnEscape: boolean
20 |     }
21 |   }>
22 |   selection: Partial<{
23 |     interactive: boolean
24 |     keyboard: Partial<
25 |       Nullable<{
26 |         enabled: boolean
27 |         movingSpaces: number
28 |         map: Partial<
29 |           Nullable<{
30 |             delete?: string[]
31 |             moveLeft?: string[]
32 |             moveRight?: string[]
33 |             moveUp?: string[]
34 |             moveDown?: string[]
35 |             deselect?: string[]
36 |           }>
37 |         >
38 |       }>
39 |     >
40 |     transformer: Konva.TransformerConfig
41 |     zone: Konva.RectConfig
42 |   }>
43 |   history: Partial<{
44 |     keyboard: {
45 |       enabled: boolean
46 |     }
47 |   }>
48 |   measurement: Partial<
49 |     Nullable<{
50 |       margin: number
51 |       background: Konva.TagConfig
52 |       text: Konva.TextConfig
53 |     }>
54 |   >
55 | }
56 | 
57 | export declare type Settings = Partial<BaseSettings>
58 | 


--------------------------------------------------------------------------------
/src/types/shapes.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import type { LineDrawer } from '../shape/drawers/LineDrawer'
 4 | import type { RectDrawer } from '../shape/drawers/RectDrawer'
 5 | import type { ArrowDrawer } from '../shape/drawers/ArrowDrawer'
 6 | import type { LabelDrawer } from '../shape/drawers/LabelDrawer'
 7 | import type { ImageDrawer } from '../shape/drawers/ImageDrawer'
 8 | import type { CircleDrawer } from '../shape/drawers/CircleDrawer'
 9 | import type { EllipseDrawer } from '../shape/drawers/EllipseDrawer'
10 | import type { PolygonDrawer } from '../shape/drawers/PolygonDrawer'
11 | import type { TriangleDrawer } from '../shape/drawers/TriangleDrawer'
12 | import type { TextDrawer } from '../shape/drawers/TextDrawer'
13 | import type { PencilDrawer } from '../shape/drawers/PencilDrawer'
14 | import { SvgDrawer } from '../shape/drawers/SvgDrawer'
15 | 
16 | import { Board } from '../Board'
17 | export declare interface BaseShapes {
18 |   line: LineDrawer
19 |   rect: RectDrawer
20 |   arrow: ArrowDrawer
21 |   label: LabelDrawer
22 |   image: ImageDrawer
23 |   circle: CircleDrawer
24 |   ellipse: EllipseDrawer
25 |   triangle: TriangleDrawer
26 |   polygon: PolygonDrawer
27 |   text: TextDrawer
28 |   pencil: PencilDrawer
29 |   svg: SvgDrawer
30 | }
31 | 
32 | export declare interface IShape {
33 |   insert: (config: Konva.ShapeConfig) => void
34 | }
35 | 
36 | export declare interface ShapeConfig {
37 |   transformer?: Konva.TransformerConfig
38 |   selectable?: boolean
39 |   history?: boolean
40 |   internal?: boolean
41 | }
42 | 
43 | export declare interface LabelConfig extends ShapeConfig {
44 |   keepScale?: boolean
45 | }
46 | 
47 | export declare type RegisterShapesFn<T> = (
48 |   board: Board
49 | ) => Omit<T, keyof BaseShapes>
50 | 


--------------------------------------------------------------------------------
/src/types/snap-grid.ts:
--------------------------------------------------------------------------------
 1 | export type Orientation = 'vertical' | 'horizontal'
 2 | export type Snap = 'start' | 'end' | 'center'
 3 | 
 4 | export type LineStops = Record<Orientation, number[]>
 5 | 
 6 | export interface NodeEdgeBound {
 7 |   guide: number
 8 |   offset: number
 9 |   snap: Snap
10 |   orientation: Orientation
11 | }
12 | 
13 | export interface GuideLine {
14 |   stop: number
15 |   diff: number
16 |   snap: Snap
17 |   offset: number
18 |   orientation: Orientation
19 | }
20 | 


--------------------------------------------------------------------------------
/src/utils/create-image-from-url/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | /**
 4 |  * Create an image node from the given url
 5 |  *
 6 |  * @returns an image node
 7 |  * @param url The image url
 8 |  */
 9 | export function createImageFromUrl(url: string): Promise<Konva.Image> {
10 |   return new Promise((resolve, reject) => {
11 |     Konva.Image.fromURL(url, (image: Konva.Image) => {
12 |       if (!image) {
13 |         reject()
14 |         return
15 |       }
16 | 
17 |       resolve(image)
18 |     })
19 |   })
20 | }
21 | 


--------------------------------------------------------------------------------
/src/utils/degree-to-radian/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { convertDegreeToRadian } from '.'
 2 | 
 3 | describe('Utils -> convertDegreeToRadian', () => {
 4 |   it('should convert degree to radian', () => {
 5 |     const point = convertDegreeToRadian(90)
 6 | 
 7 |     expect(point).toEqual(1.5707963267948966)
 8 |   })
 9 | })
10 | 


--------------------------------------------------------------------------------
/src/utils/degree-to-radian/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Returns the converted unit from degree to radian
 3 |  *
 4 |  * @returns the converted unit from degree to radian
 5 |  * @param degree The angle in degree unit
 6 |  */
 7 | export function convertDegreeToRadian(degree: number) {
 8 |   return (Number(degree) * Math.PI) / 180
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/utils/detect-environment/index.ts:
--------------------------------------------------------------------------------
 1 | export function isBrowser() {
 2 |   return typeof window !== 'undefined' && typeof window.document !== 'undefined'
 3 | }
 4 | 
 5 | export function isNode() {
 6 |   return (
 7 |     !isBrowser() &&
 8 |     typeof process !== 'undefined' &&
 9 |     Boolean(process.versions?.node)
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/src/utils/get-center-point/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { getRotateCenterPoint } from '.'
 2 | 
 3 | describe('Utils -> getRotateCenterPoint', () => {
 4 |   it('should calculate center point of rotation', () => {
 5 |     const point = getRotateCenterPoint(
 6 |       {
 7 |         x: 50,
 8 |         y: 50
 9 |       },
10 |       30
11 |     )
12 | 
13 |     expect(point).toEqual({
14 |       x: 57.114153699022296,
15 |       y: -41.68900871026389
16 |     })
17 |   })
18 | })
19 | 


--------------------------------------------------------------------------------
/src/utils/get-center-point/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Point } from '../../types'
 2 | 
 3 | /**
 4 |  * @returns The center point of the given point and angle (in radian)
 5 |  *
 6 |  * @param point The [[Point]]
 7 |  * @param radian The angle (in radian)
 8 |  */
 9 | export function getRotateCenterPoint({ x, y }: Point, radian: number) {
10 |   const rcos = Math.cos(radian)
11 |   const rsin = Math.sin(radian)
12 | 
13 |   return {
14 |     x: x * rcos - y * rsin,
15 |     y: y * rcos + x * rsin
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/utils/get-points-distance/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { getPointsDistance } from '.'
 2 | 
 3 | describe('Utils -> getPointsDistance', () => {
 4 |   it('should calculate the distance between two [0,0] and [16,0]', () => {
 5 |     const point = getPointsDistance(
 6 |       {
 7 |         x: 0,
 8 |         y: 0
 9 |       },
10 |       {
11 |         x: 16,
12 |         y: 0
13 |       }
14 |     )
15 | 
16 |     expect(point).toEqual(16)
17 |   })
18 | 
19 |   it('should calculate the distance between two [0,0] and [0,16]', () => {
20 |     const point = getPointsDistance(
21 |       {
22 |         x: 0,
23 |         y: 0
24 |       },
25 |       {
26 |         x: 0,
27 |         y: 16
28 |       }
29 |     )
30 | 
31 |     expect(point).toEqual(16)
32 |   })
33 | 
34 |   it('should calculate the distance between two [10,10] and [100,100]', () => {
35 |     const point = getPointsDistance(
36 |       {
37 |         x: 10,
38 |         y: 10
39 |       },
40 |       {
41 |         x: 100,
42 |         y: 100
43 |       }
44 |     )
45 | 
46 |     expect(point).toEqual(127.27922061357856)
47 |   })
48 | })
49 | 


--------------------------------------------------------------------------------
/src/utils/get-points-distance/index.ts:
--------------------------------------------------------------------------------
 1 | import { Point } from '../../types'
 2 | 
 3 | /**
 4 |  * @returns The distance between two given points
 5 |  * @param p1 The first [[Point]]
 6 |  * @param p2 The second [[Point]]
 7 |  */
 8 | export function getPointsDistance(p1: Point, p2: Point) {
 9 |   return Math.sqrt(Math.abs(p1.x - p2.x) ** 2 + Math.abs(p1.y - p2.y) ** 2)
10 | }
11 | 


--------------------------------------------------------------------------------
/src/utils/get-rotated-point/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { getRotatedPoint } from '.'
 2 | 
 3 | describe('Utils -> getRotatedPoint', () => {
 4 |   it('should calculate rotated point at [50,50] and 30 degrees', () => {
 5 |     const point = getRotatedPoint(
 6 |       {
 7 |         x: 50,
 8 |         y: 50
 9 |       },
10 |       30
11 |     )
12 | 
13 |     expect(point).toEqual({
14 |       x: 57.114153699022296,
15 |       y: -41.68900871026389
16 |     })
17 |   })
18 | 
19 |   it('should calculate rotated point at [100,100] and 45 degrees', () => {
20 |     const point = getRotatedPoint(
21 |       {
22 |         x: 100,
23 |         y: 100
24 |       },
25 |       45
26 |     )
27 | 
28 |     expect(point).toEqual({
29 |       x: -32.55815357163887,
30 |       y: 137.62255133518482
31 |     })
32 |   })
33 | })
34 | 


--------------------------------------------------------------------------------
/src/utils/get-rotated-point/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Point } from '../../types'
 2 | 
 3 | /**
 4 |  * @return The new x and y of the rotated rectangle
 5 |  *
 6 |  * 1- https://en.wikipedia.org/wiki/Rotation_matrix
 7 |  * 2- https://docs.google.com/document/d/1Xczn6P7GHjJMzoaoW0M4lE3UYJxw5JjwxC9zaGhWUTM
 8 |  * 3- https://iiif.io/api/annex/notes/rotation
 9 |  *
10 |  * @param point The [[Point]]
11 |  * @param angle The angle value
12 |  */
13 | export function getRotatedPoint(point: Point, angle: number) {
14 |   return {
15 |     x: point.x * Math.cos(angle) + -point.y * Math.sin(angle),
16 |     y: point.x * Math.sin(angle) - -point.y * Math.cos(angle)
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/utils/html-to-text/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { convertHtmlToText } from '.'
 2 | 
 3 | describe('Utils -> Html2Text', () => {
 4 |   it('should filter html to text', () => {
 5 |     const text = convertHtmlToText('<div>Hi <b>Ramin</b>&nbsp;<br></div>')
 6 | 
 7 |     expect(text).toEqual('Hi Ramin')
 8 |   })
 9 | 
10 |   it('should convert <br /> tag to new line', () => {
11 |     const text = convertHtmlToText('Line1<br>Line2<br>Line3')
12 | 
13 |     expect(text).toEqual('Line1\nLine2\nLine3')
14 |   })
15 | })
16 | 


--------------------------------------------------------------------------------
/src/utils/html-to-text/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @returns The converted html code to the plain text
 3 |  * @param html The html code
 4 |  */
 5 | export function convertHtmlToText(html = '') {
 6 |   let value = String(html)
 7 | 
 8 |   value = value.replace(/&nbsp;/gi, ' ')
 9 |   value = value.replace(/&amp;/gi, '&')
10 | 
11 |   value = value.replace(/<br>/gi, '\n')
12 |   value = value.replace(/<br\/>/gi, '\n')
13 |   value = value.replace(/<div>/gi, '\n')
14 |   value = value.replace(/<p>/gi, '\n')
15 |   value = value.replace(/<(.*?)>/g, '')
16 | 
17 |   value = value
18 |     .split('\n')
19 |     .map((line = '') => {
20 |       return line.trim()
21 |     })
22 |     .join('\n')
23 | 
24 |   value = value.replace(/\n\n+/g, '\n\n')
25 | 
26 |   value = value.replace(/[ ]+/g, ' ')
27 |   value = value.trim()
28 | 
29 |   return value
30 | }
31 | 


--------------------------------------------------------------------------------
/src/utils/image-to-url/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { imageToDataUrl } from '.'
 2 | 
 3 | describe('Utils -> imageToDataUrl', () => {
 4 |   it('should convert file to data url', async () => {
 5 |     const file = new File([''], 'foo.png', {
 6 |       type: 'image/png'
 7 |     })
 8 | 
 9 |     const url = await imageToDataUrl(file)
10 | 
11 |     expect(url).toContain('data:image/png;base64,')
12 |   })
13 | })
14 | 


--------------------------------------------------------------------------------
/src/utils/image-to-url/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @returns The converted image to data url
 3 |  * @param file The image [[File]]
 4 |  */
 5 | export async function imageToDataUrl(file: File): Promise<string> {
 6 |   return new Promise((resolve, reject) => {
 7 |     const reader = new FileReader()
 8 | 
 9 |     reader.addEventListener('load', () => {
10 |       resolve(<string>reader.result)
11 |     })
12 | 
13 |     reader.addEventListener('error', e => {
14 |       reject(e)
15 |     })
16 | 
17 |     reader.readAsDataURL(file)
18 |   })
19 | }
20 | 


--------------------------------------------------------------------------------
/src/utils/merge-settings/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { Settings } from '../../types'
 2 | 
 3 | import { defaultSettings } from '../../defaultSettings'
 4 | 
 5 | import { mergeSettings } from '.'
 6 | 
 7 | describe('Utils -> mergeSettings', () => {
 8 |   it('should merge the settings with the default values', async () => {
 9 |     const container = document.createElement('div')
10 | 
11 |     const settings = mergeSettings({
12 |       container
13 |     } as Settings)
14 | 
15 |     const expected = {
16 |       container,
17 |       ...defaultSettings
18 |     } as Settings
19 | 
20 |     expect(settings).toStrictEqual(expected)
21 |   })
22 | 
23 |   it('should override the settings over the default values', async () => {
24 |     const settings = mergeSettings({
25 |       selection: {
26 |         interactive: false
27 |       },
28 |       cropper: {
29 |         overlay: {
30 |           opacity: 0.75
31 |         }
32 |       }
33 |     } as Settings)
34 | 
35 |     expect(settings.selection?.interactive).toStrictEqual(false)
36 |     expect(settings.cropper?.overlay?.opacity).toStrictEqual(0.75)
37 |     expect(settings.cropper?.overlay?.color).toStrictEqual('#262626')
38 |   })
39 | })
40 | 


--------------------------------------------------------------------------------
/src/utils/merge-settings/index.ts:
--------------------------------------------------------------------------------
 1 | import merge from 'deepmerge'
 2 | 
 3 | import { defaultSettings } from '../../defaultSettings'
 4 | import { omit } from '../omit'
 5 | 
 6 | import type { Settings } from '../../types'
 7 | 
 8 | /**
 9 |  * Merges default settings with user settings
10 |  *
11 |  * @returns the merged settings
12 |  * @param settings The user settings
13 |  */
14 | export function mergeSettings(settings: Settings): Settings {
15 |   return {
16 |     container: settings.container,
17 |     ...merge(defaultSettings, omit(settings, ['container']))
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/utils/omit/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { omit } from '.'
 2 | 
 3 | describe('Utils -> Omit', () => {
 4 |   const input = {
 5 |     foo: 1,
 6 |     bar: 2,
 7 |     pho: 3
 8 |   }
 9 | 
10 |   it('should filter object correctly', () => {
11 |     const object = omit(input, ['foo', 'bar'])
12 | 
13 |     expect(object).toEqual({
14 |       pho: 3
15 |     })
16 |   })
17 | 
18 |   it('should return the given object with the second argument is empty', () => {
19 |     const object = omit(input, [])
20 |     expect(object).toEqual(object)
21 |   })
22 | })
23 | 


--------------------------------------------------------------------------------
/src/utils/omit/index.ts:
--------------------------------------------------------------------------------
 1 | import type { UnknownObject } from '../../types'
 2 | 
 3 | /**
 4 |  * @returns The object without the given keys
 5 |  * @param object The object
 6 |  * @param keys The array of the keys
 7 |  */
 8 | export function omit(object: object, keys: string[]): UnknownObject {
 9 |   return Object.entries(object).reduce((acc, [key, value]) => {
10 |     if (keys.includes(key)) {
11 |       return acc
12 |     }
13 | 
14 |     return {
15 |       ...acc,
16 |       [key]: value
17 |     }
18 |   }, {})
19 | }
20 | 


--------------------------------------------------------------------------------
/src/utils/rotate-around-center/index.test.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { rotateAroundCenter } from '.'
 4 | 
 5 | describe('Utils -> rotateAroundCenter', () => {
 6 |   it('should rotate a node around its center', () => {
 7 |     const node = new Konva.Rect({
 8 |       x: 100,
 9 |       y: 100,
10 |       width: 200,
11 |       height: 100
12 |     })
13 | 
14 |     rotateAroundCenter(node, 45)
15 | 
16 |     expect(node.rotation()).toBe(45)
17 |     expect(node.x()).toBe(164.64466094067262)
18 |     expect(node.y()).toBe(43.93398282201787)
19 |   })
20 | })
21 | 


--------------------------------------------------------------------------------
/src/utils/rotate-around-center/index.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | /**
 4 |  * Rotates a node around its center
 5 |  *
 6 |  * @returns The rotated node around the center based on the given angle
 7 |  * @param node The node
 8 |  * @param theta The angle value
 9 |  */
10 | export function rotateAroundCenter(
11 |   node: Konva.Group | Konva.Shape | Konva.Layer | Konva.Stage,
12 |   theta: number
13 | ) {
14 |   const rect = node.getClientRect()
15 | 
16 |   const center = {
17 |     x: rect.x + rect.width / 2,
18 |     y: rect.y + rect.height / 2
19 |   }
20 | 
21 |   node.rotation(theta)
22 | 
23 |   const newRect = node.getClientRect()
24 | 
25 |   // x = newCenter.x - center.x and y = newCenter.y - center.y
26 |   const distance = {
27 |     x: center.x - (newRect.x + newRect.width / 2),
28 |     y: center.y - (newRect.y + newRect.height / 2)
29 |   }
30 | 
31 |   node.setAttrs({
32 |     x: node.x() + distance.x,
33 |     y: node.y() + distance.y
34 |   })
35 | }
36 | 


--------------------------------------------------------------------------------
/tests/integration/background/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../jest/utils/create-editor'
 2 | 
 3 | describe('Background', () => {
 4 |   it('should load background with "auto" size option', async () => {
 5 |     const editor = createEditor()
 6 | 
 7 |     await editor.loadFromUrl('400x300')
 8 | 
 9 |     expect(editor.board.background.image.node.attrs.width).toBe(400)
10 |     expect(editor.board.background.image.node.attrs.height).toBe(300)
11 |   })
12 | 
13 |   it('should load background with "stretch" size option', async () => {
14 |     const editor = createEditor()
15 | 
16 |     await editor.loadFromUrl('400x300', {
17 |       size: 'stretch'
18 |     })
19 | 
20 |     expect(editor.board.background.image.node.attrs.width).toBe(
21 |       editor.board.stage.width()
22 |     )
23 |     expect(editor.board.background.image.node.attrs.height).toBe(
24 |       editor.board.stage.height()
25 |     )
26 |   })
27 | 
28 |   it('should load background with "cover" size option', async () => {
29 |     const editor = createEditor()
30 | 
31 |     await editor.loadFromUrl('400x300', {
32 |       size: 'cover'
33 |     })
34 | 
35 |     expect(editor.board.background.image.node.attrs.width).toBe(1280)
36 |     expect(editor.board.background.image.node.attrs.height).toBe(960)
37 |   })
38 | 
39 |   it('should load background with "contain" size option', async () => {
40 |     const editor = createEditor()
41 | 
42 |     await editor.loadFromUrl('400x300', {
43 |       size: 'contain'
44 |     })
45 | 
46 |     expect(editor.board.background.image.node.attrs.width).toBe(960)
47 |     expect(editor.board.background.image.node.attrs.height).toBe(720)
48 |   })
49 | 
50 |   it('should load background with different x and y', async () => {
51 |     const editor = createEditor()
52 | 
53 |     await editor.loadFromUrl('400x300', {
54 |       size: 'contain',
55 |       x: -200,
56 |       y: -300
57 |     })
58 | 
59 |     expect(editor.board.background.image.node.attrs.width).toBe(960)
60 |     expect(editor.board.background.image.node.attrs.height).toBe(720)
61 |     expect(editor.board.background.image.node.attrs.x).toBe(-200)
62 |     expect(editor.board.background.image.node.attrs.y).toBe(-300)
63 |   })
64 | })
65 | 


--------------------------------------------------------------------------------
/tests/integration/export/index.test.ts:
--------------------------------------------------------------------------------
  1 | import { createEditor } from '../../../jest/utils/create-editor'
  2 | 
  3 | describe('Export', () => {
  4 |   it('should export to json', async () => {
  5 |     const editor = createEditor()
  6 | 
  7 |     const image = [1200, 500]
  8 |     await editor.board.background.setImageFromUrl(`${image[0]}x${image[1]}`)
  9 | 
 10 |     const labelConfig = {
 11 |       container: {
 12 |         x: 400,
 13 |         y: 400
 14 |       },
 15 |       tag: {
 16 |         fill: 'blue'
 17 |       },
 18 |       text: {
 19 |         text: 'Test',
 20 |         width: 400,
 21 |         fill: '#fff',
 22 |         fontSize: 100
 23 |       }
 24 |     }
 25 | 
 26 |     editor.shapes.label.insert(labelConfig)
 27 | 
 28 |     const json = editor.export.toJson()
 29 | 
 30 |     expect(json).toStrictEqual({
 31 |       stage: {
 32 |         className: 'Stage',
 33 |         filters: [],
 34 |         attrs: { width: image[0], height: image[1], x: 0, y: 0 }
 35 |       },
 36 |       layer: {
 37 |         className: 'Layer',
 38 |         filters: [],
 39 |         attrs: { x: 0, y: 0, width: image[0], height: image[1] }
 40 |       },
 41 |       background: {
 42 |         image: {
 43 |           className: 'Image',
 44 |           filters: [],
 45 |           group: undefined,
 46 |           attrs: {
 47 |             url: `http://localhost/${image[0]}x${image[1]}`,
 48 |             x: 0,
 49 |             y: 0,
 50 |             width: image[0],
 51 |             height: image[1]
 52 |           },
 53 |           zIndex: 0
 54 |         },
 55 |         overlay: {
 56 |           className: 'Rect',
 57 |           filters: [],
 58 |           group: undefined,
 59 |           attrs: { width: image[0], height: image[1], x: 0, y: 0 },
 60 |           zIndex: 1
 61 |         }
 62 |       },
 63 |       shapes: [
 64 |         {
 65 |           className: 'Label',
 66 |           filters: [],
 67 |           group: undefined,
 68 |           children: [
 69 |             {
 70 |               attrs: {
 71 |                 width: labelConfig.text.width,
 72 |                 height: 100,
 73 |                 ...labelConfig.tag
 74 |               },
 75 |               className: 'Tag'
 76 |             },
 77 |             {
 78 |               attrs: {
 79 |                 ...labelConfig.text,
 80 |                 height: 'auto'
 81 |               },
 82 |               className: 'Text'
 83 |             }
 84 |           ],
 85 |           attrs: {
 86 |             width: labelConfig.text.width,
 87 |             height: 100,
 88 |             ...labelConfig.container
 89 |           },
 90 |           zIndex: 4
 91 |         }
 92 |       ]
 93 |     })
 94 |   })
 95 | 
 96 |   it('should export to image', async () => {
 97 |     const editor = createEditor()
 98 | 
 99 |     const url = editor.export.toImage()
100 | 
101 |     expect(url).toBe('data:image/png;base64,00')
102 |   })
103 | })
104 | 


--------------------------------------------------------------------------------
/tests/integration/filter/index.test.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { createEditor } from '../../../jest/utils/create-editor'
  4 | 
  5 | describe('Filter', () => {
  6 |   const shapeConfig = {
  7 |     x: 200,
  8 |     y: 200,
  9 |     radius: 50,
 10 |     fill: 'red'
 11 |   }
 12 | 
 13 |   it('should add filter to the shape', () => {
 14 |     const editor = createEditor()
 15 | 
 16 |     const shape = editor.shapes.circle.insert(shapeConfig)
 17 | 
 18 |     shape.addFilter({
 19 |       name: 'Blur',
 20 |       options: {
 21 |         blurRadius: 20
 22 |       }
 23 |     })
 24 | 
 25 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(1)
 26 | 
 27 |     expect(editor.board.activeShapes[0].node.attrs.filters[0]).toEqual(
 28 |       Konva.Filters['Blur']
 29 |     )
 30 | 
 31 |     expect(shape.filters.length).toBe(1)
 32 | 
 33 |     if ('name' in shape.filters[0]) {
 34 |       expect(shape.filters[0].name).toBe('Blur')
 35 |     }
 36 |   })
 37 | 
 38 |   it('should add multiple filters to the shape', () => {
 39 |     const editor = createEditor()
 40 | 
 41 |     const shape = editor.shapes.circle.insert(shapeConfig)
 42 | 
 43 |     shape.addFilter({
 44 |       name: 'Blur',
 45 |       options: {
 46 |         blurRadius: 20
 47 |       }
 48 |     })
 49 | 
 50 |     expect(shape.filters.length).toBe(1)
 51 | 
 52 |     shape.addFilter({
 53 |       name: 'Invert'
 54 |     })
 55 | 
 56 |     expect(shape.filters.length).toBe(2)
 57 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(2)
 58 |     expect(editor.board.activeShapes[0].node.attrs.filters[0]).toEqual(
 59 |       Konva.Filters['Blur']
 60 |     )
 61 |     expect(editor.board.activeShapes[0].node.attrs.filters[1]).toEqual(
 62 |       Konva.Filters['Invert']
 63 |     )
 64 |   })
 65 | 
 66 |   it('should remove filter from the shape', () => {
 67 |     const editor = createEditor()
 68 | 
 69 |     const shape = editor.shapes.circle.insert(shapeConfig)
 70 | 
 71 |     shape.addFilter({
 72 |       name: 'Blur',
 73 |       options: {
 74 |         blurRadius: 20
 75 |       }
 76 |     })
 77 | 
 78 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(1)
 79 |     expect(shape.filters.length).toBe(1)
 80 | 
 81 |     shape.removeFilter({ name: 'Blur' })
 82 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(0)
 83 |     expect(shape.filters.length).toBe(0)
 84 |   })
 85 | 
 86 |   it('should remove all filters from the shape', () => {
 87 |     const editor = createEditor()
 88 | 
 89 |     const shape = editor.shapes.circle.insert(shapeConfig)
 90 | 
 91 |     shape.addFilter({
 92 |       name: 'Blur',
 93 |       options: {
 94 |         blurRadius: 20
 95 |       }
 96 |     })
 97 | 
 98 |     shape.addFilter({
 99 |       name: 'Invert'
100 |     })
101 | 
102 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(2)
103 | 
104 |     shape.removeFilter([{ name: 'Blur' }, { name: 'Invert' }])
105 | 
106 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(0)
107 |     expect(shape.filters.length).toBe(0)
108 |   })
109 | 
110 |   it('should undo and redo after adding filter', () => {
111 |     console.warn = () => {}
112 | 
113 |     const editor = createEditor()
114 | 
115 |     const shape = editor.shapes.circle.insert(shapeConfig)
116 | 
117 |     shape.addFilter({
118 |       name: 'Blur',
119 |       options: {
120 |         blurRadius: 20
121 |       }
122 |     })
123 | 
124 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(1)
125 | 
126 |     editor.undo()
127 |     expect(editor.board.activeShapes[0].node.attrs.filters?.length).toBe(
128 |       undefined
129 |     )
130 | 
131 |     editor.redo()
132 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(1)
133 |   })
134 | 
135 |   it('should undo and redo after removing filter', () => {
136 |     console.warn = () => {}
137 | 
138 |     const editor = createEditor()
139 | 
140 |     const shape = editor.shapes.circle.insert(shapeConfig)
141 | 
142 |     shape.addFilter({
143 |       name: 'Blur',
144 |       options: {
145 |         blurRadius: 20
146 |       }
147 |     })
148 | 
149 |     shape.removeFilter({ name: 'Blur' })
150 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(0)
151 | 
152 |     editor.undo()
153 |     expect(editor.board.activeShapes[0].node.attrs.filters?.length).toBe(1)
154 | 
155 |     editor.redo()
156 |     expect(editor.board.activeShapes[0].node.attrs.filters.length).toBe(0)
157 |   })
158 | 
159 |   it('should work with remove filter on shapes without filter', () => {
160 |     const editor = createEditor()
161 | 
162 |     const shape = editor.shapes.circle.insert(shapeConfig)
163 | 
164 |     expect(editor.board.activeShapes[0].node.attrs.filters?.length).toBe(
165 |       undefined
166 |     )
167 | 
168 |     shape.removeFilter({ name: 'Blur' })
169 | 
170 |     expect(editor.board.activeShapes[0].node.attrs.filters?.length).toBe(
171 |       undefined
172 |     )
173 |     expect(shape.filters.length).toBe(0)
174 |   })
175 | 
176 |   it('should update filters', () => {
177 |     const editor = createEditor()
178 | 
179 |     const shape = editor.shapes.circle.insert(shapeConfig)
180 | 
181 |     shape.addFilter({
182 |       name: 'Blur',
183 |       options: {
184 |         blurRadius: 20
185 |       }
186 |     })
187 | 
188 |     shape.addFilter({
189 |       name: 'Blur',
190 |       options: {
191 |         blurRadius: 15
192 |       }
193 |     })
194 | 
195 |     expect(shape.filters[0]).toMatchObject({
196 |       name: 'Blur',
197 |       options: {
198 |         blurRadius: 15
199 |       }
200 |     })
201 |   })
202 | 
203 |   it('should update filters when there are some filters', () => {
204 |     const editor = createEditor()
205 | 
206 |     const shape = editor.shapes.circle.insert(shapeConfig)
207 | 
208 |     shape.addFilter([
209 |       {
210 |         name: 'Blur',
211 |         options: {
212 |           blurRadius: 20
213 |         }
214 |       },
215 |       {
216 |         name: 'Invert'
217 |       }
218 |     ])
219 | 
220 |     shape.addFilter({
221 |       name: 'Blur',
222 |       options: {
223 |         blurRadius: 15
224 |       }
225 |     })
226 | 
227 |     expect(shape.filters[1]).toMatchObject({
228 |       name: 'Blur',
229 |       options: {
230 |         blurRadius: 15
231 |       }
232 |     })
233 |   })
234 | 
235 |   it('should update custom filters when there are some filters', () => {
236 |     const editor = createEditor()
237 | 
238 |     const shape = editor.shapes.circle.insert(shapeConfig)
239 | 
240 |     const customFn = (imageData: any) => {}
241 | 
242 |     shape.addFilter([
243 |       {
244 |         customFn
245 |       },
246 |       {
247 |         name: 'Invert'
248 |       }
249 |     ])
250 | 
251 |     shape.addFilter({
252 |       customFn
253 |     })
254 | 
255 |     expect(shape.filters.length).toBe(2)
256 |     expect(shape.filters[1]).toMatchObject({
257 |       customFn
258 |     })
259 |   })
260 | })
261 | 


--------------------------------------------------------------------------------
/tests/integration/flip/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../jest/utils/create-editor'
 2 | 
 3 | describe('Flip', () => {
 4 |   const shapeConfig = {
 5 |     x: 10,
 6 |     y: 10,
 7 |     width: 100,
 8 |     height: 50
 9 |   }
10 | 
11 |   it('should flip horizontally', async () => {
12 |     const editor = createEditor()
13 | 
14 |     const width = 1200
15 |     await editor.loadFromUrl(`${width}x800`)
16 |     const rect = editor.shapes.rect.insert(shapeConfig)
17 | 
18 |     editor.flip.horizontal()
19 | 
20 |     expect(rect.node.x()).toBe(110)
21 |     expect(rect.node.scaleX()).toBe(-1)
22 | 
23 |     expect(editor.board.background.image.node.x()).toBe(width)
24 |     expect(editor.board.background.image.node.scaleX()).toBe(-1)
25 |   })
26 | 
27 |   it('should toggle flipping horizontally', async () => {
28 |     const editor = createEditor()
29 | 
30 |     await editor.loadFromUrl('1200x800')
31 | 
32 |     const rect = editor.shapes.rect.insert(shapeConfig)
33 | 
34 |     editor.flip.horizontal()
35 |     editor.flip.horizontal()
36 | 
37 |     expect(rect.node.x()).toBe(shapeConfig.x)
38 |     expect(rect.node.scaleX()).toBe(1)
39 | 
40 |     expect(editor.board.background.image.node.x()).toBe(0)
41 |     expect(editor.board.background.image.node.scaleX()).toBe(1)
42 |   })
43 | 
44 |   it('should flip horizontally', async () => {
45 |     const editor = createEditor()
46 | 
47 |     const height = 800
48 |     await editor.loadFromUrl(`1200x${height}`)
49 |     const rect = editor.shapes.rect.insert(shapeConfig)
50 | 
51 |     editor.flip.vertical()
52 | 
53 |     expect(rect.node.y()).toBe(60)
54 |     expect(rect.node.scaleY()).toBe(-1)
55 | 
56 |     expect(editor.board.background.image.node.y()).toBe(height)
57 |     expect(editor.board.background.image.node.scaleY()).toBe(-1)
58 |   })
59 | 
60 |   it('should toggle flipping vertically', async () => {
61 |     const editor = createEditor()
62 | 
63 |     await editor.loadFromUrl('1200x800')
64 | 
65 |     const rect = editor.shapes.rect.insert(shapeConfig)
66 | 
67 |     editor.flip.vertical()
68 |     editor.flip.vertical()
69 | 
70 |     expect(rect.node.y()).toBe(shapeConfig.y)
71 |     expect(rect.node.scaleY()).toBe(1)
72 | 
73 |     expect(editor.board.background.image.node.y()).toBe(0)
74 |     expect(editor.board.background.image.node.scaleY()).toBe(1)
75 |   })
76 | })
77 | 


--------------------------------------------------------------------------------
/tests/integration/grouping/grouping-core.test.ts:
--------------------------------------------------------------------------------
  1 | import Konva from 'konva'
  2 | 
  3 | import { createEditor } from '../../../jest/utils/create-editor'
  4 | import { createShapes } from '../../../jest/utils/create-shapes'
  5 | import { GroupModel } from '../../../src/shape/models/GroupModel'
  6 | 
  7 | describe('Grouping -> Core', () => {
  8 |   it('should create an empty group', () => {
  9 |     const editor = createEditor()
 10 |     editor.board.groups.create('g1', {})
 11 | 
 12 |     expect(editor.board.groups.find('g1')).not.toBe(null)
 13 |     expect(editor.board.activeShapes[0]).toBeInstanceOf(GroupModel)
 14 |     expect(editor.board.groups.list.length).toBe(1)
 15 |   })
 16 | 
 17 |   it('should group two shapes with "group" property', () => {
 18 |     const editor = createEditor()
 19 |     const shapes = createShapes(editor, 2)
 20 | 
 21 |     shapes[0].group = 'g1'
 22 |     shapes[1].group = 'g1'
 23 | 
 24 |     expect(shapes[0].hasGroup()).toBe(true)
 25 |     expect(shapes[1].hasGroup()).toBe(true)
 26 | 
 27 |     const groupShape = editor.board.activeShapes[2]
 28 |     expect(groupShape).toBeInstanceOf(GroupModel)
 29 |     expect(groupShape.name).toBe('g1')
 30 |     expect(groupShape.node.name()).toBe('g1')
 31 |   })
 32 | 
 33 |   it('should group two shapes with "attach" property', () => {
 34 |     const editor = createEditor()
 35 |     const shapes = createShapes(editor, 2)
 36 | 
 37 |     editor.board.groups.attach(shapes, 'g1')
 38 | 
 39 |     expect(shapes[0].hasGroup()).toBe(true)
 40 |     expect(shapes[1].hasGroup()).toBe(true)
 41 | 
 42 |     const groupShape = editor.board.activeShapes[2]
 43 |     expect(groupShape).toBeInstanceOf(GroupModel)
 44 | 
 45 |     const node = groupShape.node as unknown as Konva.Group
 46 |     expect(node?.children?.length).toBe(2)
 47 |     expect(node.name()).toBe('g1')
 48 |   })
 49 | 
 50 |   it('should separate shapes of a group with "detach" property', () => {
 51 |     const editor = createEditor()
 52 |     const shapes = createShapes(editor, 2)
 53 |     editor.board.groups.attach(shapes, 'g1')
 54 | 
 55 |     editor.board.groups.detach(shapes, 'g1')
 56 | 
 57 |     expect(shapes[0].hasGroup()).toBe(false)
 58 |     expect(shapes[1].hasGroup()).toBe(false)
 59 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
 60 |   })
 61 | 
 62 |   it('should find a group', () => {
 63 |     const editor = createEditor()
 64 | 
 65 |     const g1 = editor.board.groups.find('g1')
 66 |     expect(g1).toBe(undefined)
 67 | 
 68 |     const shapes = createShapes(editor, 2)
 69 |     editor.board.groups.attach(shapes, 'g2')
 70 | 
 71 |     const g2 = editor.board.groups.find('g2')
 72 |     expect(g2?.container.name).toBe('g2')
 73 |   })
 74 | 
 75 |   it('should find a group', () => {
 76 |     const editor = createEditor()
 77 | 
 78 |     const g1 = editor.board.groups.findOrCreate('g1', {})
 79 |     expect(g1?.container.name).toBe('g1')
 80 |   })
 81 | 
 82 |   it('should delete a group', () => {
 83 |     const editor = createEditor()
 84 |     const shapes = createShapes(editor, 2)
 85 |     editor.board.groups.attach(shapes, 'g1')
 86 | 
 87 |     editor.board.groups.delete('g1')
 88 | 
 89 |     const g1 = editor.board.groups.find('g1')
 90 |     expect(g1).toBe(undefined)
 91 | 
 92 |     expect(editor.board.activeShapes.length).toBe(0)
 93 |   })
 94 | 
 95 |   it('should undelete a group', () => {
 96 |     const editor = createEditor()
 97 |     const shapes = createShapes(editor, 2)
 98 |     editor.board.groups.attach(shapes, 'g1')
 99 | 
100 |     editor.board.groups.delete('g1')
101 |     editor.board.groups.undelete('g1')
102 | 
103 |     const g1 = editor.board.groups.find('g1')
104 | 
105 |     expect(g1).not.toBe(undefined)
106 |     expect(editor.board.activeShapes.length).toBe(3)
107 |   })
108 | 
109 |   it('should ungroup a group', () => {
110 |     const editor = createEditor()
111 |     const shapes = createShapes(editor, 2)
112 |     editor.board.groups.attach(shapes, 'g1')
113 | 
114 |     editor.board.groups.ungroup('g1')
115 | 
116 |     expect(shapes[0].hasGroup()).toBe(false)
117 |     expect(shapes[1].hasGroup()).toBe(false)
118 |     expect(editor.board.groups.find('g1')).toBe(undefined)
119 |     expect(editor.board.activeShapes.length).toBe(2)
120 |   })
121 | 
122 |   it('shoud not ungroup if the group is cached', () => {
123 |     const editor = createEditor()
124 |     const shapes = createShapes(editor, 2)
125 |     const group = editor.board.groups.attach(shapes, 'g1')
126 | 
127 |     group.container.addFilter({ name: 'Invert' })
128 | 
129 |     editor.board.groups.ungroup('g1')
130 | 
131 |     expect(shapes[0].hasGroup()).toBe(true)
132 |     expect(shapes[1].hasGroup()).toBe(true)
133 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
134 |     expect(editor.board.activeShapes.length).toBe(3)
135 |   })
136 | 
137 |   it('should destroy a group', () => {
138 |     const editor = createEditor()
139 |     const shapes = createShapes(editor, 2)
140 |     editor.board.groups.attach(shapes, 'g1')
141 | 
142 |     editor.board.groups.destroy('g1')
143 | 
144 |     expect(editor.board.groups.find('g1')).toBe(undefined)
145 |     expect(editor.board.activeShapes.length).toBe(0)
146 |   })
147 | })
148 | 


--------------------------------------------------------------------------------
/tests/integration/grouping/grouping-flip.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../jest/utils/create-editor'
 2 | 
 3 | describe('Grouping -> Rotation', () => {
 4 |   it('should flip a group vertically', () => {
 5 |     const editor = createEditor()
 6 |     const shapes = [
 7 |       editor.shapes.circle.insert({
 8 |         x: 200,
 9 |         y: 200,
10 |         radius: 20,
11 |         fill: 'blue'
12 |       }),
13 |       editor.shapes.circle.insert({
14 |         x: 300,
15 |         y: 300,
16 |         radius: 10,
17 |         fill: 'red'
18 |       })
19 |     ]
20 | 
21 |     const group = editor.board.groups.attach(shapes, 'g1')
22 | 
23 |     group.container.flipY()
24 | 
25 |     expect(group.container.node.attrs).toMatchObject({
26 |       scaleY: -1,
27 |       y: 490,
28 |       x: 0
29 |     })
30 |   })
31 | 
32 |   it('should flip the group horizontally', () => {
33 |     const editor = createEditor()
34 |     const shapes = [
35 |       editor.shapes.circle.insert({
36 |         x: 200,
37 |         y: 200,
38 |         radius: 20,
39 |         fill: 'blue'
40 |       }),
41 |       editor.shapes.circle.insert({
42 |         x: 300,
43 |         y: 300,
44 |         radius: 10,
45 |         fill: 'red'
46 |       })
47 |     ]
48 | 
49 |     const group = editor.board.groups.attach(shapes, 'g1')
50 | 
51 |     group.container.flipX()
52 | 
53 |     expect(group.container.node.attrs).toMatchObject({
54 |       scaleX: -1,
55 |       x: 490,
56 |       y: 0
57 |     })
58 |   })
59 | })
60 | 


--------------------------------------------------------------------------------
/tests/integration/grouping/grouping-history.test.ts:
--------------------------------------------------------------------------------
  1 | import { createEditor } from '../../../jest/utils/create-editor'
  2 | import { createShapes } from '../../../jest/utils/create-shapes'
  3 | 
  4 | describe('Grouping -> History States', () => {
  5 |   it('should undo and redo creating an empty group', () => {
  6 |     const editor = createEditor()
  7 |     editor.board.groups.create('g1', {})
  8 | 
  9 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
 10 | 
 11 |     editor.undo()
 12 |     expect(editor.board.groups.find('g1')).toBe(undefined)
 13 | 
 14 |     editor.redo()
 15 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
 16 |   })
 17 | 
 18 |   it('should undo and redo deleting a group', () => {
 19 |     const editor = createEditor()
 20 | 
 21 |     editor.board.groups.attach(createShapes(editor, 2), 'g1')
 22 |     editor.board.groups.delete('g1')
 23 | 
 24 |     expect(editor.board.groups.find('g1')).toBe(undefined)
 25 |     expect(editor.board.activeShapes.length).toBe(0)
 26 | 
 27 |     editor.undo()
 28 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
 29 |     expect(editor.board.activeShapes.length).toBe(3)
 30 | 
 31 |     editor.redo()
 32 |     expect(editor.board.groups.find('g1')).toBe(undefined)
 33 |     expect(editor.board.activeShapes.length).toBe(0)
 34 |   })
 35 | 
 36 |   it('should undo and redo undeleting a group', () => {
 37 |     const editor = createEditor()
 38 | 
 39 |     editor.board.groups.attach(createShapes(editor, 2), 'g1')
 40 |     editor.board.groups.delete('g1')
 41 |     editor.board.groups.undelete('g1')
 42 | 
 43 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
 44 |     expect(editor.board.activeShapes.length).toBe(3)
 45 | 
 46 |     editor.undo()
 47 |     expect(editor.board.groups.find('g1')).toBe(undefined)
 48 |     expect(editor.board.activeShapes.length).toBe(0)
 49 | 
 50 |     editor.redo()
 51 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
 52 |     expect(editor.board.activeShapes.length).toBe(3)
 53 |   })
 54 | 
 55 |   it('should undo and redo ungrouping a group', () => {
 56 |     const editor = createEditor()
 57 | 
 58 |     const shapes = createShapes(editor, 2)
 59 |     editor.board.groups.attach(shapes, 'g1')
 60 |     editor.board.groups.ungroup('g1')
 61 | 
 62 |     expect(editor.board.groups.find('g1')).toBe(undefined)
 63 |     expect(shapes[0].hasGroup()).toBe(false)
 64 |     expect(shapes[1].hasGroup()).toBe(false)
 65 | 
 66 |     editor.undo()
 67 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
 68 |     expect(shapes[0].group).toBe('g1')
 69 |     expect(shapes[1].group).toBe('g1')
 70 |     expect(editor.board.activeShapes.length).toBe(3)
 71 | 
 72 |     editor.redo()
 73 |     expect(editor.board.groups.find('g1')).toBe(undefined)
 74 |     expect(shapes[0].hasGroup()).toBe(false)
 75 |     expect(shapes[1].hasGroup()).toBe(false)
 76 |     expect(editor.board.activeShapes.length).toBe(2)
 77 |   })
 78 | 
 79 |   it('should undo and redo attaching shapes to a group', () => {
 80 |     const editor = createEditor()
 81 |     const shapes = createShapes(editor, 2)
 82 |     editor.board.groups.attach(shapes, 'g1')
 83 | 
 84 |     editor.undo()
 85 |     expect(shapes[0].hasGroup()).toBe(false)
 86 |     expect(shapes[1].hasGroup()).toBe(false)
 87 |     expect(editor.board.activeShapes.length).toBe(2)
 88 | 
 89 |     editor.redo()
 90 |     expect(shapes[0].group).toBe('g1')
 91 |     expect(shapes[1].group).toBe('g1')
 92 |     expect(editor.board.activeShapes.length).toBe(3)
 93 |   })
 94 | 
 95 |   it('should undo and redo detaching shapes from a group', () => {
 96 |     const editor = createEditor()
 97 |     const shapes = createShapes(editor, 2)
 98 |     editor.board.groups.attach(shapes, 'g1')
 99 |     editor.board.groups.detach([shapes[0]], 'g1')
100 | 
101 |     editor.undo()
102 |     expect(shapes[0].group).toBe('g1')
103 | 
104 |     editor.redo()
105 |     expect(shapes[0].hasGroup()).toBe(false)
106 |   })
107 | })
108 | 


--------------------------------------------------------------------------------
/tests/integration/grouping/grouping-rotation.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../jest/utils/create-editor'
 2 | 
 3 | describe('Grouping -> Rotation', () => {
 4 |   it('should rotate a group', () => {
 5 |     const editor = createEditor()
 6 |     const shapes = [
 7 |       editor.shapes.circle.insert({
 8 |         x: editor.board.stage.width() / 2,
 9 |         y: editor.board.stage.height() / 2,
10 |         radius: 10,
11 |         fill: 'red'
12 |       }),
13 |       editor.shapes.circle.insert({
14 |         x: editor.board.stage.width() / 2,
15 |         y: editor.board.stage.height() / 2,
16 |         radius: 10,
17 |         fill: 'red'
18 |       })
19 |     ]
20 | 
21 |     const group = editor.board.groups.attach(shapes, 'g1')
22 | 
23 |     editor.rotation.transform(90)
24 | 
25 |     const rect = group.container.node.getClientRect()
26 |     expect({
27 |       ...rect,
28 |       x: Number(rect.x.toFixed(2)),
29 |       y: Number(rect.y.toFixed(2))
30 |     }).toMatchObject({
31 |       x: 196.88,
32 |       y: 354.38,
33 |       width: 11.25,
34 |       height: 11.25
35 |     })
36 | 
37 |     expect(group.container.node.attrs).toMatchObject({
38 |       rotation: 90,
39 |       scaleX: 0.5625,
40 |       scaleY: 0.5625
41 |     })
42 |   })
43 | 
44 |   it('should straighten the group', () => {
45 |     const editor = createEditor()
46 |     const shapes = [
47 |       editor.shapes.circle.insert({
48 |         x: editor.board.stage.width() / 2,
49 |         y: editor.board.stage.height() / 2,
50 |         radius: 10,
51 |         fill: 'red'
52 |       }),
53 |       editor.shapes.circle.insert({
54 |         x: editor.board.stage.width() / 2,
55 |         y: editor.board.stage.height() / 2,
56 |         radius: 10,
57 |         fill: 'red'
58 |       })
59 |     ]
60 | 
61 |     const group = editor.board.groups.attach(shapes, 'g1')
62 |     group.container.rotate(45)
63 | 
64 |     const rect = group.container.node.getClientRect()
65 |     expect({
66 |       ...rect,
67 |       x: Number(rect.x.toFixed(2)),
68 |       y: Number(rect.y.toFixed(2)),
69 |       width: Number(rect.width.toFixed(2)),
70 |       height: Number(rect.height.toFixed(2))
71 |     }).toMatchObject({
72 |       x: 625.86,
73 |       y: 345.86,
74 |       width: 28.28,
75 |       height: 28.28
76 |     })
77 | 
78 |     expect(group.container.node.attrs).toMatchObject({
79 |       rotation: 45
80 |     })
81 |   })
82 | })
83 | 


--------------------------------------------------------------------------------
/tests/integration/import/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../jest/utils/create-editor'
 2 | import fixture from '../../../jest/fixtures/json-exported.json'
 3 | 
 4 | describe('Import', () => {
 5 |   it('should import json file', async () => {
 6 |     const editor = createEditor()
 7 | 
 8 |     await editor.load(JSON.stringify(fixture) as any)
 9 | 
10 |     expect(editor.board.activeShapes.length).toBe(14)
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/tests/integration/node-env/index.test.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @jest-environment node
 3 |  */
 4 | 
 5 | import Pikaso from '../../../src'
 6 | 
 7 | describe('NodeJs Environment', () => {
 8 |   it('should spin the board with its shapes', async () => {
 9 |     const editor = new Pikaso({
10 |       width: 800,
11 |       height: 800
12 |     })
13 | 
14 |     editor.shapes.circle.insert({
15 |       x: 100,
16 |       y: 100,
17 |       radius: 100,
18 |       fill: 'red'
19 |     })
20 | 
21 |     const json = editor.export.toJson()
22 | 
23 |     expect(json.shapes.length).toBe(1)
24 |   })
25 | })
26 | 


--------------------------------------------------------------------------------
/tests/integration/rotation/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../jest/utils/create-editor'
 2 | 
 3 | describe('Rotation', () => {
 4 |   const shapeConfig = {
 5 |     x: 100,
 6 |     y: 100,
 7 |     width: 100,
 8 |     height: 50
 9 |   }
10 | 
11 |   it('should not rotate the stage after transformation', () => {
12 |     const editor = createEditor()
13 | 
14 |     editor.rotation.transform(30)
15 | 
16 |     expect(editor.board.stage.rotation()).toBe(0)
17 |   })
18 | 
19 |   it('should rotate and transform the board with its shapes', async () => {
20 |     const editor = createEditor()
21 | 
22 |     await editor.loadFromUrl('1200x720')
23 |     editor.shapes.rect.insert(shapeConfig)
24 | 
25 |     editor.rotation.transform(30)
26 | 
27 |     editor.board.activeShapes.forEach(shape => {
28 |       expect(shape.node.rotation()).toBe(30)
29 |       expect(shape.node.x()).not.toBe(shapeConfig.x)
30 |       expect(shape.node.y()).not.toBe(shapeConfig.y)
31 |       expect(shape.node.width()).toBe(shapeConfig.width)
32 |       expect(shape.node.height()).toBe(shapeConfig.height)
33 |       expect(shape.node.scaleX()).not.toBe(1)
34 |       expect(shape.node.scaleY()).not.toBe(1)
35 |     })
36 |   })
37 | 
38 |   it('should spin the board with its shapes', async () => {
39 |     const editor = createEditor()
40 | 
41 |     await editor.loadFromUrl('1200x720')
42 |     editor.shapes.rect.insert(shapeConfig)
43 | 
44 |     editor.rotation.straighten(30)
45 | 
46 |     editor.board.activeShapes.forEach(shape => {
47 |       expect(shape.node.rotation()).toBe(30)
48 |       expect(shape.node.x()).not.toBe(shapeConfig.x)
49 |       expect(shape.node.y()).not.toBe(shapeConfig.y)
50 |       expect(shape.node.width()).toBe(shapeConfig.width)
51 |       expect(shape.node.height()).toBe(shapeConfig.height)
52 |     })
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/tests/integration/selection/index.test.ts:
--------------------------------------------------------------------------------
  1 | import { createEditor } from '../../../jest/utils/create-editor'
  2 | 
  3 | describe('Selection', () => {
  4 |   const shapeConfig = {
  5 |     x: 100,
  6 |     y: 100,
  7 |     radius: 50
  8 |   }
  9 | 
 10 |   it('should select the shape', () => {
 11 |     const editor = createEditor()
 12 | 
 13 |     const circle = editor.shapes.circle.insert(shapeConfig)
 14 | 
 15 |     circle.select()
 16 |     expect(editor.board.activeShapes.length).toBe(1)
 17 |   })
 18 | 
 19 |   it('should deselect the shape', () => {
 20 |     const editor = createEditor()
 21 | 
 22 |     const circle = editor.shapes.circle.insert(shapeConfig)
 23 | 
 24 |     circle.select()
 25 |     expect(editor.board.selection.list.length).toBe(1)
 26 | 
 27 |     circle.deselect()
 28 |     expect(editor.board.selection.list.length).toBe(0)
 29 |   })
 30 | 
 31 |   it('should delete the selected shape', () => {
 32 |     const editor = createEditor()
 33 | 
 34 |     const circle = editor.shapes.circle.insert(shapeConfig)
 35 | 
 36 |     circle.select()
 37 |     editor.selection.delete()
 38 | 
 39 |     expect(circle.isDeleted).toBe(true)
 40 |   })
 41 | 
 42 |   it('should select multiple shapes', () => {
 43 |     const editor = createEditor()
 44 | 
 45 |     new Array(2).fill(null).forEach(() => {
 46 |       editor.shapes.circle.insert(shapeConfig)
 47 |     })
 48 | 
 49 |     editor.board.selection.selectAll()
 50 | 
 51 |     expect(editor.board.selection.list.length).toBe(2)
 52 |   })
 53 | 
 54 |   it('should deselect all shapes', () => {
 55 |     const editor = createEditor()
 56 | 
 57 |     new Array(2).fill(null).forEach(() => {
 58 |       editor.shapes.circle.insert(shapeConfig)
 59 |     })
 60 | 
 61 |     editor.board.selection.selectAll()
 62 |     expect(editor.board.selection.list.length).toBe(2)
 63 | 
 64 |     editor.board.selection.deselectAll()
 65 |     expect(editor.board.selection.list.length).toBe(0)
 66 |   })
 67 | 
 68 |   it('should reselect all shapes', () => {
 69 |     const editor = createEditor()
 70 | 
 71 |     new Array(2).fill(null).forEach(() => {
 72 |       editor.shapes.circle.insert(shapeConfig)
 73 |     })
 74 | 
 75 |     editor.board.selection.selectAll()
 76 |     expect(editor.board.selection.list.length).toBe(2)
 77 | 
 78 |     editor.board.selection.reselect()
 79 |     expect(editor.board.selection.list.length).toBe(2)
 80 |   })
 81 | 
 82 |   it('should add a shape to the selection list', () => {
 83 |     const editor = createEditor()
 84 | 
 85 |     const circle1 = editor.shapes.circle.insert(shapeConfig)
 86 |     const circle2 = editor.shapes.circle.insert(shapeConfig)
 87 | 
 88 |     circle1.select()
 89 |     expect(editor.board.selection.list.length).toBe(1)
 90 | 
 91 |     editor.board.selection.add(circle2)
 92 |     expect(editor.board.selection.list.length).toBe(2)
 93 |   })
 94 | 
 95 |   it('should toggle selection', () => {
 96 |     const editor = createEditor()
 97 | 
 98 |     const circle = editor.shapes.circle.insert(shapeConfig)
 99 | 
100 |     circle.select()
101 |     expect(editor.board.selection.list.length).toBe(1)
102 | 
103 |     editor.board.selection.toggle(circle)
104 |     expect(editor.board.selection.list.length).toBe(0)
105 | 
106 |     editor.board.selection.toggle(circle)
107 |     expect(editor.board.selection.list.length).toBe(1)
108 |   })
109 | 
110 |   it('should move the selections horizontally', async () => {
111 |     const editor = createEditor()
112 | 
113 |     const circle = editor.shapes.circle.insert(shapeConfig)
114 |     circle.select()
115 | 
116 |     await editor.board.selection.moveX(-10)
117 |     expect(circle.node.attrs.x).toBe(shapeConfig.x - 10)
118 |   })
119 | 
120 |   it('should move the selections vertically', async () => {
121 |     const editor = createEditor()
122 | 
123 |     const circle = editor.shapes.circle.insert(shapeConfig)
124 |     circle.select()
125 | 
126 |     await editor.board.selection.moveY(10)
127 |     expect(circle.node.attrs.y).toBe(shapeConfig.y + 10)
128 |   })
129 | 
130 |   it('should add filter to the selected shapes', async () => {
131 |     const editor = createEditor()
132 | 
133 |     const circle = editor.shapes.circle.insert(shapeConfig)
134 |     circle.select()
135 | 
136 |     editor.board.selection.addFilter({
137 |       name: 'Invert'
138 |     })
139 | 
140 |     expect(circle.node.filters().length).toBe(1)
141 |   })
142 | 
143 |   it('should remove filter from the selected shapes', async () => {
144 |     const editor = createEditor()
145 | 
146 |     const circle = editor.shapes.circle.insert(shapeConfig)
147 |     circle.select()
148 | 
149 |     editor.board.selection.addFilter({
150 |       name: 'Invert'
151 |     })
152 |     expect(circle.node.filters().length).toBe(1)
153 | 
154 |     editor.board.selection.removeFilter({ name: 'Invert' })
155 |     expect(circle.node.filters().length).toBe(0)
156 |   })
157 | 
158 |   it('should get transformer', () => {
159 |     const editor = createEditor()
160 | 
161 |     const transformer = editor.selection.getTransformer()
162 | 
163 |     expect(transformer.className).toBe('Transformer')
164 |   })
165 | 
166 |   it('should find and select shapes', () => {
167 |     const editor = createEditor()
168 | 
169 |     const circle = editor.shapes.circle.insert(shapeConfig)
170 | 
171 |     editor.selection.find(item => item.node.className === 'Circle')
172 |     expect(editor.selection.list.length).toBe(1)
173 | 
174 |     editor.selection.find(item => item === circle)
175 |     expect(editor.selection.list.length).toBe(1)
176 |   })
177 | 
178 |   it('should group selection', () => {
179 |     const editor = createEditor()
180 | 
181 |     const circles = [
182 |       editor.shapes.circle.insert(shapeConfig),
183 |       editor.shapes.circle.insert({
184 |         ...shapeConfig,
185 |         x: 200,
186 |         y: 200,
187 |         radius: 10
188 |       })
189 |     ]
190 | 
191 |     editor.selection.find(item => item.node.className === 'Circle')
192 | 
193 |     editor.selection.group('g1')
194 | 
195 |     expect(circles[0].group).toBe('g1')
196 |     expect(circles[1].group).toBe('g1')
197 |     expect(editor.board.groups.find('g1')).not.toBe(undefined)
198 |   })
199 | })
200 | 


--------------------------------------------------------------------------------
/tests/integration/shapes/image/index.test.ts:
--------------------------------------------------------------------------------
 1 | import datauri from 'datauri'
 2 | import Konva from 'konva'
 3 | 
 4 | import { createEditor } from '../../../../jest/utils/create-editor'
 5 | import { createImageFromUrl } from '../../../../src/utils/create-image-from-url'
 6 | 
 7 | describe('Shape -> Image', () => {
 8 |   it('should create an image based on an url', async () => {
 9 |     const editor = createEditor()
10 | 
11 |     const base64Image = await datauri(
12 |       __dirname + '/../../../../assets/logo.svg'
13 |     )
14 |     const image = await editor.shapes.image.insert(base64Image!)
15 | 
16 |     expect(image.node.attrs.image).not.toBeNull()
17 |   })
18 | 
19 |   it('should create an image based on a file', async () => {
20 |     const editor = createEditor()
21 | 
22 |     const image = await editor.shapes.image.insert(
23 |       __dirname + '/../../../../assets/logo.png'
24 |     )
25 | 
26 |     expect(image.node.attrs.image).not.toBeNull()
27 |   })
28 | 
29 |   it('should create an image based on a Konva.Image object', async () => {
30 |     const editor = createEditor()
31 | 
32 |     const base64Image = await datauri(
33 |       __dirname + '/../../../../assets/logo.svg'
34 |     )
35 | 
36 |     const imgObject = await createImageFromUrl(base64Image!)
37 | 
38 |     const konvaImage = new Konva.Image({
39 |       image: imgObject.getAttr('image')
40 |     })
41 | 
42 |     const image = await editor.shapes.image.insert(konvaImage)
43 | 
44 |     expect(image.node.attrs.image).not.toBeNull()
45 |   })
46 | })
47 | 


--------------------------------------------------------------------------------
/tests/integration/shapes/label/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../../jest/utils/create-editor'
 2 | 
 3 | describe('Shape -> Label', () => {
 4 |   const baseConfig = {
 5 |     container: {
 6 |       x: 100,
 7 |       y: 100
 8 |     },
 9 |     text: {
10 |       fontSize: 50,
11 |       fill: 'red',
12 |       text: 'Test Label'
13 |     }
14 |   }
15 | 
16 |   it('should create a label', () => {
17 |     const editor = createEditor()
18 | 
19 |     editor.shapes.label.insert(baseConfig)
20 | 
21 |     expect(editor.board.activeShapes.length).toBe(1)
22 |   })
23 | 
24 |   it('should transition to inline editing stage', () => {
25 |     const editor = createEditor()
26 | 
27 |     const label = editor.shapes.label.insert(baseConfig)
28 | 
29 |     label.node.fire('dblclick')
30 | 
31 |     expect(label.isEditing).toBe(true)
32 |   })
33 | 
34 |   it('should change label text', () => {
35 |     const editor = createEditor()
36 | 
37 |     const label = editor.shapes.label.insert(baseConfig)
38 | 
39 |     label.updateText({
40 |       text: 'Foo Bar'
41 |     })
42 | 
43 |     expect(label.textNode.text()).toBe('Foo Bar')
44 |   })
45 | 
46 |   it('should change label background', () => {
47 |     const editor = createEditor()
48 | 
49 |     const label = editor.shapes.label.insert(baseConfig)
50 | 
51 |     label.updateTag({
52 |       fill: 'red'
53 |     })
54 | 
55 |     expect(label.tagNode.attrs.fill).toBe('red')
56 |   })
57 | })
58 | 


--------------------------------------------------------------------------------
/tests/integration/shapes/triangle/index.test.ts:
--------------------------------------------------------------------------------
 1 | import { createEditor } from '../../../../jest/utils/create-editor'
 2 | 
 3 | describe('Shape -> Label', () => {
 4 |   const config = {
 5 |     x: 100,
 6 |     y: 100,
 7 |     radius: 40
 8 |   }
 9 | 
10 |   it('should create a triangle', () => {
11 |     const editor = createEditor()
12 | 
13 |     editor.shapes.triangle.insert(config)
14 | 
15 |     expect(editor.board.activeShapes.length).toBe(1)
16 |     expect(editor.board.activeShapes[0].type).toBe('triangle')
17 |   })
18 | })
19 | 


--------------------------------------------------------------------------------
/tests/integration/tag/index.test.ts:
--------------------------------------------------------------------------------
 1 | import Konva from 'konva'
 2 | 
 3 | import { createEditor } from '../../../jest/utils/create-editor'
 4 | 
 5 | describe('Tag Measure', () => {
 6 |   const shapeConfig = {
 7 |     x: 100,
 8 |     y: 100,
 9 |     width: 100,
10 |     height: 50
11 |   }
12 | 
13 |   it('should create labels for selection and drawers', () => {
14 |     const editor = createEditor({
15 |       measurement: {}
16 |     })
17 | 
18 |     const labels = editor.board.layer.children!.filter(
19 |       node => node.className === 'Label'
20 |     )
21 | 
22 |     expect(labels.length).toBe(10)
23 |   })
24 | 
25 |   it('should show measure tag when select a shape', () => {
26 |     const editor = createEditor({
27 |       measurement: {}
28 |     })
29 | 
30 |     const shape = editor.shapes.rect.insert(shapeConfig)
31 | 
32 |     const label = editor.board.layer.children![4] as Konva.Label
33 |     expect(label.isVisible()).toBe(false)
34 | 
35 |     shape.select()
36 |     expect(label.isVisible()).toBe(true)
37 |   })
38 | 
39 |   it('should reposition tag when there is no space at bottom', () => {
40 |     const editor = createEditor({
41 |       measurement: {}
42 |     })
43 | 
44 |     const shape = editor.shapes.rect.insert(shapeConfig)
45 |     const label = editor.board.layer.children![4] as Konva.Label
46 | 
47 |     shape.select()
48 |     expect(label.attrs).toMatchObject({
49 |       x: 146,
50 |       y: 165
51 |     })
52 | 
53 |     shape.deselect()
54 |     shape.node.setAttrs({
55 |       y: 680
56 |     })
57 |     shape.select()
58 | 
59 |     expect(label.attrs.y).toBeLessThanOrEqual(
60 |       editor.board.getDimensions().height
61 |     )
62 |   })
63 | 
64 |   it('should not display tag when it is disabled', () => {
65 |     const editor = createEditor()
66 | 
67 |     const shape = editor.shapes.rect.insert(shapeConfig)
68 |     shape.select()
69 | 
70 |     const labels = editor.board.layer.children!.filter(
71 |       node => node.className === 'Label'
72 |     )
73 |     expect(labels.length).toBe(0)
74 |   })
75 | })
76 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "module": "ES6",
 4 |     "target": "ES5",
 5 |     "noImplicitAny": true,
 6 |     "noEmit": true,
 7 |     "strictNullChecks": true,
 8 |     "removeComments": true,
 9 |     "preserveConstEnums": true,
10 |     "allowSyntheticDefaultImports": true,
11 |     "esModuleInterop": true,
12 |     "moduleResolution": "Node",
13 |     "resolveJsonModule": true,
14 |     "skipLibCheck": true,
15 |     "rootDir": "src",
16 |     "baseUrl": "/",
17 |     "lib": [
18 |       "ES2017",
19 |       "ES2019.array",
20 |       "dom"
21 |     ],
22 |     "downlevelIteration": true
23 |   },
24 |   "compileOnSave": true,
25 |   "include": [
26 |     "src/**/*"
27 |   ],
28 |   "exclude": [
29 |     "src/**/*.test.ts"
30 |   ]
31 | }


--------------------------------------------------------------------------------
/typedoc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Pikaso",
 3 |   "entryPoints": [
 4 |     "./src/index.all.ts"
 5 |   ],
 6 |   "out": "api",
 7 |   "excludeProtected": true,
 8 |   "excludePrivate": true,
 9 |   "disableSources": true,
10 |   "theme": "default",
11 |   "hideGenerator": true,
12 |   "readme": "none",
13 |   "validation": {
14 |     "notExported": false
15 |   }
16 | }


--------------------------------------------------------------------------------