jsbox-cview 1.0.0

package/components/spinners/loading-double-rings.ts

@@ -0,0 +1,121 @@
+/**
+ * # cview LoadingDoubleRings
+ */
+
+import { Base } from "../base";
+
+class CanvasComponet extends Base<UICanvasView, UiTypes.CanvasOptions> {
+  _tintColor: UIColor;
+  startAngle: number;
+  _radiusReduction: number;
+  _defineView: () => UiTypes.CanvasOptions;
+  constructor({
+    tintColor,
+    startAngle,
+    radiusReduction
+  }: {
+    tintColor: UIColor;
+    startAngle: number;
+    radiusReduction: number;
+  }) {
+    super();
+    this._tintColor = tintColor;
+    this.startAngle = startAngle;
+    this._radiusReduction = radiusReduction;
+    this._defineView = () => {
+      return {
+        type: "canvas",
+        props: {
+          id: this.id
+        },
+        layout: $layout.fill,
+        events: {
+          draw: (view, ctx) => {
+            ctx.strokeColor = this._tintColor;
+            const radius = Math.min(view.frame.width, view.frame.height);
+            ctx.setLineWidth(20);
+            ctx.setLineCap(1);
+            ctx.setLineJoin(1);
+            ctx.addArc(
+              radius / 2,
+              radius / 2,
+              radius / 2 - 20 - this._radiusReduction,
+              this.startAngle,
+              this.startAngle + (Math.PI * 2 * 1) / 4,
+              true
+            );
+            ctx.strokePath();
+          }
+        }
+      };
+    }
+  }
+
+  redraw() {
+    this.view.ocValue().invoke("setNeedsDisplay");
+  }
+}
+
+export class DoubleRings extends Base<UIView, UiTypes.ViewOptions> {
+  _defineView: () => UiTypes.ViewOptions;
+  constructor({
+    colors = [$color("#f5542e"), $color("#f2c327")],
+    layout
+  }: {
+    colors?: UIColor[];
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+  }) {
+    super();
+    const interval = 1 / 60;
+    this._defineView = () => {
+      const canvas1 = new CanvasComponet({
+        tintColor: colors[0],
+        radiusReduction: 0,
+        startAngle: (-Math.PI * 3) / 4
+      });
+      const canvas2 = new CanvasComponet({
+        tintColor: colors[0],
+        radiusReduction: 0,
+        startAngle: Math.PI / 4
+      });
+      const canvas3 = new CanvasComponet({
+        tintColor: colors[1],
+        radiusReduction: 25,
+        startAngle: -Math.PI / 4
+      });
+      const canvas4 = new CanvasComponet({
+        tintColor: colors[1],
+        radiusReduction: 25,
+        startAngle: (Math.PI * 3) / 4
+      });
+      return {
+        type: "view",
+        props: {
+          id: this.id
+        },
+        views: [
+          canvas1.definition,
+          canvas2.definition,
+          canvas3.definition,
+          canvas4.definition
+        ],
+        layout,
+        events: {
+          ready: async sender => {
+            while (sender.super) {
+              canvas1.startAngle += Math.PI * interval * -2;
+              canvas1.redraw();
+              canvas2.startAngle += Math.PI * interval * -2;
+              canvas2.redraw();
+              canvas3.startAngle += Math.PI * interval * 2;
+              canvas3.redraw();
+              canvas4.startAngle += Math.PI * interval * 2;
+              canvas4.redraw();
+              await $wait(interval);
+            }
+          }
+        }
+      };
+    }
+  }
+}

package/components/spinners/loading-dual-ring.ts

