plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
75 lines (74 loc) • 3 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_dom_1 = __importDefault(require("react-dom"));
const debounce_1 = __importDefault(require("lodash/debounce"));
class ContextmenuHandler {
constructor(handler) {
/**
* Show context menu
*
*/
this.show = (0, debounce_1.default)((e, target) => __awaiter(this, void 0, void 0, function* () {
const { onContext } = this.handler;
while (this.contextmenuEl.hasChildNodes()) {
this.contextmenuEl.removeChild(this.contextmenuEl.firstChild);
}
const contextmenu = document.createElement('div');
contextmenu.className = 'rde-contextmenu-right';
const element = yield onContext(this.contextmenuEl, e, target);
if (!element) {
return;
}
contextmenu.innerHTML = element;
this.contextmenuEl.appendChild(contextmenu);
react_dom_1.default.render(element, contextmenu);
this.contextmenuEl.classList.remove('contextmenu-hidden');
const { clientX: left, clientY: top } = e;
this.contextmenuEl.style.left = `${left}px`;
this.contextmenuEl.style.top = `${top}px`;
}), 100);
/**
* Hide context menu
*
*/
this.hide = (0, debounce_1.default)(() => {
if (this.contextmenuEl) {
this.contextmenuEl.classList.add('contextmenu-hidden');
}
}, 100);
this.handler = handler;
this.initialize();
}
/**
* Initialize contextmenu
*
*/
initialize() {
this.contextmenuEl = document.createElement('div');
this.contextmenuEl.id = `${this.handler.id}_contextmenu`;
this.contextmenuEl.className = 'rde-contextmenu contextmenu-hidden';
document.body.appendChild(this.contextmenuEl);
}
/**
* Destroy contextmenu
*
*/
destory() {
if (this.contextmenuEl) {
document.body.removeChild(this.contextmenuEl);
}
}
}
exports.default = ContextmenuHandler;