pixifact 0.1.4 → 0.2.0

package/dist/compiler/typescriptCompiler.js

@@ -1,9 +1,13 @@
-import { pixiSceneDisplayProps, pixiSceneGraphicsProps, pixiSceneSpriteLikeProps, pixiSceneTextStyleProps, pixiSceneTransformProps, } from './pixiNodeSchema.js';
+import { pixiSceneDisplayProps, pixiSceneGraphicsProps, pixiSceneLayoutProps, pixiSceneRectProps, pixiSceneSpriteLikeProps, pixiSceneTextStyleProps, pixiSceneTransformProps, } from './pixiNodeSchema.js';
 const transformProps = new Set(pixiSceneTransformProps);
+const layoutProps = new Set(pixiSceneLayoutProps);
 const pixiProps = new Set(pixiSceneDisplayProps);
 const spriteProps = new Set(pixiSceneSpriteLikeProps);
 const graphicsProps = new Set(pixiSceneGraphicsProps);
+const rectProps = new Set(pixiSceneRectProps);
 const textStyleProps = new Set(pixiSceneTextStyleProps);
+const runtimeNodeTypes = new Set(['GridContainer', 'HBoxContainer', 'ScrollContainer', 'VBoxContainer', 'Rect', 'Image', 'NineImage', 'TileImage']);
+const runtimeNodeProps = new Set(['columns', 'gap', 'gapX', 'gapY', 'alignX', 'alignY', 'justify', 'direction', 'scrollX', 'scrollY']);
 export function compileSceneTemplateToTs(template, options = {}) {
     const context = new CompileContext(template, options);
     return context.compile();
@@ -13,6 +17,7 @@ class CompileContext {
     options;
     #imports = new Set();
     #pixiImports = new Set();
+    #pixiRuntimeImports = new Set();
     #runtimeImports = new Set();
     #lines = [];
     #parts = [];
@@ -72,7 +77,8 @@ class CompileContext {
                 ...[...this.#imports].filter((item) => item !== 'Container').sort(),
                 ...[...this.#pixiImports].sort(),
             ])];
-        const lines = [`import { ${imports.join(', ')} } from 'pixi.js';`, `import { Group } from 'pixifact/runtime';`];
+        const runtimeImports = ['Group', ...[...this.#pixiRuntimeImports].sort()];
+        const lines = [`import { ${imports.join(', ')} } from 'pixi.js';`, `import { ${runtimeImports.join(', ')} } from 'pixifact/runtime';`];
         for (const [texture, variable] of this.#textureImportEntries()) {
             lines.push(`import ${variable} from ${JSON.stringify(this.options.textureImports?.[texture])};`);
         }
@@ -109,7 +115,12 @@ class CompileContext {
     }
     #collectImports(node) {
         if (node.kind === 'pixi') {
-            this.#imports.add(node.type);
+            if (runtimeNodeTypes.has(node.type)) {
+                this.#pixiRuntimeImports.add(node.type);
+            }
+            else {
+                this.#imports.add(node.type);
+            }
             for (const child of node.children) {
                 this.#collectImports(child);
             }
@@ -189,7 +200,7 @@ class CompileContext {
         const variable = node.id || this.#anonymousName(node.type);
         this.#lines.push(`  const ${variable} = ${this.#constructPixiNode(node)};`);
         this.#applyNodeId(variable, node.id);
-        this.#applyPixiProps(variable, node.props);
+        this.#applyPixiProps(variable, node.props, false, undefined, node.type);
         this.#applyParentSorting(parent, node.props);
         this.#lines.push(`  ${parent}.addChild(${variable});`);
         for (const child of node.children) {
@@ -240,7 +251,7 @@ class CompileContext {
         const variable = node.id || this.#anonymousName(node.type);
         this.#lines.push(`  const ${variable} = ${this.#constructPixiNode(node)};`);
         this.#applyNodeId(variable, node.id);
-        this.#applyPixiProps(variable, node.props);
+        this.#applyPixiProps(variable, node.props, false, undefined, node.type);
         for (const child of node.children) {
             this.#compileNode(child, variable, actionsParameter);
         }
@@ -263,6 +274,9 @@ class CompileContext {
         if (node.type === 'TilingSprite') {
             return `new TilingSprite(${this.#spriteTextureOptions(node.props)})`;
         }
+        if (node.type === 'Image' || node.type === 'NineImage' || node.type === 'TileImage') {
+            return `new ${node.type}(${this.#spriteTextureOptions(node.props)})`;
+        }
         if (node.type === 'Graphics') {
             return 'new Graphics()';
         }
@@ -340,7 +354,7 @@ class CompileContext {
     #structContractSourceScene(instanceScene, contract) {
         return contract.sourceScene ?? instanceScene;
     }
-    #applyPixiProps(variable, props, instance = false, sceneInstance) {
+    #applyPixiProps(variable, props, instance = false, sceneInstance, pixiType) {
         const x = props.x;
         const y = props.y;
         if (x !== undefined || y !== undefined) {
@@ -352,6 +366,7 @@ class CompileContext {
         if (props.height !== undefined && props.shape === undefined) {
             this.#lines.push(`  ${variable}.height = ${this.#value(props.height)};`);
         }
+        this.#applyLayoutProps(variable, props);
         const scaleX = props.scaleX;
         const scaleY = props.scaleY;
         if (scaleX !== undefined || scaleY !== undefined) {
@@ -375,7 +390,16 @@ class CompileContext {
             this.#drawGraphics(variable, props);
         }
         for (const [key, value] of Object.entries(props)) {
+            if (!instance && runtimeNodeProps.has(key)) {
+                this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
+                continue;
+            }
+            if (!instance && pixiType === 'Rect' && this.#isRectProp(key)) {
+                this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
+                continue;
+            }
             const nativePixiNodeProp = transformProps.has(key)
+                || layoutProps.has(key)
                 || spriteProps.has(key)
                 || graphicsProps.has(key)
                 || key === 'text'
@@ -386,6 +410,9 @@ class CompileContext {
             if (instance && transformProps.has(key)) {
                 continue;
             }
+            if (instance && layoutProps.has(key)) {
+                continue;
+            }
             if (instance && value && typeof value === 'object') {
                 this.#applyStructProp(variable, key, value, sceneInstance);
                 continue;
@@ -397,8 +424,9 @@ class CompileContext {
     }
     #applyRootProps() {
         const props = { ...this.template.props };
-        const width = props.width;
-        const height = props.height;
+        const hasExplicitSize = props.width !== undefined || props.height !== undefined;
+        const width = hasExplicitSize ? props.width : this.options.defaultRootSize?.width;
+        const height = hasExplicitSize ? props.height : this.options.defaultRootSize?.height;
         delete props.width;
         delete props.height;
         if (width !== undefined || height !== undefined) {
@@ -406,6 +434,17 @@ class CompileContext {
         }
         this.#applyPixiProps('root', props);
     }
+    #applyLayoutProps(variable, props) {
+        const entries = pixiSceneLayoutProps.flatMap((key) => {
+            const value = props[key];
+            return value === undefined ? [] : [`${key}: ${this.#value(value)}`];
+        });
+        if (entries.length === 0) {
+            return;
+        }
+        this.#pixiRuntimeImports.add('setFrameLayout');
+        this.#lines.push(`  setFrameLayout(${variable}, { ${entries.join(', ')} });`);
+    }
     #applyStructProp(variable, key, value, sceneInstance) {
         const contract = this.#sceneInstanceStructContract(sceneInstance, key);
         if (!contract) {
@@ -432,6 +471,9 @@ class CompileContext {
         if (props.tint !== undefined) {
             this.#lines.push(`  ${variable}.tint = ${this.#value(props.tint)};`);
         }
+        if (props.fit !== undefined) {
+            this.#lines.push(`  ${variable}.fit = ${this.#value(props.fit)};`);
+        }
         for (const key of ['leftWidth', 'rightWidth', 'topHeight', 'bottomHeight', 'tileRotation']) {
             const value = props[key];
             if (value !== undefined) {
@@ -519,6 +561,9 @@ class CompileContext {
     #isTextStyleProp(key) {
         return textStyleProps.has(key);
     }
+    #isRectProp(key) {
+        return rectProps.has(key);
+    }
     #anonymousName(type) {
         this.#nextId += 1;
         return `${type.charAt(0).toLowerCase()}${type.slice(1)}${this.#nextId}`;

package/dist/project/index.d.ts

@@ -1,3 +1,4 @@
+import { type PixifactViewportConfig } from '../viewport.js';
 export declare const pixifactProjectConfigFileName = "pixifact.project.json";
 export interface PixifactProjectRunConfig {
     command: string;
@@ -13,15 +14,19 @@ export interface PixifactProjectConfig {
     version: 1;
     name: string;
     resolution: PixifactProjectResolution;
+    viewport: PixifactProjectViewport;
     scenes: Record<string, string>;
     run?: PixifactProjectRunConfig;
 }
+export type PixifactProjectViewport = PixifactViewportConfig;
 export interface PixifactProjectSummary {
     name: string;
     resolution: PixifactProjectResolution;
+    viewport: PixifactProjectViewport;
     scenes: Record<string, string>;
     run?: PixifactProjectRunConfig;
 }
 export declare const defaultPixifactProjectResolution: PixifactProjectResolution;
+export declare const defaultPixifactProjectViewport: PixifactProjectViewport;
 export declare function parsePixifactProjectConfig(value: unknown): PixifactProjectConfig;
 export declare function summarizePixifactProjectConfig(config: PixifactProjectConfig): PixifactProjectSummary;

package/dist/project/index.js

@@ -1,8 +1,12 @@
+import { pixifactViewportModes, } from '../viewport.js';
 export const pixifactProjectConfigFileName = 'pixifact.project.json';
 export const defaultPixifactProjectResolution = {
     width: 750,
     height: 1334,
 };
+export const defaultPixifactProjectViewport = {
+    mode: 'showAll',
+};
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -62,6 +66,22 @@ function parseResolution(value) {
         height: assertPositiveNumber(resolution.height, 'resolution.height'),
     };
 }
+function parseViewport(value) {
+    if (value === undefined) {
+        return defaultPixifactProjectViewport;
+    }
+    const viewport = assertRecord(value, 'viewport');
+    const mode = assertString(viewport.mode, 'viewport.mode');
+    if (!isPixifactViewportMode(mode)) {
+        throw new Error(`viewport.mode must be one of ${pixifactViewportModes.join(', ')}`);
+    }
+    return {
+        mode,
+    };
+}
+function isPixifactViewportMode(value) {
+    return pixifactViewportModes.includes(value);
+}
 function parseRun(value) {
     if (value === undefined) {
         return undefined;
@@ -86,6 +106,7 @@ export function parsePixifactProjectConfig(value) {
         version: 1,
         name: assertString(config.name, 'name'),
         resolution: parseResolution(config.resolution),
+        viewport: parseViewport(config.viewport),
         scenes: parseScenes(config.scenes),
         run: parseRun(config.run),
     };
@@ -94,6 +115,7 @@ export function summarizePixifactProjectConfig(config) {
     return {
         name: config.name,
         resolution: config.resolution,
+        viewport: config.viewport,
         scenes: config.scenes,
         ...(config.run === undefined ? {} : { run: config.run }),
     };

package/dist/runtime/Control.d.ts

@@ -0,0 +1,18 @@
+import type { GroupOptions } from './Group.js';
+import { Group } from './Group.js';
+export declare class Control extends Group {
+    #private;
+    constructor(options?: GroupOptions);
+    get left(): number | undefined;
+    set left(value: number | undefined);
+    get right(): number | undefined;
+    set right(value: number | undefined);
+    get top(): number | undefined;
+    set top(value: number | undefined);
+    get bottom(): number | undefined;
+    set bottom(value: number | undefined);
+    get horizontal(): number | undefined;
+    set horizontal(value: number | undefined);
+    get vertical(): number | undefined;
+    set vertical(value: number | undefined);
+}

package/dist/runtime/Control.js

@@ -0,0 +1,49 @@
+import { Group } from './Group.js';
+import { getFrameLayout, setFrameLayout, } from './frameLayout.js';
+export class Control extends Group {
+    constructor(options = {}) {
+        super(options);
+    }
+    get left() {
+        return this.#layoutProp('left');
+    }
+    set left(value) {
+        this.#setLayoutProp('left', value);
+    }
+    get right() {
+        return this.#layoutProp('right');
+    }
+    set right(value) {
+        this.#setLayoutProp('right', value);
+    }
+    get top() {
+        return this.#layoutProp('top');
+    }
+    set top(value) {
+        this.#setLayoutProp('top', value);
+    }
+    get bottom() {
+        return this.#layoutProp('bottom');
+    }
+    set bottom(value) {
+        this.#setLayoutProp('bottom', value);
+    }
+    get horizontal() {
+        return this.#layoutProp('horizontal');
+    }
+    set horizontal(value) {
+        this.#setLayoutProp('horizontal', value);
+    }
+    get vertical() {
+        return this.#layoutProp('vertical');
+    }
+    set vertical(value) {
+        this.#setLayoutProp('vertical', value);
+    }
+    #layoutProp(prop) {
+        return getFrameLayout(this)[prop];
+    }
+    #setLayoutProp(prop, value) {
+        setFrameLayout(this, { [prop]: value });
+    }
+}

package/dist/runtime/GridContainer.d.ts

@@ -0,0 +1,25 @@
+import { Control } from './Control.js';
+import type { GroupOptions } from './Group.js';
+export declare class GridContainer extends Control {
+    #private;
+    constructor(options?: GroupOptions);
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    setSize(value: number | {
+        width: number;
+        height?: number;
+    }, height?: number): void;
+    get columns(): number;
+    set columns(value: number);
+    get gapX(): number;
+    set gapX(value: number);
+    get gapY(): number;
+    set gapY(value: number);
+    get alignX(): string;
+    set alignX(value: string);
+    get alignY(): string;
+    set alignY(value: string);
+    layout(): void;
+}

package/dist/runtime/GridContainer.js

@@ -0,0 +1,115 @@
+import { Control } from './Control.js';
+import { finiteNumber, layoutChild, parseStackAlign, stackAlignOffset, stackChildSize, } from './stackLayout.js';
+export class GridContainer extends Control {
+    #columns = 1;
+    #gapX = 0;
+    #gapY = 0;
+    #alignX = 'start';
+    #alignY = 'start';
+    #explicitWidth = false;
+    #explicitHeight = false;
+    constructor(options = {}) {
+        super(options);
+        this.#explicitWidth = options.width !== undefined;
+        this.#explicitHeight = options.height !== undefined;
+    }
+    get width() {
+        return super.width;
+    }
+    set width(value) {
+        this.#explicitWidth = true;
+        super.width = value;
+    }
+    get height() {
+        return super.height;
+    }
+    set height(value) {
+        this.#explicitHeight = true;
+        super.height = value;
+    }
+    setSize(value, height) {
+        this.#explicitWidth = true;
+        this.#explicitHeight = true;
+        super.setSize(value, height);
+    }
+    get columns() {
+        return this.#columns;
+    }
+    set columns(value) {
+        this.#columns = Math.max(1, Math.floor(finiteNumber(value, 1)));
+        this.layout();
+    }
+    get gapX() {
+        return this.#gapX;
+    }
+    set gapX(value) {
+        this.#gapX = Math.max(0, finiteNumber(value, 0));
+        this.layout();
+    }
+    get gapY() {
+        return this.#gapY;
+    }
+    set gapY(value) {
+        this.#gapY = Math.max(0, finiteNumber(value, 0));
+        this.layout();
+    }
+    get alignX() {
+        return this.#alignX;
+    }
+    set alignX(value) {
+        this.#alignX = parseStackAlign(value);
+        this.layout();
+    }
+    get alignY() {
+        return this.#alignY;
+    }
+    set alignY(value) {
+        this.#alignY = parseStackAlign(value);
+        this.layout();
+    }
+    layout() {
+        const children = this.children;
+        const metrics = measureGrid(children, this.#columns, this.#gapX, this.#gapY);
+        const width = this.#explicitWidth ? this.width : metrics.width;
+        const height = this.#explicitHeight ? this.height : metrics.height;
+        if (width !== this.width || height !== this.height) {
+            this.setBoxSize(width, height);
+        }
+        let rowY = 0;
+        for (let row = 0; row < metrics.rowHeights.length; row++) {
+            let columnX = 0;
+            for (let column = 0; column < metrics.columnWidths.length; column++) {
+                const child = children[row * this.#columns + column];
+                if (child) {
+                    const size = stackChildSize(child);
+                    child.position.set(columnX + stackAlignOffset(this.#alignX, Math.max(0, metrics.columnWidths[column] - size.width)), rowY + stackAlignOffset(this.#alignY, Math.max(0, metrics.rowHeights[row] - size.height)));
+                    layoutChild(child);
+                }
+                columnX += metrics.columnWidths[column] + this.#gapX;
+            }
+            rowY += metrics.rowHeights[row] + this.#gapY;
+        }
+    }
+}
+function measureGrid(children, columns, gapX, gapY) {
+    if (children.length === 0) {
+        return { width: 0, height: 0, columnWidths: [], rowHeights: [] };
+    }
+    const columnCount = Math.min(columns, children.length);
+    const rowCount = Math.ceil(children.length / columns);
+    const columnWidths = Array.from({ length: columnCount }, () => 0);
+    const rowHeights = Array.from({ length: rowCount }, () => 0);
+    for (let index = 0; index < children.length; index++) {
+        const child = children[index];
+        const column = index % columns;
+        const row = Math.floor(index / columns);
+        columnWidths[column] = Math.max(columnWidths[column], child.width);
+        rowHeights[row] = Math.max(rowHeights[row], child.height);
+    }
+    return {
+        width: columnWidths.reduce((sum, width) => sum + width, 0) + gapX * Math.max(0, columnWidths.length - 1),
+        height: rowHeights.reduce((sum, height) => sum + height, 0) + gapY * Math.max(0, rowHeights.length - 1),
+        columnWidths,
+        rowHeights,
+    };
+}

package/dist/runtime/Group.d.ts

@@ -15,4 +15,6 @@ export declare class Group extends Container {
         width: number;
         height?: number;
     }, height?: number): void;
+    layout(): void;
+    protected setBoxSize(width: number, height: number): void;
 }

package/dist/runtime/Group.js

@@ -1,27 +1,30 @@
 import { Container, Rectangle } from 'pixi.js';
+import { layoutFrameChildren } from './frameLayout.js';
 export class Group extends Container {
     #width = 0;
     #height = 0;
     constructor(options = {}) {
         const { width, height, ...containerOptions } = options;
         super(containerOptions);
+        this.on('childAdded', this.#layoutChildren, this);
+        this.on('childRemoved', this.#layoutChildren, this);
         if (width !== undefined || height !== undefined) {
-            this.setSize(width ?? 0, height ?? 0);
+            this.#setBoxSize(width ?? 0, height ?? 0);
         }
     }
     get width() {
         return this.#width;
     }
     set width(value) {
-        this.#width = value;
-        this.#syncHitArea();
+        this.#setBoxSize(value, this.#height);
+        this.layout();
     }
     get height() {
         return this.#height;
     }
     set height(value) {
-        this.#height = value;
-        this.#syncHitArea();
+        this.#setBoxSize(this.#width, value);
+        this.layout();
     }
     getSize(out = { width: 0, height: 0 }) {
         out.width = this.#width;
@@ -30,16 +33,33 @@ export class Group extends Container {
     }
     setSize(value, height) {
         if (typeof value === 'number') {
-            this.#width = value;
-            this.#height = height ?? value;
+            this.#setBoxSize(value, height ?? value);
         }
         else {
-            this.#width = value.width;
-            this.#height = value.height ?? value.width;
+            this.#setBoxSize(value.width, value.height ?? value.width);
         }
+        this.layout();
+    }
+    layout() {
+        this.#applyFrameLayout();
+    }
+    setBoxSize(width, height) {
+        this.#setBoxSize(width, height);
+    }
+    #setBoxSize(width, height) {
+        this.#width = width;
+        this.#height = height;
         this.#syncHitArea();
     }
+    #layoutChildren() {
+        this.layout();
+    }
+    #applyFrameLayout() {
+        layoutFrameChildren(this);
+    }
     #syncHitArea() {
-        this.hitArea = new Rectangle(0, 0, this.#width, this.#height);
+        const bounds = new Rectangle(0, 0, this.#width, this.#height);
+        this.hitArea = bounds;
+        this.boundsArea = bounds;
     }
 }

package/dist/runtime/HBoxContainer.d.ts

@@ -0,0 +1,21 @@
+import { Control } from './Control.js';
+import type { GroupOptions } from './Group.js';
+export declare class HBoxContainer extends Control {
+    #private;
+    constructor(options?: GroupOptions);
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    setSize(value: number | {
+        width: number;
+        height?: number;
+    }, height?: number): void;
+    get gap(): number;
+    set gap(value: number);
+    get alignY(): string;
+    set alignY(value: string);
+    get justify(): string;
+    set justify(value: string);
+    layout(): void;
+}

package/dist/runtime/HBoxContainer.js

@@ -0,0 +1,74 @@
+import { Control } from './Control.js';
+import { finiteNumber, layoutChild, measureStackNaturalSize, parseStackAlign, parseStackJustify, stackAlignOffset, stackChildSize, stackJustifyOffset, } from './stackLayout.js';
+export class HBoxContainer extends Control {
+    #gap = 0;
+    #alignY = 'start';
+    #justify = 'start';
+    #explicitWidth = false;
+    #explicitHeight = false;
+    constructor(options = {}) {
+        super(options);
+        this.#explicitWidth = options.width !== undefined;
+        this.#explicitHeight = options.height !== undefined;
+    }
+    get width() {
+        return super.width;
+    }
+    set width(value) {
+        this.#explicitWidth = true;
+        super.width = value;
+    }
+    get height() {
+        return super.height;
+    }
+    set height(value) {
+        this.#explicitHeight = true;
+        super.height = value;
+    }
+    setSize(value, height) {
+        this.#explicitWidth = true;
+        this.#explicitHeight = true;
+        super.setSize(value, height);
+    }
+    get gap() {
+        return this.#gap;
+    }
+    set gap(value) {
+        this.#gap = Math.max(0, finiteNumber(value, 0));
+        this.layout();
+    }
+    get alignY() {
+        return this.#alignY;
+    }
+    set alignY(value) {
+        this.#alignY = parseStackAlign(value);
+        this.layout();
+    }
+    get justify() {
+        return this.#justify;
+    }
+    set justify(value) {
+        this.#justify = parseStackJustify(value);
+        this.layout();
+    }
+    layout() {
+        const children = this.children;
+        const natural = measureStackNaturalSize('horizontal', children, this.#gap);
+        const width = this.#explicitWidth ? this.width : natural.width;
+        const height = this.#explicitHeight ? this.height : natural.height;
+        if (width !== this.width || height !== this.height) {
+            this.setBoxSize(width, height);
+        }
+        const remaining = Math.max(0, width - natural.width);
+        const gap = this.#justify === 'space-between' && children.length > 1
+            ? this.#gap + remaining / (children.length - 1)
+            : this.#gap;
+        let cursor = stackJustifyOffset(this.#justify, remaining);
+        for (const child of children) {
+            const size = stackChildSize(child);
+            child.position.set(cursor, stackAlignOffset(this.#alignY, Math.max(0, height - size.height)));
+            layoutChild(child);
+            cursor += size.width + gap;
+        }
+    }
+}

package/dist/runtime/Image.d.ts

@@ -0,0 +1,47 @@
+import { Mesh, Texture, type MeshOptions, type Size } from 'pixi.js';
+export type ImageFit = 'stretch' | 'contain' | 'cover' | 'none';
+export type ImageOptions = Omit<MeshOptions, 'geometry' | 'texture'> & {
+    texture?: Texture;
+    width?: number;
+    height?: number;
+    fit?: ImageFit;
+    anchorX?: number;
+    anchorY?: number;
+};
+export declare class Image extends Mesh {
+    #private;
+    constructor(options?: ImageOptions);
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    getSize(out?: Size): Size;
+    setSize(value: number | {
+        width: number;
+        height?: number;
+    }, height?: number): void;
+    get texture(): Texture;
+    set texture(value: Texture);
+    get fit(): ImageFit;
+    set fit(value: ImageFit);
+    get anchor(): {
+        x: number;
+        y: number;
+    } | number;
+    set anchor(value: {
+        x: number;
+        y: number;
+    } | number);
+    get left(): number | undefined;
+    set left(value: number | undefined);
+    get right(): number | undefined;
+    set right(value: number | undefined);
+    get top(): number | undefined;
+    set top(value: number | undefined);
+    get bottom(): number | undefined;
+    set bottom(value: number | undefined);
+    get horizontal(): number | undefined;
+    set horizontal(value: number | undefined);
+    get vertical(): number | undefined;
+    set vertical(value: number | undefined);
+}