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

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

import { fabric } from 'fabric';
import * as echarts from 'echarts';
import { toObject } from '../utils';
const Chart = fabric.util.createClass(fabric.Rect, {
    type: 'chart',
    superType: 'element',
    hasRotatingPoint: false,
    initialize(chartOption, options) {
        options = options || {};
        this.callSuper('initialize', options);
        this.set({
            chartOption,
            fill: 'rgba(255, 255, 255, 0)',
            stroke: 'rgba(255, 255, 255, 0)',
        });
    },
    setSource(source) {
        if (typeof source === 'string') {
            this.setChartOptionStr(source);
        }
        else {
            this.setChartOption(source);
        }
    },
    setChartOptionStr(chartOptionStr) {
        this.set({
            chartOptionStr,
        });
    },
    setChartOption(chartOption) {
        this.set({
            chartOption,
        });
        this.distroyChart();
        this.createChart(chartOption);
    },
    createChart(chartOption) {
        this.instance = echarts.init(this.element);
        if (!chartOption) {
            this.instance.setOption({
                xAxis: {},
                yAxis: {},
                series: [
                    {
                        type: 'line',
                        data: [
                            [0, 1],
                            [1, 2],
                            [2, 3],
                            [3, 4],
                        ],
                    },
                ],
            });
        }
        else {
            this.instance.setOption(chartOption);
        }
    },
    distroyChart() {
        if (this.instance) {
            this.instance.dispose();
        }
    },
    toObject(propertiesToInclude) {
        return toObject(this, propertiesToInclude, {
            chartOption: this.get('chartOption'),
            container: this.get('container'),
            editable: this.get('editable'),
        });
    },
    _render(ctx) {
        this.callSuper('_render', ctx);
        if (!this.instance) {
            const { id, scaleX, scaleY, width, height, angle, editable, chartOption } = this;
            const zoom = this.canvas.getZoom();
            const left = this.calcCoords().tl.x;
            const top = this.calcCoords().tl.y;
            const padLeft = (width * scaleX * zoom - width) / 2;
            const padTop = (height * scaleY * zoom - height) / 2;
            this.element = fabric.util.makeElement('div', {
                id: `${id}_container`,
                style: `transform: rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom});
                        width: ${width}px;
                        height: ${height}px;
                        left: ${left + padLeft}px;
                        top: ${top + padTop}px;
                        position: absolute;
                        user-select: ${editable ? 'none' : 'auto'};
                        pointer-events: ${editable ? 'none' : 'auto'};`,
            });
            this.createChart(chartOption);
            const container = document.getElementById(this.container);
            container.appendChild(this.element);
        }
    },
});
Chart.fromObject = (options, callback) => {
    return callback(new Chart(options.chartOption, options));
};
window.fabric.Chart = Chart;
export default Chart;