plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
183 lines (182 loc) • 7.86 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const uuid_1 = require("uuid");
const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
const Handler_1 = __importDefault(require("./handlers/Handler"));
const constants_1 = require("./constants");
require("../../styles/core/canvas.less");
require("../../styles/core/tooltip.less");
require("../../styles/core/contextmenu.less");
require("../../styles/fabricjs/fabricjs.less");
const PlotPlanCanvas_1 = require("./utils/PlotPlanCanvas");
class Canvas extends react_1.Component {
constructor() {
super(...arguments);
this.container = react_1.default.createRef();
this.state = {
id: (0, uuid_1.v4)(),
loaded: false,
};
this.createObserver = () => {
this.resizeObserver = new resize_observer_polyfill_1.default((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({}, constants_1.defaults.canvasOption, canvasOption, {
width,
height,
selection: editable,
});
// this.canvas = new fabric.Canvas(`canvas_${id}`, mergedCanvasOption);
this.canvas = new PlotPlanCanvas_1.PlotPlanCanvas(`canvas_${id}`, mergedCanvasOption);
this.canvas.setBackgroundColor(mergedCanvasOption.backgroundColor, this.canvas.renderAll.bind(this.canvas));
this.canvas.renderAll();
this.handler = new Handler_1.default(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_1.default.createElement("div", { ref: this.container, id: id, className: "rde-canvas", style: Object.assign({ width: '100%', height: '100%' }, style) },
react_1.default.createElement("canvas", { id: `canvas_${id}` })));
}
}
Canvas.defaultProps = {
id: (0, uuid_1.v4)(),
editable: true,
zoomEnabled: true,
minZoom: 30,
maxZoom: 300,
responsive: true,
width: 0,
height: 0,
};
exports.default = Canvas;