@@ -0,0 +1,90 @@
+/**
+ * # cview LoadingDualRing
+ */
+
+import { Base } from "../base";
+
+class CanvasComponet extends Base<UICanvasView, UiTypes.CanvasOptions> {
+  _tintColor: UIColor;
+  startAngle: number;
+  _defineView: () => UiTypes.CanvasOptions;
+  constructor({ tintColor, startAngle }: { tintColor: UIColor; startAngle: number }) {
+    super();
+    this._tintColor = tintColor;
+    this.startAngle = startAngle;
+    this._defineView = () => {
+      return {
+        type: "canvas",
+        props: {
+          id: this.id
+        },
+        layout: $layout.fill,
+        events: {
+          draw: (view, ctx) => {
+            ctx.strokeColor = this._tintColor;
+            const radius = Math.min(view.frame.width, view.frame.height);
+            ctx.setLineWidth(20);
+            ctx.setLineCap(1);
+            ctx.setLineJoin(1);
+            ctx.addArc(
+              radius / 2,
+              radius / 2,
+              radius / 2 - 20,
+              this.startAngle,
+              this.startAngle + (Math.PI * 2 * 1) / 4,
+              true
+            );
+            ctx.strokePath();
+          }
+        }
+      };
+    }
+  }
+
+  redraw() {
+    this.view.ocValue().invoke("setNeedsDisplay");
+  }
+}
+
+export class DualRing extends Base<UIView, UiTypes.ViewOptions> {
+  _defineView: () => UiTypes.ViewOptions;
+  constructor({ 
+    colors = [$color("#f5542e"), $color("#f2c327")],
+    layout 
+  }: {
+    colors?: UIColor[];
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+  }) {
+    super();
+    const interval = 1 / 60;
+    this._defineView = () => {
+      const canvas1 = new CanvasComponet({
+        tintColor: colors[0],
+        startAngle: (-Math.PI * 3) / 4
+      });
+      const canvas2 = new CanvasComponet({
+        tintColor: colors[1],
+        startAngle: Math.PI / 4
+      });
+      return {
+        type: "view",
+        props: {
+          id: this.id
+        },
+        views: [canvas1.definition, canvas2.definition],
+        layout,
+        events: {
+          ready: async sender => {
+            while (sender.super) {
+              canvas1.startAngle += Math.PI * interval * 2;
+              canvas1.redraw();
+              canvas2.startAngle += Math.PI * interval * 2;
+              canvas2.redraw();
+              await $wait(interval);
+            }
+          }
+        }
+      };
+    }
+  }
+}

package/components/spinners/loading-wedges.ts

@@ -0,0 +1,112 @@
+/**
+ * # cview LoadingWedges
+ */
+
+import { Base } from "../base";
+
+class CanvasComponet extends Base<UICanvasView, UiTypes.CanvasOptions> {
+  _tintColor: UIColor;
+  startAngle: number;
+  _defineView: () => UiTypes.CanvasOptions;
+  constructor({ tintColor, startAngle }: { tintColor: UIColor; startAngle: number }) {
+    super();
+    this._tintColor = tintColor;
+    this.startAngle = startAngle;
+    this._defineView = () => {
+      return {
+        type: "canvas",
+        props: {
+          id: this.id,
+          alpha: 0.8
+        },
+        layout: $layout.fill,
+        events: {
+          draw: (view, ctx) => {
+            ctx.fillColor = this._tintColor;
+            const radius = Math.min(view.frame.width, view.frame.height);
+            ctx.addArc(
+              radius / 2,
+              radius / 2,
+              radius / 2,
+              this.startAngle,
+              this.startAngle + (Math.PI * 2 * 1) / 4,
+              true
+            );
+            ctx.addLineToPoint(radius / 2, radius / 2);
+            ctx.closePath();
+            ctx.fillPath();
+          }
+        }
+      };
+    }
+  }
+
+  redraw() {
+    this.view.ocValue().invoke("setNeedsDisplay");
+  }
+}
+
+export class Wedges extends Base<UIView, UiTypes.ViewOptions> {
+  _defineView: () => UiTypes.ViewOptions;
+  constructor({
+    colors = [
+      $color("#f5542e"),
+      $color("#f2c327"),
+      $color("#008b6e"),
+      $color("#00aede")
+    ],
+    layout
+  }: {
+    colors?: UIColor[];
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+  }) {
+    super();
+    const interval = 1 / 60;
+    this._defineView = () => {
+      const canvas1 = new CanvasComponet({
+        tintColor: colors[0],
+        startAngle: -Math.PI / 2
+      });
+      const canvas2 = new CanvasComponet({
+        tintColor: colors[1],
+        startAngle: 0
+      });
+      const canvas3 = new CanvasComponet({
+        tintColor: colors[2],
+        startAngle: Math.PI / 2
+      });
+      const canvas4 = new CanvasComponet({
+        tintColor: colors[3],
+        startAngle: Math.PI
+      });
+      return {
+        type: "view",
+        props: {
+          id: this.id
+        },
+        views: [
+          canvas1.definition,
+          canvas2.definition,
+          canvas3.definition,
+          canvas4.definition
+        ],
+        layout,
+        events: {
+          ready: async sender => {
+            while (sender.super) {
+              canvas1.startAngle += Math.PI * interval * 4;
+              canvas1.redraw();
+              canvas2.startAngle += Math.PI * interval * 3;
+              canvas2.redraw();
+              canvas3.startAngle += Math.PI * interval * 2;
+              canvas3.redraw();
+              canvas4.startAngle += Math.PI * interval * 1;
+              canvas4.redraw();
+              await $wait(interval);
+            }
+          }
+        }
+      };
+    }
+  }
+}

