diff --git a/source/html/El.ts b/source/html/El.ts index bfdea77..0817e53 100644 --- a/source/html/El.ts +++ b/source/html/El.ts @@ -19,7 +19,7 @@ export type El = { // User-manageable properties model: M kind: ElKind - area: ElArea + place: ElPlace width: Range height: Range horizontal: PosH | undefined @@ -85,7 +85,7 @@ export type MarkedRange = Range & { readonly marker?: string } -export type ElArea = undefined | string | { +export type ElPlace = undefined | string | { cellsOverWidth?: number // 1 (table only) cellsOverHeight?: number // 1 (table only) } @@ -131,7 +131,7 @@ export class ElImpl implements El { // User-defined properties model: M private _kind: ElKind - private _area: ElArea + private _place: ElPlace private _coords: ElCoords private _width: Size private _height: Size @@ -157,7 +157,7 @@ export class ElImpl implements El { // User-defined properties this.model = undefined as any this._kind = ElKind.part - this._area = undefined + this._place = undefined this._coords = UndefinedElCoords this._width = Transaction.separate(() => new Size()) this._height = Transaction.separate(() => new Size()) @@ -175,7 +175,7 @@ export class ElImpl implements El { } prepareForUpdate(): void { - this._area = undefined // reset + this._place = undefined // reset this._hasStylingPresets = false // reset } @@ -193,8 +193,8 @@ export class ElImpl implements El { } } - get area(): ElArea { return this._area } - set area(value: ElArea) { + get place(): ElPlace { return this._place } + set place(value: ElPlace) { const node = this.node const driver = node.driver if (!driver.isPartition) { @@ -212,7 +212,7 @@ export class ElImpl implements El { ElImpl.applyCoords(this, coords) this._coords = coords } - this._area = value ?? {} + this._place = value ?? {} } else this.rowBreak() @@ -825,12 +825,12 @@ const UndefinedElCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 }) export const InitialElLayoutInfo: ElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none, effectiveSizePx: 0, offsetXpx: 0, offsetYpx: 0, contentSizeXpx: 0, contentSizeYpx: 0, borderSizeXpx: 0, borderSizeYpx: 0, isConstrained: false })) function getElCoordsAndAdjustLayoutInfo( - isRegularElement: boolean, area: ElArea, maxX: number, maxY: number, + isRegularElement: boolean, place: ElPlace, maxX: number, maxY: number, prevElLayoutInfo: ElLayoutInfo, layoutInfo?: ElLayoutInfo): ElCoords { let result: ElCoords // this comment just prevents syntax highlighting in VS code - if (typeof (area) === "string") { + if (typeof (place) === "string") { // Absolute positioning - result = parseElCoords(area, { x1: 0, y1: 0, x2: 0, y2: 0 }) + result = parseElCoords(place, { x1: 0, y1: 0, x2: 0, y2: 0 }) absolutizeElCoords(result, prevElLayoutInfo.x, prevElLayoutInfo.y, maxX || Infinity, maxY || Infinity, result) if (layoutInfo) { @@ -843,11 +843,11 @@ function getElCoordsAndAdjustLayoutInfo( // Relative positioning let dx: number let dy: number // this comment just prevents syntax highlighting in VS code - if (area) { - dx = area.cellsOverWidth ?? 1 - dy = area.cellsOverHeight ?? 1 + if (place) { + dx = place.cellsOverWidth ?? 1 + dy = place.cellsOverHeight ?? 1 } - else // area === undefined + else // place === undefined dx = dy = 1 // Arrange const runningX = maxX !== 0 ? maxX : prevElLayoutInfo.runningMaxX @@ -907,20 +907,20 @@ function getElCoordsAndAdjustLayoutInfo( return result } -function absolutizeElCoords(area: ElCoords, +function absolutizeElCoords(place: ElCoords, cursorX: number, cursorY: number, maxWidth: number, maxHeight: number, result: ElCoords): ElCoords { // X1, X2 - const x1 = absolutizePosition(area.x1, cursorX, maxWidth) - const x2 = absolutizePosition(area.x2, x1, maxWidth) + 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 // Y1, Y2 - const y1 = absolutizePosition(area.y1, cursorY, maxHeight) - const y2 = absolutizePosition(area.y2, y1, maxHeight) + const y1 = absolutizePosition(place.y1, cursorY, maxHeight) + const y2 = absolutizePosition(place.y2, y1, maxHeight) if (y1 <= y2) result.y1 = y1, result.y2 = y2 else diff --git a/source/html/Elements.ts b/source/html/Elements.ts index 4975ff4..4add810 100644 --- a/source/html/Elements.ts +++ b/source/html/Elements.ts @@ -6,7 +6,7 @@ // automatically licensed under the license referred above. import { RxNodeDecl, RxNodeDriver, RxNode, Delegate, Mode, MergeList, MergedItem, unobs } from "reactronic" -import { Constants, CursorCommandDriver, El, ElKind, ElArea, ElDriver, ElImpl, Direction, ElLayoutInfo, InitialElLayoutInfo } from "./El.js" +import { Constants, CursorCommandDriver, El, ElKind, ElPlace, ElDriver, ElImpl, Direction, ElLayoutInfo, InitialElLayoutInfo } from "./El.js" import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, relayout, relayoutUsingSplitter } from "./SplitViewMath.js" import { Axis, BodyFontSize, Dimension, SizeConverterOptions, toPx } from "./Sizes.js" import { HtmlDriver } from "./HtmlDriver.js" @@ -135,10 +135,10 @@ export function declareSplitter(index: number, splitViewNode: RxNode>): ) } -export function cursor(areaParams: ElArea): void { +export function cursor(areaParams: ElPlace): void { RxNode.declare(Drivers.cursor, { onChange: el => { - el.area = areaParams + el.place = areaParams }, }) } diff --git a/source/html/HtmlDriver.ts b/source/html/HtmlDriver.ts index 3f17c75..b786559 100644 --- a/source/html/HtmlDriver.ts +++ b/source/html/HtmlDriver.ts @@ -74,10 +74,10 @@ export class WebDriver extends ElDriver { if (element instanceof ElImpl) element.prepareForUpdate() const result = super.update(node) - if (element.area === undefined) { + if (element.place === undefined) { const oel = node.owner.element if (oel instanceof ElImpl && oel.isTable) - element.area = undefined // automatic placement in table + element.place = undefined // automatic placement in table } if (gBlinkingEffectMarker) blink(element.native, RxNode.currentUpdatePriority, node.stamp)