jsbox-cview 1.0.0 → 1.1.0

package/dist/components/enhanced-imageview.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnhancedImageView = void 0;
+/**
+ * 此组件是为了加强 imageView，实现以下目的：
+ *  1. 点击实现上下翻页
+ *  2. 双指放大缩小（但不可以双击放大缩小）
+ *
+ * 请注意：此组件使用了Runtime代码重新设置了Tapped事件。
+ * 与以前使用touchesEnded事件来实现相比，可以避免在滑动手指时误触发。
+ * 但因此带来了副作用：必须在关闭前通过releaseGestureObject释放掉此视图中自定义的NSObject，否则再次启动可能会有问题。
+ *
+ * Props:
+ *  src: string, 图片地址
+ *  maxZoomScale: number, 最大缩放倍数，默认为2
+ *
+ * Events:
+ * upperLocationTouched: (sender: EnhancedImageView) => void, 上半部分被点击
+ * lowerLocationTouched: (sender: EnhancedImageView) => void, 下半部分被点击
+ */
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+const cvid_1 = require("../utils/cvid");
+class EnhancedImageView extends base_1.Base {
+    constructor({ props, layout, events = {} }) {
+        super();
+        this._props = Object.assign({ maxZoomScale: 2 }, props);
+        this._scroll = new single_views_1.Scroll({
+            props: {
+                zoomEnabled: true,
+                doubleTapToZoom: false,
+                maxZoomScale: this._props.maxZoomScale
+            },
+            layout: $layout.fill,
+            views: [
+                {
+                    type: "image",
+                    props: {
+                        id: "image",
+                        src: this._props.src,
+                        contentMode: 1
+                    },
+                    layout: $layout.fill
+                }
+            ],
+            events: {
+                ready: view => {
+                    $delay(0.1, () => this._addGesture(view, (gesture) => {
+                        const location = gesture.$locationInView(view.ocValue());
+                        const realLocation = $point(location.x - view.bounds.x, location.y - view.bounds.y);
+                        const frame = this.view.frame;
+                        if (realLocation.y <= frame.height / 2) {
+                            if (events.upperLocationTouched)
+                                events.upperLocationTouched(this);
+                        }
+                        else {
+                            if (events.lowerLocationTouched)
+                                events.lowerLocationTouched(this);
+                        }
+                    }));
+                }
+            }
+        });
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: {
+                    id: this.id
+                },
+                views: [this._scroll.definition],
+                layout,
+                events: {
+                    layoutSubviews: sender => {
+                        $delay(0.1, () => (this.src = this.src));
+                        $delay(0.3, () => (this.src = this.src));
+                    }
+                }
+            };
+        };
+    }
+    _addGesture(view, event) {
+        const objectId = cvid_1.cvid.newId;
+        $define({
+            type: objectId + ": NSObject",
+            events: {
+                tapped: event
+            }
+        });
+        const object = $objc(objectId).$new();
+        $objc_retain(object); // 此步骤是必须的，否则将很快被系统释放掉，但是必须在关闭时手动释放掉，否则再次启动可能会有问题
+        this._gestureObject = object;
+        const tapGestureRecognizer = $objc("UITapGestureRecognizer")
+            .$alloc()
+            .$initWithTarget_action(this._gestureObject, "tapped:");
+        view.ocValue().$addGestureRecognizer(tapGestureRecognizer);
+    }
+    releaseGestureObject() {
+        if (this._gestureObject)
+            $objc_release(this._gestureObject);
+    }
+    get src() {
+        return this._props.src;
+    }
+    set src(src) {
+        this._props.src = src;
+        const view = this._scroll.view.get("image");
+        view.src = src;
+    }
+    get image() {
+        const view = this._scroll.view.get("image");
+        return view.image;
+    }
+}
+exports.EnhancedImageView = EnhancedImageView;

