Module: scaler

Manages the translation of art from PSD to the stage.
-Handles scaling, screen density, resize events and layout projection.
There are two units used to measure distance information:
- `pixels` are the physical pixels on screen. This unit will be double for a 2x retina screen.
- `points` are screen density independent units, that match CSS units.
Artboards represent the PSD (art) document dimensions.
- When a layout is translated from Photoshop to the screen, positions are calculated based on artboard projections, set via `configureArtboard()` method.
Source:

Classes

ArtboardProjection

Members

(inner, readonly) scale :number

Default projection scale factor. Convenience alias of `scaler.proj.default.scale`.
- These properties are used to convert from PSD pts to layout pts.
Type:
  • number
Source:
Example
let tenPt = scaler.scale * 10.0*0.5; // Convert 10px in a retina PSD to screen points

(inner, readonly) scaleUI :number

UI projection scale factor. Convenience alias of `scaler.proj.ui.scale`.
Type:
  • number
Source:

(inner, readonly) stageH :number

The stage height, in points.
Type:
  • number
Source:

(inner, readonly) stageW :number

The stage width, in points.
Type:
  • number
Source:

Methods

(static) configureArtboard(artboardDims, artboardScaleFactor, artboardProjectionParams)

Configures how layouts will be translated to the screen.
- To be called before storymode#createApp
Parameters:
Name Type Description
artboardDims Object Defines the width and height of all PSD docs, in pts. Note: All PSD docs need to have the same dimensions.
Properties
Name Type Description
width number
height number
artboardScaleFactor number The density of the artboard. Eg. If the PSD is x2 retina, then this will be set to 2.0.
artboardProjectionParams Object.<string, module:scaler#ProjectionConfig> Used to create the artboard projections. Both `default` and `ui` should be present.
Source:
Example
const artboardDims = {width: Math.round(1080.0*0.5), height:Math.round(1920.0*0.5)}; 
const artboardScaleFactor = 2.0; // How many px in a pt in art
const artboardProjectionParams = {
  default: {
    alignment: {x:0, y:0}, // -1 (left/top) 0:(centered) 1:(right/bottom) 
    scaleToFit: 'contain', // `w` / `h` / `contain` / 'cover' (case insensitive). 
    minDensity: 1.0 // Limits up scaling. Eg. 1.0 will scale no larger than SD on retina. 
  },
  ui: {
    matchProjScale: 'default', // Match the scale of other projection before applying own limits 
    pinToProj: 'default', // Other projection will be used to position 
    minScale: 1, // Lock scale to no smaller than pts match with art.
    maxScale: 1.2 // Avoid oversized UI elements
  }
};
scaler.configureArtboard(artboardDims, artboardScaleFactor, artboardProjectionParams);

ProjectionConfig(alignment, scaleFunctionopt, scaleToFitopt, matchProjScaleopt, minDensityopt, pinToProjopt, minScaleopt, maxScaleopt)

Represents the core paramters of a projection.
Parameters:
Name Type Attributes Default Description
alignment Vector Value pair for horizontal and vertical alignment..
-1: (left/top)
0: (centered)
1: (right/bottom).
Eg. {x:0,y:0} for centered.
scaleFunction module:scaler#ScaleFunction <optional>
 null Will call a function at runtime to calculate the scale for the projection for a given width and height.
scaleToFit 'w' | 'h' | 'contain' | 'cover' <optional>
 'contain' How the artboard will be scaled relative to the stage.
- 'w': Match stage width.
- 'h': Match stage height.
- 'contain': Scale to fit inside stage.
- 'cover': Scale to fill entire stage.
matchProjScale string <optional>
 null A projection slug that will be used as the starting point for the projection settings.
minDensity number <optional>
 1.0 Limits up scaling. Eg. 1.0 will scale no larger than SD on retina.
pinToProj string <optional>
 null Projection slug to be used for positioning
minScale number <optional>
 null Minimum scale. `1.0` will match PSD (accounting for retina).
maxScale number <optional>
 null Maximum scale.
Source:

ScaleFunction(stageWidth, stageHeight)

Informs projection of scale required for a given stage dimension.
Parameters:
Name Type Description
stageWidth number
stageHeight number
Source:

(inner) isFullScreen() → {boolean}

Indicates whether the app is currently being presented full-screen (or full-browser).
Source:
Returns:
isFullScreen
Type
boolean

(inner) off(eventName, listener, context)

Cancel an event listener.
Parameters:
Name Type Description
eventName string The event identifier.
listener function The function to call.
context Object The scope in which to call the function.
Source:

(inner) on(eventName, listener, context)

Listen for event.
- See https://nodejs.org/api/events.html#eventsonemitter-eventname-options.
Parameters:
Name Type Description
eventName string The event identifier.
listener function The function to call.
context Object The scope in which to call the function (ie. defines `this`).
Source:
Example
scaler.on('resize', this.onStageResize, this); // 3rd arg is function scope

(inner) supportsFullScreen() → {boolean}

Indicates whether the current browser supports full screen functionality.
- This includes fullbrowser support (if enabled).
Source:
Returns:
fullscreenSupported
Type
boolean

(inner) toggleFullScreen({string|DOMElement})

Toggles full-screen / full-browser presentation mode.
- The CSS class `fullscreen` will be added to the containing element when fullscreen is applied.
Parameters:
Name Type Description
{string|DOMElement} string [resizeTarget=null] - The element to resize. Ignored for full-browser. Optionally the HTML DOMElement id can be supplied as a string or use `cv` to target the PIXI canvas. Will default to the html tag of the page.
Source:

Events

fullscreenchange

Called when fullscreen mode changes.
Properties:
Name Type Description
isFullScreen boolean Whether the app is now being displayed in full-screen (or full-browser).
Source:
Example
scaler.on('fullscreenchange', this.syncState, this); // 3rd arg is function scope
dispose(){
 scaler.off('fullscreenchange', this.syncState, this);
}

resize

Called when stage is resized. The call frequency of method is debounced (throttled).
- This call is made *after* `scaler.stageW` and `scaler.stageH` properties have been updated.
Properties:
Name Type Description
stageWidth number Stage width (in pts).
stageHeight number Stage height (in pts).
Source:
Example
scaler.on('resize', this.onStageResize, this);
function onStageResize(stageW, stageH){
 // ...
}
scaler.off('resize', this.onStageResize, this); // Cancel

resize_immediate

Called when stage is resized, though the call is not debounced.
Properties:
Name Type Description
stageWidth number Stage width (in pts).
stageHeight number Stage height (in pts).
Source: