plot-plan-designer/lib/esm/components/canvas/Canvas.js

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

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { Component } from 'react';
import { v4 } from 'uuid';
import ResizeObserver from 'resize-observer-polyfill';
import Handler from './handlers/Handler';
import { defaults } from './constants';
import '../../styles/core/canvas.less';
import '../../styles/core/tooltip.less';
import '../../styles/core/contextmenu.less';
import '../../styles/fabricjs/fabricjs.less';
import { PlotPlanCanvas } from './utils/PlotPlanCanvas';
class Canvas extends Component {
    constructor() {
        super(...arguments);
        this.container = React.createRef();
        this.state = {
            id: v4(),
            loaded: false,
        };
        this.createObserver = () => {
            this.resizeObserver = new ResizeObserver((entries) => {
                const { width = 0, height = 0 } = (entries[0] && entries[0].contentRect) || {};
                this.handler.eventHandler.resize(width, height);
                if (!this.state.loaded) {
                    this.handleLoad();
                }
            });
            this.resizeObserver.observe(this.container.current);
        };
        this.destroyObserver = () => {
            if (this.resizeObserver) {
                this.resizeObserver.disconnect();
                this.resizeObserver = null;
            }
        };
        this.handleLoad = () => {
            this.setState({
                loaded: true,
            }, () => {
                if (this.props.onLoad) {
                    this.props.onLoad(this.handler, this.canvas);
                }
            });
        };
    }
    componentDidMount() {
        const _a = this.props, { editable, canvasOption, width, height, responsive, fetcher } = _a, other = __rest(_a, ["editable", "canvasOption", "width", "height", "responsive", "fetcher"]);
        const { id } = this.state;
        const mergedCanvasOption = Object.assign({}, defaults.canvasOption, canvasOption, {
            width,
            height,
            selection: editable,
        });
        // this.canvas = new fabric.Canvas(`canvas_${id}`, mergedCanvasOption);
        this.canvas = new PlotPlanCanvas(`canvas_${id}`, mergedCanvasOption);
        this.canvas.setBackgroundColor(mergedCanvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));
        this.canvas.renderAll();
        this.handler = new Handler(Object.assign({ id,
            width,
            height,
            editable, canvas: this.canvas, container: this.container.current, canvasOption: mergedCanvasOption, fetch: fetcher }, other));
        if (this.props.responsive) {
            this.createObserver();
        }
        else {
            this.handleLoad();
        }
    }
    componentDidUpdate(prevProps) {
        if (this.props.width !== prevProps.width || this.props.height !== prevProps.height) {
            this.handler.eventHandler.resize(this.props.width, this.props.height);
        }
        if (this.props.editable !== prevProps.editable) {
            this.handler.editable = this.props.editable;
        }
        if (this.props.responsive !== prevProps.responsive) {
            if (!this.props.responsive) {
                this.destroyObserver();
            }
            else {
                this.destroyObserver();
                this.createObserver();
            }
        }
        if (JSON.stringify(this.props.canvasOption) !== JSON.stringify(prevProps.canvasOption)) {
            this.handler.setCanvasOption(this.props.canvasOption);
        }
        if (JSON.stringify(this.props.keyEvent) !== JSON.stringify(prevProps.keyEvent)) {
            this.handler.setKeyEvent(this.props.keyEvent);
        }
        if (JSON.stringify(this.props.fabricObjects) !== JSON.stringify(prevProps.fabricObjects)) {
            this.handler.setFabricObjects(this.props.fabricObjects);
        }
        if (JSON.stringify(this.props.workareaOption) !== JSON.stringify(prevProps.workareaOption)) {
            this.handler.setWorkareaOption(this.props.workareaOption);
        }
        if (JSON.stringify(this.props.guidelineOption) !== JSON.stringify(prevProps.guidelineOption)) {
            this.handler.setGuidelineOption(this.props.guidelineOption);
        }
        if (JSON.stringify(this.props.objectOption) !== JSON.stringify(prevProps.objectOption)) {
            this.handler.setObjectOption(this.props.objectOption);
        }
        if (JSON.stringify(this.props.gridOption) !== JSON.stringify(prevProps.gridOption)) {
            this.handler.setGridOption(this.props.gridOption);
        }
        if (JSON.stringify(this.props.propertiesToInclude) !== JSON.stringify(prevProps.propertiesToInclude)) {
            this.handler.setPropertiesToInclude(this.props.propertiesToInclude);
        }
        if (JSON.stringify(this.props.activeSelectionOption) !== JSON.stringify(prevProps.activeSelectionOption)) {
            this.handler.setActiveSelectionOption(this.props.activeSelectionOption);
        }
    }
    componentWillUnmount() {
        this.destroyObserver();
        this.handler.destroy();
    }
    render() {
        const { style } = this.props;
        const { id } = this.state;
        return (React.createElement("div", { ref: this.container, id: id, className: "rde-canvas", style: Object.assign({ width: '100%', height: '100%' }, style) },
            React.createElement("canvas", { id: `canvas_${id}` })));
    }
}
Canvas.defaultProps = {
    id: v4(),
    editable: true,
    zoomEnabled: true,
    minZoom: 30,
    maxZoom: 300,
    responsive: true,
    width: 0,
    height: 0,
};
export default Canvas;