completed typedefs for cassowary; switched to cassowary-ts;

package.json

@@ -6,14 +6,14 @@
   "main": "dist/albert.js",
   "module": "src/index.js",
   "dependencies": {
-    "cassowary": "0.0.2"
+    "cassowary-ts": "^1.1.0"
   },
   "devDependencies": {
     "ts-loader": "^5.3.3",
-    "typescript": "^3.3.4000",
-    "webpack": "^4.27.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.2.1"
+    "typescript": "^3.4.3",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
   },
   "scripts": {
     "build": "webpack",

src/Circle.ts

@@ -0,0 +1,57 @@
+import Renderable from './Renderable';
+import Attributes from './Attributes';
+import { omit, createElement } from './utils';
+import { Variable, Expression } from 'cassowary-ts';
+import { variable, expression } from './helpers';
+
+
+export default class Circle implements Renderable {
+  private attributes_: Attributes;
+
+  public cx: Variable;
+  public cy: Variable;
+  public r: Variable;
+
+  public centerX: Expression;
+  public centerY: Expression;
+  public leftEdge: Expression;
+  public rightEdge: Expression;
+  public topEdge: Expression;
+  public bottomEdge: Expression;
+  public x: Expression;
+  public y: Expression;
+  public width: Expression;
+  public height: Expression;
+
+  constructor(attributes: Attributes = {}) {
+    this.attributes_ = omit(attributes, ["cx", "cy", "r"]);
+
+    const idPrefix = attributes.id ? attributes.id + ":" : "";
+
+    this.cx = variable(idPrefix + "circle.cx", attributes.cx as number);
+    this.cy = variable(idPrefix + "circle.cy", attributes.cy as number);
+    this.r = variable(idPrefix + "circle.r", attributes.r as number);
+
+    this.centerX = expression(this.cx);
+    this.centerY = expression(this.cy);
+    this.leftEdge = this.centerX.minus(this.r);
+    this.rightEdge = this.centerX.plus(this.r);
+    this.topEdge = this.centerY.minus(this.r);
+    this.bottomEdge = this.centerY.plus(this.r);
+    this.x = this.leftEdge;
+    this.y = this.topEdge;
+    this.width = expression(this.r).times(2);
+    this.height = this.width;
+  }
+
+
+  render() {
+    const el = createElement("circle", this.attributes_);
+
+    el.setAttributeNS(null, "cx", `${this.cx.value}`);
+    el.setAttributeNS(null, "cy", `${this.cy.value}`);
+    el.setAttributeNS(null, "r", `${this.r.value}`);
+
+    return el;
+  }
+}

src/EdgeConstrainable.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Expression } from "cassowary";
+import { Expression } from "cassowary-ts";
 
 export default interface EdgeConstrainable {
   leftEdge: Expression;

src/Element.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import BasicElement from "./BasicElement";
-import { Expression } from "cassowary";
+import { Expression } from "cassowary-ts";
 import { omit } from "./utils";
 import { variable } from "./helpers";
 

src/Element.ts

@@ -0,0 +1,48 @@
+import BasicElement from './BasicElement';
+import Attributes from './Attributes';
+import { omit } from './utils';
+import { variable } from './helpers';
+import { Expression, Variable } from 'cassowary-ts'
+
+export default class Element extends BasicElement {
+  public x: Variable;
+  public y: Variable;
+  public width: Variable;
+  public height: Variable;
+
+  public leftEdge: Expression;
+  public topEdge: Expression;
+  public rightEdge: Expression;
+  public bottomEdge: Expression;
+  public centerX: Expression;
+  public centerY: Expression;
+
+  constructor(tag, attributes: Attributes = {}) {
+    super(tag, omit(attributes, ["x", "y", "width", "height"]));
+
+    const idPrefix = attributes.id ? attributes.id + ":" : "";
+
+    this.x = variable(idPrefix + "x", attributes.x as number);
+    this.y = variable(idPrefix + "y", attributes.y as number);
+    this.width = variable(idPrefix + "width", attributes.width as number);
+    this.height = variable(idPrefix + "height", attributes.height as number);
+
+    this.leftEdge = new Expression(this.x);
+    this.topEdge = new Expression(this.y);
+    this.rightEdge = this.leftEdge.plus(this.width);
+    this.bottomEdge = this.topEdge.plus(this.height);
+    this.centerX = this.leftEdge.plus(new Expression(this.width).divide(2));
+    this.centerY = this.topEdge.plus(new Expression(this.height).divide(2));
+  }
+
+  render() {
+    const el = super.render();
+
+    el.setAttributeNS(null, "x", `${this.x.value}`);
+    el.setAttributeNS(null, "y", `${this.y.value}`);
+    el.setAttributeNS(null, "width", `${this.width.value}`);
+    el.setAttributeNS(null, "height", `${this.height.value}`);
+
+    return el;
+  }
+}

src/Filter.ts

@@ -0,0 +1,108 @@
+import { createElement, omit } from './utils';
+import Attributes from './Attributes';
+
+
+interface IFilterNode {
+  tag: string;
+  attributes: Attributes;
+  children: any[];
+}
+
+function createFilterNode(tag, attributes = {}, children = []): IFilterNode {
+  return { tag, attributes, children };
+}
+
+function renderFilterNode({ tag, attributes, children }) {
+  const node = createElement(tag, attributes);
+  for (const child of children) {
+    node.append(child);
+  }
+  return node;
+}
+
+export default class Filter {
+  private attributes_: Attributes
+  private filters_: IFilterNode[];
+  private mergeNodes_: any[]; // REVIEW
+
+  constructor(attributes: Attributes = {}) {
+    this.attributes_ = attributes;
+    this.filters_ = [];
+    this.mergeNodes_ = [];
+  }
+
+  addGaussianBlur(stdDeviation: any, attributes: Attributes = {}) {
+    const allAttributes = {stdDeviation, ...attributes};
+    this.filters_.push(createFilterNode("feGaussianBlur", allAttributes));
+    return this;
+  }
+
+  addOffset(x: SVGAnimatedNumber, y: SVGAnimatedNumber, attributes: Attributes = {}) {
+    const allAttributes = {dx: x, dy: y, ...attributes};
+    this.filters_.push(createFilterNode("feOffset", allAttributes));
+    return this;
+  }
+
+  addFlood(color: string, opacityOrAttributes: number | Attributes = {}, attributes: Attributes = {}) {
+    const floodAttributes = { "flood-color": color };
+    if (typeof opacityOrAttributes === "number") {
+      floodAttributes["flood-opacity"] = opacityOrAttributes;
+    } else {
+      attributes = opacityOrAttributes;
+    }
+    const allAttributes = {...floodAttributes, ...attributes};
+    this.filters_.push(createFilterNode("feFlood", allAttributes));
+    return this;
+  }
+
+  addComposite(in1: any, in2: any, attributes: Attributes = {}) { // REVIEW
+    const allAttributes = {in: in1, in2, ...attributes};
+    this.filters_.push(createFilterNode("feComposite", allAttributes));
+    return this;
+  }
+
+  addColorMatrix(type: any, valueOrAttributes: string | number | Attributes = {}, attributes: Attributes = {}) {
+    const colorMatrixAttributes: { type: SVGAnimatedEnumeration, [key: string]: any } = { type };
+    if (["string", "number"].includes(typeof valueOrAttributes)) {
+      colorMatrixAttributes.values = valueOrAttributes;
+    } else {
+      attributes = valueOrAttributes as Attributes;
+    }
+    const allAttributes = {...colorMatrixAttributes, ...attributes};
+    this.filters_.push(createFilterNode("feColorMatrix", allAttributes));
+    return this;
+  }
+
+  addComponentTransfer(attributes: Attributes = {}) {
+    const children = [];
+    const KEYS = ["r", "g", "b", "a"];
+    for (const key of KEYS) {
+      if (!attributes[key]) continue;
+      const tag = `feFunc${key.toUpperCase}`;
+      children.push(createElement(tag, attributes[key]));
+    }
+
+    this.filters_.push(createFilterNode("feComponentTransfer", omit(attributes, KEYS), children));
+    return this;
+  }
+
+  addMergeNode(attributes: Attributes = {}) {
+    this.mergeNodes_.push(createFilterNode("feMergeNode", attributes));
+    return this;
+  }
+
+  render() {
+    const root = createElement("filter", this.attributes_);
+    for (const filter of this.filters_) {
+      root.appendChild(renderFilterNode(filter));
+    }
+    if (this.mergeNodes_.length) {
+      const merge = createElement("feMerge");
+      for (const mergeNode of this.mergeNodes_) {
+        merge.appendChild(renderFilterNode(mergeNode));
+      }
+      root.appendChild(merge);
+    }
+    return root;
+  }
+}

src/FormattedText.ts

@@ -0,0 +1 @@
+// STUB this is currently just a stub of a deprecated component

src/Gradient.ts

@@ -0,0 +1,39 @@
+import { createElement } from './utils';
+import Attributes from './Attributes';
+
+
+interface IColorStop {
+  offset: string | number;
+  color: string;
+  opacity?: string;
+}
+
+function createStop(offset: any, color: any, opacity: string = undefined): IColorStop {
+  return { offset, color, opacity }
+}
+
+export default class Gradient {
+  private tag_: string;
+  private attributes_: Attributes;
+  private stops_: IColorStop[];
+
+  constructor(tag: string, attributes: Attributes = {}) {
+    this.tag_ = tag;
+    this.attributes_ = attributes;
+    this.stops_ = [];
+  }
+
+  addStop(offset, color, opacity: string = undefined) {
+    this.stops_.push(createStop(offset, color, opacity));
+    return this;
+  }
+
+  render() {
+    const gradient = createElement(this.tag_, this.attributes_);
+    for (const { offset, color, opacity } of this.stops_) {
+      const attributes = { offset, "stop-color": color, "stop-opacity": opacity };
+      gradient.appendChild(createElement("stop", attributes));
+    }
+    return gradient;
+  }
+}

src/Group.js

@@ -19,7 +19,7 @@ import {
   LEQ,
   Strength,
   Inequality
-} from "cassowary";
+} from "cassowary-ts";
 import {
   alignAll,
   distribute,