Class Constraint<T>

Note: the preferred way to create a constraint is with cjs(value) or cjs.constraint(value).

A constraint communicates with the constraint solver to store and maintain a value. Its value can be a plain value, a function that computes it (whose dependencies are tracked automatically), or another constraint to follow.

Example

var x = cjs(1),
        y = cjs(function() { return x.get() + 1; });
    y.get(); // 2
    x.set(10);
    y.get(); // 11

Type Parameters

T = any

Index

Constructors

constructor

new Constraint<T = any>(
value?: ConstraintSource<T>,
options?: ConstraintOptions<NoInfer<T>>,
): Constraint<T>
Type Parameters
- T = any
Parameters
- Optionalvalue: ConstraintSource<T>
  The initial value, a function to compute it, or a constraint to follow
- Optionaloptions: ConstraintOptions<NoInfer<T>>
  How the value is computed and tracked
Returns Constraint<T>
- Defined in constraint.ts:111

Methods

abs

abs(): Constraint<number>
Math.abs(this)

Returns Constraint<number>
- Defined in constraint.ts:581

acos

acos(): Constraint<number>
Math.acos(this)

Returns Constraint<number>
Example
```
angle = r.div(x).acos();
```
- Defined in constraint.ts:591

add

add(...args: unknown[]): Constraint
this + args[0] + args[1] + .... Also concatenates strings, which is handy for units.
Parameters
- ...args: unknown[]
Returns Constraint
Example
```
x = y.add(1, 2, z); // x <- y + 1 + 2 + z
    x = y.add("px");    // x <- y + "px"
```
- Defined in constraint.ts:546

and

and(...args: unknown[]): Constraint
false if this or any of args is falsy; otherwise the last value. Evaluation stops at the first falsy value (so, for example, cjs(false).and(a) never reads a).
Parameters
- ...args: unknown[]
Returns Constraint
Example
```
var x = c1.and(c2, c3, true);
```
- Defined in constraint.ts:467

asin

asin(): Constraint<number>
Math.asin(this)

Returns Constraint<number>
Example
```
angle = r.div(y).asin();
```
- Defined in constraint.ts:601

atan

atan(): Constraint<number>
Math.atan(this)

Returns Constraint<number>
Example
```
angle = y.div(x).atan();
```
- Defined in constraint.ts:611

atan2

atan2(x: unknown): Constraint<number>
Math.atan2(this, x)
Parameters
- x: unknown
Returns Constraint<number>
Example
```
angle = y.atan2(x);
```
- Defined in constraint.ts:621

bitwiseAnd

bitwiseAnd(other: unknown): Constraint<number>
this & other
Parameters
- other: unknown
Returns Constraint<number>
- Defined in constraint.ts:841

bitwiseNot

bitwiseNot(): Constraint<number>
~this

Returns Constraint<number>
Example
```
inverseBits = val.bitwiseNot();
```
- Defined in constraint.ts:751

bitwiseOr

bitwiseOr(other: unknown): Constraint<number>
this | other
Parameters
- other: unknown
Returns Constraint<number>
- Defined in constraint.ts:846

ceil

ceil(): Constraint<number>
Math.ceil(this)

Returns Constraint<number>
- Defined in constraint.ts:691

cos

cos(): Constraint<number>
Math.cos(this)

Returns Constraint<number>
Example
```
dx = r.mul(angle.cos());
```
- Defined in constraint.ts:631

destroy

destroy(silent?: boolean): this
Removes every dependency and change listener, so that this constraint can be garbage collected.
Parameters
- Optionalsilent: boolean
  If true, don't invalidate the constraints that depended on this one
Returns this
See
remove
Example
```
var x = cjs(1);
    x.destroy(); // ...x is no longer needed
```
- Defined in constraint.ts:305

div

div(...args: unknown[]): Constraint<number>
this / args[0] / args[1] / ...
Parameters
- ...args: unknown[]
Returns Constraint<number>
Example
```
x = y.div(1, 2, z); // x <- y / 1 / 2 / z
```
- Defined in constraint.ts:576

eq

eq(other: unknown): Constraint<boolean>
this == other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
isNull = val.eq(null);
```
- Defined in constraint.ts:761

eqStrict

eqStrict(other: unknown): Constraint<boolean>
this === other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
isOne = val.eqStrict(1);
```
- Defined in constraint.ts:781

exp

exp(): Constraint<number>
e to the power of this, Math.exp(this)

Returns Constraint<number>
- Defined in constraint.ts:711

floor

floor(): Constraint<number>
Math.floor(this)

