verstak
Version:
Verstak - Front-End Library
768 lines (767 loc) • 29.2 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { ReactiveTreeNode, BaseDriver, Transaction, signal, RxObject } from "reactronic";
import { ElKind, H, V, Direction } from "./El.js";
import { equalElCoords, parseElCoords } from "./ElUtils.js";
export class ElDriver extends BaseDriver {
create(node) {
return new ElImpl(node);
}
}
export class ElImpl {
constructor(node) {
this.node = node;
this.maxColumnCount = 0;
this.maxRowCount = 0;
this.layoutInfo = undefined;
this.native = undefined;
this.model = undefined;
this._kind = ElKind.partition;
this._place = undefined;
this._coords = UndefinedElCoords;
this._width = new Size();
this._height = new Size();
this._alignmentHorizontal = undefined;
this._alignmentVertical = undefined;
this._alignmentVerticalRowWise = undefined;
this._selfAlignmentHorizontal = undefined;
this._selfAlignmentVertical = undefined;
this._selfAlignmentVerticalRowWise = undefined;
this._selfStretchingStrengthHorizontal = undefined;
this._selfStretchingStrengthVertical = undefined;
this._contentWrapping = true;
this._overlayVisible = undefined;
this._text = "";
this._textIsFormatted = false;
this._textIsEditable = false;
this._sealed = undefined;
this._splitView = undefined;
this._hasStylingPresets = false;
}
prepareForUpdate() {
this._place = undefined;
this._hasStylingPresets = false;
}
get rank() { return this.node.rank; }
get isBlock() { return this.kind === ElKind.block; }
get isTable() { return this.kind === ElKind.table; }
get isAuxiliary() { return this.kind > ElKind.table; }
get kind() { return this._kind; }
set kind(value) {
if (value !== this._kind || this.node.stamp >= Number.MAX_SAFE_INTEGER - 1) {
if (this.native !== undefined)
ElImpl.applyKind(this, value);
this._kind = value;
}
}
get place() { return this._place; }
set place(value) {
var _a, _b;
const node = this.node;
const driver = node.driver;
if (!driver.isPartition) {
const owner = node.owner;
const ownerEl = owner.element;
const prevEl = (_a = node.prev) === null || _a === void 0 ? void 0 : _a.element;
const prevElLayoutInfo = (_b = prevEl === null || prevEl === void 0 ? void 0 : prevEl.layoutInfo) !== null && _b !== void 0 ? _b : InitialElLayoutInfo;
const layoutInfo = this.layoutInfo = owner.children.isStrictOrder ? new ElLayoutInfo(prevElLayoutInfo) : undefined;
const isCursorElement = driver instanceof CursorCommandDriver;
const coords = getElCoordsAndAdjustLayoutInfo(!isCursorElement, value, ownerEl.maxColumnCount, ownerEl.maxRowCount, prevElLayoutInfo, layoutInfo);
if (!equalElCoords(coords, this._coords)) {
if (this.native !== undefined)
ElImpl.applyCoords(this, coords);
this._coords = coords;
}
this._place = value !== null && value !== void 0 ? value : {};
}
else
this.rowBreak();
}
get width() { return this._width.raw; }
set width(value) {
const w = this._width.raw;
if (value.min !== w.min || value.max !== w.max || value.preferred !== undefined) {
ElImpl.applyWidth(this, value);
this._width.raw = value;
}
}
get widthPx() { return this._width; }
set widthPx(value) {
const w = this._width;
if (value.minPx !== w.minPx)
this._width.minPx = value.minPx;
if (value.maxPx !== w.maxPx)
this._width.maxPx = value.maxPx;
}
get height() { return this._height.raw; }
set height(value) {
const h = this._height.raw;
if (value.min !== h.min || value.max !== h.max || value.preferred !== undefined) {
ElImpl.applyHeight(this, value);
this._height.raw = value;
}
}
get heightPx() { return this._height; }
set heightPx(value) {
const w = this._height;
if (value.minPx !== w.minPx)
this._height.minPx = value.minPx;
if (value.maxPx !== w.maxPx)
this._height.maxPx = value.maxPx;
}
get alignmentHorizontal() { return this._alignmentHorizontal; }
set alignmentHorizontal(value) {
const existing = this._alignmentHorizontal;
if (value !== existing) {
ElImpl.applyAlignmentHorizontal(this, existing, value);
this._alignmentHorizontal = value;
}
}
get alignmentVertical() { return this._alignmentVertical; }
set alignmentVertical(value) {
const existing = this._alignmentVertical;
if (value !== existing) {
ElImpl.applyAlignmentVertical(this, existing, value);
this._alignmentVertical = value;
}
}
get alignmentVerticalRowWise() { return this._alignmentVerticalRowWise; }
set alignmentVerticalRowWise(value) {
const existing = this._alignmentVerticalRowWise;
if (value !== existing) {
ElImpl.applyAlignmentVerticalRowWise(this, existing, value);
this._alignmentVerticalRowWise = value;
}
}
get selfAlignmentHorizontal() { return this._selfAlignmentHorizontal; }
set selfAlignmentHorizontal(value) {
const existing = this._selfAlignmentHorizontal;
if (value !== existing) {
ElImpl.applySelfAlignmentHorizontal(this, existing, value);
this._selfAlignmentHorizontal = value;
}
}
get selfAlignmentVertical() { return this._selfAlignmentVertical; }
set selfAlignmentVertical(value) {
const host = this.node.host;
if (host.driver.isPartition) {
const partition = host.element;
let existing = partition._selfAlignmentVertical;
if (value !== existing) {
ElImpl.applyPartitionAlignmentVertical(partition, existing, value);
partition._selfAlignmentVertical = value;
}
existing = this._selfAlignmentVerticalRowWise;
if (value !== existing) {
ElImpl.applySelfAlignmentVertical(this, existing, value);
this._selfAlignmentVerticalRowWise = value;
}
}
else {
const existing = this._selfAlignmentVertical;
if (value !== existing) {
ElImpl.applySelfAlignmentVertical(this, existing, value);
this._selfAlignmentVertical = value;
}
}
}
get selfAlignmentVerticalRowWise() { return this._selfAlignmentVerticalRowWise; }
set selfAlignmentVerticalRowWise(value) {
const existing = this._selfAlignmentVerticalRowWise;
if (value !== existing) {
ElImpl.applySelfAlignmentVertical(this, existing, value);
this._selfAlignmentVerticalRowWise = value;
}
}
get selfStretchingStrengthHorizontal() { return this._selfStretchingStrengthHorizontal; }
set selfStretchingStrengthHorizontal(value) {
const existing = this._selfStretchingStrengthHorizontal;
if (value !== existing) {
ElImpl.applySelfStretchingStrengthHorizontal(this, existing, value);
this._selfStretchingStrengthHorizontal = value;
}
}
get selfStretchingStrengthVertical() { return this._selfStretchingStrengthVertical; }
set selfStretchingStrengthVertical(value) {
const host = this.node.host;
const elem = host.driver.isPartition ? host.element : this;
const existing = elem._selfStretchingStrengthVertical;
if (value !== existing) {
ElImpl.applySelfStretchingStrengthVertical(elem, existing, value);
elem._selfStretchingStrengthVertical = value;
}
}
get contentWrapping() { return this._contentWrapping; }
set contentWrapping(value) {
if (value !== this._contentWrapping) {
ElImpl.applyContentWrapping(this, value);
this._contentWrapping = value;
}
}
get overlayVisible() { return this._overlayVisible; }
set overlayVisible(value) {
if (value !== this._overlayVisible) {
ElImpl.applyOverlayVisible(this, value);
this._overlayVisible = value;
}
}
get text() { return this._text; }
set text(value) {
if (value !== this._text) {
ElImpl.applyText(this, value);
this._text = value;
}
}
get textIsFormatted() { return this._textIsFormatted; }
set textIsFormatted(value) {
if (value !== this._textIsFormatted) {
ElImpl.applyTextIsFormatted(this, value);
this._textIsFormatted = value;
}
}
get textIsEditable() { return this._textIsEditable; }
set textIsEditable(value) {
if (value !== this._textIsEditable) {
ElImpl.applyTextIsEditable(this, value);
this._textIsEditable = value;
}
}
get sealed() { return this._sealed; }
set sealed(value) {
if (value !== this._sealed) {
ElImpl.applySealed(this, value);
this._sealed = value;
}
}
get splitView() { return this._splitView; }
set splitView(value) {
if (value !== this._splitView) {
ElImpl.applySplitView(this, value);
this._splitView = value;
}
}
get partitionSizeInSplitViewPx() {
var _a;
if (this.layoutInfo === undefined)
this.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
return (_a = this.layoutInfo.effectiveSizePx) !== null && _a !== void 0 ? _a : 0;
}
get style() {
return this.native.style;
}
get action() {
return this.native.onclick;
}
set action(value) {
const self = this.native;
if (self instanceof HTMLElement) {
if (value)
self.onclick = () => value(this);
else
self.onclick = null;
}
}
useStylingPreset(stylingPresetName, enabled) {
ElImpl.applyStylingPreset(this, this._hasStylingPresets, stylingPresetName, enabled);
this._hasStylingPresets = true;
}
*children(onlyAfter) {
const after = onlyAfter === null || onlyAfter === void 0 ? void 0 : onlyAfter.node;
for (const child of this.node.children.items(after))
yield child.element;
}
static *childrenOf(node, onlyAfter) {
return node.element.children(onlyAfter);
}
rowBreak() {
var _a, _b;
const node = this.node;
const prevEl = (_a = node.prev) === null || _a === void 0 ? void 0 : _a.element;
const prevElLayoutInfo = (_b = prevEl === null || prevEl === void 0 ? void 0 : prevEl.layoutInfo) !== null && _b !== void 0 ? _b : InitialElLayoutInfo;
const layoutInfo = this.layoutInfo = new ElLayoutInfo(prevElLayoutInfo);
layoutInfo.x = 1;
layoutInfo.y = layoutInfo.runningMaxY + 1;
}
static applyKind(element, value) {
DriversByLayout[value](element);
}
static applyCoords(element, value) {
const s = element.style;
if (value) {
const x1 = value.x1 || 1;
const y1 = value.y1 || 1;
const x2 = value.x2 || x1;
const y2 = value.y2 || y1;
s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
}
else
s.gridArea = "";
}
static applyWidth(element, value) {
var _a, _b;
const s = element.style;
const node = element.node;
const owner = node.owner;
const ownerEl = owner.element;
if (ownerEl.splitView === Direction.horizontal) {
}
else {
s.minWidth = (_a = value.min) !== null && _a !== void 0 ? _a : "";
s.maxWidth = (_b = value.max) !== null && _b !== void 0 ? _b : "";
}
}
static applyHeight(element, value) {
var _a, _b;
const s = element.style;
const node = element.node;
const owner = node.owner;
const ownerEl = owner.element;
if (ownerEl.splitView === Direction.vertical) {
}
else {
s.minHeight = (_a = value.min) !== null && _a !== void 0 ? _a : "";
s.maxHeight = (_b = value.max) !== null && _b !== void 0 ? _b : "";
}
}
static applyAlignmentHorizontal(element, existing, value) {
const el = element.native;
if (existing !== undefined)
el.classList.remove(StylingClassNameByAlignmentHorizontal[existing]);
if (value !== undefined)
el.classList.add(StylingClassNameByAlignmentHorizontal[value]);
}
static applyAlignmentVertical(element, existing, value) {
const el = element.native;
if (existing !== undefined)
el.classList.remove(StylingClassNameByAlignmentVertical[existing]);
if (value !== undefined)
el.classList.add(StylingClassNameByAlignmentVertical[value]);
}
static applyAlignmentVerticalRowWise(element, existing, value) {
const el = element.native;
if (existing !== undefined)
el.classList.remove(StylingClassNameByAlignmentVerticalRowWise[existing]);
if (value !== undefined)
el.classList.add(StylingClassNameByAlignmentVerticalRowWise[value]);
}
static applySelfAlignmentHorizontal(element, existing, value) {
const e = element.native;
if (existing !== undefined) {
e.classList.remove(StylingClassNameBySelfAlignmentHorizontal[existing]);
if (existing === H.stretch || existing === H.stretchAndFix)
element.style.flexGrow = "";
}
if (value !== undefined) {
e.classList.add(StylingClassNameBySelfAlignmentHorizontal[value]);
const grow = element.selfStretchingStrengthHorizontal;
if ((value === H.stretch || value === H.stretchAndFix) && grow !== undefined && grow !== 1)
element.style.flexGrow = `${grow}`;
else
element.style.flexGrow = "";
}
}
static applyPartitionAlignmentVertical(partition, existing, value) {
const e = partition.native;
if (existing !== undefined) {
e.classList.remove(StylingClassNameByPartitionAlignmentVertical[existing]);
if (existing === V.stretch || existing === V.stretchAndFix)
partition.style.flexGrow = "";
}
if (value !== undefined) {
e.classList.add(StylingClassNameByPartitionAlignmentVertical[value]);
const grow = partition.selfStretchingStrengthVertical;
if ((value === V.stretch || value === V.stretchAndFix) && grow !== undefined && grow !== 1)
partition.style.flexGrow = `${grow}`;
else
partition.style.flexGrow = "";
}
}
static applySelfAlignmentVertical(element, existing, value) {
const el = element.native;
if (existing !== undefined)
el.classList.remove(StylingClassNameBySelfAlignmentVertical[existing]);
if (value !== undefined)
el.classList.add(StylingClassNameBySelfAlignmentVertical[value]);
}
static applySelfStretchingStrengthHorizontal(element, existing, value) {
const a = element.selfAlignmentHorizontal;
if ((a === H.stretch || a === H.stretchAndFix) && value !== undefined && value !== 1)
element.style.flexGrow = `${value}`;
else
element.style.flexGrow = "";
}
static applySelfStretchingStrengthVertical(element, existing, value) {
const host = element.node.host.element;
const a = host.selfAlignmentVertical;
if ((a === V.stretch || a === V.stretchAndFix) && value !== undefined && value !== 1)
host.style.flexGrow = `${value}`;
else
host.style.flexGrow = "";
}
static applyContentWrapping(element, value) {
const s = element.style;
if (value) {
s.flexFlow = "wrap";
s.overflow = "";
s.textOverflow = "";
s.whiteSpace = "";
}
else {
s.flexFlow = "";
s.overflow = "hidden";
s.textOverflow = "ellipsis";
s.whiteSpace = "nowrap";
}
}
static applyOverlayVisible(element, value) {
const s = element.style;
const host = ReactiveTreeNode.findMatchingHost(element.node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
const nativeHost = host === null || host === void 0 ? void 0 : host.element.native;
if (value === true) {
const doc = document.body;
const rect = nativeHost.getBoundingClientRect();
if (doc.offsetWidth - rect.left > rect.right)
s.left = "0", s.right = "";
else
s.left = "", s.right = "0";
if (doc.clientHeight - rect.top > rect.bottom)
s.top = "100%", s.bottom = "";
else
s.top = "", s.bottom = "100%";
s.display = "";
s.position = "absolute";
s.minWidth = "100%";
s.boxSizing = "border-box";
nativeHost.style.position = "relative";
}
else {
nativeHost.style.position = "";
if (value === false)
s.display = "none";
else
s.position = s.display = s.left = s.right = s.top = s.bottom = "";
}
}
static applySealed(element, value) {
const e = element.native;
if (e instanceof HTMLElement) {
}
}
static applySplitView(element, value) {
const e = element.native;
if (e instanceof HTMLElement) {
element.sealed = value;
const t = Transaction.current;
Transaction.outside(() => {
t.whenFinished(true).then(() => {
e.sensors.resize.observeResizing(element, value !== undefined);
}, e => { });
});
}
}
static applyText(element, value) {
const e = element.native;
if (e instanceof HTMLElement) {
if (value) {
}
else {
e.style.display = "flex";
e.style.minWidth = "0";
}
if (element.textIsFormatted)
e.innerHTML = value !== null && value !== void 0 ? value : "";
else
e.innerText = value !== null && value !== void 0 ? value : "";
}
}
static applyTextIsFormatted(element, value) {
var _a, _b;
const e = element.native;
if (e instanceof HTMLElement) {
if (value)
e.innerHTML = (_a = element.text) !== null && _a !== void 0 ? _a : "";
else
e.innerText = (_b = element.text) !== null && _b !== void 0 ? _b : "";
}
}
static applyTextIsEditable(element, value) {
const e = element.native;
if (e instanceof HTMLElement) {
if (value)
e.contentEditable = "true";
else
e.contentEditable = "";
}
}
static applyStylingPreset(element, secondary, styleName, enabled) {
const native = element.native;
enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
if (secondary)
native.classList.toggle(styleName, enabled);
else
native.className = enabled ? styleName : "";
}
}
class Size extends RxObject {
constructor() {
super();
this.raw = { min: "", max: "" };
this.minPx = 0;
this.maxPx = Number.POSITIVE_INFINITY;
}
}
export class ElLayoutInfo {
constructor(prev) {
this.x = prev.x;
this.y = prev.y;
this.runningMaxX = prev.runningMaxX;
this.runningMaxY = prev.runningMaxY;
this.alignerX = undefined;
this.alignerY = undefined;
this.flags = prev.flags & ~ElLayoutInfoFlags.ownCursorPosition;
this.effectiveSizePx = 0;
this.contentSizeXpx = 0;
this.contentSizeYpx = 0;
this.borderSizeXpx = 0;
this.borderSizeYpx = 0;
this.isUpdateFinished = false;
}
}
__decorate([
signal,
__metadata("design:type", Number)
], ElLayoutInfo.prototype, "effectiveSizePx", void 0);
__decorate([
signal,
__metadata("design:type", Number)
], ElLayoutInfo.prototype, "contentSizeXpx", void 0);
__decorate([
signal,
__metadata("design:type", Number)
], ElLayoutInfo.prototype, "contentSizeYpx", void 0);
__decorate([
signal,
__metadata("design:type", Number)
], ElLayoutInfo.prototype, "borderSizeYpx", void 0);
__decorate([
signal,
__metadata("design:type", Number)
], ElLayoutInfo.prototype, "borderSizeXpx", void 0);
__decorate([
signal,
__metadata("design:type", Boolean)
], ElLayoutInfo.prototype, "isUpdateFinished", void 0);
var ElLayoutInfoFlags;
(function (ElLayoutInfoFlags) {
ElLayoutInfoFlags[ElLayoutInfoFlags["none"] = 0] = "none";
ElLayoutInfoFlags[ElLayoutInfoFlags["ownCursorPosition"] = 1] = "ownCursorPosition";
ElLayoutInfoFlags[ElLayoutInfoFlags["usesRunningColumnCount"] = 2] = "usesRunningColumnCount";
ElLayoutInfoFlags[ElLayoutInfoFlags["usesRunningRowCount"] = 4] = "usesRunningRowCount";
ElLayoutInfoFlags[ElLayoutInfoFlags["childrenRelayoutIsNeeded"] = 8] = "childrenRelayoutIsNeeded";
})(ElLayoutInfoFlags || (ElLayoutInfoFlags = {}));
const UndefinedElCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
export const InitialElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none, effectiveSizePx: 0, contentSizeXpx: 0, contentSizeYpx: 0, borderSizeXpx: 0, borderSizeYpx: 0, isUpdateFinished: false }));
function getElCoordsAndAdjustLayoutInfo(isRegularElement, place, maxX, maxY, prevElLayoutInfo, layoutInfo) {
var _a, _b;
let result;
if (typeof (place) === "string") {
result = parseElCoords(place, { x1: 0, y1: 0, x2: 0, y2: 0 });
absolutizeElCoords(result, prevElLayoutInfo.x, prevElLayoutInfo.y, maxX || Infinity, maxY || Infinity, result);
if (layoutInfo) {
layoutInfo.x = isRegularElement ? result.x2 + 1 : result.x1;
layoutInfo.y = result.y1;
layoutInfo.flags = ElLayoutInfoFlags.ownCursorPosition;
}
}
else if (layoutInfo) {
let dx;
let dy;
if (place) {
dx = (_a = place.cellsOverWidth) !== null && _a !== void 0 ? _a : 1;
dy = (_b = place.cellsOverHeight) !== null && _b !== void 0 ? _b : 1;
}
else
dx = dy = 1;
const runningX = maxX !== 0 ? maxX : prevElLayoutInfo.runningMaxX;
const runningY = maxY !== 0 ? maxY : prevElLayoutInfo.runningMaxY;
result = { x1: 0, y1: 0, x2: 0, y2: 0 };
if (dx === 0 && isRegularElement) {
dx = runningX || 1;
layoutInfo.flags = ElLayoutInfoFlags.usesRunningColumnCount;
}
if (dx >= 0) {
if (isRegularElement) {
result.x1 = prevElLayoutInfo.x;
result.x2 = absolutizePosition(result.x1 + dx - 1, 0, maxX || Infinity);
layoutInfo.x = result.x2 + 1;
}
else {
result.x1 = result.x2 = prevElLayoutInfo.x + dx;
layoutInfo.x = result.x2;
}
}
else {
if (isRegularElement) {
result.x1 = Math.max(prevElLayoutInfo.x + dx, 1);
result.x2 = prevElLayoutInfo.x;
layoutInfo.x = result.x2 + 1;
}
else {
result.x1 = result.x2 = prevElLayoutInfo.x + dx;
layoutInfo.x = result.x2;
}
}
if (dy === 0 && isRegularElement) {
dy = runningY || 1;
layoutInfo.flags |= ElLayoutInfoFlags.usesRunningRowCount;
}
if (dy >= 0) {
if (isRegularElement) {
result.y1 = prevElLayoutInfo.y;
result.y2 = absolutizePosition(result.y1 + dy - 1, 0, maxY || Infinity);
if (result.y2 > layoutInfo.runningMaxY)
layoutInfo.runningMaxY = result.y2;
}
else
result.y1 = result.y2 = prevElLayoutInfo.y + dy;
}
else {
if (isRegularElement) {
result.y1 = Math.max(prevElLayoutInfo.y + dy, 1);
result.y2 = prevElLayoutInfo.y;
}
else
result.y1 = result.y2 = prevElLayoutInfo.y + dy;
}
}
else
throw new Error("relative layout requires sequential children");
return result;
}
function absolutizeElCoords(place, cursorX, cursorY, maxWidth, maxHeight, result) {
const x1 = absolutizePosition(place.x1, cursorX, maxWidth);
const x2 = absolutizePosition(place.x2, x1, maxWidth);
if (x1 <= x2)
result.x1 = x1, result.x2 = x2;
else
result.x1 = x2, result.x2 = x1;
const y1 = absolutizePosition(place.y1, cursorY, maxHeight);
const y2 = absolutizePosition(place.y2, y1, maxHeight);
if (y1 <= y2)
result.y1 = y1, result.y2 = y2;
else
result.y1 = y2, result.y2 = y1;
return result;
}
function absolutizePosition(pos, cursor, max) {
if (pos === 0)
pos = cursor;
else if (pos < 0)
pos = Math.max(max + pos, 1);
else
pos = Math.min(pos, max);
return pos;
}
export class CursorCommand {
}
export class CursorCommandDriver extends ElDriver {
constructor() {
super("cursor", false, el => el.kind = ElKind.cursor);
}
}
export const Constants = {
element: "el",
partition: "part",
wrapper: "wrapper",
splitter: "splitter",
group: "group",
layouts: ["block", "table", "group", "", "", ""],
keyAttrName: "key",
kindAttrName: "kind",
ownReactiveTreeNodeKey: Symbol("own-reactive-tree-node"),
};
const DriversByLayout = [
el => {
el.native.classList.add("v5k-block");
},
el => {
el.native.classList.add("v5k-table");
},
el => {
el.native.classList.add("v5k-group");
},
el => {
el.native.classList.add("v5k-part");
},
el => {
const s = el.style;
const owner = el.node.owner.element;
s.position = "absolute";
s.zIndex = `${Number.MAX_SAFE_INTEGER}`;
if (owner.splitView === Direction.horizontal) {
s.width = "4px";
s.marginLeft = "-2px";
s.top = s.bottom = "0";
s.cursor = "col-resize";
}
else {
s.height = "4px";
s.marginTop = "-2px";
s.left = s.right = "0";
s.cursor = "row-resize";
}
},
el => {
},
el => {
},
];
export const StylingClassNameByAlignmentHorizontal = [
"v5k-h-center",
"v5k-h-left",
"v5k-h-right",
"v5k-h-stretch",
"v5k-h-stretch-fix",
];
export const StylingClassNameByAlignmentVertical = [
"v5k-v-center",
"v5k-v-top",
"v5k-v-bottom",
"v5k-v-stretch",
"v5k-v-stretch-fix",
];
export const StylingClassNameByAlignmentVerticalRowWise = [
"v5k-vrw-center",
"v5k-vrw-top",
"v5k-vrw-bottom",
"v5k-vrw-stretch",
"v5k-vrw-stretch-fix",
];
export const StylingClassNameBySelfAlignmentHorizontal = [
"v5k-self-h-center",
"v5k-self-h-left",
"v5k-self-h-right",
"v5k-self-h-stretch",
"v5k-self-h-stretch-fix",
];
export const StylingClassNameBySelfAlignmentVertical = [
"v5k-self-v-center",
"v5k-self-v-top",
"v5k-self-v-bottom",
"v5k-self-v-stretch",
"v5k-self-v-stretch-fix",
];
export const StylingClassNameByPartitionAlignmentVertical = [
"v5k-part-v-center",
"v5k-part-v-top",
"v5k-part-v-bottom",
"v5k-part-v-stretch",
"v5k-part-v-stretch-fix",
];