plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
68 lines (67 loc) • 2.4 kB
JavaScript
import { fabric } from 'fabric';
import { toObject } from '../utils';
const Iframe = fabric.util.createClass(fabric.Rect, {
type: 'iframe',
superType: 'element',
hasRotatingPoint: false,
initialize(src = '', options) {
options = options || {};
this.callSuper('initialize', options);
this.set({
src,
fill: 'rgba(255, 255, 255, 0)',
stroke: 'rgba(255, 255, 255, 0)',
});
},
setSource(source) {
this.setSrc(source);
},
setSrc(src) {
this.set({
src,
});
this.iframeElement.src = src;
},
toObject(propertiesToInclude) {
return toObject(this, propertiesToInclude, {
src: this.get('src'),
container: this.get('container'),
editable: this.get('editable'),
});
},
_render(ctx) {
this.callSuper('_render', ctx);
if (!this.element) {
const { id, scaleX, scaleY, width, height, angle, editable, src } = 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.iframeElement = fabric.util.makeElement('iframe', {
id,
src,
width: '100%',
height: '100%',
});
this.element = fabric.util.wrapElement(this.iframeElement, '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'};`,
});
const container = document.getElementById(this.container);
container.appendChild(this.element);
}
},
});
Iframe.fromObject = (options, callback) => {
return callback(new Iframe(options.src, options));
};
window.fabric.Iframe = Iframe;
export default Iframe;