init claude-code
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
import type { LayoutNode } from './node.js'
|
||||
import { createYogaLayoutNode } from './yoga.js'
|
||||
|
||||
export function createLayoutNode(): LayoutNode {
|
||||
return createYogaLayoutNode()
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
export type Point = {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export type Size = {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export type Rectangle = Point & Size
|
||||
|
||||
/** Edge insets (padding, margin, border) */
|
||||
export type Edges = {
|
||||
top: number
|
||||
right: number
|
||||
bottom: number
|
||||
left: number
|
||||
}
|
||||
|
||||
/** Create uniform edges */
|
||||
export function edges(all: number): Edges
|
||||
export function edges(vertical: number, horizontal: number): Edges
|
||||
export function edges(
|
||||
top: number,
|
||||
right: number,
|
||||
bottom: number,
|
||||
left: number,
|
||||
): Edges
|
||||
export function edges(a: number, b?: number, c?: number, d?: number): Edges {
|
||||
if (b === undefined) {
|
||||
return { top: a, right: a, bottom: a, left: a }
|
||||
}
|
||||
if (c === undefined) {
|
||||
return { top: a, right: b, bottom: a, left: b }
|
||||
}
|
||||
return { top: a, right: b, bottom: c, left: d! }
|
||||
}
|
||||
|
||||
/** Add two edge values */
|
||||
export function addEdges(a: Edges, b: Edges): Edges {
|
||||
return {
|
||||
top: a.top + b.top,
|
||||
right: a.right + b.right,
|
||||
bottom: a.bottom + b.bottom,
|
||||
left: a.left + b.left,
|
||||
}
|
||||
}
|
||||
|
||||
/** Zero edges constant */
|
||||
export const ZERO_EDGES: Edges = { top: 0, right: 0, bottom: 0, left: 0 }
|
||||
|
||||
/** Convert partial edges to full edges with defaults */
|
||||
export function resolveEdges(partial?: Partial<Edges>): Edges {
|
||||
return {
|
||||
top: partial?.top ?? 0,
|
||||
right: partial?.right ?? 0,
|
||||
bottom: partial?.bottom ?? 0,
|
||||
left: partial?.left ?? 0,
|
||||
}
|
||||
}
|
||||
|
||||
export function unionRect(a: Rectangle, b: Rectangle): Rectangle {
|
||||
const minX = Math.min(a.x, b.x)
|
||||
const minY = Math.min(a.y, b.y)
|
||||
const maxX = Math.max(a.x + a.width, b.x + b.width)
|
||||
const maxY = Math.max(a.y + a.height, b.y + b.height)
|
||||
return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
|
||||
}
|
||||
|
||||
export function clampRect(rect: Rectangle, size: Size): Rectangle {
|
||||
const minX = Math.max(0, rect.x)
|
||||
const minY = Math.max(0, rect.y)
|
||||
const maxX = Math.min(size.width - 1, rect.x + rect.width - 1)
|
||||
const maxY = Math.min(size.height - 1, rect.y + rect.height - 1)
|
||||
return {
|
||||
x: minX,
|
||||
y: minY,
|
||||
width: Math.max(0, maxX - minX + 1),
|
||||
height: Math.max(0, maxY - minY + 1),
|
||||
}
|
||||
}
|
||||
|
||||
export function withinBounds(size: Size, point: Point): boolean {
|
||||
return (
|
||||
point.x >= 0 &&
|
||||
point.y >= 0 &&
|
||||
point.x < size.width &&
|
||||
point.y < size.height
|
||||
)
|
||||
}
|
||||
|
||||
export function clamp(value: number, min?: number, max?: number): number {
|
||||
if (min !== undefined && value < min) return min
|
||||
if (max !== undefined && value > max) return max
|
||||
return value
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
// --
|
||||
// Adapter interface for the layout engine (Yoga)
|
||||
|
||||
export const LayoutEdge = {
|
||||
All: 'all',
|
||||
Horizontal: 'horizontal',
|
||||
Vertical: 'vertical',
|
||||
Left: 'left',
|
||||
Right: 'right',
|
||||
Top: 'top',
|
||||
Bottom: 'bottom',
|
||||
Start: 'start',
|
||||
End: 'end',
|
||||
} as const
|
||||
export type LayoutEdge = (typeof LayoutEdge)[keyof typeof LayoutEdge]
|
||||
|
||||
export const LayoutGutter = {
|
||||
All: 'all',
|
||||
Column: 'column',
|
||||
Row: 'row',
|
||||
} as const
|
||||
export type LayoutGutter = (typeof LayoutGutter)[keyof typeof LayoutGutter]
|
||||
|
||||
export const LayoutDisplay = {
|
||||
Flex: 'flex',
|
||||
None: 'none',
|
||||
} as const
|
||||
export type LayoutDisplay = (typeof LayoutDisplay)[keyof typeof LayoutDisplay]
|
||||
|
||||
export const LayoutFlexDirection = {
|
||||
Row: 'row',
|
||||
RowReverse: 'row-reverse',
|
||||
Column: 'column',
|
||||
ColumnReverse: 'column-reverse',
|
||||
} as const
|
||||
export type LayoutFlexDirection =
|
||||
(typeof LayoutFlexDirection)[keyof typeof LayoutFlexDirection]
|
||||
|
||||
export const LayoutAlign = {
|
||||
Auto: 'auto',
|
||||
Stretch: 'stretch',
|
||||
FlexStart: 'flex-start',
|
||||
Center: 'center',
|
||||
FlexEnd: 'flex-end',
|
||||
} as const
|
||||
export type LayoutAlign = (typeof LayoutAlign)[keyof typeof LayoutAlign]
|
||||
|
||||
export const LayoutJustify = {
|
||||
FlexStart: 'flex-start',
|
||||
Center: 'center',
|
||||
FlexEnd: 'flex-end',
|
||||
SpaceBetween: 'space-between',
|
||||
SpaceAround: 'space-around',
|
||||
SpaceEvenly: 'space-evenly',
|
||||
} as const
|
||||
export type LayoutJustify = (typeof LayoutJustify)[keyof typeof LayoutJustify]
|
||||
|
||||
export const LayoutWrap = {
|
||||
NoWrap: 'nowrap',
|
||||
Wrap: 'wrap',
|
||||
WrapReverse: 'wrap-reverse',
|
||||
} as const
|
||||
export type LayoutWrap = (typeof LayoutWrap)[keyof typeof LayoutWrap]
|
||||
|
||||
export const LayoutPositionType = {
|
||||
Relative: 'relative',
|
||||
Absolute: 'absolute',
|
||||
} as const
|
||||
export type LayoutPositionType =
|
||||
(typeof LayoutPositionType)[keyof typeof LayoutPositionType]
|
||||
|
||||
export const LayoutOverflow = {
|
||||
Visible: 'visible',
|
||||
Hidden: 'hidden',
|
||||
Scroll: 'scroll',
|
||||
} as const
|
||||
export type LayoutOverflow =
|
||||
(typeof LayoutOverflow)[keyof typeof LayoutOverflow]
|
||||
|
||||
export type LayoutMeasureFunc = (
|
||||
width: number,
|
||||
widthMode: LayoutMeasureMode,
|
||||
) => { width: number; height: number }
|
||||
|
||||
export const LayoutMeasureMode = {
|
||||
Undefined: 'undefined',
|
||||
Exactly: 'exactly',
|
||||
AtMost: 'at-most',
|
||||
} as const
|
||||
export type LayoutMeasureMode =
|
||||
(typeof LayoutMeasureMode)[keyof typeof LayoutMeasureMode]
|
||||
|
||||
export type LayoutNode = {
|
||||
// Tree
|
||||
insertChild(child: LayoutNode, index: number): void
|
||||
removeChild(child: LayoutNode): void
|
||||
getChildCount(): number
|
||||
getParent(): LayoutNode | null
|
||||
|
||||
// Layout computation
|
||||
calculateLayout(width?: number, height?: number): void
|
||||
setMeasureFunc(fn: LayoutMeasureFunc): void
|
||||
unsetMeasureFunc(): void
|
||||
markDirty(): void
|
||||
|
||||
// Layout reading (post-layout)
|
||||
getComputedLeft(): number
|
||||
getComputedTop(): number
|
||||
getComputedWidth(): number
|
||||
getComputedHeight(): number
|
||||
getComputedBorder(edge: LayoutEdge): number
|
||||
getComputedPadding(edge: LayoutEdge): number
|
||||
|
||||
// Style setters
|
||||
setWidth(value: number): void
|
||||
setWidthPercent(value: number): void
|
||||
setWidthAuto(): void
|
||||
setHeight(value: number): void
|
||||
setHeightPercent(value: number): void
|
||||
setHeightAuto(): void
|
||||
setMinWidth(value: number): void
|
||||
setMinWidthPercent(value: number): void
|
||||
setMinHeight(value: number): void
|
||||
setMinHeightPercent(value: number): void
|
||||
setMaxWidth(value: number): void
|
||||
setMaxWidthPercent(value: number): void
|
||||
setMaxHeight(value: number): void
|
||||
setMaxHeightPercent(value: number): void
|
||||
setFlexDirection(dir: LayoutFlexDirection): void
|
||||
setFlexGrow(value: number): void
|
||||
setFlexShrink(value: number): void
|
||||
setFlexBasis(value: number): void
|
||||
setFlexBasisPercent(value: number): void
|
||||
setFlexWrap(wrap: LayoutWrap): void
|
||||
setAlignItems(align: LayoutAlign): void
|
||||
setAlignSelf(align: LayoutAlign): void
|
||||
setJustifyContent(justify: LayoutJustify): void
|
||||
setDisplay(display: LayoutDisplay): void
|
||||
getDisplay(): LayoutDisplay
|
||||
setPositionType(type: LayoutPositionType): void
|
||||
setPosition(edge: LayoutEdge, value: number): void
|
||||
setPositionPercent(edge: LayoutEdge, value: number): void
|
||||
setOverflow(overflow: LayoutOverflow): void
|
||||
setMargin(edge: LayoutEdge, value: number): void
|
||||
setPadding(edge: LayoutEdge, value: number): void
|
||||
setBorder(edge: LayoutEdge, value: number): void
|
||||
setGap(gutter: LayoutGutter, value: number): void
|
||||
|
||||
// Lifecycle
|
||||
free(): void
|
||||
freeRecursive(): void
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
import Yoga, {
|
||||
Align,
|
||||
Direction,
|
||||
Display,
|
||||
Edge,
|
||||
FlexDirection,
|
||||
Gutter,
|
||||
Justify,
|
||||
MeasureMode,
|
||||
Overflow,
|
||||
PositionType,
|
||||
Wrap,
|
||||
type Node as YogaNode,
|
||||
} from 'src/native-ts/yoga-layout/index.js'
|
||||
import {
|
||||
type LayoutAlign,
|
||||
LayoutDisplay,
|
||||
type LayoutEdge,
|
||||
type LayoutFlexDirection,
|
||||
type LayoutGutter,
|
||||
type LayoutJustify,
|
||||
type LayoutMeasureFunc,
|
||||
LayoutMeasureMode,
|
||||
type LayoutNode,
|
||||
type LayoutOverflow,
|
||||
type LayoutPositionType,
|
||||
type LayoutWrap,
|
||||
} from './node.js'
|
||||
|
||||
// --
|
||||
// Edge/Gutter mapping
|
||||
|
||||
const EDGE_MAP: Record<LayoutEdge, Edge> = {
|
||||
all: Edge.All,
|
||||
horizontal: Edge.Horizontal,
|
||||
vertical: Edge.Vertical,
|
||||
left: Edge.Left,
|
||||
right: Edge.Right,
|
||||
top: Edge.Top,
|
||||
bottom: Edge.Bottom,
|
||||
start: Edge.Start,
|
||||
end: Edge.End,
|
||||
}
|
||||
|
||||
const GUTTER_MAP: Record<LayoutGutter, Gutter> = {
|
||||
all: Gutter.All,
|
||||
column: Gutter.Column,
|
||||
row: Gutter.Row,
|
||||
}
|
||||
|
||||
// --
|
||||
// Yoga adapter
|
||||
|
||||
export class YogaLayoutNode implements LayoutNode {
|
||||
readonly yoga: YogaNode
|
||||
|
||||
constructor(yoga: YogaNode) {
|
||||
this.yoga = yoga
|
||||
}
|
||||
|
||||
// Tree
|
||||
|
||||
insertChild(child: LayoutNode, index: number): void {
|
||||
this.yoga.insertChild((child as YogaLayoutNode).yoga, index)
|
||||
}
|
||||
|
||||
removeChild(child: LayoutNode): void {
|
||||
this.yoga.removeChild((child as YogaLayoutNode).yoga)
|
||||
}
|
||||
|
||||
getChildCount(): number {
|
||||
return this.yoga.getChildCount()
|
||||
}
|
||||
|
||||
getParent(): LayoutNode | null {
|
||||
const p = this.yoga.getParent()
|
||||
return p ? new YogaLayoutNode(p) : null
|
||||
}
|
||||
|
||||
// Layout
|
||||
|
||||
calculateLayout(width?: number, _height?: number): void {
|
||||
this.yoga.calculateLayout(width, undefined, Direction.LTR)
|
||||
}
|
||||
|
||||
setMeasureFunc(fn: LayoutMeasureFunc): void {
|
||||
this.yoga.setMeasureFunc((w, wMode) => {
|
||||
const mode =
|
||||
wMode === MeasureMode.Exactly
|
||||
? LayoutMeasureMode.Exactly
|
||||
: wMode === MeasureMode.AtMost
|
||||
? LayoutMeasureMode.AtMost
|
||||
: LayoutMeasureMode.Undefined
|
||||
return fn(w, mode)
|
||||
})
|
||||
}
|
||||
|
||||
unsetMeasureFunc(): void {
|
||||
this.yoga.unsetMeasureFunc()
|
||||
}
|
||||
|
||||
markDirty(): void {
|
||||
this.yoga.markDirty()
|
||||
}
|
||||
|
||||
// Computed layout
|
||||
|
||||
getComputedLeft(): number {
|
||||
return this.yoga.getComputedLeft()
|
||||
}
|
||||
|
||||
getComputedTop(): number {
|
||||
return this.yoga.getComputedTop()
|
||||
}
|
||||
|
||||
getComputedWidth(): number {
|
||||
return this.yoga.getComputedWidth()
|
||||
}
|
||||
|
||||
getComputedHeight(): number {
|
||||
return this.yoga.getComputedHeight()
|
||||
}
|
||||
|
||||
getComputedBorder(edge: LayoutEdge): number {
|
||||
return this.yoga.getComputedBorder(EDGE_MAP[edge]!)
|
||||
}
|
||||
|
||||
getComputedPadding(edge: LayoutEdge): number {
|
||||
return this.yoga.getComputedPadding(EDGE_MAP[edge]!)
|
||||
}
|
||||
|
||||
// Style setters
|
||||
|
||||
setWidth(value: number): void {
|
||||
this.yoga.setWidth(value)
|
||||
}
|
||||
setWidthPercent(value: number): void {
|
||||
this.yoga.setWidthPercent(value)
|
||||
}
|
||||
setWidthAuto(): void {
|
||||
this.yoga.setWidthAuto()
|
||||
}
|
||||
setHeight(value: number): void {
|
||||
this.yoga.setHeight(value)
|
||||
}
|
||||
setHeightPercent(value: number): void {
|
||||
this.yoga.setHeightPercent(value)
|
||||
}
|
||||
setHeightAuto(): void {
|
||||
this.yoga.setHeightAuto()
|
||||
}
|
||||
setMinWidth(value: number): void {
|
||||
this.yoga.setMinWidth(value)
|
||||
}
|
||||
setMinWidthPercent(value: number): void {
|
||||
this.yoga.setMinWidthPercent(value)
|
||||
}
|
||||
setMinHeight(value: number): void {
|
||||
this.yoga.setMinHeight(value)
|
||||
}
|
||||
setMinHeightPercent(value: number): void {
|
||||
this.yoga.setMinHeightPercent(value)
|
||||
}
|
||||
setMaxWidth(value: number): void {
|
||||
this.yoga.setMaxWidth(value)
|
||||
}
|
||||
setMaxWidthPercent(value: number): void {
|
||||
this.yoga.setMaxWidthPercent(value)
|
||||
}
|
||||
setMaxHeight(value: number): void {
|
||||
this.yoga.setMaxHeight(value)
|
||||
}
|
||||
setMaxHeightPercent(value: number): void {
|
||||
this.yoga.setMaxHeightPercent(value)
|
||||
}
|
||||
|
||||
setFlexDirection(dir: LayoutFlexDirection): void {
|
||||
const map: Record<LayoutFlexDirection, FlexDirection> = {
|
||||
row: FlexDirection.Row,
|
||||
'row-reverse': FlexDirection.RowReverse,
|
||||
column: FlexDirection.Column,
|
||||
'column-reverse': FlexDirection.ColumnReverse,
|
||||
}
|
||||
this.yoga.setFlexDirection(map[dir]!)
|
||||
}
|
||||
|
||||
setFlexGrow(value: number): void {
|
||||
this.yoga.setFlexGrow(value)
|
||||
}
|
||||
setFlexShrink(value: number): void {
|
||||
this.yoga.setFlexShrink(value)
|
||||
}
|
||||
setFlexBasis(value: number): void {
|
||||
this.yoga.setFlexBasis(value)
|
||||
}
|
||||
setFlexBasisPercent(value: number): void {
|
||||
this.yoga.setFlexBasisPercent(value)
|
||||
}
|
||||
|
||||
setFlexWrap(wrap: LayoutWrap): void {
|
||||
const map: Record<LayoutWrap, Wrap> = {
|
||||
nowrap: Wrap.NoWrap,
|
||||
wrap: Wrap.Wrap,
|
||||
'wrap-reverse': Wrap.WrapReverse,
|
||||
}
|
||||
this.yoga.setFlexWrap(map[wrap]!)
|
||||
}
|
||||
|
||||
setAlignItems(align: LayoutAlign): void {
|
||||
const map: Record<LayoutAlign, Align> = {
|
||||
auto: Align.Auto,
|
||||
stretch: Align.Stretch,
|
||||
'flex-start': Align.FlexStart,
|
||||
center: Align.Center,
|
||||
'flex-end': Align.FlexEnd,
|
||||
}
|
||||
this.yoga.setAlignItems(map[align]!)
|
||||
}
|
||||
|
||||
setAlignSelf(align: LayoutAlign): void {
|
||||
const map: Record<LayoutAlign, Align> = {
|
||||
auto: Align.Auto,
|
||||
stretch: Align.Stretch,
|
||||
'flex-start': Align.FlexStart,
|
||||
center: Align.Center,
|
||||
'flex-end': Align.FlexEnd,
|
||||
}
|
||||
this.yoga.setAlignSelf(map[align]!)
|
||||
}
|
||||
|
||||
setJustifyContent(justify: LayoutJustify): void {
|
||||
const map: Record<LayoutJustify, Justify> = {
|
||||
'flex-start': Justify.FlexStart,
|
||||
center: Justify.Center,
|
||||
'flex-end': Justify.FlexEnd,
|
||||
'space-between': Justify.SpaceBetween,
|
||||
'space-around': Justify.SpaceAround,
|
||||
'space-evenly': Justify.SpaceEvenly,
|
||||
}
|
||||
this.yoga.setJustifyContent(map[justify]!)
|
||||
}
|
||||
|
||||
setDisplay(display: LayoutDisplay): void {
|
||||
this.yoga.setDisplay(display === 'flex' ? Display.Flex : Display.None)
|
||||
}
|
||||
|
||||
getDisplay(): LayoutDisplay {
|
||||
return this.yoga.getDisplay() === Display.None
|
||||
? LayoutDisplay.None
|
||||
: LayoutDisplay.Flex
|
||||
}
|
||||
|
||||
setPositionType(type: LayoutPositionType): void {
|
||||
this.yoga.setPositionType(
|
||||
type === 'absolute' ? PositionType.Absolute : PositionType.Relative,
|
||||
)
|
||||
}
|
||||
|
||||
setPosition(edge: LayoutEdge, value: number): void {
|
||||
this.yoga.setPosition(EDGE_MAP[edge]!, value)
|
||||
}
|
||||
|
||||
setPositionPercent(edge: LayoutEdge, value: number): void {
|
||||
this.yoga.setPositionPercent(EDGE_MAP[edge]!, value)
|
||||
}
|
||||
|
||||
setOverflow(overflow: LayoutOverflow): void {
|
||||
const map: Record<LayoutOverflow, Overflow> = {
|
||||
visible: Overflow.Visible,
|
||||
hidden: Overflow.Hidden,
|
||||
scroll: Overflow.Scroll,
|
||||
}
|
||||
this.yoga.setOverflow(map[overflow]!)
|
||||
}
|
||||
|
||||
setMargin(edge: LayoutEdge, value: number): void {
|
||||
this.yoga.setMargin(EDGE_MAP[edge]!, value)
|
||||
}
|
||||
setPadding(edge: LayoutEdge, value: number): void {
|
||||
this.yoga.setPadding(EDGE_MAP[edge]!, value)
|
||||
}
|
||||
setBorder(edge: LayoutEdge, value: number): void {
|
||||
this.yoga.setBorder(EDGE_MAP[edge]!, value)
|
||||
}
|
||||
setGap(gutter: LayoutGutter, value: number): void {
|
||||
this.yoga.setGap(GUTTER_MAP[gutter]!, value)
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
|
||||
free(): void {
|
||||
this.yoga.free()
|
||||
}
|
||||
freeRecursive(): void {
|
||||
this.yoga.freeRecursive()
|
||||
}
|
||||
}
|
||||
|
||||
// --
|
||||
// Instance management
|
||||
//
|
||||
// The TS yoga-layout port is synchronous — no WASM loading, no linear memory
|
||||
// growth, so no preload/swap/reset machinery is needed. The Yoga instance is
|
||||
// just a plain JS object available at import time.
|
||||
|
||||
export function createYogaLayoutNode(): LayoutNode {
|
||||
return new YogaLayoutNode(Yoga.Node.create())
|
||||
}
|
||||
Reference in New Issue
Block a user