package/components/spinners/spinner-androidstyle.ts

@@ -0,0 +1,264 @@
+/**
+ * 安卓风格的加载指示器，基于Lottie实现
+ * 
+ * Props:
+ * 
+ * - id 可以重新指定 id，以供 list 或者 matrix 的 template 使用
+ * - weight = 2
+ * - diameter = 24
+ * - color = $color("gray")
+ * - bgcolor = $color("clear")
+ * 
+ * Layout 默认居中
+ * 
+ */
+
+import { Base } from "../base";
+
+interface AndroidStyleSpinnerProps {
+  weight: number;
+  diameter: number;
+  color: UIColor;
+  bgcolor: UIColor;
+}
+
+export class AndroidStyleSpinner extends Base<UILottieView, UiTypes.LottieOptions> {
+  private _props: AndroidStyleSpinnerProps;
+  _defineView: () => UiTypes.LottieOptions;
+  constructor({ props, layout }: {
+    props: Partial<AndroidStyleSpinnerProps>;
+    layout?: (make: MASConstraintMaker, view: UILottieView) => void;
+  }) {
+    super();
+    this._props = {
+      weight: 2,
+      diameter: 24,
+      color: $color("gray"),
+      bgcolor: $color("clear"),
+      ...props
+    };
+    this._defineView = () => {
+      const weight = this._props.weight;
+      const color = this._props.color;
+      const r = color.components.red / 255;
+      const g = color.components.green / 255;
+      const b = color.components.blue / 255;
+      const a = color.components.alpha;
+      const json = {
+        v: "5.5.7",
+        fr: 60,
+        ip: 0,
+        op: 120,
+        w: 24,
+        h: 24,
+        nm: "spinner",
+        ddd: 0,
+        assets: [],
+        layers: [
+          {
+            ddd: 0,
+            ind: 1,
+            ty: 4,
+            nm: "circle",
+            sr: 1,
+            ks: {
+              o: { a: 0, k: 100, ix: 11 },
+              r: {
+                a: 1,
+                k: [
+                  {
+                    i: { x: [0.833], y: [0.833] },
+                    o: { x: [0.167], y: [0.167] },
+                    t: 0,
+                    s: [0]
+                  },
+                  {
+                    t: 119,
+                    s: [720]
+                  }
+                ],
+                ix: 10
+              },
+              p: { a: 0, k: [12, 12, 0], ix: 2 },
+              a: { a: 0, k: [1, 1, 0], ix: 1 },
+              s: { a: 0, k: [100, 100, 100], ix: 6 }
+            },
+            ao: 0,
+            shapes: [
+              {
+                ty: "gr",
+                it: [
+                  {
+                    ind: 0,
+                    ty: "sh",
+                    ix: 1,
+                    ks: {
+                      a: 0,
+                      k: {
+                        i: [
+                          [0, -5.523],
+                          [5.523, 0],
+                          [0, 5.523],
+                          [-5.523, 0]
+                        ],
+                        o: [
+                          [0, 5.523],
+                          [-5.523, 0],
+                          [0, -5.523],
+                          [5.523, 0]
+                        ],
+                        v: [
+                          [11, 1],
+                          [1, 11],
+                          [-9, 1],
+                          [1, -9]
+                        ],
+                        c: true
+                      },
+                      ix: 2
+                    },
+                    nm: "Path 1",
+                    mn: "ADBE Vector Shape - Group",
+                    hd: false
+                  },
+                  {
+                    ty: "mm",
+                    mm: 3,
+                    nm: "Merge Paths 1",
+                    mn: "ADBE Vector Filter - Merge",
+                    hd: false
+                  },
+                  {
+                    ty: "tm",
+                    s: {
+                      a: 1,
+                      k: [
+                        {
+                          i: { x: [0.833], y: [0.833] },
+                          o: { x: [0.167], y: [0.167] },
+                          t: 0,
+                          s: [0]
+                        },
+                        {
+                          i: { x: [0.833], y: [0.833] },
+                          o: { x: [0.167], y: [0.167] },
+                          t: 60,
+                          s: [0]
+                        },
+                        {
+                          i: { x: [0.833], y: [0.833] },
+                          o: { x: [0.167], y: [0.167] },
+                          t: 90,
+                          s: [60]
+                        },
+                        {
+                          t: 119,
+                          s: [100]
+                        }
+                      ],
+                      ix: 1
+                    },
+                    e: {
+                      a: 1,
+                      k: [
+                        {
+                          i: { x: [0.833], y: [0.833] },
+                          o: { x: [0.167], y: [0.167] },
+                          t: 0,
+                          s: [0]
+                        },
+                        {
+                          i: { x: [0.833], y: [0.833] },
+                          o: { x: [0.167], y: [0.167] },
+                          t: 30,
+                          s: [70]
+                        },
+                        {
+                          i: { x: [0.833], y: [0.833] },
+                          o: { x: [0.167], y: [0.167] },
+                          t: 60,
+                          s: [90]
+                        },
+                        {
+                          i: { x: [0.833], y: [0.833] },
+                          o: { x: [0.167], y: [0.167] },
+                          t: 90,
+                          s: [90]
+                        },
+                        {
+                          t: 119,
+                          s: [99]
+                        }
+                      ],
+                      ix: 2
+                    },
+                    o: { a: 0, k: 0, ix: 3 },
+                    m: 1,
+                    ix: 3,
+                    nm: "Trim Paths 1",
+                    mn: "ADBE Vector Filter - Trim",
+                    hd: false
+                  },
+                  {
+                    ty: "st",
+                    c: { a: 0, k: [r, g, b, a], ix: 3 },
+                    o: { a: 0, k: 100, ix: 4 },
+                    w: { a: 0, k: weight, ix: 5 },
+                    lc: 2,
+                    lj: 1,
+                    ml: 4,
+                    bm: 0,
+                    nm: "Stroke 1",
+                    mn: "ADBE Vector Graphic - Stroke",
+                    hd: false
+                  },
+                  {
+                    ty: "tr",
+                    p: { a: 0, k: [0, 0], ix: 2 },
+                    a: { a: 0, k: [0, 0], ix: 1 },
+                    s: { a: 0, k: [100, 100], ix: 3 },
+                    r: { a: 0, k: 0, ix: 6 },
+                    o: { a: 0, k: 100, ix: 7 },
+                    sk: { a: 0, k: 0, ix: 4 },
+                    sa: { a: 0, k: 0, ix: 5 },
+                    nm: "Transform"
+                  }
+                ],
+                nm: "circle",
+                np: 4,
+                cix: 2,
+                bm: 0,
+                ix: 1,
+                mn: "ADBE Vector Group",
+                hd: false
+              }
+            ],
+            ip: 0,
+            op: 120,
+            st: 0,
+            bm: 0
+          }
+        ],
+        markers: []
+      };
+      return {
+        type: "lottie",
+        props: {
+          loop: true,
+          contentMode: 1,
+          circular: true,
+          json,
+          bgcolor: this._props.bgcolor,
+          id: this.id
+        },
+        layout: layout || ((make, view) => {
+          make.size.equalTo($size(this._props.diameter, this._props.diameter));
+          make.center.equalTo(view.super);
+        }),
+        events: {
+          ready: sender => sender.play({})
+        }
+      };
+    }
+  }
+}