plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
131 lines (130 loc) • 4.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fabric_1 = require("fabric");
// TODO temporary remove mediaelement, this will cause the compiler crash sometime when integrate with another lib
// import 'mediaelement';
// import 'mediaelement/build/mediaelementplayer.min.css';
//declare class MediaElementPlayer {
//constructor(
//id: string,
//options: {
//pauseOtherPlayers: boolean;
//videoWidth: string;
//videoHeight: string;
//success: (mediaeElement: any, originalNode: any, instance: any) => void;
// }
// );
// }
const utils_1 = require("../utils");
const Video = fabric_1.fabric.util.createClass(fabric_1.fabric.Rect, {
type: 'video',
superType: 'element',
hasRotatingPoint: false,
initialize(source, options) {
options = options || {};
this.callSuper('initialize', options);
if (source instanceof File) {
this.set({
file: source,
src: null,
});
}
else {
this.set({
file: null,
src: source,
});
}
this.set({
fill: 'rgba(255, 255, 255, 0)',
stroke: 'rgba(255, 255, 255, 0)',
});
},
setSource(source) {
if (source instanceof File) {
this.setFile(source);
}
else {
this.setSrc(source);
}
},
setFile(file) {
this.set({
file,
src: null,
});
const reader = new FileReader();
reader.onload = () => {
this.player.setSrc(reader.result);
};
reader.readAsDataURL(file);
},
setSrc(src) {
this.set({
file: null,
src,
});
this.player.setSrc(src);
},
toObject(propertiesToInclude) {
return (0, utils_1.toObject)(this, propertiesToInclude, {
src: this.get('src'),
file: this.get('file'),
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, file, autoplay, muted, loop } = 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.videoElement = fabric.util.makeElement('video', {
//id,
//autoplay: editable ? false : autoplay,
//muted: editable ? false : muted,
//loop: editable ? false : loop,
//preload: 'none',
//controls: false,
//});
//this.element = fabric.util.wrapElement(this.videoElement, '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'};`,
//}) as HTMLDivElement;
//const container = document.getElementById(this.container);
//container.appendChild(this.element);
//this.player = new MediaElementPlayer(id, {
//pauseOtherPlayers: false,
//videoWidth: '100%',
//videoHeight: '100%',
//success: (_mediaeElement: any, _originalNode: any, instance: any) => {
//if (editable) {
//instance.pause();
//}
//},
//});
//this.player.setPlayerSize(width, height);
//if (src) {
//this.setSrc(src);
//} else if (file) {
//this.setFile(file);
//}
//}
},
});
Video.fromObject = (options, callback) => {
return callback(new Video(options.src || options.file, options));
};
window.fabric.Video = Video;
exports.default = Video;