Class Component

src/components/component.ts:33–710

 * infrastructure), as well as building the framework of DOM elements for all Components.
 */
export class Component {
  /**
   * Holds all the DOM associated with this component. A direct child of the element we're
   * anchored to.
   */
  private _element: d3.Selection<HTMLElement, any, any, any>;
  /**
   * Container for the visual content that this Component displays. Subclasses should attach
   * elements onto the _content. Located in between the background and the foreground.
   */
  private _content: SimpleSelection<void>;
  /**
   * Place more objects just behind this Component's Content by appending them to the _backgroundContainer.
   */
  private _backgroundContainer: SimpleSelection<void>;
  /**
   * Place more objects just in front of this Component's Content by appending them to the _foregroundContainer.
   */
  private _foregroundContainer: SimpleSelection<void>;
  /**
   * Subclasses should set this to true in their constructor to prevent content from overflowing.
   */
  protected _overflowHidden = false;
  private _resizeHandler: IResizeHandler;
  /**
   * Origin of this Component relative to its parent.
   */
  private _origin: Point = { x: 0, y: 0 };

  /**
   * The ComponentContainer that holds this Component in its children, or null, if this
   * Component is top-level.
   */
  private _parent: ComponentContainer;
  private _xAlignment: XAlignment = "left";
  private static _xAlignToProportion: { [P in XAlignment]: number } = {
    left: 0,
    center: 0.5,
    right: 1,
  };
  private _yAlignment: YAlignment = "top";
  private static _yAlignToProportion: { [P in YAlignment]: number } = {
    top: 0,
    center: 0.5,
    bottom: 1,
  };
  protected _isSetup = false;
  protected _isAnchored = false;

  /**
   * If we're the root Component (top-level), this is the HTMLElement we've anchored to (user-supplied).
   */
  private _rootElement: d3.Selection<HTMLElement, any, any, any>;
  /**
   * width of the Component as computed in computeLayout. Used to size the hitbox, bounding box, etc
   */
  private _width: number;
  /**