plot-plan-designer/lib/esm/components/canvas/objects/Svg.js

Design Editor Tools with React.js + ant.design + fabric.js

import { fabric } from 'fabric';
import { toObject } from '../utils';
const Svg = fabric.util.createClass(fabric.Group, {
    type: 'svg',
    initialize(option = {}) {
        const { svg, loadType } = option;
        this.callSuper('initialize', [], option);
        this.loadSvg(svg, loadType);
    },
    addSvgElements(objects, options, path) {
        const createdObj = fabric.util.groupSVGElements(objects, options, path);
        this.set(options);
        if (createdObj.getObjects) {
            createdObj.getObjects().forEach((obj) => this.add(obj));
        }
        else {
            createdObj.set({
                originX: 'center',
                originY: 'center',
            });
            this.add(createdObj);
        }
        this.setCoords();
        if (this.canvas) {
            this.canvas.requestRenderAll();
        }
    },
    loadSvg(svg, loadType) {
        return new Promise((resolve) => {
            if (loadType === 'svg') {
                fabric.loadSVGFromString(svg, (objects, options) => {
                    resolve(this.addSvgElements(objects, options, svg));
                });
            }
            else {
                fabric.loadSVGFromURL(svg, (objects, options) => {
                    resolve(this.addSvgElements(objects, options, svg));
                });
            }
        });
    },
    toObject(propertiesToInclude) {
        return toObject(this, propertiesToInclude, {
            svg: this.get('svg'),
            loadType: this.get('loadType'),
        });
    },
    _render(ctx) {
        this.callSuper('_render', ctx);
    },
});
Svg.fromObject = (option, callback) => {
    return callback(new Svg(option));
};
window.fabric.Svg = Svg;
export default Svg;