Skip to content

WidthSizable

Overview

WidthSizable is a trait that provides a minimum and preferred width. The minimum width is set by the component, so that layout containers could know how "small" the component can be made. The preferred width is set by the layout container, and the component should adjust its size so that it takes up that width.

@author Jonathan Olson <jonathan.olson@colorado.edu>

Type TWidthSizable

import type { TWidthSizable } from 'scenerystack/scenery';
  • preferredWidthProperty: TinyProperty<number | null>
  • minimumWidthProperty: TinyProperty<number | null>
  • localPreferredWidthProperty: TinyProperty<number | null>
  • localMinimumWidthProperty: TinyProperty<number | null>
  • isWidthResizableProperty: TinyProperty<boolean>
  • preferredWidth: number | null
  • localPreferredWidth: number | null
  • minimumWidth: number | null
  • localMinimumWidth: number | null
  • widthSizable: boolean
  • _preferredSizeChanging: boolean
    @mixin-protected - made public for use in the mixin only
  • _minimumSizeChanging: boolean
  • _preferredSizeChangeAttemptDuringLock: boolean
  • _minimumSizeChangeAttemptDuringLock: boolean
  • _updatePreferredWidthListener: () => void
  • _updateLocalPreferredWidthListener: () => void
  • _updateMinimumWidthListener: () => void
  • _updateLocalMinimumWidthListener: () => void

Type WidthSizableNode

Some typescript gymnastics to provide a user-defined type guard that treats something as widthSizable We need to define an unused function with a concrete type, so that we can extract the return type of the function and provide a type for a Node that extends this type.

import type { WidthSizableNode } from 'scenerystack/scenery';

Node & TWidthSizable

Type WidthSizableOptions

import type { WidthSizableOptions } from 'scenerystack/scenery';
  • preferredWidth?: number | null
    Sets the preferred width of the Node in the parent coordinate frame. Nodes that implement this will attempt to keep their node.width at this value. If null, the node will likely set its configuration to the minimum width. NOTE: changing this or localPreferredWidth will adjust the other. NOTE: preferredWidth is not guaranteed currently. The component may end up having a smaller or larger size
  • minimumWidth?: number | null
    Sets the minimum width of the Node in the parent coordinate frame. Usually not directly set by a client. Usually a resizable Node will set its localMinimumWidth (and that will get transferred to this value in the parent coordinate frame). NOTE: changing this or localMinimumWidth will adjust the other. NOTE: when the Node's transform is updated, this value is recomputed based on localMinimumWidth
  • localPreferredWidth?: number | null
    Sets the preferred width of the Node in the local coordinate frame. NOTE: changing this or preferredWidth will adjust the other. NOTE: when the Node's transform is updated, this value is recomputed based on preferredWidth NOTE: localPreferredWidth is not guaranteed currently. The component may end up having a smaller or larger size
  • localMinimumWidth?: number | null
    Sets the minimum width of the Node in the local coordinate frame. Usually set by the resizable Node itself to indicate what preferred sizes are possible. NOTE: changing this or minimumWidth will adjust the other.
  • widthSizable?: boolean
    Whether this component will have its preferred size set by things like layout containers. If this is set to false, it's recommended to set some sort of preferred size (so that it won't go to 0)

Source Code

See the source for WidthSizable.ts in the scenery repository.