├── .editorconfig ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── question.md ├── auto-comment.yml ├── composite-actions │ ├── build-package │ │ └── action.yml │ ├── install-dependencies │ │ └── action.yml │ ├── publish-cdn │ │ └── action.yml │ ├── publish-docs │ │ └── action.yml │ └── publish-package │ │ └── action.yml ├── stale.yml └── workflows │ ├── detectRuntimeError.yml │ ├── publish-docs.yml │ ├── publish-npm.yml │ └── publish-wrapper.yml ├── .gitignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── apps ├── image-editor │ ├── README.md │ ├── __mocks__ │ │ ├── fileMock.js │ │ └── svgMock.js │ ├── createConfigVariable.js │ ├── examples │ │ ├── css │ │ │ ├── service-basic.css │ │ │ ├── service-mobile.css │ │ │ └── tui-example-style.css │ │ ├── example01-includeUi.html │ │ ├── example02-useApiDirect.html │ │ ├── example03-mobile.html │ │ ├── examples.json │ │ ├── img │ │ │ ├── TOAST UI Component.png │ │ │ ├── bg.jpg │ │ │ ├── bg.png │ │ │ ├── download.png │ │ │ ├── mask.png │ │ │ ├── openImage.png │ │ │ ├── redo.png │ │ │ ├── remove.png │ │ │ ├── sampleImage.jpg │ │ │ ├── sampleImage2.png │ │ │ └── undo.png │ │ └── js │ │ │ ├── service-basic.js │ │ │ ├── service-mobile.js │ │ │ └── theme │ │ │ ├── black-theme.js │ │ │ └── white-theme.js │ ├── index.d.ts │ ├── jest-setup.js │ ├── jest.config.js │ ├── makesvg.js │ ├── package.json │ ├── scripts │ │ ├── publishToCDN.js │ │ └── updateWrapper.js │ ├── src │ │ ├── css │ │ │ ├── buttons.styl │ │ │ ├── checkbox.styl │ │ │ ├── colorpicker.styl │ │ │ ├── gridtable.styl │ │ │ ├── icon.styl │ │ │ ├── index.styl │ │ │ ├── main.styl │ │ │ ├── position.styl │ │ │ ├── range.styl │ │ │ └── submenu.styl │ │ ├── index.js │ │ ├── js │ │ │ ├── action.js │ │ │ ├── command │ │ │ │ ├── addIcon.js │ │ │ │ ├── addImageObject.js │ │ │ │ ├── addObject.js │ │ │ │ ├── addShape.js │ │ │ │ ├── addText.js │ │ │ │ ├── applyFilter.js │ │ │ │ ├── changeIconColor.js │ │ │ │ ├── changeSelection.js │ │ │ │ ├── changeShape.js │ │ │ │ ├── changeText.js │ │ │ │ ├── changeTextStyle.js │ │ │ │ ├── clearObjects.js │ │ │ │ ├── flip.js │ │ │ │ ├── loadImage.js │ │ │ │ ├── removeFilter.js │ │ │ │ ├── removeObject.js │ │ │ │ ├── resize.js │ │ │ │ ├── resizeCanvasDimension.js │ │ │ │ ├── rotate.js │ │ │ │ ├── setObjectPosition.js │ │ │ │ └── setObjectProperties.js │ │ │ ├── component │ │ │ │ ├── cropper.js │ │ │ │ ├── filter.js │ │ │ │ ├── flip.js │ │ │ │ ├── freeDrawing.js │ │ │ │ ├── icon.js │ │ │ │ ├── imageLoader.js │ │ │ │ ├── line.js │ │ │ │ ├── resize.js │ │ │ │ ├── rotation.js │ │ │ │ ├── shape.js │ │ │ │ ├── text.js │ │ │ │ └── zoom.js │ │ │ ├── consts.js │ │ │ ├── drawingMode │ │ │ │ ├── cropper.js │ │ │ │ ├── freeDrawing.js │ │ │ │ ├── icon.js │ │ │ │ ├── lineDrawing.js │ │ │ │ ├── resize.js │ │ │ │ ├── shape.js │ │ │ │ ├── text.js │ │ │ │ └── zoom.js │ │ │ ├── extension │ │ │ │ ├── arrowLine.js │ │ │ │ ├── blur.js │ │ │ │ ├── colorFilter.js │ │ │ │ ├── cropzone.js │ │ │ │ ├── emboss.js │ │ │ │ ├── mask.js │ │ │ │ └── sharpen.js │ │ │ ├── factory │ │ │ │ ├── command.js │ │ │ │ └── errorMessage.js │ │ │ ├── graphics.js │ │ │ ├── helper │ │ │ │ ├── imagetracer.js │ │ │ │ ├── selectionModifyHelper.js │ │ │ │ ├── shapeFilterFillHelper.js │ │ │ │ └── shapeResizeHelper.js │ │ │ ├── imageEditor.js │ │ │ ├── interface │ │ │ │ ├── command.js │ │ │ │ ├── component.js │ │ │ │ └── drawingMode.js │ │ │ ├── invoker.js │ │ │ ├── polyfill.js │ │ │ ├── ui.js │ │ │ ├── ui │ │ │ │ ├── crop.js │ │ │ │ ├── draw.js │ │ │ │ ├── filter.js │ │ │ │ ├── flip.js │ │ │ │ ├── history.js │ │ │ │ ├── icon.js │ │ │ │ ├── locale │ │ │ │ │ └── locale.js │ │ │ │ ├── mask.js │ │ │ │ ├── panelMenu.js │ │ │ │ ├── resize.js │ │ │ │ ├── rotate.js │ │ │ │ ├── shape.js │ │ │ │ ├── submenuBase.js │ │ │ │ ├── template │ │ │ │ │ ├── controls.js │ │ │ │ │ ├── mainContainer.js │ │ │ │ │ ├── style.js │ │ │ │ │ └── submenu │ │ │ │ │ │ ├── crop.js │ │ │ │ │ │ ├── draw.js │ │ │ │ │ │ ├── filter.js │ │ │ │ │ │ ├── flip.js │ │ │ │ │ │ ├── history.js │ │ │ │ │ │ ├── icon.js │ │ │ │ │ │ ├── mask.js │ │ │ │ │ │ ├── resize.js │ │ │ │ │ │ ├── rotate.js │ │ │ │ │ │ ├── shape.js │ │ │ │ │ │ ├── text.js │ │ │ │ │ │ └── zoom.js │ │ │ │ ├── text.js │ │ │ │ ├── theme │ │ │ │ │ ├── standard.js │ │ │ │ │ └── theme.js │ │ │ │ └── tools │ │ │ │ │ ├── colorpicker.js │ │ │ │ │ └── range.js │ │ │ └── util.js │ │ └── svg │ │ │ ├── default.svg │ │ │ ├── icon-a │ │ │ ├── ic-apply.svg │ │ │ ├── ic-cancel.svg │ │ │ ├── ic-color-transparent-w.svg │ │ │ ├── ic-crop.svg │ │ │ ├── ic-delete-all.svg │ │ │ ├── ic-delete.svg │ │ │ ├── ic-draw-free.svg │ │ │ ├── ic-draw-line.svg │ │ │ ├── ic-draw.svg │ │ │ ├── ic-filter.svg │ │ │ ├── ic-flip-reset.svg │ │ │ ├── ic-flip-x.svg │ │ │ ├── ic-flip-y.svg │ │ │ ├── ic-flip.svg │ │ │ ├── ic-history-check.svg │ │ │ ├── ic-history-crop.svg │ │ │ ├── ic-history-delete.svg │ │ │ ├── ic-history-draw.svg │ │ │ ├── ic-history-filter.svg │ │ │ ├── ic-history-flip.svg │ │ │ ├── ic-history-group.svg │ │ │ ├── ic-history-icon.svg │ │ │ ├── ic-history-load.svg │ │ │ ├── ic-history-mask.svg │ │ │ ├── ic-history-resize.svg │ │ │ ├── ic-history-rotate.svg │ │ │ ├── ic-history-shape.svg │ │ │ ├── ic-history-text.svg │ │ │ ├── ic-history.svg │ │ │ ├── ic-icon-arrow-2.svg │ │ │ ├── ic-icon-arrow-3.svg │ │ │ ├── ic-icon-arrow.svg │ │ │ ├── ic-icon-bubble.svg │ │ │ ├── ic-icon-heart.svg │ │ │ ├── ic-icon-load.svg │ │ │ ├── ic-icon-location.svg │ │ │ ├── ic-icon-polygon.svg │ │ │ ├── ic-icon-star-2.svg │ │ │ ├── ic-icon-star.svg │ │ │ ├── ic-icon.svg │ │ │ ├── ic-mask-load.svg │ │ │ ├── ic-mask.svg │ │ │ ├── ic-redo.svg │ │ │ ├── ic-reset.svg │ │ │ ├── ic-resize.svg │ │ │ ├── ic-rotate-clockwise.svg │ │ │ ├── ic-rotate-counterclockwise.svg │ │ │ ├── ic-rotate.svg │ │ │ ├── ic-shape-circle.svg │ │ │ ├── ic-shape-rectangle.svg │ │ │ ├── ic-shape-triangle.svg │ │ │ ├── ic-shape.svg │ │ │ ├── ic-text-align-center.svg │ │ │ ├── ic-text-align-left.svg │ │ │ ├── ic-text-align-right.svg │ │ │ ├── ic-text-bold.svg │ │ │ ├── ic-text-italic.svg │ │ │ ├── ic-text-underline.svg │ │ │ ├── ic-text.svg │ │ │ ├── ic-undo.svg │ │ │ ├── ic-zoom-hand.svg │ │ │ ├── ic-zoom-zoom-in.svg │ │ │ ├── ic-zoom-zoom-out.svg │ │ │ └── img-bi.svg │ │ │ ├── icon-b │ │ │ ├── ic-apply.svg │ │ │ ├── ic-cancel.svg │ │ │ ├── ic-crop.svg │ │ │ ├── ic-delete-all.svg │ │ │ ├── ic-delete.svg │ │ │ ├── ic-draw-free.svg │ │ │ ├── ic-draw-line.svg │ │ │ ├── ic-draw.svg │ │ │ ├── ic-filter.svg │ │ │ ├── ic-flip-reset.svg │ │ │ ├── ic-flip-x.svg │ │ │ ├── ic-flip-y.svg │ │ │ ├── ic-flip.svg │ │ │ ├── ic-history-check.svg │ │ │ ├── ic-history-crop.svg │ │ │ ├── ic-history-delete.svg │ │ │ ├── ic-history-draw.svg │ │ │ ├── ic-history-filter.svg │ │ │ ├── ic-history-flip.svg │ │ │ ├── ic-history-group.svg │ │ │ ├── ic-history-icon.svg │ │ │ ├── ic-history-load.svg │ │ │ ├── ic-history-mask.svg │ │ │ ├── ic-history-resize.svg │ │ │ ├── ic-history-rotate.svg │ │ │ ├── ic-history-shape.svg │ │ │ ├── ic-history-text.svg │ │ │ ├── ic-history.svg │ │ │ ├── ic-icon-arrow-2.svg │ │ │ ├── ic-icon-arrow-3.svg │ │ │ ├── ic-icon-arrow.svg │ │ │ ├── ic-icon-bubble.svg │ │ │ ├── ic-icon-heart.svg │ │ │ ├── ic-icon-load.svg │ │ │ ├── ic-icon-location.svg │ │ │ ├── ic-icon-polygon.svg │ │ │ ├── ic-icon-star-2.svg │ │ │ ├── ic-icon-star.svg │ │ │ ├── ic-icon.svg │ │ │ ├── ic-mask-load.svg │ │ │ ├── ic-mask.svg │ │ │ ├── ic-redo.svg │ │ │ ├── ic-reset.svg │ │ │ ├── ic-resize.svg │ │ │ ├── ic-rotate-clockwise.svg │ │ │ ├── ic-rotate-counterclockwise.svg │ │ │ ├── ic-rotate.svg │ │ │ ├── ic-shape-circle.svg │ │ │ ├── ic-shape-rectangle.svg │ │ │ ├── ic-shape-triangle.svg │ │ │ ├── ic-shape.svg │ │ │ ├── ic-text-align-center.svg │ │ │ ├── ic-text-align-left.svg │ │ │ ├── ic-text-align-right.svg │ │ │ ├── ic-text-bold.svg │ │ │ ├── ic-text-italic.svg │ │ │ ├── ic-text-underline.svg │ │ │ ├── ic-text.svg │ │ │ ├── ic-undo.svg │ │ │ ├── ic-zoom-hand.svg │ │ │ ├── ic-zoom-zoom-in.svg │ │ │ ├── ic-zoom-zoom-out.svg │ │ │ └── img-bi.svg │ │ │ ├── icon-c │ │ │ ├── ic-apply.svg │ │ │ ├── ic-cancel.svg │ │ │ ├── ic-crop.svg │ │ │ ├── ic-delete-all.svg │ │ │ ├── ic-delete.svg │ │ │ ├── ic-draw-free.svg │ │ │ ├── ic-draw-line.svg │ │ │ ├── ic-draw.svg │ │ │ ├── ic-filter.svg │ │ │ ├── ic-flip-reset.svg │ │ │ ├── ic-flip-x.svg │ │ │ ├── ic-flip-y.svg │ │ │ ├── ic-flip.svg │ │ │ ├── ic-history-check.svg │ │ │ ├── ic-history-crop.svg │ │ │ ├── ic-history-delete.svg │ │ │ ├── ic-history-draw.svg │ │ │ ├── ic-history-filter.svg │ │ │ ├── ic-history-flip.svg │ │ │ ├── ic-history-group.svg │ │ │ ├── ic-history-icon.svg │ │ │ ├── ic-history-load.svg │ │ │ ├── ic-history-mask.svg │ │ │ ├── ic-history-resize.svg │ │ │ ├── ic-history-rotate.svg │ │ │ ├── ic-history-shape.svg │ │ │ ├── ic-history-text.svg │ │ │ ├── ic-history.svg │ │ │ ├── ic-icon-arrow-2.svg │ │ │ ├── ic-icon-arrow-3.svg │ │ │ ├── ic-icon-arrow.svg │ │ │ ├── ic-icon-bubble.svg │ │ │ ├── ic-icon-heart.svg │ │ │ ├── ic-icon-load.svg │ │ │ ├── ic-icon-location.svg │ │ │ ├── ic-icon-polygon.svg │ │ │ ├── ic-icon-star-2.svg │ │ │ ├── ic-icon-star.svg │ │ │ ├── ic-icon.svg │ │ │ ├── ic-mask-load.svg │ │ │ ├── ic-mask.svg │ │ │ ├── ic-redo.svg │ │ │ ├── ic-reset.svg │ │ │ ├── ic-resize.svg │ │ │ ├── ic-rotate-clockwise.svg │ │ │ ├── ic-rotate-counterclockwise.svg │ │ │ ├── ic-rotate.svg │ │ │ ├── ic-shape-circle.svg │ │ │ ├── ic-shape-rectangle.svg │ │ │ ├── ic-shape-triangle.svg │ │ │ ├── ic-shape.svg │ │ │ ├── ic-text-align-center.svg │ │ │ ├── ic-text-align-left.svg │ │ │ ├── ic-text-align-right.svg │ │ │ ├── ic-text-bold.svg │ │ │ ├── ic-text-italic.svg │ │ │ ├── ic-text-underline.svg │ │ │ ├── ic-text.svg │ │ │ ├── ic-undo.svg │ │ │ ├── ic-zoom-hand.svg │ │ │ ├── ic-zoom-zoom-in.svg │ │ │ ├── ic-zoom-zoom-out.svg │ │ │ └── img-bi.svg │ │ │ └── icon-d │ │ │ ├── ic-apply.svg │ │ │ ├── ic-cancel.svg │ │ │ ├── ic-crop.svg │ │ │ ├── ic-delete-all.svg │ │ │ ├── ic-delete.svg │ │ │ ├── ic-draw-free.svg │ │ │ ├── ic-draw-line.svg │ │ │ ├── ic-draw.svg │ │ │ ├── ic-filter.svg │ │ │ ├── ic-flip-reset.svg │ │ │ ├── ic-flip-x.svg │ │ │ ├── ic-flip-y.svg │ │ │ ├── ic-flip.svg │ │ │ ├── ic-history-check.svg │ │ │ ├── ic-history-crop.svg │ │ │ ├── ic-history-delete.svg │ │ │ ├── ic-history-draw.svg │ │ │ ├── ic-history-filter.svg │ │ │ ├── ic-history-flip.svg │ │ │ ├── ic-history-group.svg │ │ │ ├── ic-history-icon.svg │ │ │ ├── ic-history-load.svg │ │ │ ├── ic-history-mask.svg │ │ │ ├── ic-history-resize.svg │ │ │ ├── ic-history-rotate.svg │ │ │ ├── ic-history-shape.svg │ │ │ ├── ic-history-text.svg │ │ │ ├── ic-history.svg │ │ │ ├── ic-icon-arrow-2.svg │ │ │ ├── ic-icon-arrow-3.svg │ │ │ ├── ic-icon-arrow.svg │ │ │ ├── ic-icon-bubble.svg │ │ │ ├── ic-icon-heart.svg │ │ │ ├── ic-icon-load.svg │ │ │ ├── ic-icon-location.svg │ │ │ ├── ic-icon-polygon.svg │ │ │ ├── ic-icon-star-2.svg │ │ │ ├── ic-icon-star.svg │ │ │ ├── ic-icon.svg │ │ │ ├── ic-mask-load.svg │ │ │ ├── ic-mask.svg │ │ │ ├── ic-redo.svg │ │ │ ├── ic-reset.svg │ │ │ ├── ic-resize.svg │ │ │ ├── ic-rotate-clockwise.svg │ │ │ ├── ic-rotate-counterclockwise.svg │ │ │ ├── ic-rotate.svg │ │ │ ├── ic-shape-circle.svg │ │ │ ├── ic-shape-rectangle.svg │ │ │ ├── ic-shape-triangle.svg │ │ │ ├── ic-shape.svg │ │ │ ├── ic-text-align-center.svg │ │ │ ├── ic-text-align-left.svg │ │ │ ├── ic-text-align-right.svg │ │ │ ├── ic-text-bold.svg │ │ │ ├── ic-text-italic.svg │ │ │ ├── ic-text-underline.svg │ │ │ ├── ic-text.svg │ │ │ ├── ic-undo.svg │ │ │ ├── ic-zoom-hand.svg │ │ │ ├── ic-zoom-zoom-in.svg │ │ │ ├── ic-zoom-zoom-out.svg │ │ │ └── img-bi.svg │ ├── tests │ │ ├── __snapshots__ │ │ │ ├── arrowLine.spec.js.snap │ │ │ ├── shape.spec.js.snap │ │ │ ├── text.spec.js.snap │ │ │ └── theme.spec.js.snap │ │ ├── action.spec.js │ │ ├── arrowLine.spec.js │ │ ├── command.spec.js │ │ ├── cropper.spec.js │ │ ├── cropzone.spec.js │ │ ├── drawingMode.spec.js │ │ ├── filter.spec.js │ │ ├── fixtures │ │ │ ├── TOAST UI Component.png │ │ │ ├── icon-a.svg │ │ │ ├── icon-b.svg │ │ │ ├── icon-c.svg │ │ │ ├── icon-d.svg │ │ │ ├── mask.png │ │ │ └── sampleImage.jpg │ │ ├── flip.spec.js │ │ ├── graphics.spec.js │ │ ├── history.spec.js │ │ ├── icon.spec.js │ │ ├── imageEditor.spec.js │ │ ├── index.js │ │ ├── invoker.spec.js │ │ ├── line.spec.js │ │ ├── promiseApi.spec.js │ │ ├── resize.spec.js │ │ ├── rotation.spec.js │ │ ├── selectionModifyHelper.spec.js │ │ ├── shape.spec.js │ │ ├── text.spec.js │ │ ├── theme.spec.js │ │ ├── types │ │ │ ├── tsconfig.json │ │ │ └── type-tests.ts │ │ ├── ui.spec.js │ │ ├── uiRange.spec.js │ │ └── zoom.spec.js │ ├── tsBannerGenerator.js │ ├── tuidoc.config.json │ ├── webpack.common.config.js │ ├── webpack.config.js │ ├── webpack.dev.config.js │ └── webpack.prod.config.js ├── react-image-editor │ ├── .babelrc.json │ ├── .eslintrc.js │ ├── .storybook │ │ ├── img │ │ │ └── sampleImage2.png │ │ ├── main.js │ │ └── preview.js │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.js │ ├── stories │ │ └── index.stories.js │ └── webpack.config.js └── vue-image-editor │ ├── .eslintrc.js │ ├── .storybook │ ├── img │ │ └── sampleImage2.png │ ├── main.js │ └── preview.js │ ├── README.md │ ├── package.json │ ├── src │ ├── ImageEditor.vue │ └── index.js │ ├── stories │ └── index.stories.js │ ├── vue.config.js │ └── webpack.config.js ├── babel.config.json ├── bower.json ├── docs ├── Apply-Mobile-Version-Image.md ├── Apply-Mobile-Version.md ├── Basic-Tutorial.md ├── COMMIT_MESSAGE_CONVENTION.md ├── ISSUE_TEMPLATE.md ├── ImageEditor-2.0.0-Migration-guide.md ├── PULL_REQUEST_TEMPLATE.md ├── Reference.md └── Structure.md ├── lerna.json ├── package-lock.json └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | indent_style = space 4 | indent_size = 2 5 | end_of_line = lf 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['tui/es6', 'plugin:jest/recommended', 'plugin:prettier/recommended'], 4 | plugins: ['jest', 'prettier'], 5 | env: { 6 | browser: true, 7 | amd: true, 8 | node: true, 9 | es6: true, 10 | jest: true, 11 | 'jest/globals': true, 12 | }, 13 | parser: '@babel/eslint-parser', 14 | parserOptions: { 15 | sourceType: 'module', 16 | babelOptions: { 17 | rootMode: 'upward', 18 | }, 19 | }, 20 | ignorePatterns: ['node_modules/*', 'dist', 'examples'], 21 | rules: { 22 | 'prefer-destructuring': [ 23 | 'error', 24 | { 25 | VariableDeclarator: { array: true, object: true }, 26 | AssignmentExpression: { array: false, object: false }, 27 | }, 28 | ], 29 | }, 30 | overrides: [ 31 | { 32 | files: ['*.spec.js'], 33 | rules: { 34 | 'max-nested-callbacks': ['error', { max: 5 }], 35 | 'dot-notation': ['error', { allowKeywords: true }], 36 | 'no-undefined': 'off', 37 | 'jest/expect-expect': ['error', { assertFunctionNames: ['expect', 'assert*'] }], 38 | }, 39 | }, 40 | ], 41 | }; 42 | -------------------------------------------------------------------------------- /.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: '' 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: Enhancement, Need Discussion 6 | assignees: '' 7 | --- 8 | 9 | 17 | 18 | 19 | 20 | ## Version 21 | 22 | 23 | 24 | ## Development Environment 25 | 26 | 27 | 28 | ## Current Behavior 29 | 30 | 31 | 32 | ```js 33 | // Write example code 34 | ``` 35 | 36 | ## Expected Behavior 37 | 38 | 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/question.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Question 3 | about: Create a question about imageEditor 4 | title: '' 5 | labels: Question 6 | assignees: '' 7 | --- 8 | 9 | 18 | 19 | **Summary** 20 | A clear and concise description of what the question is. 21 | 22 | **Screenshots** 23 | If applicable, add screenshots to help explain your question. 24 | 25 | **Version** 26 | Write the version of the imageEditor you are currently using. 27 | 28 | **Additional context** 29 | Add any other context about the problem here. 30 | -------------------------------------------------------------------------------- /.github/auto-comment.yml: -------------------------------------------------------------------------------- 1 | # Comment to a new issue. 2 | issuesOpened: > 3 | Thank you for raising an issue. 4 | 5 | We will try and get back to you as soon as possible. 6 | 7 | 8 | Please make sure you have filled out issue respecting our form **in English** and given us as much context as possible. 9 | **If not, the issue will be closed or not replied.** 10 | 11 | -------------------------------------------------------------------------------- /.github/composite-actions/install-dependencies/action.yml: -------------------------------------------------------------------------------- 1 | name: 'Install root dependencies using cache' 2 | description: 'Set Node.js version and install node_modules' 3 | outputs: 4 | root_cache_key: 5 | description: 'Key of root dependencies cache' 6 | value: ${{ steps.root_lockfile_hash.outputs.hash }} 7 | runs: 8 | using: 'composite' 9 | steps: 10 | - name: Use Node.js 15.x 11 | uses: actions/setup-node@v1 12 | with: 13 | node-version: '15.x' 14 | registry-url: https://registry.npmjs.org/ 15 | - name: Compute root dependencies cache key 16 | id: root_lockfile_hash 17 | run: echo "::set-output name=hash::${{ hashFiles('package-lock.json') }}" 18 | shell: bash 19 | - name: Check root dependencies cache 20 | uses: actions/cache@v2 21 | id: root_cache_dependencies 22 | with: 23 | path: ./node_modules 24 | key: ${{ steps.root_lockfile_hash.outputs.hash }} 25 | - name: Install root dependencies 26 | run: | 27 | if echo ${{ steps.root_cache_dependencies.outputs.cache-hit }} | grep -c "true" 28 | then 29 | echo "Cache hit - skipping root dependency installation" 30 | else 31 | npm install 32 | fi 33 | shell: bash 34 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Configuration for probot-stale - https://github.com/probot/stale 2 | 3 | # Number of days of inactivity before an Issue or Pull Request becomes stale 4 | daysUntilStale: 30 5 | 6 | # Number of days of inactivity before an Issue or Pull Request with the stale label is closed. 7 | # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. 8 | daysUntilClose: 7 9 | 10 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable 11 | exemptLabels: 12 | - Feature 13 | - Enhancement 14 | - Bug 15 | - NHN Cloud 16 | 17 | # Label to use when marking as stale 18 | staleLabel: inactive 19 | 20 | # Comment to post when marking as stale. Set to `false` to disable 21 | markComment: > 22 | This issue has been automatically marked as inactive because there hasn’t been much going on it lately. 23 | It is going to be closed after 7 days. Thanks! 24 | # Comment to post when removing the stale label. 25 | # unmarkComment: > 26 | # Your comment here. 27 | 28 | # Comment to post when closing a stale Issue or Pull Request. 29 | closeComment: > 30 | This issue will be closed due to inactivity. Thanks for your contribution! 31 | -------------------------------------------------------------------------------- /.github/workflows/detectRuntimeError.yml: -------------------------------------------------------------------------------- 1 | name: detect runtime error 2 | 3 | on: 4 | schedule: 5 | - cron: '0 22 * * *' 6 | jobs: 7 | detectError: 8 | runs-on: ubuntu-latest 9 | env: 10 | WORKING_DIRECTORY: ./apps/image-editor 11 | steps: 12 | - name: checkout repository 13 | uses: actions/checkout@v2 14 | - name: create config variable 15 | working-directory: ${{ env.WORKING_DIRECTORY }} 16 | run: | 17 | node createConfigVariable.js 18 | - name: set global error variable 19 | working-directory: ${{ env.WORKING_DIRECTORY }} 20 | run: | 21 | errorVariable=`cat ./errorVariable.txt` 22 | echo "ERROR_VARIABLE=$errorVariable" >> $GITHUB_ENV 23 | - name: set url 24 | working-directory: ${{ env.WORKING_DIRECTORY }} 25 | shell: bash 26 | run: | 27 | url=`cat ./url.txt` 28 | echo "URLS=$url" >> $GITHUB_ENV 29 | - name: detect runtime error 30 | uses: nhn/toast-ui.detect-runtime-error-actions@v1.0.1 31 | with: 32 | global-error-log-variable: ${{ env.ERROR_VARIABLE }} 33 | urls: ${{ env.URLS }} 34 | env: 35 | BROWSERSTACK_USERNAME: ${{secrets.BROWSERSTACK_USERNAME}} 36 | BROWSERSTACK_ACCESS_KEY: ${{secrets.BROWSERSTACK_ACCESS_KEY}} 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 14 | .grunt 15 | 16 | # Compiled binary addons (http://nodejs.org/api/addons.html) 17 | build/Release 18 | 19 | # Dependency directory 20 | # Deployed apps should consider commenting this line out: 21 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 22 | node_modules 23 | 24 | # Bower Components 25 | bower_components 26 | lib 27 | 28 | #JSDOC 29 | doc 30 | 31 | # IDEA 32 | .idea 33 | *.iml 34 | 35 | # Window 36 | Thumbs.db 37 | Desktop.ini 38 | 39 | # MAC 40 | .DS_Store 41 | 42 | # SVN 43 | .svn 44 | 45 | # eclipse 46 | .project 47 | .metadata 48 | 49 | # build 50 | build 51 | 52 | # Atom 53 | tags 54 | .ctags 55 | .tern-project 56 | 57 | # etc 58 | .agignore 59 | *.swp 60 | etc 61 | temp 62 | api 63 | .tern-port 64 | *.vim 65 | .\#* 66 | .vscode 67 | 68 | dist 69 | !_*/dist/ 70 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 100, 4 | "tabWidth": 2, 5 | "useTabs": false, 6 | "semi": true, 7 | "quoteProps": "as-needed", 8 | "jsxSingleQuote": false, 9 | "trailingComma": "es5", 10 | "arrowParens": "always", 11 | "endOfLine": "lf", 12 | "bracketSpacing": true, 13 | "jsxBracketSameLine": false, 14 | "requirePragma": false, 15 | "insertPragma": false, 16 | "proseWrap": "preserve", 17 | "vueIndentScriptAndStyle": false 18 | } 19 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | ## Version 13 | 14 | 15 | 16 | ## Development Environment 17 | 18 | 19 | 20 | ## Current Behavior 21 | 22 | 23 | 24 | ```js 25 | // Write example code 26 | ``` 27 | 28 | ## Expected Behavior 29 | 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | The MIT License 3 | 4 | Copyright (c) 2019 NHN Cloud Corp. 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /apps/image-editor/__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | process(src, filename) { 5 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /apps/image-editor/__mocks__/svgMock.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | process() { 3 | return `module.exports = 'PGRlZnMgaWQ9InR1aS1pbWFnZS1lZGl0b3Itc3ZnLWRlZmF1bHQtaWNvbnMiPg=='`; 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /apps/image-editor/createConfigVariable.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const config = require(path.resolve(__dirname, 'tuidoc.config.json')); 4 | const examples = config.examples || {}; 5 | const { filePath, globalErrorLogVariable } = examples; 6 | 7 | /** 8 | * Get Examples Url 9 | */ 10 | function getTestUrls() { 11 | if (!filePath) { 12 | throw Error('not exist examples path at tuidoc.config.json'); 13 | } 14 | 15 | const urlPrefix = 'http://nhn.github.io/tui.image-editor/latest'; 16 | 17 | const testUrls = fs.readdirSync(filePath).reduce((urls, fileName) => { 18 | if (/html$/.test(fileName)) { 19 | urls.push(`${urlPrefix}/${filePath}/${fileName}`); 20 | } 21 | 22 | return urls; 23 | }, []); 24 | 25 | fs.writeFileSync('url.txt', testUrls.join(', ')); 26 | } 27 | 28 | function getGlobalVariable() { 29 | if (!globalErrorLogVariable) { 30 | throw Error('not exist examples path at tuidoc.config.json'); 31 | } 32 | 33 | fs.writeFileSync('errorVariable.txt', globalErrorLogVariable); 34 | } 35 | 36 | getTestUrls(); 37 | getGlobalVariable(); 38 | -------------------------------------------------------------------------------- /apps/image-editor/examples/css/tui-example-style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .code-description { 7 | padding: 22px 52px; 8 | background-color: rgba(81, 92, 230, 0.1); 9 | line-height: 1.4em; 10 | } 11 | 12 | .code-description, 13 | .code-description a { 14 | font-family: Arial; 15 | font-size: 14px; 16 | color: #515ce6; 17 | } 18 | 19 | .code-html { 20 | padding: 20px 52px; 21 | } 22 | -------------------------------------------------------------------------------- /apps/image-editor/examples/examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "example01-includeUi": { 3 | "title": "1. Include ui" 4 | }, 5 | "example02-useApiDirect": { 6 | "title": "2. Use api direct (basic)" 7 | }, 8 | "example03-mobile": { 9 | "title": "3. Mobile" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /apps/image-editor/examples/img/TOAST UI Component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/TOAST UI Component.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/bg.jpg -------------------------------------------------------------------------------- /apps/image-editor/examples/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/bg.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/download.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/mask.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/openImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/openImage.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/redo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/redo.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/remove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/remove.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/sampleImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/sampleImage.jpg -------------------------------------------------------------------------------- /apps/image-editor/examples/img/sampleImage2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/sampleImage2.png -------------------------------------------------------------------------------- /apps/image-editor/examples/img/undo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/examples/img/undo.png -------------------------------------------------------------------------------- /apps/image-editor/jest-setup.js: -------------------------------------------------------------------------------- 1 | import 'jest-canvas-mock'; 2 | -------------------------------------------------------------------------------- /apps/image-editor/jest.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const setupFile = path.resolve(__dirname, './jest-setup.js'); 3 | 4 | module.exports = { 5 | moduleFileExtensions: ['js'], 6 | testEnvironment: 'jsdom', 7 | transform: { 8 | '^.+\\.js$': 'jest-esm-transformer', 9 | '^.+\\.svg$': '/__mocks__/svgMock.js', 10 | }, 11 | transformIgnorePatterns: ['/node_modules/'], 12 | testMatch: ['/**/*.spec.js'], 13 | clearMocks: true, 14 | moduleNameMapper: { 15 | '^@/(.*)$': '/src/js/$1', 16 | '^@css/(.*)$': '/src/css/$1', 17 | '^@svg/(.*)$': '/src/svg/$1', 18 | '^fixtures/(.*)$': '/__mocks__/fileMock.js', 19 | }, 20 | setupFiles: [setupFile], 21 | }; 22 | -------------------------------------------------------------------------------- /apps/image-editor/makesvg.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | const fs = require('fs'); 3 | const mkdirp = require('mkdirp'); 4 | const svgstore = require('svgstore'); 5 | const svgDir = './src/svg'; 6 | 7 | function getFileList(dir) { 8 | const targetDir = `${svgDir}/${dir}`; 9 | const sprites = svgstore(); 10 | fs.readdir(targetDir, (err, files) => { 11 | if (!files) return; 12 | files.forEach((file) => { 13 | if (file.match(/^\./)) return; 14 | const id = `${dir}-${file.replace(/\.svg$/, '')}`; 15 | const svg = fs.readFileSync(`${targetDir}/${file}`); 16 | sprites.add(id, svg); 17 | }); 18 | fs.writeFileSync(`./dist/svg/${dir}.svg`, sprites); 19 | }); 20 | } 21 | 22 | mkdirp('./dist/svg').then((path) => { 23 | if (path) { 24 | fs.readdir(svgDir, (err, dirs) => { 25 | dirs.forEach((dir) => { 26 | getFileList(dir); 27 | }); 28 | }); 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /apps/image-editor/scripts/updateWrapper.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | const path = require('path'); 3 | const fs = require('fs'); 4 | 5 | const CORE_PACKAGE_JSON_PATH = path.join(__dirname, '../package.json'); 6 | const REACT_PACKAGE_JSON_PATH = path.join(__dirname, '../../react-image-editor/package.json'); 7 | const VUE_PACKAGE_JSON_PATH = path.join(__dirname, '../../vue-image-editor/package.json'); 8 | 9 | const corePackage = require(CORE_PACKAGE_JSON_PATH); 10 | const reactPackage = require(REACT_PACKAGE_JSON_PATH); 11 | const vuePackage = require(VUE_PACKAGE_JSON_PATH); 12 | 13 | const version = corePackage.version; 14 | 15 | reactPackage.version = version; 16 | reactPackage.dependencies['tui-image-editor'] = `^${version}`; 17 | 18 | fs.writeFileSync(REACT_PACKAGE_JSON_PATH, `${JSON.stringify(reactPackage, null, 2)}\n`); 19 | 20 | vuePackage.version = version; 21 | vuePackage.dependencies['tui-image-editor'] = `^${version}`; 22 | 23 | fs.writeFileSync(VUE_PACKAGE_JSON_PATH, `${JSON.stringify(vuePackage, null, 2)}\n`); 24 | -------------------------------------------------------------------------------- /apps/image-editor/src/css/icon.styl: -------------------------------------------------------------------------------- 1 | /* ICON */ 2 | .{prefix}-container 3 | .tie-icon-add-button .{prefix}-button 4 | min-width: 42px; 5 | .svg_ic-menu 6 | .svg_ic-helpmenu 7 | width: 24px; 8 | height: 24px; 9 | .svg_ic-submenu 10 | width: 32px; 11 | height: 32px; 12 | .svg_img-bi 13 | width: 257px; 14 | height: 26px; 15 | 16 | .{prefix}-help-menu 17 | .{prefix}-controls 18 | svg > use 19 | display: none; 20 | .enabled svg:hover > use.hover 21 | .normal svg:hover > use.hover 22 | display: block; 23 | .active svg:hover > use.hover 24 | display: none; 25 | .on svg > use.hover, 26 | .opened svg > use.hover 27 | display: block; 28 | svg > use.normal 29 | display: block; 30 | .active svg > use.active 31 | display: block; 32 | .enabled svg > use.enabled 33 | display: block; 34 | .active svg > use.normal, 35 | .enabled svg > use.normal 36 | display: none; 37 | .help svg > use.disabled, 38 | .help.enabled svg > use.normal 39 | display: block; 40 | .help.enabled svg > use.disabled 41 | display: none; 42 | 43 | .{prefix}-controls:hover 44 | z-index: 3; 45 | -------------------------------------------------------------------------------- /apps/image-editor/src/css/index.styl: -------------------------------------------------------------------------------- 1 | prefix = 'tui-image-editor' 2 | 3 | @import 'main.styl' 4 | @import 'gridtable.styl' 5 | @import 'submenu.styl' 6 | @import 'checkbox.styl' 7 | @import 'range.styl' 8 | @import 'position.styl' 9 | @import 'icon.styl' 10 | @import 'colorpicker.styl' 11 | @import 'buttons.styl' 12 | .{prefix}-container.top 13 | &.{prefix}-top-optimization 14 | .{prefix}-controls ul 15 | text-align: right; 16 | .{prefix}-controls-logo 17 | display: none; 18 | -------------------------------------------------------------------------------- /apps/image-editor/src/index.js: -------------------------------------------------------------------------------- 1 | import '@/polyfill'; 2 | import ImageEditor from '@/imageEditor'; 3 | import '@css/index.styl'; 4 | 5 | // commands 6 | import '@/command/addIcon'; 7 | import '@/command/addImageObject'; 8 | import '@/command/addObject'; 9 | import '@/command/addShape'; 10 | import '@/command/addText'; 11 | import '@/command/applyFilter'; 12 | import '@/command/changeIconColor'; 13 | import '@/command/changeShape'; 14 | import '@/command/changeText'; 15 | import '@/command/changeTextStyle'; 16 | import '@/command/clearObjects'; 17 | import '@/command/flip'; 18 | import '@/command/loadImage'; 19 | import '@/command/removeFilter'; 20 | import '@/command/removeObject'; 21 | import '@/command/resizeCanvasDimension'; 22 | import '@/command/rotate'; 23 | import '@/command/setObjectProperties'; 24 | import '@/command/setObjectPosition'; 25 | import '@/command/changeSelection'; 26 | import '@/command/resize'; 27 | 28 | export default ImageEditor; 29 | export { ImageEditor }; 30 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/addIcon.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { componentNames, commandNames } from '@/consts'; 3 | 4 | const { ICON } = componentNames; 5 | 6 | const command = { 7 | name: commandNames.ADD_ICON, 8 | 9 | /** 10 | * Add an icon 11 | * @param {Graphics} graphics - Graphics instance 12 | * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) 13 | * @param {Object} options - Icon options 14 | * @param {string} [options.fill] - Icon foreground color 15 | * @param {string} [options.left] - Icon x position 16 | * @param {string} [options.top] - Icon y position 17 | * @returns {Promise} 18 | */ 19 | execute(graphics, type, options) { 20 | const iconComp = graphics.getComponent(ICON); 21 | 22 | return iconComp.add(type, options).then((objectProps) => { 23 | this.undoData.object = graphics.getObject(objectProps.id); 24 | 25 | return objectProps; 26 | }); 27 | }, 28 | 29 | /** 30 | * @param {Graphics} graphics - Graphics instance 31 | * @returns {Promise} 32 | */ 33 | undo(graphics) { 34 | graphics.remove(this.undoData.object); 35 | 36 | return Promise.resolve(); 37 | }, 38 | }; 39 | 40 | commandFactory.register(command); 41 | 42 | export default command; 43 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/addImageObject.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { commandNames } from '@/consts'; 3 | 4 | const command = { 5 | name: commandNames.ADD_IMAGE_OBJECT, 6 | 7 | /** 8 | * Add an image object 9 | * @param {Graphics} graphics - Graphics instance 10 | * @param {string} imgUrl - Image url to make object 11 | * @returns {Promise} 12 | */ 13 | execute(graphics, imgUrl) { 14 | return graphics.addImageObject(imgUrl).then((objectProps) => { 15 | this.undoData.object = graphics.getObject(objectProps.id); 16 | 17 | return objectProps; 18 | }); 19 | }, 20 | 21 | /** 22 | * @param {Graphics} graphics - Graphics instance 23 | * @returns {Promise} 24 | */ 25 | undo(graphics) { 26 | graphics.remove(this.undoData.object); 27 | 28 | return Promise.resolve(); 29 | }, 30 | }; 31 | 32 | commandFactory.register(command); 33 | 34 | export default command; 35 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/addObject.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { commandNames, rejectMessages } from '@/consts'; 3 | 4 | const command = { 5 | name: commandNames.ADD_OBJECT, 6 | 7 | /** 8 | * Add an object 9 | * @param {Graphics} graphics - Graphics instance 10 | * @param {Object} object - Fabric object 11 | * @returns {Promise} 12 | */ 13 | execute(graphics, object) { 14 | return new Promise((resolve, reject) => { 15 | if (!graphics.contains(object)) { 16 | graphics.add(object); 17 | resolve(object); 18 | } else { 19 | reject(rejectMessages.addedObject); 20 | } 21 | }); 22 | }, 23 | 24 | /** 25 | * @param {Graphics} graphics - Graphics instance 26 | * @param {Object} object - Fabric object 27 | * @returns {Promise} 28 | */ 29 | undo(graphics, object) { 30 | return new Promise((resolve, reject) => { 31 | if (graphics.contains(object)) { 32 | graphics.remove(object); 33 | resolve(object); 34 | } else { 35 | reject(rejectMessages.noObject); 36 | } 37 | }); 38 | }, 39 | }; 40 | 41 | commandFactory.register(command); 42 | 43 | export default command; 44 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/changeSelection.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { commandNames } from '@/consts'; 3 | import { getCachedUndoDataForDimension } from '@/helper/selectionModifyHelper'; 4 | 5 | const command = { 6 | name: commandNames.CHANGE_SELECTION, 7 | 8 | execute(graphics, props) { 9 | if (this.isRedo) { 10 | props.forEach((prop) => { 11 | graphics.setObjectProperties(prop.id, prop); 12 | }); 13 | } else { 14 | this.undoData = getCachedUndoDataForDimension(); 15 | } 16 | 17 | return Promise.resolve(); 18 | }, 19 | 20 | undo(graphics) { 21 | this.undoData.forEach((datum) => { 22 | graphics.setObjectProperties(datum.id, datum); 23 | }); 24 | 25 | return Promise.resolve(); 26 | }, 27 | }; 28 | 29 | commandFactory.register(command); 30 | 31 | export default command; 32 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/changeText.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { componentNames, rejectMessages, commandNames } from '@/consts'; 3 | 4 | const { TEXT } = componentNames; 5 | 6 | const command = { 7 | name: commandNames.CHANGE_TEXT, 8 | 9 | /** 10 | * Change a text 11 | * @param {Graphics} graphics - Graphics instance 12 | * @param {number} id - object id 13 | * @param {string} text - Changing text 14 | * @returns {Promise} 15 | */ 16 | execute(graphics, id, text) { 17 | const textComp = graphics.getComponent(TEXT); 18 | const targetObj = graphics.getObject(id); 19 | 20 | if (!targetObj) { 21 | return Promise.reject(rejectMessages.noObject); 22 | } 23 | 24 | this.undoData.object = targetObj; 25 | this.undoData.text = textComp.getText(targetObj); 26 | 27 | return textComp.change(targetObj, text); 28 | }, 29 | 30 | /** 31 | * @param {Graphics} graphics - Graphics instance 32 | * @returns {Promise} 33 | */ 34 | undo(graphics) { 35 | const textComp = graphics.getComponent(TEXT); 36 | const { object: textObj, text } = this.undoData; 37 | 38 | return textComp.change(textObj, text); 39 | }, 40 | }; 41 | 42 | commandFactory.register(command); 43 | 44 | export default command; 45 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/clearObjects.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { commandNames } from '@/consts'; 3 | 4 | const command = { 5 | name: commandNames.CLEAR_OBJECTS, 6 | 7 | /** 8 | * Clear all objects without background (main) image 9 | * @param {Graphics} graphics - Graphics instance 10 | * @returns {Promise} 11 | */ 12 | execute(graphics) { 13 | return new Promise((resolve) => { 14 | this.undoData.objects = graphics.removeAll(); 15 | resolve(); 16 | }); 17 | }, 18 | 19 | /** 20 | * @param {Graphics} graphics - Graphics instance 21 | * @returns {Promise} 22 | * @ignore 23 | */ 24 | undo(graphics) { 25 | graphics.add(this.undoData.objects); 26 | 27 | return Promise.resolve(); 28 | }, 29 | }; 30 | 31 | commandFactory.register(command); 32 | 33 | export default command; 34 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/flip.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { componentNames, commandNames } from '@/consts'; 3 | 4 | const { FLIP } = componentNames; 5 | 6 | const command = { 7 | name: commandNames.FLIP_IMAGE, 8 | 9 | /** 10 | * flip an image 11 | * @param {Graphics} graphics - Graphics instance 12 | * @param {string} type - 'flipX' or 'flipY' or 'reset' 13 | * @returns {Promise} 14 | */ 15 | execute(graphics, type) { 16 | const flipComp = graphics.getComponent(FLIP); 17 | 18 | this.undoData.setting = flipComp.getCurrentSetting(); 19 | 20 | return flipComp[type](); 21 | }, 22 | 23 | /** 24 | * @param {Graphics} graphics - Graphics instance 25 | * @returns {Promise} 26 | */ 27 | undo(graphics) { 28 | const flipComp = graphics.getComponent(FLIP); 29 | 30 | return flipComp.set(this.undoData.setting); 31 | }, 32 | }; 33 | 34 | commandFactory.register(command); 35 | 36 | export default command; 37 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/removeFilter.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { componentNames, commandNames } from '@/consts'; 3 | 4 | const { FILTER } = componentNames; 5 | 6 | const command = { 7 | name: commandNames.REMOVE_FILTER, 8 | 9 | /** 10 | * Remove a filter from an image 11 | * @param {Graphics} graphics - Graphics instance 12 | * @param {string} type - Filter type 13 | * @returns {Promise} 14 | */ 15 | execute(graphics, type) { 16 | const filterComp = graphics.getComponent(FILTER); 17 | 18 | this.undoData.options = filterComp.getOptions(type); 19 | 20 | return filterComp.remove(type); 21 | }, 22 | 23 | /** 24 | * @param {Graphics} graphics - Graphics instance 25 | * @param {string} type - Filter type 26 | * @returns {Promise} 27 | */ 28 | undo(graphics, type) { 29 | const filterComp = graphics.getComponent(FILTER); 30 | const { options } = this.undoData; 31 | 32 | return filterComp.add(type, options); 33 | }, 34 | }; 35 | 36 | commandFactory.register(command); 37 | 38 | export default command; 39 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/removeObject.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { commandNames, rejectMessages } from '@/consts'; 3 | 4 | const command = { 5 | name: commandNames.REMOVE_OBJECT, 6 | 7 | /** 8 | * Remove an object 9 | * @param {Graphics} graphics - Graphics instance 10 | * @param {number} id - object id 11 | * @returns {Promise} 12 | */ 13 | execute(graphics, id) { 14 | return new Promise((resolve, reject) => { 15 | this.undoData.objects = graphics.removeObjectById(id); 16 | if (this.undoData.objects.length) { 17 | resolve(); 18 | } else { 19 | reject(rejectMessages.noObject); 20 | } 21 | }); 22 | }, 23 | 24 | /** 25 | * @param {Graphics} graphics - Graphics instance 26 | * @returns {Promise} 27 | */ 28 | undo(graphics) { 29 | graphics.add(this.undoData.objects); 30 | 31 | return Promise.resolve(); 32 | }, 33 | }; 34 | 35 | commandFactory.register(command); 36 | 37 | export default command; 38 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/resize.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { componentNames, commandNames } from '@/consts'; 3 | 4 | const { RESIZE } = componentNames; 5 | 6 | const command = { 7 | name: commandNames.RESIZE_IMAGE, 8 | 9 | /** 10 | * Resize an image 11 | * @param {Graphics} graphics - Graphics instance 12 | * @param {object} dimensions - Image Dimensions 13 | * @returns {Promise} 14 | */ 15 | execute(graphics, dimensions) { 16 | const resizeComp = graphics.getComponent(RESIZE); 17 | 18 | let originalDimensions = resizeComp.getOriginalDimensions(); 19 | if (!originalDimensions) { 20 | originalDimensions = resizeComp.getCurrentDimensions(); 21 | } 22 | 23 | this.undoData.dimensions = originalDimensions; 24 | 25 | return resizeComp.resize(dimensions); 26 | }, 27 | 28 | /** 29 | * @param {Graphics} graphics - Graphics instance 30 | * @returns {Promise} 31 | */ 32 | undo(graphics) { 33 | const resizeComp = graphics.getComponent(RESIZE); 34 | 35 | return resizeComp.resize(this.undoData.dimensions); 36 | }, 37 | }; 38 | 39 | commandFactory.register(command); 40 | 41 | export default command; 42 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/command/resizeCanvasDimension.js: -------------------------------------------------------------------------------- 1 | import commandFactory from '@/factory/command'; 2 | import { commandNames } from '@/consts'; 3 | 4 | const command = { 5 | name: commandNames.RESIZE_CANVAS_DIMENSION, 6 | 7 | /** 8 | * resize the canvas with given dimension 9 | * @param {Graphics} graphics - Graphics instance 10 | * @param {{width: number, height: number}} dimension - Max width & height 11 | * @returns {Promise} 12 | */ 13 | execute(graphics, dimension) { 14 | return new Promise((resolve) => { 15 | this.undoData.size = { 16 | width: graphics.cssMaxWidth, 17 | height: graphics.cssMaxHeight, 18 | }; 19 | 20 | graphics.setCssMaxDimension(dimension); 21 | graphics.adjustCanvasDimension(); 22 | resolve(); 23 | }); 24 | }, 25 | 26 | /** 27 | * @param {Graphics} graphics - Graphics instance 28 | * @returns {Promise} 29 | */ 30 | undo(graphics) { 31 | graphics.setCssMaxDimension(this.undoData.size); 32 | graphics.adjustCanvasDimension(); 33 | 34 | return Promise.resolve(); 35 | }, 36 | }; 37 | 38 | commandFactory.register(command); 39 | 40 | export default command; 41 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/cropper.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * CropperDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class CropperDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.CROPPER); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @override 18 | */ 19 | start(graphics) { 20 | const cropper = graphics.getComponent(components.CROPPER); 21 | cropper.start(); 22 | } 23 | 24 | /** 25 | * stop this drawing mode 26 | * @param {Graphics} graphics - Graphics instance 27 | * @override 28 | */ 29 | end(graphics) { 30 | const cropper = graphics.getComponent(components.CROPPER); 31 | cropper.end(); 32 | } 33 | } 34 | 35 | export default CropperDrawingMode; 36 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/freeDrawing.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * FreeDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class FreeDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.FREE_DRAWING); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @param {{width: ?number, color: ?string}} [options] - Brush width & color 18 | * @override 19 | */ 20 | start(graphics, options) { 21 | const freeDrawing = graphics.getComponent(components.FREE_DRAWING); 22 | freeDrawing.start(options); 23 | } 24 | 25 | /** 26 | * stop this drawing mode 27 | * @param {Graphics} graphics - Graphics instance 28 | * @override 29 | */ 30 | end(graphics) { 31 | const freeDrawing = graphics.getComponent(components.FREE_DRAWING); 32 | freeDrawing.end(); 33 | } 34 | } 35 | 36 | export default FreeDrawingMode; 37 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/icon.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * IconDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class IconDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.ICON); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @override 18 | */ 19 | start(graphics) { 20 | const icon = graphics.getComponent(components.ICON); 21 | icon.start(); 22 | } 23 | 24 | /** 25 | * stop this drawing mode 26 | * @param {Graphics} graphics - Graphics instance 27 | * @override 28 | */ 29 | end(graphics) { 30 | const icon = graphics.getComponent(components.ICON); 31 | icon.end(); 32 | } 33 | } 34 | 35 | export default IconDrawingMode; 36 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/lineDrawing.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * LineDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class LineDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.LINE_DRAWING); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @param {{width: ?number, color: ?string}} [options] - Brush width & color 18 | * @override 19 | */ 20 | start(graphics, options) { 21 | const lineDrawing = graphics.getComponent(components.LINE); 22 | lineDrawing.start(options); 23 | } 24 | 25 | /** 26 | * stop this drawing mode 27 | * @param {Graphics} graphics - Graphics instance 28 | * @override 29 | */ 30 | end(graphics) { 31 | const lineDrawing = graphics.getComponent(components.LINE); 32 | lineDrawing.end(); 33 | } 34 | } 35 | 36 | export default LineDrawingMode; 37 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/resize.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * ResizeDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class ResizeDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.RESIZE); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @override 18 | */ 19 | start(graphics) { 20 | const resize = graphics.getComponent(components.RESIZE); 21 | resize.start(); 22 | } 23 | 24 | /** 25 | * stop this drawing mode 26 | * @param {Graphics} graphics - Graphics instance 27 | * @override 28 | */ 29 | end(graphics) { 30 | const resize = graphics.getComponent(components.RESIZE); 31 | resize.end(); 32 | } 33 | } 34 | 35 | export default ResizeDrawingMode; 36 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/shape.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * ShapeDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class ShapeDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.SHAPE); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @override 18 | */ 19 | start(graphics) { 20 | const shape = graphics.getComponent(components.SHAPE); 21 | shape.start(); 22 | } 23 | 24 | /** 25 | * stop this drawing mode 26 | * @param {Graphics} graphics - Graphics instance 27 | * @override 28 | */ 29 | end(graphics) { 30 | const shape = graphics.getComponent(components.SHAPE); 31 | shape.end(); 32 | } 33 | } 34 | 35 | export default ShapeDrawingMode; 36 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/text.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * TextDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class TextDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.TEXT); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @override 18 | */ 19 | start(graphics) { 20 | const text = graphics.getComponent(components.TEXT); 21 | text.start(); 22 | } 23 | 24 | /** 25 | * stop this drawing mode 26 | * @param {Graphics} graphics - Graphics instance 27 | * @override 28 | */ 29 | end(graphics) { 30 | const text = graphics.getComponent(components.TEXT); 31 | text.end(); 32 | } 33 | } 34 | 35 | export default TextDrawingMode; 36 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/drawingMode/zoom.js: -------------------------------------------------------------------------------- 1 | import DrawingMode from '@/interface/drawingMode'; 2 | import { drawingModes, componentNames as components } from '@/consts'; 3 | 4 | /** 5 | * ZoomDrawingMode class 6 | * @class 7 | * @ignore 8 | */ 9 | class ZoomDrawingMode extends DrawingMode { 10 | constructor() { 11 | super(drawingModes.ZOOM); 12 | } 13 | 14 | /** 15 | * start this drawing mode 16 | * @param {Graphics} graphics - Graphics instance 17 | * @override 18 | */ 19 | start(graphics) { 20 | const zoom = graphics.getComponent(components.ZOOM); 21 | 22 | zoom.start(); 23 | } 24 | 25 | /** 26 | * stop this drawing mode 27 | * @param {Graphics} graphics - Graphics instance 28 | * @override 29 | */ 30 | end(graphics) { 31 | const zoom = graphics.getComponent(components.ZOOM); 32 | 33 | zoom.end(); 34 | } 35 | } 36 | 37 | export default ZoomDrawingMode; 38 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/extension/blur.js: -------------------------------------------------------------------------------- 1 | import { fabric } from 'fabric'; 2 | 3 | /** 4 | * Blur object 5 | * @class Blur 6 | * @extends {fabric.Image.filters.Convolute} 7 | * @ignore 8 | */ 9 | const Blur = fabric.util.createClass( 10 | fabric.Image.filters.Convolute, 11 | /** @lends Convolute.prototype */ { 12 | /** 13 | * Filter type 14 | * @param {String} type 15 | * @default 16 | */ 17 | type: 'Blur', 18 | 19 | /** 20 | * constructor 21 | * @override 22 | */ 23 | initialize() { 24 | this.matrix = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9]; 25 | }, 26 | } 27 | ); 28 | 29 | export default Blur; 30 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/extension/emboss.js: -------------------------------------------------------------------------------- 1 | import { fabric } from 'fabric'; 2 | 3 | /** 4 | * Emboss object 5 | * @class Emboss 6 | * @extends {fabric.Image.filters.Convolute} 7 | * @ignore 8 | */ 9 | const Emboss = fabric.util.createClass( 10 | fabric.Image.filters.Convolute, 11 | /** @lends Convolute.prototype */ { 12 | /** 13 | * Filter type 14 | * @param {String} type 15 | * @default 16 | */ 17 | type: 'Emboss', 18 | 19 | /** 20 | * constructor 21 | * @override 22 | */ 23 | initialize() { 24 | this.matrix = [1, 1, 1, 1, 0.7, -1, -1, -1, -1]; 25 | }, 26 | } 27 | ); 28 | 29 | export default Emboss; 30 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/extension/sharpen.js: -------------------------------------------------------------------------------- 1 | import { fabric } from 'fabric'; 2 | 3 | /** 4 | * Sharpen object 5 | * @class Sharpen 6 | * @extends {fabric.Image.filters.Convolute} 7 | * @ignore 8 | */ 9 | const Sharpen = fabric.util.createClass( 10 | fabric.Image.filters.Convolute, 11 | /** @lends Convolute.prototype */ { 12 | /** 13 | * Filter type 14 | * @param {String} type 15 | * @default 16 | */ 17 | type: 'Sharpen', 18 | 19 | /** 20 | * constructor 21 | * @override 22 | */ 23 | initialize() { 24 | this.matrix = [0, -1, 0, -1, 5, -1, 0, -1, 0]; 25 | }, 26 | } 27 | ); 28 | 29 | export default Sharpen; 30 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/factory/command.js: -------------------------------------------------------------------------------- 1 | import Command from '@/interface/command'; 2 | 3 | const commands = {}; 4 | 5 | /** 6 | * Create a command 7 | * @param {string} name - Command name 8 | * @param {...*} args - Arguments for creating command 9 | * @returns {Command} 10 | * @ignore 11 | */ 12 | function create(name, ...args) { 13 | const actions = commands[name]; 14 | if (actions) { 15 | return new Command(actions, args); 16 | } 17 | 18 | return null; 19 | } 20 | 21 | /** 22 | * Register a command with name as a key 23 | * @param {Object} command - {name:{string}, execute: {function}, undo: {function}} 24 | * @param {string} command.name - command name 25 | * @param {function} command.execute - executable function 26 | * @param {function} command.undo - undo function 27 | * @ignore 28 | */ 29 | function register(command) { 30 | commands[command.name] = command; 31 | } 32 | 33 | export default { 34 | create, 35 | register, 36 | }; 37 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/factory/errorMessage.js: -------------------------------------------------------------------------------- 1 | import extend from 'tui-code-snippet/object/extend'; 2 | import { keyMirror } from '@/util'; 3 | 4 | const types = keyMirror('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME'); 5 | const messages = { 6 | UN_IMPLEMENTATION: 'Should implement a method: ', 7 | NO_COMPONENT_NAME: 'Should set a component name', 8 | }; 9 | const map = { 10 | UN_IMPLEMENTATION(methodName) { 11 | return messages.UN_IMPLEMENTATION + methodName; 12 | }, 13 | NO_COMPONENT_NAME() { 14 | return messages.NO_COMPONENT_NAME; 15 | }, 16 | }; 17 | 18 | export default { 19 | types: extend({}, types), 20 | 21 | create(type, ...args) { 22 | type = type.toLowerCase(); 23 | const func = map[type]; 24 | 25 | return func(...args); 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/interface/drawingMode.js: -------------------------------------------------------------------------------- 1 | import errorMessage from '@/factory/errorMessage'; 2 | 3 | const createMessage = errorMessage.create; 4 | const errorTypes = errorMessage.types; 5 | 6 | /** 7 | * DrawingMode interface 8 | * @class 9 | * @param {string} name - drawing mode name 10 | * @ignore 11 | */ 12 | class DrawingMode { 13 | constructor(name) { 14 | /** 15 | * the name of drawing mode 16 | * @type {string} 17 | */ 18 | this.name = name; 19 | } 20 | 21 | /** 22 | * Get this drawing mode name; 23 | * @returns {string} drawing mode name 24 | */ 25 | getName() { 26 | return this.name; 27 | } 28 | 29 | /** 30 | * start this drawing mode 31 | * @param {Object} options - drawing mode options 32 | * @abstract 33 | */ 34 | start() { 35 | throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'start')); 36 | } 37 | 38 | /** 39 | * stop this drawing mode 40 | * @abstract 41 | */ 42 | end() { 43 | throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'stop')); 44 | } 45 | } 46 | 47 | export default DrawingMode; 48 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/ui/locale/locale.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Translate messages 3 | */ 4 | class Locale { 5 | constructor(locale) { 6 | this._locale = locale; 7 | } 8 | 9 | /** 10 | * localize message 11 | * @param {string} message - message who will be localized 12 | * @returns {string} 13 | */ 14 | localize(message) { 15 | return this._locale[message] || message; 16 | } 17 | } 18 | 19 | export default Locale; 20 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/ui/template/controls.js: -------------------------------------------------------------------------------- 1 | import { getHelpMenuBarPosition } from '@/util'; 2 | 3 | export default ({ locale, biImage, loadButtonStyle, downloadButtonStyle, menuBarPosition }) => ` 4 |
    5 |
    6 | 9 |
      10 | 11 |
      12 |
      13 | ${locale.localize('Load')} 14 | 15 |
      16 | 19 |
      20 |
      21 | `; 22 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/ui/template/submenu/history.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {Object} submenuInfo - submenu info for make template 3 | * @param {Locale} locale - Translate text 4 | * @param {Function} makeSvgIcon - svg icon generator 5 | * @param {string} name - history name 6 | * @param {string} detail - history detail information 7 | * @returns {string} 8 | */ 9 | export default ({ locale, makeSvgIcon, name, detail }) => ` 10 |
      11 |
      12 | ${makeSvgIcon(['normal', 'active'], `history-${name.toLowerCase()}`, true)} 13 |
      14 | 15 | ${locale.localize(name)} 16 | ${detail ? `(${locale.localize(detail)})` : ''} 17 | 18 |
      19 | ${makeSvgIcon(['normal'], 'history-check', true)} 20 |
      21 |
      22 | `; 23 | -------------------------------------------------------------------------------- /apps/image-editor/src/js/ui/template/submenu/mask.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param {Object} submenuInfo - submenu info for make template 3 | * @param {Locale} locale - Translate text 4 | * @param {Function} makeSvgIcon - svg icon generator 5 | * @returns {string} 6 | */ 7 | export default ({ locale, makeSvgIcon }) => ` 8 |
        9 |
      • 10 |
        11 |
        12 | 13 | ${makeSvgIcon(['normal', 'active'], 'mask-load', true)} 14 |
        15 | 16 |
        17 |
        • 18 |
      • 19 |
        20 |
        • 21 |
      • 22 |
        23 | ${makeSvgIcon(['normal', 'active'], 'apply')} 24 | 27 |
        28 |
        • 29 |
      30 | `; 31 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-apply.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-color-transparent-w.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-delete-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-draw-free.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-draw-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-flip-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-flip-x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-flip-y.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-arrow-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-arrow-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-bubble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-polygon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-star-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-mask-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-rotate-clockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-rotate-counterclockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-shape-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-shape-rectangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-shape-triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-text-align-center.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-text-align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-text-align-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-text-bold.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-text-italic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-text-underline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-zoom-zoom-in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-a/ic-zoom-zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-apply.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-delete-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-draw-free.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-draw-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-flip-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-flip-x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-flip-y.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-arrow-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-arrow-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-bubble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-polygon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-star-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-mask-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-rotate-clockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-rotate-counterclockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-shape-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-shape-rectangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-shape-triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-text-align-center.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-text-align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-text-align-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-text-bold.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-text-italic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-text-underline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-zoom-zoom-in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-b/ic-zoom-zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-apply.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-delete-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-draw-free.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-draw-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-flip-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-flip-x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-flip-y.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-arrow-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-arrow-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-bubble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-polygon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-star-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-mask-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-rotate-clockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-rotate-counterclockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-shape-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-shape-rectangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-shape-triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-text-align-center.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-text-align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-text-align-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-text-bold.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-text-italic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-text-underline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-zoom-zoom-in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-c/ic-zoom-zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-apply.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-delete-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-draw-free.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-draw-line.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-flip-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-flip-x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-flip-y.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-draw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-flip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-arrow-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-arrow-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-bubble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-polygon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-star-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon-star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-mask-load.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-rotate-clockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-rotate-counterclockwise.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-shape-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-shape-rectangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-shape-triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-text-align-center.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-text-align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-text-align-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-text-bold.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-text-italic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-text-underline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-zoom-zoom-in.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /apps/image-editor/src/svg/icon-d/ic-zoom-zoom-out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /apps/image-editor/tests/__snapshots__/theme.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Theme _makeCssText() should return the cssText of the expected value for the object 1`] = `"background-color: #fff;background-image: url(./img/bg.png);border: 1px solid #ddd;color: #222;font-family: NotoSans, sans-serif;font-size: 12px"`; 4 | 5 | exports[`Theme _makeSvgItem() should create a svg path with the prefix when set the icon file 1`] = `""`; 6 | 7 | exports[`Theme _makeSvgItem() should create path prefix and use-default class when using the default icon 1`] = `""`; 8 | 9 | exports[`Theme getStyle() should return cssText if all members are objects 1`] = ` 10 | Object { 11 | "active": "color: #000;font-weight: normal", 12 | "normal": "color: #858585;font-weight: normal", 13 | } 14 | `; 15 | 16 | exports[`Theme getStyle() should return cssText in normal types 1`] = `"background-color: #fdba3b;border: 1px solid #fdba3b;color: #fff;font-family: NotoSans, sans-serif;font-size: 12px"`; 17 | -------------------------------------------------------------------------------- /apps/image-editor/tests/filter.spec.js: -------------------------------------------------------------------------------- 1 | import { fabric } from 'fabric'; 2 | import Graphics from '@/graphics'; 3 | import Filter from '@/component/filter'; 4 | 5 | import img from 'fixtures/sampleImage.jpg'; 6 | 7 | describe('Filter', () => { 8 | const graphics = new Graphics(document.createElement('canvas')); 9 | const filter = new Filter(graphics); 10 | 11 | beforeEach(async () => { 12 | const image = new fabric.Image(img); 13 | jest.spyOn(image, 'applyFilters').mockReturnValue({}); 14 | graphics.setCanvasImage('mockImage', image); 15 | 16 | await filter.add('colorFilter', {}); 17 | }); 18 | 19 | it('should add filter', () => { 20 | expect(filter.hasFilter('invert')).toBe(false); 21 | expect(filter.hasFilter('colorFilter')).toBe(true); 22 | }); 23 | 24 | it('should remove added filter', async () => { 25 | await filter.remove('colorFilter'); 26 | 27 | expect(filter.hasFilter('colorFilter')).toBe(false); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /apps/image-editor/tests/fixtures/TOAST UI Component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/tests/fixtures/TOAST UI Component.png -------------------------------------------------------------------------------- /apps/image-editor/tests/fixtures/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/tests/fixtures/mask.png -------------------------------------------------------------------------------- /apps/image-editor/tests/fixtures/sampleImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/image-editor/tests/fixtures/sampleImage.jpg -------------------------------------------------------------------------------- /apps/image-editor/tests/index.js: -------------------------------------------------------------------------------- 1 | import { fabric } from 'fabric'; 2 | 3 | fabric.Object.prototype.objectCaching = false; 4 | -------------------------------------------------------------------------------- /apps/image-editor/tests/types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "noEmit": true, 4 | "noImplicitAny": false 5 | }, 6 | "include": [ 7 | "../../index.d.ts", "./type-tests.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /apps/image-editor/tests/uiRange.spec.js: -------------------------------------------------------------------------------- 1 | import Range from '@/ui/tools/range'; 2 | import { defaultRotateRangeValues } from '@/consts'; 3 | 4 | describe('Range', () => { 5 | let range, input, slider; 6 | 7 | beforeEach(() => { 8 | input = document.createElement('input'); 9 | slider = document.createElement('div'); 10 | range = new Range({ slider, input }, defaultRotateRangeValues); 11 | }); 12 | 13 | it('should be incremented by one when keyCode 38 is found in the event handler with changeInputWithArrow', () => { 14 | const ev = { target: input, keyCode: 38 }; 15 | input.value = '3'; 16 | 17 | range.eventHandler.changeInputWithArrow(ev); 18 | 19 | expect(range.value).toBe(4); 20 | }); 21 | 22 | it('should be decremented by one when keyCode 40 is found in the event handler with changeInputWithArrow', () => { 23 | const ev = { target: input, keyCode: 40 }; 24 | input.value = '3'; 25 | 26 | range.eventHandler.changeInputWithArrow(ev); 27 | 28 | expect(range.value).toBe(2); 29 | }); 30 | 31 | it('should filter out any invalid input values', () => { 32 | const ev = { target: input, keyCode: 83, preventDefault: jest.fn() }; 33 | input.value = '-3!!6s0s'; 34 | 35 | range.eventHandler.changeInput(ev); 36 | 37 | expect(range.value).toBe(0); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /apps/image-editor/tests/zoom.spec.js: -------------------------------------------------------------------------------- 1 | import { fabric } from 'fabric'; 2 | import ImageEditor from '@/imageEditor'; 3 | 4 | import '@/command/loadImage'; 5 | 6 | import img from 'fixtures/sampleImage.jpg'; 7 | 8 | describe('Zoom', () => { 9 | let imageEditor, x, y, zoomLevel; 10 | 11 | beforeEach(async () => { 12 | imageEditor = new ImageEditor(document.createElement('div'), { 13 | cssMaxWidth: 700, 14 | cssMaxHeight: 500, 15 | }); 16 | const image = new fabric.Image(img); 17 | await imageEditor.loadImageFromURL(image, 'sampleImage'); 18 | x = 0; 19 | y = 0; 20 | zoomLevel = 1.0; 21 | }); 22 | 23 | afterEach(() => { 24 | imageEditor.destroy(); 25 | }); 26 | 27 | it('should change zoom of image', () => { 28 | zoomLevel += 1; 29 | imageEditor.zoom({ x, y, zoomLevel }); 30 | 31 | const canvas = imageEditor._graphics.getCanvas(); 32 | 33 | expect(canvas.getZoom()).toBe(zoomLevel); 34 | }); 35 | 36 | it('should reset zoom of image', () => { 37 | zoomLevel += 1; 38 | imageEditor.zoom({ x, y, zoomLevel }); 39 | imageEditor.resetZoom(); 40 | 41 | const canvas = imageEditor._graphics.getCanvas(); 42 | 43 | expect(canvas.getZoom()).toBe(1.0); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /apps/image-editor/tsBannerGenerator.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | var rootPkg = require('../../package.json'); 5 | var pkg = require('./package.json'); 6 | 7 | var tsVersion = /[0-9.]+/.exec(rootPkg.devDependencies.typescript)[0]; 8 | var declareFilePath = path.join(__dirname, 'index.d.ts'); 9 | var declareRows = []; 10 | var TS_BANNER = [ 11 | '// Type definitions for TOAST UI Image Editor v' + pkg.version, 12 | '// TypeScript Version: ' + tsVersion, 13 | ].join('\n'); 14 | 15 | fs.readFile(declareFilePath, 'utf8', function (error, data) { 16 | if (error) { 17 | throw error; 18 | } 19 | 20 | declareRows = data.toString().split('\n'); 21 | declareRows.splice(0, 2, TS_BANNER); 22 | 23 | fs.writeFile(declareFilePath, declareRows.join('\n'), 'utf8', function (error) { 24 | if (error) { 25 | throw error; 26 | } 27 | 28 | console.log('Completed Write Banner for Typescript!'); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /apps/image-editor/tuidoc.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "header": { 3 | "logo": { 4 | "src": "https://uicdn.toast.com/toastui/img/tui-image-editor-bi-white.png" 5 | }, 6 | "title": { 7 | "text": "repo", 8 | "linkUrl": "https://github.com/nhn/tui.image-editor" 9 | } 10 | }, 11 | "footer": [ 12 | { 13 | "title": "NHN Cloud", 14 | "linkUrl": "https://github.com/nhn" 15 | }, 16 | { 17 | "title": "FE Development Lab", 18 | "linkUrl": "https://ui.toast.com/" 19 | } 20 | ], 21 | "main": { 22 | "filePath": "README.md" 23 | }, 24 | "api": { 25 | "filePath": "src/js/*.js", 26 | "fileLink": true, 27 | "permalink": false 28 | }, 29 | "examples": { 30 | "filePath": "examples", 31 | "titles": { 32 | "example01-includeUi": "1. Include ui", 33 | "example02-useApiDirect": "2. Use api direct (basic)", 34 | "example03-mobile": "3. Mobile" 35 | }, 36 | "globalErrorLogVariable": "errorLogs" 37 | }, 38 | "pathPrefix": "tui.image-editor" 39 | } 40 | -------------------------------------------------------------------------------- /apps/image-editor/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | const { merge } = require('webpack-merge'); 3 | 4 | const commonWebpackConfig = require('./webpack.common.config'); 5 | const prodWebpackConfig = require('./webpack.prod.config'); 6 | const devWebpackConfig = require('./webpack.dev.config'); 7 | 8 | module.exports = (env) => { 9 | const isProduction = env.WEBPACK_BUILD; 10 | 11 | const commonConfig = commonWebpackConfig(env); 12 | 13 | return merge(commonConfig, isProduction ? prodWebpackConfig(env) : devWebpackConfig()); 14 | }; 15 | -------------------------------------------------------------------------------- /apps/image-editor/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | module.exports = () => ({ 3 | mode: 'development', 4 | devServer: { 5 | compress: true, 6 | open: true, 7 | hot: true, 8 | host: '0.0.0.0', 9 | static: './examples', 10 | allowedHosts: 'all', 11 | }, 12 | devtool: 'eval-source-map', 13 | }); 14 | -------------------------------------------------------------------------------- /apps/image-editor/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | const { version, license } = require('./package.json'); 3 | 4 | const webpack = require('webpack'); 5 | const TerserPlugin = require('terser-webpack-plugin'); 6 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 7 | 8 | module.exports = ({ minify }) => { 9 | const productionConfig = { 10 | mode: 'production', 11 | plugins: [ 12 | new webpack.BannerPlugin({ 13 | banner: ['TOAST UI ImageEditor', `@version ${version}`, `@license ${license}`].join('\n'), 14 | }), 15 | ], 16 | optimization: { 17 | minimize: false, 18 | }, 19 | }; 20 | 21 | if (minify) { 22 | productionConfig.optimization = { 23 | minimize: true, 24 | minimizer: [new TerserPlugin({ extractComments: false }), new CssMinimizerPlugin()], 25 | }; 26 | } 27 | 28 | return productionConfig; 29 | }; 30 | -------------------------------------------------------------------------------- /apps/react-image-editor/.babelrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../babel.config.json", 3 | "presets": ["@babel/preset-react"] 4 | } 5 | -------------------------------------------------------------------------------- /apps/react-image-editor/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended'], 3 | plugins: ['react', 'prettier'], 4 | parser: '@babel/eslint-parser', 5 | parserOptions: { 6 | babelOptions: { 7 | presets: ['@babel/preset-react'], 8 | }, 9 | ecmaVersion: 7, 10 | sourceType: 'module', 11 | ecmaFeatures: { 12 | jsx: true, 13 | }, 14 | }, 15 | ignorePatterns: ['node_modules/*', 'dist'], 16 | rules: { 17 | 'react/prop-types': 0, 18 | }, 19 | settings: { 20 | react: { 21 | version: 'detect', 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /apps/react-image-editor/.storybook/img/sampleImage2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/react-image-editor/.storybook/img/sampleImage2.png -------------------------------------------------------------------------------- /apps/react-image-editor/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | core: { 3 | builder: 'webpack5', 4 | }, 5 | stories: ['../stories/*.stories.js'], 6 | }; 7 | -------------------------------------------------------------------------------- /apps/react-image-editor/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import 'tui-image-editor/dist/tui-image-editor.css'; 2 | import 'tui-color-picker/dist/tui-color-picker.css'; 3 | -------------------------------------------------------------------------------- /apps/react-image-editor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@toast-ui/react-image-editor", 3 | "version": "3.15.3", 4 | "description": "TOAST UI Image-Editor for React", 5 | "main": "dist/toastui-react-image-editor.js", 6 | "files": [ 7 | "dist", 8 | "src" 9 | ], 10 | "scripts": { 11 | "build": "webpack", 12 | "storybook": "start-storybook -s ./node_modules/tui-image-editor/dist/svg,.storybook -p 6006", 13 | "build-storybook": "build-storybook" 14 | }, 15 | "homepage": "https://github.com/nhn/tui.image-editor", 16 | "bugs": "https://github.com/nhn/tui.image-editor/issues", 17 | "author": "NHN Cloud. FE Development Lab ", 18 | "repository": "https://github.com/nhn/tui.image-editor.git", 19 | "license": "MIT", 20 | "browserslist": [ 21 | "last 2 versions", 22 | "not ie <= 9" 23 | ], 24 | "peerDependencies": { 25 | "react": "^17.0.2" 26 | }, 27 | "devDependencies": { 28 | "react": "^17.0.2", 29 | "react-dom": "^17.0.2" 30 | }, 31 | "dependencies": { 32 | "fabric": "^4.2.0", 33 | "tui-image-editor": "^3.15.2" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /apps/react-image-editor/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | const path = require('path'); 3 | const { version, author, license } = require('./package.json'); 4 | 5 | const webpack = require('webpack'); 6 | 7 | module.exports = () => ({ 8 | mode: 'production', 9 | entry: './src/index.js', 10 | output: { 11 | filename: 'toastui-react-image-editor.js', 12 | path: path.resolve(__dirname, 'dist'), 13 | library: { type: 'commonjs2' }, 14 | }, 15 | externals: { 16 | 'tui-image-editor': { 17 | commonjs: 'tui-image-editor', 18 | commonjs2: 'tui-image-editor', 19 | }, 20 | react: { 21 | commonjs: 'react', 22 | commonjs2: 'react', 23 | }, 24 | }, 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.js$/, 29 | include: path.resolve(__dirname, 'src'), 30 | use: { 31 | loader: 'babel-loader', 32 | }, 33 | }, 34 | ], 35 | }, 36 | plugins: [ 37 | new webpack.BannerPlugin({ 38 | banner: [ 39 | 'TOAST UI ImageEditor : React Wrapper', 40 | `@version ${version}`, 41 | `@author ${author}`, 42 | `@license ${license}`, 43 | ].join('\n'), 44 | }), 45 | ], 46 | }); 47 | -------------------------------------------------------------------------------- /apps/vue-image-editor/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['tui/es6', 'plugin:vue/recommended', 'plugin:prettier/recommended'], 3 | plugins: ['vue', 'prettier'], 4 | parser: 'vue-eslint-parser', 5 | parserOptions: { 6 | parser: '@babel/eslint-parser', 7 | ecmaVersion: 7, 8 | sourceType: 'module', 9 | }, 10 | ignorePatterns: ['node_modules/*', 'dist'], 11 | }; 12 | -------------------------------------------------------------------------------- /apps/vue-image-editor/.storybook/img/sampleImage2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nhn/tui.image-editor/9ee993e21135a0bdb69d1400b19d89d7e78f7378/apps/vue-image-editor/.storybook/img/sampleImage2.png -------------------------------------------------------------------------------- /apps/vue-image-editor/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | core: { 3 | builder: 'webpack5', 4 | }, 5 | stories: ['../stories/*.stories.js'], 6 | }; 7 | -------------------------------------------------------------------------------- /apps/vue-image-editor/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import 'tui-image-editor/dist/tui-image-editor.css'; 2 | import 'tui-color-picker/dist/tui-color-picker.css'; 3 | -------------------------------------------------------------------------------- /apps/vue-image-editor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@toast-ui/vue-image-editor", 3 | "version": "3.15.3", 4 | "description": "TOAST UI Image-Editor for Vue", 5 | "main": "dist/toastui-vue-image-editor.js", 6 | "files": [ 7 | "dist", 8 | "src" 9 | ], 10 | "scripts": { 11 | "build": "webpack", 12 | "storybook": "start-storybook -s .storybook -p 6006" 13 | }, 14 | "homepage": "https://github.com/nhn/tui.image-editor", 15 | "bugs": "https://github.com/nhn/tui.image-editor/issues", 16 | "author": "NHN Cloud. FE Development Lab ", 17 | "repository": "https://github.com/nhn/tui.image-editor.git", 18 | "license": "MIT", 19 | "browserslist": [ 20 | "last 2 versions", 21 | "not ie <= 9" 22 | ], 23 | "peerDependencies": { 24 | "vue": "^2.6.14" 25 | }, 26 | "devDependencies": { 27 | "@storybook/vue": "^6.3.12", 28 | "vue": "^2.6.14" 29 | }, 30 | "dependencies": { 31 | "fabric": "^4.2.0", 32 | "tui-image-editor": "^3.15.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /apps/vue-image-editor/src/index.js: -------------------------------------------------------------------------------- 1 | import ImageEditor from './ImageEditor.vue'; 2 | 3 | export { ImageEditor }; 4 | -------------------------------------------------------------------------------- /apps/vue-image-editor/stories/index.stories.js: -------------------------------------------------------------------------------- 1 | import { ImageEditor } from '../src/index'; 2 | 3 | export default { 4 | title: 'ImageEditor', 5 | }; 6 | 7 | const options = { 8 | includeUI: { 9 | loadImage: { 10 | path: 'img/sampleImage2.png', 11 | name: 'sampleImage2', 12 | }, 13 | initMenu: 'filter', 14 | uiSize: { 15 | width: '1000px', 16 | height: '700px', 17 | }, 18 | }, 19 | cssMaxWidth: 700, 20 | cssMaxHeight: 500, 21 | }; 22 | 23 | export const IncludeUI = () => { 24 | return { 25 | components: { 26 | ImageEditor, 27 | }, 28 | template: 'test', 29 | created() { 30 | this.props = { ...options }; 31 | }, 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /apps/vue-image-editor/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | filenameHashing: false, 3 | chainWebpack: (config) => { 4 | config.module.rule('svg').use('file-loader').options({ 5 | name: '[name].[ext]', 6 | outputPath: '', 7 | }); 8 | 9 | // https://cli.vuejs.org/guide/troubleshooting.html#symbolic-links-in-node-modules 10 | config.resolve.symlinks(false); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@babel/preset-env", { "targets": { "ie": "10" } }]], 3 | "plugins": [["@babel/plugin-transform-runtime", { "corejs": 3 }]] 4 | } 5 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tui-image-editor", 3 | "authors": ["NHN Cloud. FE Dev Lab "], 4 | "license": "MIT", 5 | "main": ["dist/tui-image-editor.js"], 6 | "ignore": [ 7 | "**/.*", 8 | "node_modules", 9 | "bower_components", 10 | "test", 11 | "tests", 12 | "src", 13 | "server", 14 | "data.js", 15 | "Gruntfile.js", 16 | "gulpfile.js", 17 | "conf.json", 18 | "package.json", 19 | ".gitignore", 20 | "samples", 21 | "index.js", 22 | "jsdoc.conf.json", 23 | "webpack.*.js" 24 | ], 25 | "dependencies": { 26 | "fabric": "4.2.0", 27 | "tui-code-snippet": "^1.5.0", 28 | "tui-color-picker": "^2.2.0" 29 | }, 30 | "devDependencies": { 31 | "tui-component-colorpicker": "~1.0.1", 32 | "filesaver": "*" 33 | }, 34 | "resolutions": { 35 | "tui-code-snippet": "^1.5.0", 36 | "tui-color-picker": "^2.2.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /docs/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | ## Version 11 | 12 | 13 | 14 | ## Development Environment 15 | 16 | 17 | 18 | ## Current Behavior 19 | 20 | 21 | 22 | ```js 23 | // Write example code 24 | ``` 25 | 26 | ## Expected Behavior 27 | 28 | 29 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "apps/*" 4 | ], 5 | "version": "3.15.0" 6 | } 7 | --------------------------------------------------------------------------------