ZLView

ZLView base react , super and sub , coordinate by x-y-width-height；基于react的视图，使用x-y-width-height坐标系

示例

绘制正弦曲线

import React from 'react';
import * as zl from 'react-zlview'

class App extends React.Component
{
    private appView : zl.View | undefined;
    render()
    {
        if(this.appView === undefined)
        {
            this.appView = new zl.View();
            this.appView.x = 200;
            this.appView.y = 100;
            this.appView.width = 1000;
            this.appView.height = 50;
            this.appView.backgroudColor = "white";

            let colors = ["red","blue","gredd"];
            for (let i = 0 ; i < 999; i ++)
            {
                let sub = new zl.View();
                sub.x = i;
                sub.y = Math.sin(i / 3.14) * 15 + this.appView.height / 2;
                sub.width = 3;
                sub.height = 3;
                sub.backgroudColor = colors[i %3];
                this.appView.addSubview(sub);
            }
        }
        // 也可以直接返回 this.appView.reactElement();
        // return  this.appView.reactElement();
        return (
            <div className="App">
                <header className="App-header">
                    {this.appView.reactElement()}
                </header>
            </div>
        );
    }
}

ZLView的坐标系统

一个ZLView对应一个React Component，也可说是对React Component的封装；ZLView采用固定CSS样式，将position设置为absolute，然后设置left/right/widht/height。当然ZLView对此作了封装：

| 属性 | 含义 | | -------- | ----------------------------------------- | | x | 以父视图左上定点为原点的坐标系中，x轴位置 | | y | 以父视图左上定点为原点的坐标系中，y轴位置 | | width | 宽度 | | height | 高度 | | left | 同x | | right | x+width | | top | 同y | | bottom | y+height | | center_x | (x+width)/2 | | center_y | (y+height)/2 | | center | (center_x,center_y) |

ZLView的尺寸单位

支持px和rem两种，默认使用px单位。 可以设置ZLCurrentSizeUnit值来改变尺寸单位。另外，px和rem的换算，默认使用1rem=16px，也可以修改ZLCurrentSizeUnitOneRemToPx来改变这个换算比例.

ZLView的生命周期

源自React Component的生命周期

| 方法 | 含义 | | --------------- | -------------------------- | | viewDidMount/addListenViewDidMount/removeListenViewDidMount | React.componentDidMount | | viewWillUnmount/addListenViewWillUnMount/removeListenViewWillUnMount | React.componentWillUnmount |

父视图和子视图

• superView 获取父视图
• removeFromSuperview 从父图中移除
• subViews 获取子视图列表
• addSubview 添加子视图

刷新视图

• refresh 刷新视图，本质是调用 React.setState。 ZLView的属性变更后，需要主动调用 refresh来刷新视图
• layoutSubViews,是一个通知类型的方法，用于重新布局子视图列表；触发时机是在React.render返回结果前

ZLView获取DOM节点

可以通过实现方法onReactRefCallback来获取，也可以调用addListenOnReactRefCallback添加新方法获取.

监听DOM事件

通过addListenDOMEvent和removeListenDOMEvent可以监听/移除监听DOM事件，例如

view.addListenDOMEvent("onClick", (e:React.SyntheticEvent)=>{
    console.log("clicked");
})

继承ZLView

ZLView支持继承以自定义视图样式，通常需要重写的方法__reactRender__和__htmlAttributes__，前者用于返回React.render数据，后缀用于修改CSS样式

示列:

class CustomView extends zl.View
{
    /**
     * 渲染  React render
     */
    protected __reactRender__(children?:React.ReactNode[]) : React.ReactElement
    {
        // html attributes
        let attr = this.__htmlAttributes__();
        return React.createElement("canvas"/*自定义标签*/, attr.toReactClassAttributes(),children);
    }

