jsbox-cview 1.6.6 → 1.6.8

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

@@ -1,97 +0,0 @@
-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,
-              false,
-            );
-            ctx.strokePath();
-          },
-        },
-      };
-    };
-  }
-
-  redraw() {
-    this.view.ocValue().invoke("setNeedsDisplay");
-  }
-}
-
-/**
- * 两个圆环旋转的加载动画
- *
- * 这是一个示例组件，由于帧数有限而且不稳定，不建议在实际项目中使用。
- *
- */
-export class DualRing extends Base<UIView, UiTypes.ViewOptions> {
-  _defineView: () => UiTypes.ViewOptions;
-
-  /**
-   * @param colors 颜色（必须是2个），默认为 [$color("#f5542e"), $color("#f2c327")]
-   * @param layout 布局
-   */
-  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

@@ -1,106 +0,0 @@
-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");
-  }
-}
-
-/**
- * 饼图加载动画, 4个颜色的饼图以不同的速度旋转，产生华丽的效果
- */
-export class Wedges extends Base<UIView, UiTypes.ViewOptions> {
-  _defineView: () => UiTypes.ViewOptions;
-
-  /**
-   * @param colors 饼图颜色（必须是4个颜色）
-   * @param layout 布局
-   */
-  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

@@ -1,269 +0,0 @@
-import { Base } from "../base";
-
-interface AndroidStyleSpinnerProps {
-  id?: string;
-  weight: number;
-  diameter: number;
-  color: UIColor;
-  bgcolor: UIColor;
-}
-
-/**
- * 安卓风格的加载指示器, 基于Lottie实现, 效果是一个圆环一边旋转一边缩放。
- * 由于帧数有限，不建议在大视图上使用。
- */
-export class AndroidStyleSpinner extends Base<UILottieView, UiTypes.LottieOptions> {
-  private _props: AndroidStyleSpinnerProps;
-  _defineView: () => UiTypes.LottieOptions;
-
-  /**
-   * @param props AndroidStyleSpinnerProps
-   *        - id?: string 可以重新指定 id，以供 list 或者 matrix 的 template 使用
-   *        - weight: number
-   *        - diameter: number
-   *        - color: UIColor, 默认 gray
-   *        - bgcolor: UIColor, 默认 clear
-   * @param layout 可选布局，默认居中
-   */
-  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._props.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({}),
-        },
-      };
-    };
-  }
-}