Returns Constraint<number>
- Defined in constraint.ts:686

ge

ge(other: unknown): Constraint<boolean>
this >= other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
isBig = val.ge(100);
```
- Defined in constraint.ts:821

get

get(autoAddOutgoing?: boolean, getterArg?: unknown): T
Get the current value of this constraint, recomputing it first if it is invalid.
Parameters
- OptionalautoAddOutgoing: boolean
  Whether a constraint that is computing its value right now should start depending on this one (default: true)
- OptionalgetterArg: unknown
  Passed as the second argument to this constraint's getter function, if it recomputes
Returns T
See
set
Example
```
var x = cjs(1);
    x.get(); // 1
```
- Defined in constraint.ts:130

gt

gt(other: unknown): Constraint<boolean>
this > other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
isPositive = val.gt(0);
```
- Defined in constraint.ts:801

iif

iif(trueValue: unknown, otherValue: unknown): Constraint
Inline if, like this ? trueValue : otherValue.
Parameters
- trueValue: unknown
- otherValue: unknown
Returns Constraint
Example
```
var x = is_selected.iif(selected_val, nonselected_val);
```
- Defined in constraint.ts:503

inFSM

inFSM(fsm: FSM, values: Record<string, ConstraintSource<T>>): this
Change this constraint's value depending on the state of an FSM.
Parameters
- fsm: FSM
- values: Record<string, ConstraintSource<T>>
  For each state name, the value this constraint should have in that state
Returns this
Example
```
var fsm = cjs.fsm("state1", "state2")
                 .addTransition("state1", "state2", cjs.on("click"));
    var x = cjs().inFSM(fsm, {
        state1: 'val1',
        state2: function() { return 'val2'; }
    });
```
- Defined in constraint.ts:447

instanceOf

instanceOf(other: unknown): Constraint<boolean>
this instanceof other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
var valIsArray = val.instanceOf(Array);
```
- Defined in constraint.ts:891

invalidate

invalidate(): this

Mark this constraint's value as invalid, so that it is recomputed the next time it's read. Anything that depends on it is invalidated too.

Returns this

See

isValid

Example

Tracking the window height
    var height = cjs(function() { return window.innerHeight; });
    window.addEventListener("resize", function() {
        height.invalidate();
    });

isValid

isValid(): boolean

Whether this constraint's cached value is up to date. An invalid value is only recomputed when it's next read (for example, with .get()).

Returns boolean

See

invalidate

Example

var x = cjs(1),
        y = x.add(2);
    y.get();     // 3
    y.isValid(); // true
    x.set(2);
    y.isValid(); // false
    y.get();     // 4
    y.isValid(); // true

le

le(other: unknown): Constraint<boolean>
this <= other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
isSmall = val.le(100);
```
- Defined in constraint.ts:831

leftShift

leftShift(other: unknown): Constraint<number>
this << other
Parameters
- other: unknown
Returns Constraint<number>
- Defined in constraint.ts:866

log

log(): Constraint<number>
The natural logarithm, Math.log(this)

Returns Constraint<number>
Example
```
num_digits = num.max(2).log().div(Math.log(10)).ceil();
```
- Defined in constraint.ts:706

lt

lt(other: unknown): Constraint<boolean>
this < other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
isNegative = val.lt(0);
```
- Defined in constraint.ts:811

max

max(...args: unknown[]): Constraint<number>
The largest of this and args: Math.max(this, ...args)
Parameters
- ...args: unknown[]
Returns Constraint<number>
Example
```
val = val1.max(val2, val3);
```
- Defined in constraint.ts:656

min

min(...args: unknown[]): Constraint<number>
The smallest of this and args: Math.min(this, ...args)
Parameters
- ...args: unknown[]
Returns Constraint<number>
Example
```
val = val1.min(val2, val3);
```
- Defined in constraint.ts:666

mod

mod(other: unknown): Constraint<number>
this % other
Parameters
- other: unknown
Returns Constraint<number>
Example
```
isEven = x.mod(2).eq(0);
```
- Defined in constraint.ts:856

mul

mul(...args: unknown[]): Constraint<number>
this * args[0] * args[1] * ...
Parameters
- ...args: unknown[]
Returns Constraint<number>
Example
```
x = y.mul(1, 2, z); // x <- y * 1 * 2 * z
```
- Defined in constraint.ts:566

neg

neg(): Constraint<number>
-this

Returns Constraint<number>
Example
```
neg_val = x.neg();
```
- Defined in constraint.ts:731

neq

neq(other: unknown): Constraint<boolean>
this != other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
notNull = val.neq(null);
```
- Defined in constraint.ts:771

