react-design-editor/lib/objects/Svg.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fabric_1 = require("fabric");
const utils_1 = require("../utils");
const Svg = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
    type: 'svg',
    initialize(option = {}) {
        this.callSuper('initialize', [], option);
        this.loadSvg(option);
    },
    addSvgElements(objects, options) {
        const createdObj = fabric_1.fabric.util.groupSVGElements(objects, options);
        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.getObjects().forEach(obj => {
                this.remove(obj);
            });
        }
        if (createdObj.getObjects) {
            createdObj.getObjects().forEach(obj => {
                this.add(obj);
                if (options.fill) {
                    obj.set('fill', options.fill);
                }
                if (options.stroke) {
                    obj.set('stroke', options.stroke);
                }
            });
        }
        else {
            createdObj.set({
                originX: 'center',
                originY: 'center',
            });
            if (options.fill) {
                createdObj.set({
                    fill: options.fill,
                });
            }
            if (options.stroke) {
                createdObj.set({
                    stroke: options.stroke,
                });
            }
            if (this._objects?.length) {
                this._objects.forEach(obj => this.remove(obj));
            }
            this.add(createdObj);
        }
        this.setCoords();
        if (this.canvas) {
            this.canvas.requestRenderAll();
        }
        return this;
    },
    loadSvg(option) {
        const { src, svg, loadType, fill, stroke } = option;
        return new Promise(resolve => {
            if (loadType === 'svg') {
                fabric_1.fabric.loadSVGFromString(svg || src, (objects, options) => {
                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }));
                });
            }
            else {
                fabric_1.fabric.loadSVGFromURL(svg || src, (objects, options) => {
                    resolve(this.addSvgElements(objects, { ...options, fill, stroke }));
                });
            }
        });
    },
    setFill(value, filter = () => true) {
        this.getObjects()
            .filter(filter)
            .forEach((obj) => obj.set('fill', value));
        this.canvas.requestRenderAll();
        return this;
    },
    setStroke(value, filter = () => true) {
        this.getObjects()
            .filter(filter)
            .forEach((obj) => obj.set('stroke', value));
        this.canvas.requestRenderAll();
        return this;
    },
    toObject(propertiesToInclude) {
        return (0, utils_1.toObject)(this, propertiesToInclude, {
            src: this.get('src'),
            loadType: this.get('loadType'),
        });
    },
    _render(ctx) {
        this.callSuper('_render', ctx);
    },
});
Svg.fromObject = (option, callback) => {
    return callback(new Svg(option));
};
// @ts-ignore
window.fabric.Svg = Svg;
exports.default = Svg;