@sansitech/react-img-editor 0.4.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,65 @@
+# react-img-editor - Image Editor
+
+react-img-editor is an image editor react component that supports image cropping, doodling, text editing, mosaic processing, and other operations, as well as custom plugins and flexible style configuration.
+
+![example](assets/demo.png)
+
+View our [storybook](https://hanyuzhou2006.github.io/react-img-editor) for a live demo.
+
+## ✨ Features
+
+- Support free brush, rectangle, circle, arrow, text, mosaic drawing
+- Support eraser, undo, screenshot and image download
+- Support custom plug-ins and toolbar configuration
+- Support stretching, dragging and deleting of rectangle, circle, arrow, text and other nodes
+- Support for multiple components on the same page at the same time
+
+## 📦 Download
+
+```
+yarn add @sansitech/react-img-editor
+```
+
+## 🔨 Introduce and use
+
+```jsx
+import ReactImgEditor from "@sansitech/react-img-editor";
+import "@sansitech/react-img-editor/lib/index.css";
+
+<ReactImgEditor src="https://www.w3schools.com/html/img_girl.jpg" />;
+```
+
+## 🧰 API
+
+| Properties | Description    | Type                 | Default |
+| ---------- | -----------    | ----                 | ------- |
+| src        | image url      | string               | - |
+| width      | board width    | number?              | 700 |
+| height     | board height   | number?              | 500 |
+| style      | styles         | React.CSSProperties  | -  |
+| plugins    | Custom plugins | Plugin[]             | [] |
+| toolbar           | toolbar configuration                                                                                                   | { items: string[] }  | {items: ['pen', 'eraser', 'arrow', 'rect', 'circle', 'mosaic', 'text', ' / ', 'repeat', 'download', 'crop']} |
+| getStage          | Get the [Stage](https://konvajs.org/api/Konva.Stage.html) object of KonvaJS, which can be used to download images, etc. | (stage: any) => void |
+| defaultPluginName | The default selected plugin name                                                                                        | string?              | -                                                                        |
+| crossOrigin       | Handling cross-domain images                                                                                            | string?              | -                                                                        |
+| language          | Editor language (de,en)                                                                                                 | string?              | en                                                                       |
+
+## 📝 TODO
+
+- [ ] Load images dynamically
+- [ ] Download image type configuration
+- [ ] Provide plugin configuration items configuration
+- [ ] Optimize free brush writing experience
+- [x] Internationalization support
+
+## 🤝 Contribute
+
+Development
+
+```bash
+yarn run development
+```
+
+## Credits
+
+This project is a fork of [react-img-editor](https://github.com/YaoKaiLun/react-img-editor)

package/lib/common/PubSub.d.ts

@@ -0,0 +1,6 @@
+export default class PubSub {
+    id: string;
+    constructor(id: string);
+    pub: (name: string, param?: any) => void;
+    sub: (name: string, callback: any) => void;
+}

package/lib/common/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const prefixCls = "react-img-editor";
+export declare const transformerStyle: {
+    centeredScaling: boolean;
+    rotateEnabled: boolean;
+    anchorCornerRadius: number;
+    anchorStrokeWidth: number;
+    borderStrokeWidth: number;
+    anchorStroke: string;
+    borderStroke: string;
+    anchorFill: string;
+    anchorSize: number;
+    rotateAnchorOffset: number;
+};

package/lib/common/type.d.ts

@@ -0,0 +1,22 @@
+import PubSub from './PubSub';
+import { EditorContextProps } from '../components/EditorContext';
+import { Stage } from 'konva/lib/Stage';
+import { Layer } from 'konva/lib/Layer';
+export interface DrawEventParams extends EditorContextProps {
+    event?: any;
+    stage: Stage;
+    imageLayer: Layer;
+    drawLayer: Layer;
+    imageData: ImageData;
+    reload: (imageObj: any, rectWidth: number, rectHeigh: number) => void;
+    historyStack: any[];
+    pixelRatio: number;
+    pubSub: InstanceType<typeof PubSub>;
+}
+export type PluginParamName = 'strokeWidth' | 'color' | 'fontSize' | 'lineType';
+export interface PluginParamValue {
+    strokeWidth?: number;
+    color?: string;
+    fontSize?: number;
+    lineType?: 'solid' | 'dash';
+}

package/lib/common/utils.d.ts

@@ -0,0 +1 @@
+export declare function uuid(): string;

package/lib/common/withContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function <CP>(Context: React.Context<CP>, shouldRender?: (context: CP) => boolean): <P extends CP>(WrappedComponent: React.ComponentClass<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<React.PropsWithChildren<P>, keyof CP>> & React.RefAttributes<React.Component<P, any, any>>>;

package/lib/components/EditorContext.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import Plugin from '../plugins/Plugin';
+import { PluginParamValue } from '../common/type';
+export interface EditorContextProps {
+    containerWidth: number;
+    containerHeight: number;
+    plugins: Plugin[];
+    toolbar: {
+        items: string[];
+    };
+    currentPlugin: Plugin | null;
+    handlePluginChange: (plugin: Plugin) => void;
+    paramValue: PluginParamValue | null;
+    handlePluginParamValueChange: (paramValue: PluginParamValue) => void;
+    toolbarItemConfig: any;
+    updateToolbarItemConfig: (config: any) => void;
+    language: string;
+}
+export declare const EditorContext: React.Context<EditorContextProps>;
+export declare const withEditorContext: <P extends EditorContextProps>(WrappedComponent: React.ComponentClass<P, any>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<React.PropsWithChildren<P>, keyof EditorContextProps>> & React.RefAttributes<React.Component<P, any, any>>>;

package/lib/components/Palette.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { EditorContextProps } from './EditorContext';
+interface PaletteProps extends EditorContextProps {
+    height: number;
+    imageObj: HTMLImageElement;
+    getStage?: (stage: any) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<PaletteProps>, keyof EditorContextProps> & React.RefAttributes<React.Component<PaletteProps, any, any>>>;
+export default _default;

package/lib/components/ParamSetting/ColorSetting.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ColorSettingProps {
+    value?: string;
+    onChange: (color: string) => void;
+}
+export default function ColorSetting(props: ColorSettingProps): React.JSX.Element;
+export {};

package/lib/components/ParamSetting/FontSizeSetting.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FontSizeSettingProps {
+    value?: number;
+    onChange: (fontSize: number) => void;
+}
+export default function FontSizeSetting(props: FontSizeSettingProps): React.JSX.Element;
+export {};

package/lib/components/ParamSetting/LineTypeSetting.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LineTypeSettingProps {
+    value?: string;
+    onChange: (lineType: 'solid' | 'dash') => void;
+}
+export default function LineTypeSetting(props: LineTypeSettingProps): React.JSX.Element;
+export {};

package/lib/components/ParamSetting/StrokeWidthSetting.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface StrokeWidthSettingProps {
+    value?: number;
+    onChange: (strokeWidth: number) => void;
+}
+export default function StrokeWidthSetting(props: StrokeWidthSettingProps): React.JSX.Element;
+export {};

package/lib/components/ParamSetting/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PluginParamName, PluginParamValue } from '../../common/type';
+interface ParamSettingProps {
+    paramNames: PluginParamName[];
+    paramValue: PluginParamValue | null;
+    onChange: (value: PluginParamValue) => void;
+}
+export default function ParamSetting(props: ParamSettingProps): React.JSX.Element;
+export {};

package/lib/components/Toolbar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import 'rc-tooltip/assets/bootstrap_white.css';
+export default function Toolbar(): React.JSX.Element;

package/lib/index.css

@@ -0,0 +1,386 @@
+.rc-tooltip.rc-tooltip-zoom-appear,
+.rc-tooltip.rc-tooltip-zoom-enter {
+  opacity: 0;
+}
+.rc-tooltip.rc-tooltip-zoom-enter,
+.rc-tooltip.rc-tooltip-zoom-leave {
+  display: block;
+}
+.rc-tooltip-zoom-enter,
+.rc-tooltip-zoom-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-play-state: paused;
+}
+.rc-tooltip-zoom-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  animation-play-state: paused;
+}
+.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
+.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
+  animation-name: rcToolTipZoomIn;
+  animation-play-state: running;
+}
+.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
+  animation-name: rcToolTipZoomOut;
+  animation-play-state: running;
+}
+@keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+@keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+}
+.rc-tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  line-height: 1.5;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 1px;
+  opacity: 0.9;
+}
+.rc-tooltip-hidden {
+  display: none;
+}
+.rc-tooltip-inner {
+  padding: 8px 10px;
+  color: #333333;
+  text-align: left;
+  text-decoration: none;
+  background-color: #ffffff;
+  border-radius: 3px;
+  min-height: 34px;
+  border: 1px solid #b1b1b1;
+}
+.rc-tooltip-arrow,
+.rc-tooltip-arrow-inner {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  transform: translate(-50%, 5px);
+  margin-left: -6px;
+  border-width: 6px 6px 0;
+  border-top-color: #b1b1b1;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow-inner {
+  bottom: 1px;
+  margin-left: -6px;
+  border-width: 6px 6px 0;
+  border-top-color: #ffffff;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  right: 15%;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  left: -5px;
+  margin-top: -6px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: #b1b1b1;
+  transform: translateX(calc(-100% + 1px));
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow-inner {
+  left: 1px;
+  margin-top: -6px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: #ffffff;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  right: -5px;
+  margin-top: -6px;
+  border-width: 6px 0 6px 6px;
+  border-left-color: #b1b1b1;
+  transform: translateX(calc(100% - 1px));
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow-inner {
+  right: 1px;
+  margin-top: -6px;
+  border-width: 6px 0 6px 6px;
+  border-left-color: #ffffff;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  transform: translate(-50%, -5px);
+  margin-left: -6px;
+  border-width: 0 6px 6px;
+  border-bottom-color: #b1b1b1;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow-inner,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow-inner {
+  top: 1px;
+  margin-left: -6px;
+  border-width: 0 6px 6px;
+  border-bottom-color: #ffffff;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  right: 15%;
+}
+
+@font-face {
+  font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_1621501_k00ymzzhtbl.eot?t=1580659190858');
+  /* IE9 */
+  src: url('//at.alicdn.com/t/font_1621501_k00ymzzhtbl.eot?t=1580659190858#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('//at.alicdn.com/t/font_1621501_k00ymzzhtbl.woff?t=1580659190858') format('woff'), url('//at.alicdn.com/t/font_1621501_k00ymzzhtbl.ttf?t=1580659190858') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1621501_k00ymzzhtbl.svg?t=1580659190858#iconfont') format('svg');
+  /* iOS 4.1- */
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-pen:before {
+  content: "\e8ac";
+}
+.icon-check:before {
+  content: "\e60c";
+}
+.icon-close:before {
+  content: "\e6b8";
+}
+.icon-eraser:before {
+  content: "\e78e";
+}
+.icon-download:before {
+  content: "\e6f7";
+}
+.icon-mosaic:before {
+  content: "\e77f";
+}
+.icon-dotted-line:before {
+  content: "\e782";
+}
+.icon-square:before {
+  content: "\e784";
+}
+.icon-circle:before {
+  content: "\e785";
+}
+.icon-line2:before {
+  content: "\e786";
+}
+.icon-text:before {
+  content: "\e787";
+}
+.icon-arrow:before {
+  content: "\e788";
+}
+.icon-cut:before {
+  content: "\e789";
+}
+.icon-repeal:before {
+  content: "\e78a";
+}
+.react-img-editor *:focus {
+  outline: none;
+}
+.react-img-editor-palette {
+  position: relative;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-img-editor-container {
+  position: relative;
+}
+.react-img-editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+}
+.react-img-editor-toolbar-separator {
+  display: inline-block;
+  height: 16px;
+  width: 1px;
+  margin: 0 6px;
+  background-color: #D4D4D9;
+}
+.react-img-editor-toolbar-icon {
+  padding: 5px;
+}
+.react-img-editor-toolbar-icon i {
+  font-size: 16px;
+  cursor: pointer;
+  color: #A9A9AC;
+  padding: 3px;
+}
+.react-img-editor-toolbar-icon.activated i {
+  color: #7DB5FD;
+}
+.react-img-editor-toolbar-icon:hover i {
+  background-color: #F6F6F9;
+}
+.react-img-editor-toolbar-icon.disabled i {
+  color: #D4D4D9;
+  background-color: inherit;
+}
+.react-img-editor-tooltip {
+  opacity: 1;
+  padding: 0;
+}
+.react-img-editor-tooltip .rc-tooltip-arrow {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+.react-img-editor-tooltip .rc-tooltip-inner {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 40px;
+  background-color: #FFF;
+  border-radius: 2px;
+  color: #A9A9AC;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.react-img-editor-param-setting {
+  display: flex;
+  align-items: center;
+}
+.react-img-editor-color-square {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  margin: 0 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: 1px solid #EFEFF4;
+}
+.react-img-editor-color-square-activated {
+  border: 1px solid #007CFF;
+}
+.react-img-editor-line-type {
+  width: 20px;
+  height: 20px;
+  color: #BDBDC2;
+  margin: 0 8px;
+  cursor: pointer;
+  font-weight: 900;
+  line-height: 20px;
+}
+.react-img-editor-line-type-activated {
+  color: #007AFF;
+}
+.react-img-editor-stroke-circle {
+  display: inline-block;
+  border-radius: 50%;
+  background: #BDBDC2;
+  margin: 0 8px;
+  cursor: pointer;
+}
+.react-img-editor-stroke-circle-activated {
+  background: #007AFF;
+}
+.react-img-editor-stroke-circle-small {
+  width: 4px;
+  height: 4px;
+}
+.react-img-editor-stroke-circle-medium {
+  width: 10px;
+  height: 10px;
+}
+.react-img-editor-stroke-circle-large {
+  width: 18px;
+  height: 18px;
+}
+.react-img-editor-font-size {
+  display: inline-block;
+  line-height: 18px;
+  margin-left: -1px;
+  outline: none;
+  border: 1px solid #D7D6DB;
+  font-size: 12px;
+  color: #97979B;
+  cursor: pointer;
+}
+.react-img-editor-font-size:first-child:not(:last-child) {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.react-img-editor-font-size:last-child:not(:first-child) {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.react-img-editor-font-size-activated {
+  background-color: #007AFF;
+  color: #fff;
+  border: 1px solid #007AFF;
+}

package/lib/index.d.ts

@@ -0,0 +1,19 @@
+import Plugin from './plugins/Plugin';
+import React from 'react';
+import './styles/index.less';
+interface ReactImageEditorProps {
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+    plugins?: Plugin[];
+    toolbar?: {
+        items: string[];
+    };
+    src: string;
+    getStage?: (stage: any) => void;
+    defaultPluginName?: string;
+    crossOrigin?: string;
+    language?: string;
+}
+export default function ReactImageEditor({ width, height, style, plugins, toolbar, src, getStage, defaultPluginName, crossOrigin, language: languageProp, }: ReactImageEditorProps): React.JSX.Element;
+export {};