neqStrict

neqStrict(other: unknown): Constraint<boolean>
this !== other
Parameters
- other: unknown
Returns Constraint<boolean>
Example
```
notOne = val.neqStrict(1);
```
- Defined in constraint.ts:791

not

not(): Constraint<boolean>
!this

Returns Constraint<boolean>
Example
```
opposite = x.not();
```
- Defined in constraint.ts:741

offChange

offChange(callback: (...args: any[]) => unknown, thisArg?: unknown): this
Removes the most recently added listener for callback. If thisArg is given, only a listener that was added with that thisArg is removed.
Parameters
- callback: (...args: any[]) => unknown
- OptionalthisArg: unknown
Returns this
See
onChange
Example
```
var x = cjs(1),
        callback = function() {};
    x.onChange(callback);
    // ...
    x.offChange(callback);
```
- Defined in constraint.ts:421

onChange

onChange(
    callback: (...args: any[]) => unknown,
    thisArg?: unknown,
    ...args: unknown[],
): this
Call callback when this constraint's value is invalidated. If it is invalidated several times before listeners run (for example, in a cjs.wait() batch), callback is only called once.
Parameters
- callback: (...args: any[]) => unknown
- OptionalthisArg: unknown
  The this for callback (default: the global object)
- ...args: unknown[]
  Arguments to pass to callback
Returns this
See
offChange
Example
```
var x = cjs(1);
    x.onChange(function() {
        console.log("x is " + x.get());
    });
    x.set(2); // x is 2
```
- Defined in constraint.ts:379

onChangeWithPriority

onChangeWithPriority(
    priority: number | false,
    callback: (...args: any[]) => unknown,
    thisArg?: unknown,
    ...args: unknown[],
): this
Like onChange, but listeners with a higher priority are called before those with a lower one (or none).
Parameters
- priority: number | false
- callback: (...args: any[]) => unknown
- OptionalthisArg: unknown
- ...args: unknown[]
Returns this
- Defined in constraint.ts:387

or

or(...args: unknown[]): Constraint
The first truthy value out of this and args, or false if none are. Evaluation stops at the first truthy value (so, for example, cjs(true).or(b) never reads b).
Parameters
- ...args: unknown[]
Returns Constraint
Example
```
var x = c1.or(c2, c3, false);
```
- Defined in constraint.ts:486

pauseGetter

pauseGetter(temporaryValue?: unknown): this
Signal that this constraint's value will be computed later (for example, asynchronously). Until resumeGetter is called, get() returns temporaryValue. Call this from inside the constraint's getter function.
Parameters
- OptionaltemporaryValue: unknown
Returns this
See
resumeGetter
Example
```
var data = cjs(function(node) {
        node.pauseGetter("loading...");
        fetchData(function(result) {
            node.resumeGetter(result);
        });
    });
```
- Defined in constraint.ts:327

pos

pos(): Constraint<number>
Converts to a number: +this

Returns Constraint<number>
Example
```
numeric_val = val.pos();
```
- Defined in constraint.ts:721

pow

pow(exponent: unknown): Constraint<number>
Math.pow(this, exponent)
Parameters
- exponent: unknown
Returns Constraint<number>
Example
```
d = dx.pow(2).add(dy.pow(2)).sqrt();
```
- Defined in constraint.ts:676

prop

prop(...names: unknown[]): Constraint
A property of this constraint's value, like this[names[0]][names[1]]....
Parameters
- ...names: unknown[]
Returns Constraint
Example
```
w = x.prop("y", "z"); // w <- x.y.z
```
- Defined in constraint.ts:513

remove

remove(silent?: boolean): this
Removes every dependency to and from this constraint.
Parameters
- Optionalsilent: boolean
  If true, don't invalidate the constraints that depended on this one
Returns this

See
destroy
- Defined in constraint.ts:280

resumeGetter

resumeGetter(value?: unknown): this
Signal that this constraint, which was paused with pauseGetter, now has a value.
Parameters
- Optionalvalue: unknown
Returns this

See
pauseGetter
- Defined in constraint.ts:337

rightShift

rightShift(other: unknown): Constraint<number>
this >> other
Parameters
- other: unknown
Returns Constraint<number>
- Defined in constraint.ts:861

round

round(): Constraint<number>
Math.round(this)

Returns Constraint<number>
- Defined in constraint.ts:681

set

