@nu-art/ts-workspace
Version:
TS Workspace
163 lines (162 loc) • 8.31 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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TS_VerticalWorkspace = exports.TS_HorizontalWorkspace = exports.TS_OrientedWorkspace = void 0;
/* QWorkspaceVertical - content display and resizing
* When given panel contents and a page, displays content in resizable panels.*/
const React = __importStar(require("react"));
const react_1 = require("react");
const Panels_1 = require("./Panels");
class TS_OrientedWorkspace extends Panels_1.PanelParentSync {
constructor() {
super(...arguments);
this.dragStart = 0;
//On drag logic for separator
this.separatorOnDrag = (e, firstPanelIndex, secondPanelIndex) => {
var _a, _b;
const firstPanel = this.props.config.panels[firstPanelIndex];
const secondPanel = this.props.config.panels[secondPanelIndex];
const statePanelsFactors = this.state.factors;
//Gather data
const delta = e[this.props.mousePos] - this.dragStart;
const parentSize = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a[this.props.dimensionClientProp];
const separatorSize = (_b = e.currentTarget) === null || _b === void 0 ? void 0 : _b[this.props.dimensionClientProp];
//Calculate new heights
const firstPanelDimension = this.firstPanelBounds[this.props.secondEdge] - this.firstPanelBounds[this.props.firstEdge];
const secondPanelDimension = this.secondPanelBounds[this.props.secondEdge] - this.secondPanelBounds[this.props.firstEdge];
let firstPanelSize = firstPanelDimension + delta;
let secondPanelSize = secondPanelDimension - delta;
const minFirstPanel = firstPanel.min || 100;
const minSecondPanel = secondPanel.min || 100;
if (firstPanelDimension + delta < minFirstPanel) {
firstPanelSize = minFirstPanel;
secondPanelSize = firstPanelDimension + secondPanelDimension - firstPanelSize;
}
if (secondPanelDimension - delta < minSecondPanel) {
secondPanelSize = minSecondPanel;
firstPanelSize = firstPanelDimension + secondPanelDimension - secondPanelSize;
}
const firstPanelFactor = firstPanelSize / parentSize;
const sum = statePanelsFactors[firstPanelIndex] + statePanelsFactors[secondPanelIndex];
statePanelsFactors[firstPanelIndex] = firstPanelFactor;
statePanelsFactors[secondPanelIndex] = sum - firstPanelFactor;
//Set config panels factors
const originalFactorSum = firstPanel.factor + secondPanel.factor;
firstPanel.factor = (firstPanelSize + separatorSize / 2) / parentSize;
secondPanel.factor = originalFactorSum - firstPanel.factor;
this.implementFactors([
{ index: firstPanelIndex, factor: firstPanel.factor },
{ index: secondPanelIndex, factor: secondPanel.factor }
]);
};
//Gets called whenever dragging starts
this.onDragStart = (e) => {
var _a, _b;
//Set new empty image as the ghost image, position far offscreen
const img = new Image();
e.dataTransfer.setDragImage(img, -9999, -9999);
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.dropEffect = 'none';
this.dragStart = e[this.props.mousePos];
this.firstPanelBounds = (_a = e.currentTarget.previousElementSibling) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
this.secondPanelBounds = (_b = e.currentTarget.nextElementSibling) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
};
//Gets called whenever dragging stops
this.onDragEnd = (e, firstPanelIndex, secondPanelIndex) => {
//Init vars
this.dragStart = 0;
this.props.onConfigChanged();
};
//Script to implement the factor on panels in the dom
this.implementFactors = (factors) => {
factors.forEach(factor => {
const element = this.state.panelRefs[factor.index].current;
if (!element)
return;
element.style[this.props.dimensionProp] = ((factor.factor) * 100) + '%';
});
};
}
deriveStateFromProps(nextProps) {
var _a;
this.ref = undefined;
const panelRefs = ((_a = this.state) === null || _a === void 0 ? void 0 : _a.panelRefs) || nextProps.config.panels.map(i => React.createRef());
return Object.assign(Object.assign({}, super.deriveStateFromProps(nextProps)), { factors: [], panelRefs });
}
calcFactors(nextProps) {
let factors = nextProps.config.panels.map(p => p.factor);
const current = this.ref;
if (current) {
const wrapperWidth = current.getBoundingClientRect()[this.props.dimensionProp];
const separatorPixels = Array.from(current.children).reduce((toRet, element, index) => {
if (index % 2 === 0)
return toRet;
const rect = element.getBoundingClientRect();
return toRet + rect[this.props.dimensionProp];
}, 0);
const containerFactor = (wrapperWidth - separatorPixels) / wrapperWidth;
factors = factors.map(f => f * containerFactor);
}
// const sumOfFactors = factors.reduce((a, b) => a + b, 0);
this.implementFactors(factors.map((factor, index) => ({ factor, index })));
return { factors };
}
//Main Render
render() {
const panels = this.props.config.panels;
return (React.createElement("div", { ref: _ref => {
if (this.ref || !_ref)
return;
this.ref = _ref;
this.setState(this.calcFactors(this.props));
}, className: `ts-workspace__${this.props.orientation}` }, panels.map((panel, i) => React.createElement(react_1.Fragment, { key: i },
React.createElement("div", { className: 'ts-workspace__panel', ref: this.state.panelRefs[i], draggable: false }, this.renderPanel(panel)),
i !== (panels.length - 1) &&
React.createElement("div", { className: `ts-workspace__separator`, draggable: true, tabIndex: 1, onDragStart: this.onDragStart, onDrag: (e) => this.separatorOnDrag(e, i, i + 1), onDragEnd: (e) => this.onDragEnd(e, i, i + 1) })))));
}
}
exports.TS_OrientedWorkspace = TS_OrientedWorkspace;
class TS_HorizontalWorkspace extends TS_OrientedWorkspace {
}
exports.TS_HorizontalWorkspace = TS_HorizontalWorkspace;
TS_HorizontalWorkspace.defaultProps = {
firstEdge: 'left',
secondEdge: 'right',
orientation: 'horizontal',
dimensionProp: 'width',
dimensionClientProp: 'clientWidth',
mousePos: 'pageX'
};
class TS_VerticalWorkspace extends TS_OrientedWorkspace {
}
exports.TS_VerticalWorkspace = TS_VerticalWorkspace;
TS_VerticalWorkspace.defaultProps = {
firstEdge: 'top',
secondEdge: 'bottom',
orientation: 'vertical',
dimensionProp: 'height',
dimensionClientProp: 'clientHeight',
mousePos: 'pageY'
};