    /**
     * 子类可重写
     * @returns html attributes
     */
    protected __htmlAttributes__() : ZLHtmlAttribute
    {
        let attr = super.__htmlAttributes__();
        attr.style.backgroundColor = "white";//背景色永远是白色
        return attr
    }

Transform

封装了matrix2d和matrix3d变换ZLTransform，内部实现使用了矩阵乘法，支持translate 平动、scale 缩放、rotate 旋转、skew 倾斜、refect 翻转。

let view:zl.View = new zl.View();
view.width = 200;
view.height = 100;
view.backgroundColor = "yellow";

let transform = new zl.Transform();
transform.rotate(Math.PI);
transform.translate(10,190);
view.transform = transform;
view.refresh();

背景色、前景色、不透明度、是否可见、是否禁用

• backgroundColor 略
• color 略
• opacity 略
• visibility 略
• disabled 略

设置阴影

简单封装了css box shadow，可以直接设置ZLView.boxShadow属性

view.backgroundColor = "yellow";

let shadow = new zl.BoxShadow();
shadow.color = "green";
view.boxShadow = shadow;

边框

支持简单设置

• borderColor 边框颜色
• borderStyle 边框样式
• borderWidth 边框宽度

动画

简单封装了CSS动画，直接作用在ZLView上

/**
 * 开启一个3秒动画
 * 尺寸从(100,200)变化到（200，100）
 * 背景色从red到yellow
 * 动画曲线使用cubic-bezier（1,0,0,1)
 */

let view = new zl.View()
view.width = 100;
view.height = 200;
view.backgroudColor = "red";

view.cssAnimation({to:()=>{
            view.backgroudColor = "yellow";
            view.x = 100;
            view.width = 200;
            view.height = 100;
            
            let transform = new zl.Transform();
            transform.rotate(Math.PI);
            transform.translate(10,190);
        },
            duration:3000,
            timingFunction:zl.CSSAnimationTimingFunction.cubicBezier,
            cubicBezierValue:[1,0,0,1],
            end:()=>{
                console.log("animation end");
            }
});

ZLRouter路由

封装react-router-dom。引入页面概念ZLViewPage，一个路由对应一个页面，采用严格模式匹配路由的path

class HomePage extends zl.ViewPage
{
    viewDidLoad()
    {
        super.viewDidLoad();
        this.view.backgroudColor = "red";
    }

    viewDidMount()
    {
        setTimeout(()=>{
            this.router?.push("/other");
        },5000);
        console.log( this.constructor.name + " mount");
    }

    viewWillUnmount()
    {
        console.log( this.constructor.name + " unmount");
    }
}

class OtherPage extends zl.ViewPage
{
    viewDidLoad()
    {
        super.viewDidLoad();
        this.view.backgroudColor = "blue";
    }

    viewDidMount()
    {
        console.log( this.constructor.name + " mount");
    }

    viewWillUnmount()
    {
        console.log( this.constructor.name + " unmount");
    }
}

class App extends React.Component
{
    private router: zl.Router | undefined;
    render()
    {
        if (this.router === undefined) {
            this.router = new zl.Router();
            this.router.registRoute("/",HomePage);
            this.router.registRoute("/other", OtherPage);
        }
        return this.router.reactElement();
    }
}

注册路由

let router = new zl.Router();
router.registRoute("/",HomePage);
router.registRoute("/other",OtherPage);

也可以直接注册ZLViewPage

// 等同于  router.registRoute("/OtherPage",OtherPage);
router.registViewPage(OtherPage);

路由跳转

router.push("/other");
router.replace("/");

也可以直接pushZLViewPage

// 等同于  router.push("/OtherPage");
router.pushViewPage(OtherPage);

更新日志

0.1.0

• 使用x-y-width-height坐标系统
• 支持px/rem两种单位
• 方便管理子视图添加和移除的操作
• 使用矩阵乘法，支持transform2d/3d
• 支持dom事件监听
• 支持简单css动画
• 封装了路由的基本操作，可在运行时更新路由

0.1.1

• 重写ZLList和ZLReadOnlyList的实现
• ZLEventCallbackList使用WeakRef存储thisArg
• 修复ZLCSSAnimation在含有perspective时，生成tansform字符串格式错误。
• 修复ZLView的tansform style样式字符串格式错误
• 增加ZLSlider（封装input type="range"）
• 增加ZLCheckBox（封装input type="checkbox"）
• 增加ZLRadioButton（封装input type="radio"）

0.2.0

• 增加对css transition的支持
• 修复ZLList的protoltype问题 https://github.com/Microsoft/TypeScript/wiki/FAQ#why-doesnt-extending-built-ins-like-error-array-and-map-work

0.2.1

• 继续修复ZLList(问题：使用默认构造函数创建时，多出一个undefined元素)

0.2.3

• ZLRouter 优化pushViewPage/replaceViewPage方法，运行时自动注册路由。
• ZLRouter 支持解除路由注册
• ZLRouter 继承ZLViewPage
• ZLRouter 默认使用自身坐标来初始化推入的页面坐标

0.2.4

• 添加一些便利方法,如获取屏幕DPI
• 修复ZLView.right属性设置错误
• 封装Textfield,select-option

0.3.0

• 优化ZLSelectOption ,ZLLabel
• ZLView添加borderRadius属性
• ZLView支持直接添加JSX元素

0.3.1

• ZLView onReactRefCallback获取的DOM节点可能为null（错误使用WeakRef引起）

0.3.2

• ZLTextInputView增加scrollTo方法