Added keep size of image and svg

package.json

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

src/canvas/handlers/Handler.ts

@@ -30,6 +30,7 @@ import { defaults } from '../constants';
 import { LinkObject } from '../objects/Link';
 import { NodeObject } from '../objects/Node';
 import { PortObject } from '../objects/Port';
+import { SvgObject } from '../objects/Svg';
 import {
  CanvasOption,
  FabricCanvas,
@@ -616,17 +617,36 @@ class Handler implements HandlerOptions {
  * Set the image
  * @param {FabricImage} obj
  * @param {(File | string)} [source]
+ * @param {boolean} [keepSize]
  * @returns
  */
- public setImage = (obj: FabricImage, source?: File | string): Promise<FabricImage> => {
+ public setImage = (
+ obj: FabricImage,
+ source?: File | string,
+ keepSize?: boolean,
+ options?: fabric.IImageOptions,
+ ): Promise<FabricImage> => {
+ const { height, scaleY } = obj;
+ const renderCallbaack = (imgObj: FabricImage, src: string) => {
+ if (keepSize) {
+ const scale = (height * scaleY) / imgObj.height;
+ imgObj.set({ scaleY: scale, scaleX: scale, src });
+ }
+ this.canvas.requestRenderAll();
+ };
  return new Promise(resolve => {
  if (!source) {
  obj.set('file', null);
  obj.set('src', null);
  resolve(
- obj.setSrc('./images/sample/transparentBg.png', () => this.canvas.renderAll(), {
- dirty: true,
- }) as FabricImage,
+ obj.setSrc(
+ './images/sample/transparentBg.png',
+ (imgObj: FabricImage) => renderCallbaack(imgObj, null),
+ {
+ dirty: true,
+ ...options,
+ },
+ ) as FabricImage,
  );
  }
  if (source instanceof File) {
@@ -635,19 +655,25 @@ class Handler implements HandlerOptions {
  obj.set('file', source);
  obj.set('src', null);
  resolve(
- obj.setSrc(reader.result as string, () => this.canvas.renderAll(), {
- dirty: true,
- }) as FabricImage,
+ obj.setSrc(
+ reader.result as string,
+ (imgObj: FabricImage) => renderCallbaack(imgObj, reader.result as string),
+ {
+ dirty: true,
+ ...options,
+ },
+ ) as FabricImage,
  );
  };
  reader.readAsDataURL(source);
  } else {
  obj.set('file', null);
  obj.set('src', source);
  resolve(
- obj.setSrc(source, () => this.canvas.renderAll(), {
+ obj.setSrc(source, (imgObj: FabricImage) => renderCallbaack(imgObj, source), {
  dirty: true,
  crossOrigin: 'anonymous',
+ ...options,
  }) as FabricImage,
  );
  }
@@ -660,9 +686,38 @@ class Handler implements HandlerOptions {
  * @param {*} source
  * @returns
  */
- public setImageById = (id: string, source: any) => {
+ public setImageById = (id: string, source: any, keepSize?: boolean) => {
  const findObject = this.findById(id) as FabricImage;
- return Promise.resolve(this.setImage(findObject, source));
+ return Promise.resolve(this.setImage(findObject, source, keepSize));
+ };
+
+ /**
+ * Set Svg
+ *
+ * @param {SvgObject} obj
+ * @param {(File | string)} [source]
+ * @param {boolean} [setSvg]
+ * @param {boolean} [keepSize]
+ */
+ public setSvg = (
+ obj: SvgObject,
+ source?: File | string,
+ isPath?: boolean,
+ keepSize?: boolean,
+ ): Promise<SvgObject> => {
+ return new Promise(resolve => {
+ if (!source) {
+ resolve(obj.loadSvg({ src: './images/sample/chiller.svg', loadType: 'file', keepSize }));
+ }
+ if (source instanceof File) {
+ const reader = new FileReader();
+ reader.readAsDataURL(source);
+ reader.onload = () =>
+ resolve(obj.loadSvg({ src: reader.result as string, loadType: 'file', keepSize }));
+ } else {
+ resolve(obj.loadSvg({ src: source, loadType: isPath ? 'svg' : 'file', keepSize }));
+ }
+ });
  };
 
  /**

src/canvas/objects/Svg.ts

@@ -3,13 +3,14 @@ import { FabricGroup, FabricObject, FabricObjectOption, toObject } from '../util
 
 export type SvgObject = (FabricGroup | FabricObject) & {
  loadSvg(option: SvgOption): Promise<SvgObject>;
- setFill(value: string): SvgObject;
- setStroke(value: string): SvgObject;
+ setFill(value: string, filter?: (obj: FabricObject) => boolean): SvgObject;
+ setStroke(value: string, filter?: (obj: FabricObject) => boolean): SvgObject;
 };
 
 export interface SvgOption extends FabricObjectOption {
- svg?: string;
+ src?: string;
  loadType?: 'file' | 'svg';
+ keepSize?: boolean;
 }
 
 const Svg = fabric.util.createClass(fabric.Group, {
@@ -18,9 +19,16 @@ const Svg = fabric.util.createClass(fabric.Group, {
  this.callSuper('initialize', [], option);
  this.loadSvg(option);
  },
- addSvgElements(objects: FabricObject[], options: any, path: string) {
- const createdObj = fabric.util.groupSVGElements(objects, options, path) as SvgObject;
- this.set(options);
+ addSvgElements(objects: FabricObject[], options: SvgOption) {
+ const createdObj = fabric.util.groupSVGElements(objects, options) as SvgObject;
+ const { height, scaleY } = this;
+ const scale = height ? (height * scaleY) / createdObj.height : createdObj.scaleY;
+ this.set({ ...options, scaleX: scale, scaleY: scale });
+ if (this._objects?.length) {
+ (this as FabricGroup).getObjects().forEach(obj => {
+ this.remove(obj);
+ });
+ }
  if (createdObj.getObjects) {
  (createdObj as FabricGroup).getObjects().forEach(obj => {
  this.add(obj);
@@ -51,36 +59,38 @@ const Svg = fabric.util.createClass(fabric.Group, {
  }
  this.add(createdObj);
  }
- this.set({
- fill: options.fill,
- stroke: options.stroke,
- });
  this.setCoords();
  if (this.canvas) {
  this.canvas.requestRenderAll();
  }
  return this;
  },
  loadSvg(option: SvgOption) {
- const { svg, loadType, fill, stroke } = option;
+ const { src, loadType, fill, stroke } = option;
  return new Promise<SvgObject>(resolve => {
  if (loadType === 'svg') {
- fabric.loadSVGFromString(svg, (objects, options) => {
- resolve(this.addSvgElements(objects, { ...options, fill, stroke }, svg));
+ fabric.loadSVGFromString(src, (objects, options) => {
+ resolve(this.addSvgElements(objects, { ...options, fill, stroke }));
  });
  } else {
- fabric.loadSVGFromURL(svg, (objects, options) => {
- resolve(this.addSvgElements(objects, { ...options, fill, stroke }, svg));
+ fabric.loadSVGFromURL(src, (objects, options) => {
+ resolve(this.addSvgElements(objects, { ...options, fill, stroke }));
  });
  }
  });
  },
- setFill(value: any) {
- this.getObjects().forEach((obj: FabricObject) => obj.set('fill', value));
+ setFill(value: any, filter: (obj: FabricObject) => boolean = () => true) {
+ this.getObjects()
+ .filter(filter)
+ .forEach((obj: FabricObject) => obj.set('fill', value));
+ this.canvas.requestRenderAll();
  return this;
  },
- setStroke(value: any) {
- this.getObjects().forEach((obj: FabricObject) => obj.set('stroke', value));
+ setStroke(value: any, filter: (obj: FabricObject) => boolean = () => true) {
+ this.getObjects()
+ .filter(filter)
+ .forEach((obj: FabricObject) => obj.set('stroke', value));
+ this.canvas.requestRenderAll();
  return this;
  },
  toObject(propertiesToInclude: string[]) {

src/editors/imagemap/Descriptors.json

@@ -259,7 +259,8 @@
  "type": "svg",
  "superType": "svg",
  "name": "New SVG",
- "loadType": "svg"
+ "loadType": "file",
+ "src": "./images/sample/chiller.svg"
  }
  }
  ]

src/editors/imagemap/ImageMapEditor.js

@@ -192,11 +192,13 @@ class ImageMapEditor extends Component {
  });
  return;
  }
- if (changedKey === 'file' || changedKey === 'src' || changedKey === 'code') {
+ if (changedKey === 'file' || changedKey === 'src' || changedKey === 'code' || changedKey === 'svg') {
  if (selectedItem.type === 'image') {
- this.canvasRef.handler.setImageById(selectedItem.id, changedValue);
+ this.canvasRef.handler.setImageById(selectedItem.id, changedValue, true);
  } else if (selectedItem.superType === 'element') {
  this.canvasRef.handler.elementHandler.setById(selectedItem.id, changedValue);
+ } else if (selectedItem.superType === 'svg') {
+ this.canvasRef.handler.setSvg(selectedItem, changedValue);
  }
  return;
  }
@@ -331,7 +333,11 @@ class ImageMapEditor extends Component {
  }
  return;
  }
- this.canvasRef.handler.set(changedKey, changedValue);
+ if (selectedItem.type === 'svg' && changedKey === 'fill') {
+ selectedItem.setFill(changedValue);
+ } else {
+ this.canvasRef.handler.set(changedKey, changedValue);
+ }
  },
  onChangeWokarea: (changedKey, changedValue, allValues) => {
  if (changedKey === 'layout') {

src/editors/imagemap/ImageMapItems.js

@@ -1,15 +1,14 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Collapse, notification, Input, message } from 'antd';
+import { Collapse, Input, message, notification } from 'antd';
 import classnames from 'classnames';
 import i18n from 'i18next';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
+import { uuid } from 'uuidv4';
+import CommonButton from '../../components/common/CommonButton';
+import Scrollbar from '../../components/common/Scrollbar';
 import { Flex } from '../../components/flex';
 import Icon from '../../components/icon/Icon';
-import Scrollbar from '../../components/common/Scrollbar';
-import CommonButton from '../../components/common/CommonButton';
-import { SVGModal } from '../../components/common';
-import { uuid } from 'uuidv4';
 
 notification.config({
  top: 80,
@@ -104,17 +103,8 @@ class ImageMapItems extends Component {
  }
  const id = uuid();
  const option = Object.assign({}, item.option, { id });
- if (item.option.superType === 'svg' && item.type === 'default') {
- this.handlers.onSVGModalVisible(item.option);
- return;
- }
  canvasRef.handler.add(option, centered);
  },
- onAddSVG: (option, centered) => {
- const { canvasRef } = this.props;
- canvasRef.handler.add({ ...option, type: 'svg', superType: 'svg', id: uuid(), name: 'New SVG' }, centered);
- this.handlers.onSVGModalVisible();
- },
  onDrawingItem: item => {
  const { canvasRef } = this.props;
  if (canvasRef.handler.interactionMode === 'polygon') {
@@ -318,12 +308,6 @@ class ImageMapItems extends Component {
  </Flex>
  </Scrollbar>
  </Flex>
- <SVGModal
- visible={svgModalVisible}
- onOk={this.handlers.onAddSVG}
- onCancel={this.handlers.onSVGModalVisible}
- option={svgOption}
- />
  </div>
  );
  }

src/editors/imagemap/properties/PropertyDefinition.js

@@ -1,20 +1,21 @@
-import MarkerProperty from './MarkerProperty';
+import AnimationProperty from './AnimationProperty';
+import ChartProperty from './ChartProperty';
+import ElementProperty from './ElementProperty';
 import GeneralProperty from './GeneralProperty';
-import StyleProperty from './StyleProperty';
-import TooltipProperty from './TooltipProperty';
+import IframeProperty from './IframeProperty';
+import ImageFilterProperty from './ImageFilterProperty';
 import ImageProperty from './ImageProperty';
-import TextProperty from './TextProperty';
-import MapProperty from './MapProperty';
 import LinkProperty from './LinkProperty';
-import VideoProperty from './VideoProperty';
-import ElementProperty from './ElementProperty';
-import IframeProperty from './IframeProperty';
-import AnimationProperty from './AnimationProperty';
+import MapProperty from './MapProperty';
+import MarkerProperty from './MarkerProperty';
 import ShadowProperty from './ShadowProperty';
-import UserProperty from './UserProperty';
+import StyleProperty from './StyleProperty';
+import SvgProperty from './SvgProperty';
+import TextProperty from './TextProperty';
+import TooltipProperty from './TooltipProperty';
 import TriggerProperty from './TriggerProperty';
-import ImageFilterProperty from './ImageFilterProperty';
-import ChartProperty from './ChartProperty';
+import UserProperty from './UserProperty';
+import VideoProperty from './VideoProperty';
 
 export default {
  map: {
@@ -394,6 +395,10 @@ export default {
  title: 'General',
  component: GeneralProperty,
  },
+ svg: {
+ title: 'SVG',
+ component: SvgProperty,
+ },
  link: {
  title: 'Link',
  component: LinkProperty,

src/editors/imagemap/properties/SvgProperty.js

@@ -0,0 +1,40 @@
+import { Form, Radio } from 'antd';
+import i18n from 'i18next';
+import React from 'react';
+
+import FileUpload from '../../../components/common/FileUpload';
+
+export default {
+ render(canvasRef, form, data) {
+ if (!data) {
+ return null;
+ }
+ const loadType = data.loadType || 'file';
+ return (
+ <React.Fragment>
+ <Form.Item label={i18n.t('common.type')}>
+ {form.getFieldDecorator('loadType', {
+ initialValue: loadType,
+ })(
+ <Radio.Group onChange={this.handleChangeSvgType}>
+ <Radio.Button value="file">{i18n.t('common.file')}</Radio.Button>
+ <Radio.Button value="svg">{i18n.t('common.svg')}</Radio.Button>
+ </Radio.Group>,
+ )}
+ </Form.Item>
+ <Form.Item label={loadType === 'svg' ? i18n.t('common.svg') : i18n.t('common.file')}>
+ {form.getFieldDecorator('src', {
+ rules: [
+ {
+ required: true,
+ message: i18n.t('validation.enter-property', {
+ arg: loadType === 'svg' ? i18n.t('common.svg') : i18n.t('common.file'),
+ }),
+ },
+ ],
+ })(loadType === 'svg' ? <InputHtml /> : <FileUpload accept=".svg" />)}
+ </Form.Item>
+ </React.Fragment>
+ );
+ },
+};