UNPKG

verstak

Version:
779 lines (778 loc) 30.4 kB
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, observable, ObservableObject } from "reactronic"; import { ElKind, Horizontal, Vertical, 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._horizontal = undefined; this._vertical = undefined; this._contentHorizontal = undefined; this._contentVertical = undefined; this._stretchingStrengthHorizontally = undefined; this._stretchingStrengthVertically = undefined; this._contentWrapping = true; this._overlayVisible = undefined; this._sealed = undefined; this._splitView = undefined; this._hasStylingPresets = false; } prepareForUpdate() { this._place = undefined; this._hasStylingPresets = false; } get index() { return this.node.slot.index; } get isDivision() { return this.kind === ElKind.division; } get isTable() { return this.kind === ElKind.table; } get isAuxiliary() { return this.kind > ElKind.text; } 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.slot.prev) === null || _a === void 0 ? void 0 : _a.instance.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.isStrict ? 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 horizontally() { return this._horizontal; } set horizontally(value) { const existing = this._horizontal; if (value !== existing) { ElImpl.applyHorizontal(this, existing, value, this._contentHorizontal, this._contentHorizontal, this._stretchingStrengthHorizontally); this._horizontal = value; } } get vertically() { return this._vertical; } set vertically(value) { const existing = this._vertical; if (value !== existing) { ElImpl.applyVertical(this, existing, value, this._contentVertical, this._contentVertical, this._stretchingStrengthVertically); this._vertical = value; } } get contentHorizontally() { return this._contentHorizontal; } set contentHorizontally(value) { const existing = this._contentHorizontal; if (value !== existing) { ElImpl.applyHorizontal(this, this._horizontal, this._horizontal, existing, value, this._stretchingStrengthHorizontally); this._contentHorizontal = value; } } get contentVertically() { return this._contentVertical; } set contentVertically(value) { const existing = this._contentVertical; if (value !== existing) { ElImpl.applyVertical(this, this._vertical, this._vertical, existing, value, this._stretchingStrengthVertically); this._contentVertical = value; } } get stretchingStrengthHorizontally() { return this._stretchingStrengthHorizontally; } set stretchingStrengthHorizontally(value) { const existing = this._stretchingStrengthHorizontally; if (value !== existing) { ElImpl.applyStretchingStrengthH(this, existing, value); this._stretchingStrengthHorizontally = value; } } get stretchingStrengthVertically() { return this._stretchingStrengthVertically; } set stretchingStrengthVertically(value) { const existing = this._stretchingStrengthVertically; if (value !== existing) { ElImpl.applyStretchingStrengthV(this, existing, value); this._stretchingStrengthVertically = 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 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; } 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.slot; for (const child of this.node.children.items(after)) yield child.instance.element; } static *childrenOf(node, onlyAfter) { return node.element.children(onlyAfter); } rowBreak() { var _a, _b; const node = this.node; const prevEl = (_a = node.slot.prev) === null || _a === void 0 ? void 0 : _a.instance.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) { const kind = Constants.layouts[value]; kind && element.native.setAttribute(Constants.kindAttrName, kind); 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 applyHorizontal(element, oldPrimary, newPrimary, oldInside, newInside, strength) { var _a, _b; oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Horizontal.left); newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Horizontal.left); oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary); newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary); const css = element.style; let hostLayout = undefined; if (element.node.host.driver.isPartition) { const hostEl = element.node.host.element; hostLayout = hostEl.layoutInfo; if (hostLayout === undefined) hostLayout = hostEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo); } let isEffectiveAlignerX = false; if (hostLayout) { const isAligner = newPrimary === Horizontal.center || newPrimary === Horizontal.right; isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined || element.index <= hostLayout.alignerX.index); if (hostLayout.alignerX === element) { if (!isEffectiveAlignerX) { css.marginLeft = ""; throw new Error("changing alignment leader is not implemented yet"); } } else { if (isEffectiveAlignerX) { const existingAlignerCss = (_b = (_a = hostLayout.alignerX) === null || _a === void 0 ? void 0 : _a.native) === null || _b === void 0 ? void 0 : _b.style; if (existingAlignerCss) existingAlignerCss.marginLeft = ""; hostLayout.alignerX = element; } } } switch (newPrimary) { default: case Horizontal.left: css.justifySelf = "start"; if (oldPrimary === Horizontal.center) { css.marginLeft = ""; css.marginRight = ""; } else if (oldPrimary === Horizontal.right) css.marginLeft = ""; break; case Horizontal.center: css.justifySelf = "center"; if (hostLayout) css.marginLeft = isEffectiveAlignerX ? "auto" : ""; css.marginRight = "auto"; break; case Horizontal.right: css.justifySelf = "end"; if (hostLayout) css.marginLeft = isEffectiveAlignerX ? "auto" : ""; if (oldPrimary === Horizontal.center) css.marginRight = ""; break; case Horizontal.stretch: case Horizontal.stretchAndFix: css.justifySelf = "stretch"; if (oldPrimary === Horizontal.center) { css.marginLeft = ""; css.marginRight = ""; } else if (oldPrimary === Horizontal.right) css.marginLeft = ""; break; } switch (newInside) { default: case Horizontal.left: css.alignItems = "start"; css.textAlign = "left"; break; case Horizontal.center: css.alignItems = "center"; css.textAlign = "center"; break; case Horizontal.right: css.alignItems = "end"; css.textAlign = "right"; break; case Horizontal.stretch: case Horizontal.stretchAndFix: css.alignItems = "stretch"; css.textAlign = "justify"; break; } if (newPrimary >= Horizontal.stretch && strength === undefined) ElImpl.applyStretchingStrengthH(element, 0, 1); } static applyVertical(element, oldPrimary, newPrimary, oldInside, newInside, strength) { oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Vertical.top); newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Vertical.top); oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary); newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary); const css = element.style; let hostLayout = undefined; let hostCss = undefined; if (element.node.host.driver.isPartition) { const hostEl = element.node.host.element; hostCss = hostEl.style; hostLayout = hostEl.layoutInfo; if (hostLayout === undefined) hostLayout = hostEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo); } let isEffectiveAlignerY = false; if (hostLayout) { const isAligner = newPrimary === Vertical.center || newPrimary === Vertical.bottom; isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined || hostLayout.alignerY.vertically !== Vertical.center); if (hostLayout.alignerY === element) { if (!isEffectiveAlignerY) { hostCss.marginTop = ""; } } else { if (isEffectiveAlignerY) { hostCss.marginTop = "auto"; hostLayout.alignerY = element; } } } switch (newPrimary) { default: case Vertical.top: css.alignSelf = "start"; break; case Vertical.center: css.alignSelf = "center"; break; case Vertical.bottom: css.alignSelf = "end"; break; case Vertical.stretch: case Vertical.stretchAndFix: css.alignSelf = "stretch"; break; } switch (newInside) { default: case Vertical.top: css.justifyContent = "start"; break; case Vertical.center: css.justifyContent = "center"; break; case Vertical.bottom: css.justifyContent = "end"; break; case Vertical.stretch: case Vertical.stretchAndFix: css.justifyContent = "stretch"; break; } if (newPrimary >= Vertical.stretch && strength === undefined) ElImpl.applyStretchingStrengthV(element, 0, 1); } static applyStretchingStrengthH(element, existing, value) { const s = element.style; const host = element.node.host; if (host.driver.isPartition) { const hostEl = host.element; hostEl._stretchingStrengthHorizontally = value; existing !== null && existing !== void 0 ? existing : (existing = 0); value !== null && value !== void 0 ? value : (value = 0); } value !== null && value !== void 0 ? value : (value = 0); if (value > 0) { s.flexGrow = `${value}`; s.flexBasis = "0"; } else { s.flexGrow = ""; s.flexBasis = ""; } } static applyStretchingStrengthV(element, existing, value) { var _a; const host = element.node.host; if (host.driver.isPartition) { const hostElement = host.element; hostElement._stretchingStrengthVertically = value; let delta = 0; existing !== null && existing !== void 0 ? existing : (existing = 0); value !== null && value !== void 0 ? value : (value = 0); if (existing === 0) { if (value !== 0) delta = 1; } else if (value === 0) { if (existing !== 0) delta = -1; } if (delta !== 0) { const count = (_a = hostElement._stretchingStrengthVertically) !== null && _a !== void 0 ? _a : 0 + delta; const s = hostElement.style; if (count === 1) s.flexGrow = `${value}`; else if (count === 0) s.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 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 ObservableObject { 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([ observable, __metadata("design:type", Number) ], ElLayoutInfo.prototype, "effectiveSizePx", void 0); __decorate([ observable, __metadata("design:type", Number) ], ElLayoutInfo.prototype, "contentSizeXpx", void 0); __decorate([ observable, __metadata("design:type", Number) ], ElLayoutInfo.prototype, "contentSizeYpx", void 0); __decorate([ observable, __metadata("design:type", Number) ], ElLayoutInfo.prototype, "borderSizeYpx", void 0); __decorate([ observable, __metadata("design:type", Number) ], ElLayoutInfo.prototype, "borderSizeXpx", void 0); __decorate([ observable, __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: ["division", "table", "text", "group", "", "", ""], keyAttrName: "key", kindAttrName: "kind", }; const DriversByLayout = [ el => { const owner = el.node.owner.element; const s = el.style; s.display = "flex"; s.flexDirection = "column"; s.alignSelf = owner.isTable ? "stretch" : "center"; s.textAlign = "initial"; s.flexShrink = "1"; s.minWidth = "0"; }, el => { const owner = el.node.owner.element; const s = el.style; s.alignSelf = owner.isTable ? "stretch" : "center"; s.display = "grid"; s.flexBasis = "0"; s.gridAutoRows = "minmax(min-content, 1fr)"; s.gridAutoColumns = "minmax(min-content, 1fr)"; s.textAlign = "initial"; }, el => { const owner = el.node.owner.element; const s = el.style; s.alignSelf = owner.isTable ? "stretch" : "center"; s.display = "inline-grid"; s.flexShrink = "1"; }, el => { const s = el.style; s.display = "contents"; }, el => { const owner = el.node.owner.element; const s = el.style; s.display = owner.isTable ? "contents" : "flex"; s.flexDirection = "row"; s.alignItems = "center"; s.gap = "inherit"; s.position = owner.sealed !== undefined ? "relative" : ""; }, 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 => { }, ];