set(value: ConstraintSource<T>, options?: { silent?: boolean }): this
Change the value of this constraint. Anything that depends on it is invalidated.
Parameters
- value: ConstraintSource<T>
  The new value, a function to compute it, or a constraint to follow
- Optionaloptions: { silent?: boolean }
  silent: true updates the value without invalidating anything that depends on it
Returns this
See
- get
- invalidate
Example
```
var x = cjs(1);
   x.get(); // 1
   x.set(function() { return 2; });
   x.get(); // 2
   x.set('c');
   x.get(); // 'c'
```
- Defined in constraint.ts:197

setOption

setOption(options: ConstraintOptions<T>): this

Change how this constraint's value is computed (see ConstraintOptions).

Parameters

options: ConstraintOptions<T>

Returns this

Example

var x = cjs(function() { return 1; });
    x.get(); // 1
    x.setOption({ literal: true, auto_add_outgoing_dependencies: false });
    x.get(); // (function)

    x.setOption("literal", false);
    x.get(); // 1

setOption<K extends keyof ConstraintOptions<T>>(
key: K,
value: ConstraintOptions<T>[K],
): this
Change how this constraint's value is computed (see ConstraintOptions).
Type Parameters
- K extends keyof ConstraintOptions<T>
Parameters
- key: K
- value: ConstraintOptions<T>[K]
Returns this
Example
```
var x = cjs(function() { return 1; });
    x.get(); // 1
    x.setOption({ literal: true, auto_add_outgoing_dependencies: false });
    x.get(); // (function)

    x.setOption("literal", false);
    x.get(); // 1
```
- Defined in constraint.ts:228

sin

sin(): Constraint<number>
Math.sin(this)

Returns Constraint<number>
Example
```
dy = r.mul(angle.sin());
```
- Defined in constraint.ts:641

sqrt

sqrt(): Constraint<number>
Math.sqrt(this)

Returns Constraint<number>
- Defined in constraint.ts:696

sub

sub(...args: unknown[]): Constraint<number>
this - args[0] - args[1] - ...
Parameters
- ...args: unknown[]
Returns Constraint<number>
Example
```
x = y.sub(1, 2, z); // x <- y - 1 - 2 - z
```
- Defined in constraint.ts:556

tan

tan(): Constraint<number>
Math.tan(this)

Returns Constraint<number>
- Defined in constraint.ts:646

toFloat

toFloat(): Constraint<number>
parseFloat(this)

Returns Constraint<number>
Example
```
Given an `<input />` element `inp_elem`
    var inp_val = cjs(inp_elem).toFloat();
```
- Defined in constraint.ts:535

toInt

toInt(radix?: unknown): Constraint<number>
parseInt(this, radix)
Parameters
- Optionalradix: unknown
Returns Constraint<number>
Example
```
Given an `<input />` element `inp_elem`
    var inp_val = cjs(inp_elem).toInt();
```
- Defined in constraint.ts:525

typeOf

typeOf(): Constraint<string>
typeof this

Returns Constraint<string>
Example
```
var valIsNumber = val.typeOf().eq('number');
```
- Defined in constraint.ts:881

unsignedRightShift

unsignedRightShift(other: unknown): Constraint<number>
this >>> other
Parameters
- other: unknown
Returns Constraint<number>
- Defined in constraint.ts:871

xor

xor(other: unknown): Constraint<number>
this ^ other
Parameters
- other: unknown
Returns Constraint<number>
- Defined in constraint.ts:836

Class Constraint<T>

Example

Type Parameters

Index

Constructors

Methods

Constructors

constructor

Type Parameters

Parameters

Returns Constraint<T>

Methods

abs

Returns Constraint<number>

acos

Returns Constraint<number>

Example

add

Parameters

Returns Constraint

Example

and

Parameters

Returns Constraint

Example

asin

Returns Constraint<number>

Example

atan

Returns Constraint<number>

Example

atan2

Parameters

Returns Constraint<number>

Example

bitwiseAnd

Parameters

Returns Constraint<number>

bitwiseNot

Returns Constraint<number>

Example

bitwiseOr

Parameters

Returns Constraint<number>

ceil

Returns Constraint<number>

cos

Returns Constraint<number>

Example

destroy

Parameters

Returns this

See

Example

div

Parameters

Returns Constraint<number>

Example

eq

Parameters

Returns Constraint<boolean>

Example

eqStrict

Parameters

Returns Constraint<boolean>

Example

exp

Returns Constraint<number>

floor

Returns Constraint<number>

ge

Parameters

Returns Constraint<boolean>

Example

get

Parameters

Returns T

See

Example

gt