diff --git a/src/mask-editor/index.ts b/src/mask-editor/index.ts index 8a0b298..4b5aadc 100644 --- a/src/mask-editor/index.ts +++ b/src/mask-editor/index.ts @@ -113,7 +113,7 @@ export default class MaskEditor extends Component { 'canvasRender', debounce(() => { this.renderMask() - this.emit('change') + this.emit('change', this.canvas) }, 20) ) diff --git a/src/mask-editor/package.json b/src/mask-editor/package.json index c596e9f..a4e93d8 100644 --- a/src/mask-editor/package.json +++ b/src/mask-editor/package.json @@ -1,6 +1,6 @@ { "name": "mask-editor", - "version": "0.1.0", + "version": "0.2.0", "description": "Image mask editing", "luna": { "dependencies": [ diff --git a/src/mask-editor/react.tsx b/src/mask-editor/react.tsx index 2692c0f..27c4440 100644 --- a/src/mask-editor/react.tsx +++ b/src/mask-editor/react.tsx @@ -4,6 +4,7 @@ import { useNonInitialEffect } from '../share/hooks' interface IMaskEditorProps extends IOptions { style?: CSSProperties + onChange?: (canvas: HTMLCanvasElement) => void onCreate?: (maskEditor: MaskEditor) => void } @@ -18,6 +19,10 @@ const LunaMaskEditor: FC = (props) => { }) props.onCreate && props.onCreate(maskEditor.current) + if (props.onChange) { + maskEditor.current.on('change', props.onChange) + } + return () => maskEditor.current?.destroy() }, []) diff --git a/src/mask-editor/story.js b/src/mask-editor/story.js index db80b46..233df0c 100644 --- a/src/mask-editor/story.js +++ b/src/mask-editor/story.js @@ -40,6 +40,10 @@ const def = story( onCreate(maskEditor, maskContainer) + maskEditor.on('change', () => { + console.log('mask change') + }) + return maskEditor }, { @@ -59,6 +63,9 @@ const def = story( onCreate(maskEditor, maskContainer.current) } }} + onChange={() => { + console.log('mask change') + }} />