package/dist/components/image-pager.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePager = void 0;
+/**
+ * 与内置的Gallery组件相比，ImagePager组件可以动态刷新，适用于图片数量较多的场景，以及需要动态加载图片列表的场景
+ *
+ * # Props
+ * srcs: string[] - 图片地址列表
+ * page: number - 当前页码
+ *
+ * # Events
+ * changed: (page: number) => void - 页码变化时触发
+ * tapped: (sender: ImagePager) => void - 点击图片时触发
+ */
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+class ImagePager extends base_1.Base {
+    constructor({ props, layout, events = {} }) {
+        super();
+        this._props = Object.assign({ srcs: [], page: 0 }, props);
+        this._pageLoadRecorder = {};
+        this._matrix = new single_views_1.Matrix({
+            props: {
+                direction: $scrollDirection.horizontal,
+                pagingEnabled: true,
+                alwaysBounceVertical: false,
+                showsVerticalIndicator: false,
+                showsHorizontalIndicator: false,
+                template: {
+                    views: [
+                        {
+                            type: "scroll",
+                            props: {
+                                id: "scroll",
+                                zoomEnabled: true,
+                                maxZoomScale: 3,
+                                doubleTapToZoom: true
+                            },
+                            layout: $layout.fill,
+                            views: [
+                                {
+                                    type: "image",
+                                    props: {
+                                        id: "image",
+                                        contentMode: $contentMode.scaleAspectFit
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                data: this._props.srcs.map(n => {
+                    return { image: { src: n } };
+                })
+            },
+            layout: $layout.fill,
+            events: {
+                ready: sender => {
+                    // 如果没有此处的relayout，则会出现莫名其妙的bug
+                    sender.relayout();
+                    this.page = this.page;
+                    this.loadsrc(this.page);
+                },
+                itemSize: (sender, indexPath) => {
+                    return $size(sender.frame.width, sender.frame.height);
+                },
+                forEachItem: (view, indexPath) => {
+                    const scroll = view.get("scroll");
+                    scroll.zoomScale = 0;
+                    //$delay(0.01, () => {});
+                },
+                willEndDragging: (sender, velocity, target) => {
+                    const oldPage = this.page;
+                    this._props.page = Math.round(target.x / sender.frame.width);
+                    //this.loadsrc(this.page, true);
+                    if (oldPage !== this.page && events.changed)
+                        events.changed(this.page);
+                },
+                didScroll: sender => {
+                    this.loadsrc(this.page + 1, true);
+                    this.loadsrc(this.page - 1, true);
+                }
+            }
+        });
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: {
+                    id: this.id,
+                    userInteractionEnabled: true
+                },
+                layout,
+                views: [this._matrix.definition],
+                events: {
+                    layoutSubviews: sender => {
+                        this._pageLoadRecorder = {};
+                        sender.relayout();
+                        this._matrix.view.reload();
+                        this.page = this.page;
+                        $delay(0.1, () => this.loadsrc(this.page, true));
+                        $delay(0.3, () => this.loadsrc(this.page, true));
+                    },
+                    tapped: sender => {
+                        const cell = this._matrix.view.cell($indexPath(0, this.page));
+                        if (!cell)
+                            return;
+                        const scroll = cell.get("scroll");
+                        const zoomScale = scroll.zoomScale;
+                        $delay(0.3, () => {
+                            const zoomScale1 = scroll.zoomScale;
+                            if (zoomScale === zoomScale1 && events.tapped)
+                                events.tapped(this);
+                        });
+                    }
+                }
+            };
+        };
+    }
+    loadsrc(page, forced = false) {
+        if (page < 0 || page >= this._props.srcs.length)
+            return;
+        const cell = this._matrix.view.cell($indexPath(0, page));
+        if (!cell)
+            return;
+        const image = cell.get("image");
+        if (forced || !image.image || !this._pageLoadRecorder[page]) {
+            const scroll = cell.get("scroll");
+            scroll.zoomScale = 0;
+            this._pageLoadRecorder[page] = true;
+        }
+    }
+    get page() {
+        return this._props.page;
+    }
+    get currentImage() {
+        const cell = this._matrix.view.cell($indexPath(0, this.page));
+        if (!cell)
+            return;
+        const image = cell.get("image");
+        return image.image;
+    }
+    set page(page) {
+        this._matrix.view.scrollTo({
+            indexPath: $indexPath(0, page),
+            animated: false
+        });
+        this._props.page = page;
+    }
+    scrollToPage(page) {
+        this._matrix.view.scrollTo({
+            indexPath: $indexPath(0, page),
+            animated: true
+        });
+        this._props.page = page;
+    }
+}
+exports.ImagePager = ImagePager;

package/dist/components/page-control.js

@@ -0,0 +1,76 @@
+"use strict";
+/**
+ * # CView PageControl
+ *
+ * 基于 Runtime 构建 PageControl
+ *
+ * 请注意本视图如果没有足够的横向宽度，会显示不全
+ * ## Props
+ *
+ * - 只写 numberOfPages: numnber
+ * - 读写 currentPage: number
+ * - 只写 pageIndicatorTintColor?: JSBoxColor
+ * - 只写 currentPageIndicatorTintColor?: JSBoxColor
+ * - 其他通用属性
+ *
+ * ## Events
+ *
+ * changed: (cview: Cview, currentPage: number) => void
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageControl = void 0;
+const single_views_1 = require("./single-views");
+class PageControl extends single_views_1.Runtime {
+    constructor({ props, layout, events = {} }) {
+        const { numberOfPages = 3, currentPage = 0, pageIndicatorTintColor, currentPageIndicatorTintColor } = props, restProps = __rest(props, ["numberOfPages", "currentPage", "pageIndicatorTintColor", "currentPageIndicatorTintColor"]);
+        const { changed } = events, restEvents = __rest(events, ["changed"]);
+        super({ props: restProps, layout, events: restEvents });
+        this._numberOfPages = numberOfPages;
+        this._currentPage = currentPage;
+        this._pageIndicatorTintColor = pageIndicatorTintColor;
+        this._currentPageIndicatorTintColor = currentPageIndicatorTintColor;
+        this._changed = changed;
+        this._pageControl = this._createPageControl();
+        if (this._props)
+            this._props.view = this._pageControl;
+    }
+    _createPageControl() {
+        const pageControl = $objc("UIPageControl").$new();
+        pageControl.$setNumberOfPages(this._numberOfPages);
+        pageControl.$setCurrentPage(this._currentPage);
+        if (this._pageIndicatorTintColor)
+            pageControl.$setPageIndicatorTintColor(this._pageIndicatorTintColor.ocValue());
+        if (this._currentPageIndicatorTintColor)
+            pageControl.$setCurrentPageIndicatorTintColor(this._currentPageIndicatorTintColor.ocValue());
+        pageControl.$addEventHandler({
+            events: $UIEvent.valueChanged,
+            handler: $block("void", () => {
+                const currentPage = pageControl.$currentPage();
+                this._currentPage = currentPage;
+                if (this._changed)
+                    this._changed(this, currentPage);
+            })
+        });
+        return pageControl;
+    }
+    get currentPage() {
+        return this._currentPage;
+    }
+    set currentPage(num) {
+        this._currentPage = num;
+        if (this._pageControl)
+            this._pageControl.$setCurrentPage(num);
+    }
+}
+exports.PageControl = PageControl;

package/dist/components/pageviewer-titlebar.js

@@ -0,0 +1,143 @@
+"use strict";
+/**
+ * # CView PageViewer TitleBar
+ *
+ * props:
+ *
+ * - 只写 items: string[]
+ * - 读写 index: number
+ * - 只写 selectedItemColor
+ * - 只写 defaultItemColor
+ *
+ * events:
+ *
+ * - changed: (cview, index) => void 在点击变更 index 的时候回调
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageViewerTitleBar = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+//const { getTextWidth } = require("cview-util-ui");
+function weightedAverageColors(c0, c1, w) {
+    const red = c0.components.red * w + c1.components.red * (1 - w);
+    const green = c0.components.green * w + c1.components.green * (1 - w);
+    const blue = c0.components.blue * w + c1.components.blue * (1 - w);
+    return $rgb(red, green, blue);
+}
+class PageViewerTitleBar extends base_1.Base {
+    constructor({ props, layout, events = {} }) {
+        super();
+        this._props = Object.assign({ index: 0, selectedItemColor: $color("systemLink"), defaultItemColor: $color("secondaryText") }, props);
+        const { changed } = events, restEvents = __rest(events, ["changed"]);
+        this._floatedIndex = this._props.index;
+        this._lineStartLocationPercentage = this._floatedIndex / this._props.items.length;
+        this.labels = this._props.items.map((n, i) => {
+            return new single_views_1.Label({
+                props: {
+                    text: n,
+                    font: $font("bold", 17),
+                    textColor: i === this.index
+                        ? this._props.selectedItemColor
+                        : this._props.defaultItemColor,
+                    align: $align.center,
+                    userInteractionEnabled: true
+                },
+                events: {
+                    tapped: sender => {
+                        this.index = i;
+                        if (changed)
+                            changed(this, i);
+                    }
+                }
+            });
+        });
+        this.stack = new single_views_1.Stack({
+            props: {
+                axis: $stackViewAxis.horizontal,
+                distribution: $stackViewDistribution.fillEqually,
+                stack: {
+                    views: this.labels.map(n => n.definition)
+                }
+            },
+            layout: $layout.fill
+        });
+        this.placeholderView = new single_views_1.ContentView({
+            props: {
+                bgcolor: $color("clear")
+            },
+            layout: (make, view) => {
+                make.left.bottom.inset(0);
+                make.width.equalTo(view.super).multipliedBy(this._floatedIndex / this._props.items.length);
+            }
+        });
+        this.line = new single_views_1.ContentView({
+            props: {
+                bgcolor: this._props.selectedItemColor
+            },
+            layout: (make, view) => {
+                make.height.equalTo(4);
+                make.width.equalTo(view.super).dividedBy(this._props.items.length);
+                make.bottom.inset(0);
+                make.left.equalTo(view.prev.right);
+            }
+        });
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: {
+                    id: this.id
+                },
+                layout,
+                events: restEvents,
+                views: [
+                    this.stack.definition,
+                    this.placeholderView.definition,
+                    this.line.definition
+                ]
+            };
+        };
+    }
+    get lineStartLocationPercentage() {
+        return this._lineStartLocationPercentage;
+    }
+    set lineStartLocationPercentage(percent) {
+        this._lineStartLocationPercentage = percent;
+        this.placeholderView.view.remakeLayout((make, view) => {
+            make.left.bottom.inset(0);
+            make.width.equalTo(view.super).multipliedBy(percent);
+        });
+    }
+    get floatedIndex() {
+        return this._floatedIndex;
+    }
+    set floatedIndex(floatedIndex) {
+        this._floatedIndex = floatedIndex;
+        this.lineStartLocationPercentage = floatedIndex / this._props.items.length;
+        this.labels.forEach((n, i) => {
+            if (Math.abs(floatedIndex - i) < 1) {
+                n.view.textColor = weightedAverageColors(this._props.selectedItemColor, this._props.defaultItemColor, floatedIndex - i > 0 ? 1 - (floatedIndex - i) : 1 - (i - floatedIndex));
+            }
+            else {
+                n.view.textColor = this._props.defaultItemColor;
+            }
+        });
+    }
+    get index() {
+        return this._props.index;
+    }
+    set index(index) {
+        this._props.index = index;
+    }
+}
+exports.PageViewerTitleBar = PageViewerTitleBar;

package/dist/components/pageviewer.js

@@ -0,0 +1,96 @@
+"use strict";
+/**
+ * # CView PageViewer
+ *
+ * props:
+ * - 读写 page: number
+ * - 只写 cviews: cview[] cview的布局会被自动指定为占用一整页
+ *
+ * events:
+ * - changed: (cview, page) => void 页面改变时回调
+ * - floatPageChanged: (cview, floatPage) => void 滚动时回调（用于绑定其他联合滚动的控件）
+ *
+ * methods:
+ * - scrollToPage(page: number) 滚动到某一页（带有动画效果）
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageViewer = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+class PageViewer extends base_1.Base {
+    constructor({ props, layout, events = {} }) {
+        super();
+        this._props = Object.assign({ page: 0 }, props);
+        this._events = events;
+        this._pageWidth = 0;
+        this._floatPage = this._props.page;
+        const contentViews = this._props.cviews.map(n => {
+            n._layout = $layout.fill;
+            return new single_views_1.ContentView({
+                views: [n.definition],
+                layout: (make, view) => {
+                    make.height.width.equalTo(view.super);
+                    make.left.equalTo(view.prev ? view.prev.right : view.super);
+                    make.top.equalTo(view.super);
+                }
+            });
+        });
+        this.scroll = new single_views_1.Scroll({
+            props: {
+                alwaysBounceVertical: false,
+                alwaysBounceHorizontal: true,
+                showsHorizontalIndicator: false,
+                pagingEnabled: true
+            },
+            events: {
+                layoutSubviews: sender => {
+                    this._pageWidth = sender.frame.width;
+                    if (this._pageWidth)
+                        sender.contentSize = $size(this._pageWidth * this._props.cviews.length, 0);
+                },
+                willEndDragging: (sender, velocity, target) => {
+                    const oldPage = this.page;
+                    this._props.page = Math.round(target.x / this._pageWidth);
+                    if (oldPage !== this.page && this._events.changed)
+                        this._events.changed(this, this.page);
+                },
+                didScroll: sender => {
+                    const rawPage = sender.contentOffset.x / this._pageWidth;
+                    this._floatPage = Math.min(Math.max(0, rawPage), this._props.cviews.length - 1);
+                    if (this._events.floatPageChanged)
+                        this._events.floatPageChanged(this, this._floatPage);
+                }
+            },
+            layout: $layout.fill,
+            views: [...contentViews.map(n => n.definition)]
+        });
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: { id: this.id },
+                layout: this._layout,
+                views: [this.scroll.definition],
+                events: {
+                    layoutSubviews: sender => {
+                        sender.relayout();
+                        this.page = this.page;
+                        $delay(0.2, () => (this.page = this.page));
+                    }
+                }
+            };
+        };
+    }
+    get page() {
+        return this._props.page;
+    }
+    set page(page) {
+        this._props.page = page;
+        if (this.scroll.view.contentOffset.x !== page * this._pageWidth)
+            this.scroll.view.contentOffset = $point(page * this._pageWidth, 0);
+    }
+    scrollToPage(page) {
+        this.scroll.view.scrollToOffset($point(page * this._pageWidth, 0));
+        this._props.page = page;
+    }
+}
+exports.PageViewer = PageViewer;

package/dist/components/rotating-view.js

@@ -0,0 +1,102 @@
+"use strict";
+/**
+ * 创建一个可以旋转的视图。理论上来说，这个视图的布局必须是方形的。
+ *
+ * props:
+ * - image 图片
+ * - tintColor
+ * - contentMode = 1
+ * - cview 使用自定义的cview，上面两项将失效
+ * - rps = 0.5 每秒转多少圈
+ * - clockwise = true 是否顺时针旋转
+ *
+ * events:
+ * - ready: cview => void 可以在ready事件中启动旋转
+ *
+ * methods:
+ * - startRotating() 开始旋转
+ * - stopRotating() 结束旋转，请注意旋转是不能立即结束的，必须等到动画归位
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RotatingView = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+class RotatingView extends base_1.Base {
+    constructor({ props, layout, events = {} }) {
+        super();
+        this._props = Object.assign({ contentMode: 1, rps: 0.5, clockwise: true }, props);
+        this._rotatingFlag = false;
+        if (this._props.cview) {
+            this._innerView = this._props.cview;
+        }
+        else {
+            if (!this._props.image)
+                throw new Error("image is required");
+            this._innerView = new single_views_1.Image({
+                props: {
+                    image: this._props.tintColor
+                        ? this._props.image.alwaysTemplate
+                        : this._props.image,
+                    tintColor: this._props.tintColor,
+                    contentMode: this._props.contentMode
+                },
+                layout: $layout.fill
+            });
+        }
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: Object.assign(Object.assign({}, this._props), { id: this.id }),
+                layout,
+                events: {
+                    ready: sender => {
+                        if (events.ready)
+                            events.ready(this);
+                    }
+                },
+                views: [this._innerView.definition]
+            };
+        };
+    }
+    startRotating() {
+        this._rotatingFlag = true;
+        this._rotateView(this._innerView.view);
+    }
+    stopRotating() {
+        this._rotatingFlag = false;
+    }
+    _rotateView(view) {
+        const clockwiseMultiplier = this._props.clockwise ? 1 : -1;
+        const duration = 1 / 3 / (this._props.rps || 0.5);
+        $ui.animate({
+            duration,
+            options: 3 << 16,
+            animation: () => {
+                view.rotate(Math.PI * 2 / 3 * clockwiseMultiplier);
+            },
+            completion: () => {
+                $ui.animate({
+                    duration,
+                    options: 3 << 16,
+                    animation: () => {
+                        view.rotate(Math.PI * 4 / 3 * clockwiseMultiplier);
+                    },
+                    completion: () => {
+                        $ui.animate({
+                            duration,
+                            options: 3 << 16,
+                            animation: () => {
+                                view.rotate(Math.PI * 2 * clockwiseMultiplier);
+                            },
+                            completion: () => {
+                                if (this._rotatingFlag)
+                                    this._rotateView(view);
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+}
+exports.RotatingView = RotatingView;