fixes bug onLoad props

Author: salgum1114

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.28",
+	"version": "0.0.29",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",

src/components/canvas/Canvas.tsx

@@ -97,7 +97,6 @@ class Canvas extends Component<CanvasProps> {
 			responsive,
 			propertiesToInclude,
 			gridOption,
-			onLoad,
 			...other
 		} = this.props;
 		const { id } = this.state;
@@ -124,7 +123,6 @@ class Canvas extends Component<CanvasProps> {
 			defaultOption,
 			propertiesToInclude: mergedPropertiesToInclude,
 			gridOption: Object.assign({}, defaultGripOption, gridOption),
-			onLoad,
 			...other,
 		});
 		this.handler.gridHandler.init();
@@ -136,9 +134,6 @@ class Canvas extends Component<CanvasProps> {
 			}
 		}
 		this.handler.eventHandler.attachEventListener();
-		if (onLoad) {
-			onLoad(this.handler, this.canvas);
-		}
 	}
 
 	componentDidUpdate(prevProps: CanvasProps) {

src/components/canvas/handlers/Handler.ts

@@ -292,6 +292,9 @@ class Handler implements HandlerOptions {
 		this.init(options);
 		this.initCallback(options);
 		this.initHandler(options);
+		if (this.onLoad) {
+			this.onLoad(this, this.canvas);
+		}
 	}
 
 	/**

src/components/imagemap/ImageMapEditor.js

@@ -89,6 +89,7 @@ class ImageMapEditor extends Component {
 		dataSources: [],
 		editing: false,
 		descriptors: {},
+		objects: undefined,
 	};
 
 	componentDidMount() {
@@ -479,24 +480,16 @@ class ImageMapEditor extends Component {
 
 	handlers = {
 		onChangePreview: checked => {
-			this.setState(
-				{
-					preview: typeof checked === 'object' ? false : checked,
-				},
-				() => {
-					if (this.state.preview) {
-						const data = this.canvasRef.handler.exportJSON().objects.filter(obj => {
-							if (!obj.id) {
-								return false;
-							}
-							return true;
-						});
-						this.preview.canvasRef.handler.importJSON(data);
-						return;
-					}
-					this.preview.canvasRef.handler.clear();
-				},
-			);
+			const data = this.canvasRef.handler.exportJSON().objects.filter(obj => {
+				if (!obj.id) {
+					return false;
+				}
+				return true;
+			});
+			this.setState({
+				preview: typeof checked === 'object' ? false : checked,
+				objects: data,
+			});
 		},
 		onProgress: progress => {
 			this.setState({
@@ -529,7 +522,7 @@ class ImageMapEditor extends Component {
 								}
 								return true;
 							});
-							this.canvasRef.handler.importJSON(JSON.stringify(data));
+							this.canvasRef.handler.importJSON(data);
 						}
 					};
 					reader.onloadend = () => {
@@ -646,6 +639,7 @@ class ImageMapEditor extends Component {
 			dataSources,
 			editing,
 			descriptors,
+			objects,
 		} = this.state;
 		const {
 			onAdd,
@@ -786,13 +780,11 @@ class ImageMapEditor extends Component {
 					dataSources={dataSources}
 				/>
 				<ImageMapPreview
-					ref={c => {
-						this.preview = c;
-					}}
 					preview={preview}
 					onChangePreview={onChangePreview}
 					onTooltip={onTooltip}
 					onClick={onClick}
+					objects={objects}
 				/>
 			</div>
 		);

src/components/imagemap/ImageMapPreview.js

@@ -12,35 +12,36 @@ class ImageMapPreview extends Component {
 		onChangePreview: PropTypes.func,
 		onTooltip: PropTypes.func,
 		onAction: PropTypes.func,
+		objects: PropTypes.any,
 	};
 
 	render() {
-		const { onChangePreview, onTooltip, onClick, preview } = this.props;
+		const { onChangePreview, onTooltip, onClick, preview, objects } = this.props;
 		const previewClassName = classnames('rde-preview', { preview });
 		return (
-			<div className={previewClassName}>
-				<div
-					ref={c => {
-						this.container = c;
-					}}
-					style={{ overvlow: 'hidden', display: 'flex', flex: '1', height: '100%' }}
-				>
-					<Canvas
+			preview && (
+				<div className={previewClassName}>
+					<div
 						ref={c => {
-							this.canvasRef = c;
+							this.container = c;
 						}}
-						editable={false}
-						canvasOption={{
-							backgroundColor: '#f3f3f3',
-						}}
-						onTooltip={onTooltip}
-						onClick={onClick}
-					/>
-					<Button className="rde-action-btn rde-preview-close-btn" onClick={onChangePreview}>
-						<Icon name="times" size={1.5} />
-					</Button>
+						style={{ overvlow: 'hidden', display: 'flex', flex: '1', height: '100%' }}
+					>
+						<Canvas
+							editable={false}
+							canvasOption={{
+								backgroundColor: '#f3f3f3',
+							}}
+							onLoad={handler => handler.importJSON(objects)}
+							onTooltip={onTooltip}
+							onClick={onClick}
+						/>
+						<Button className="rde-action-btn rde-preview-close-btn" onClick={onChangePreview}>
+							<Icon name="times" size={1.5} />
+						</Button>
+					</div>
 				</div>
-			</div>
+			)
 		);
 	}
 }