pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/gradient/{GradientText.tsx → GradientText.js}

@@ -1,36 +1,27 @@
-import { Component, createRef, CSSProperties, h } from 'preact';
-
-export interface GradientTextProps {
-    style?: CSSProperties;
-    text?: string;
-    color?: string;
-    fontSize?: number;
-    font?: string;
-    alignment?: string;
-    direction?: string;
-    colorTop?: string;
-    colorBottom?: string;
-    colorLeft?: string;
-    colorRight?: string;
-    fitRectTransform?: boolean;
-    richText?: boolean;
-    alignByGeometry?: boolean;
-    horizontalOverflow?: string;
-    verticalOverflow?: string;
-    bestFit?: boolean;
-    raycastTarget?: boolean;
-    fontStyle?: string;
-    lineSpacing?: number;
-}
-
-export class GradientText extends Component<GradientTextProps, GradientTextProps> {
-    isPrintLog = false;
-    textObj = null;
-    gradientObj = null;
-    constructor(props) {
-        super(props);
-
-        this.state = {
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component, h } from 'preact';
+var GradientText = /** @class */ (function (_super) {
+    __extends(GradientText, _super);
+    function GradientText(props) {
+        var _this = _super.call(this, props) || this;
+        _this.isPrintLog = false;
+        _this.textObj = null;
+        _this.gradientObj = null;
+        _this.state = {
             style: props.style,
             text: props.text,
             color: props.color,
@@ -52,17 +43,15 @@ export class GradientText extends Component<GradientTextProps, GradientTextProps
             fontStyle: props.fontStyle,
             lineSpacing: props.lineSpacing,
         };
+        return _this;
     }
-
-    componentDidUpdate() {
+    GradientText.prototype.componentDidUpdate = function () {
         console.log('componentDidUpdate');
         this.updateGradientText();
-    }
-
-    static getDerivedStateFromProps(props, state) {
+    };
+    GradientText.getDerivedStateFromProps = function (props, state) {
         console.log('getDerivedStateFromProps props:' + JSON.stringify(props));
         console.log('getDerivedStateFromProps old state:' + JSON.stringify(state));
-
         if (props.text !== state.text ||
             props.color !== state.color ||
             props.fontSize !== state.fontSize ||
@@ -102,167 +91,162 @@ export class GradientText extends Component<GradientTextProps, GradientTextProps
                 fontStyle: props.fontStyle && props.fontStyle !== state.fontStyle ? props.fontStyle : state.fontStyle,
                 lineSpacing: props.lineSpacing && props.lineSpacing !== state.lineSpacing ? props.lineSpacing : state.lineSpacing,
             };
-        } else {
+        }
+        else {
             return null;
         }
-    }
-
-
-    getCSharp() {
-        if (!(window as any).require) {
+    };
+    GradientText.prototype.getCSharp = function () {
+        if (!window.require) {
             console.error('need puerts env');
             return null;
         }
-        let CS = (window as any).require('csharp');
+        var CS = window.require('csharp');
         if (!CS) {
             console.error('need puerts env');
             return null;
         }
         return CS;
-    }
-
-    onLoad(e) {
+    };
+    GradientText.prototype.onLoad = function (e) {
         this.printLog('OnLoad');
-        const CS = this.getCSharp();
+        var CS = this.getCSharp();
         if (CS == null) {
             console.error('Get CS error');
             return;
         }
-
-        const windowId = (window as any).external.id;
-        const puerts = (window as any).require('puerts');
-        const handle = e.target.attachment.handle;
-
-        const attachment = CS.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
+        var windowId = window.external.id;
+        var puerts = window.require('puerts');
+        var handle = e.target.attachment.handle;
+        var attachment = CS.com.tencent.pandora.CSharpInterface.GetSlotAttachmentByHandle(windowId, handle);
         if (!attachment) {
-            console.error(`can't get relected attachment, handle:${handle}`);
+            console.error("can't get relected attachment, handle:".concat(handle));
             return;
         }
-
-        const placeholder = attachment.GetMountingGameObject();
+        var placeholder = attachment.GetMountingGameObject();
         this.textObj = placeholder.AddComponent(puerts.$typeof(CS.UnityEngine.UI.Text));
         this.gradientObj = placeholder.AddComponent(puerts.$typeof(CS.UiEffect.GradientColor));
         this.updateGradientText();
-    }
-
-    updateGradientText() {
-        let textStr = !this.state.text || typeof (this.state.text) != 'string' ? '' : this.state.text;
-        let color = !this.state.color || typeof (this.state.color) != 'string' ? '#FFFFFFFF' : this.state.color;
-        let fontSize = !this.state.fontSize || typeof (this.state.fontSize) != 'number' ? 18 : this.state.fontSize;
-        let font = !this.state.font || typeof (this.state.font) != 'string' ? 'gamefont' : this.state.font;
-        let alignment = !this.state.alignment || typeof (this.state.alignment) != 'string' ? 'UpperLeft' : this.state.alignment;
-        let direction = !this.state.direction || typeof (this.state.direction) != 'string' ? 'Both' : this.state.direction;
-        let colorTop = !this.state.colorTop || typeof (this.state.colorTop) != 'string' ? '#FFFFFFFF' : this.state.colorTop;
-        let colorBottom = !this.state.colorBottom || typeof (this.state.colorBottom) != 'string' ? '#000000FF' : this.state.colorBottom;
-        let colorLeft = !this.state.colorLeft || typeof (this.state.colorLeft) != 'string' ? '#FF0000FF' : this.state.colorLeft;
-        let colorRight = !this.state.colorRight || typeof (this.state.colorRight) != 'string' ? '#0000FFFF' : this.state.colorLeft;
-        let fitRectTransform = !this.state.fitRectTransform || typeof (this.state.fitRectTransform) != 'boolean' ? false : this.state.fitRectTransform;
-        let richText = !this.state.richText || typeof (this.state.richText) != 'boolean' ? true : this.state.richText;
-        let alignByGeometry = !this.state.alignByGeometry || typeof (this.state.alignByGeometry) != 'boolean' ? false : this.state.alignByGeometry;
-        let horizontalOverflow = !this.state.horizontalOverflow || typeof (this.state.horizontalOverflow) != 'string' ? 'Warp' : this.state.horizontalOverflow;
-        let verticalOverflow = !this.state.verticalOverflow || typeof (this.state.verticalOverflow) != 'string' ? 'Truncate' : this.state.verticalOverflow;
-        let bestFit = !this.state.bestFit || typeof (this.state.bestFit) != 'boolean' ? false : this.state.bestFit;
-        let raycastTarget = !this.state.raycastTarget || typeof (this.state.raycastTarget) != 'boolean' ? true : this.state.raycastTarget;
-        let fontStyle = !this.state.fontStyle || typeof (this.state.fontStyle) != 'string' ? 'Normal' : this.state.fontStyle;
-        let lineSpacing = !this.state.lineSpacing || typeof (this.state.lineSpacing) != 'number' ? 1 : this.state.lineSpacing;
-
+    };
+    GradientText.prototype.updateGradientText = function () {
+        var textStr = !this.state.text || typeof (this.state.text) != 'string' ? '' : this.state.text;
+        var color = !this.state.color || typeof (this.state.color) != 'string' ? '#FFFFFFFF' : this.state.color;
+        var fontSize = !this.state.fontSize || typeof (this.state.fontSize) != 'number' ? 18 : this.state.fontSize;
+        var font = !this.state.font || typeof (this.state.font) != 'string' ? 'gamefont' : this.state.font;
+        var alignment = !this.state.alignment || typeof (this.state.alignment) != 'string' ? 'UpperLeft' : this.state.alignment;
+        var direction = !this.state.direction || typeof (this.state.direction) != 'string' ? 'Both' : this.state.direction;
+        var colorTop = !this.state.colorTop || typeof (this.state.colorTop) != 'string' ? '#FFFFFFFF' : this.state.colorTop;
+        var colorBottom = !this.state.colorBottom || typeof (this.state.colorBottom) != 'string' ? '#000000FF' : this.state.colorBottom;
+        var colorLeft = !this.state.colorLeft || typeof (this.state.colorLeft) != 'string' ? '#FF0000FF' : this.state.colorLeft;
+        var colorRight = !this.state.colorRight || typeof (this.state.colorRight) != 'string' ? '#0000FFFF' : this.state.colorLeft;
+        var fitRectTransform = !this.state.fitRectTransform || typeof (this.state.fitRectTransform) != 'boolean' ? false : this.state.fitRectTransform;
+        var richText = !this.state.richText || typeof (this.state.richText) != 'boolean' ? true : this.state.richText;
+        var alignByGeometry = !this.state.alignByGeometry || typeof (this.state.alignByGeometry) != 'boolean' ? false : this.state.alignByGeometry;
+        var horizontalOverflow = !this.state.horizontalOverflow || typeof (this.state.horizontalOverflow) != 'string' ? 'Warp' : this.state.horizontalOverflow;
+        var verticalOverflow = !this.state.verticalOverflow || typeof (this.state.verticalOverflow) != 'string' ? 'Truncate' : this.state.verticalOverflow;
+        var bestFit = !this.state.bestFit || typeof (this.state.bestFit) != 'boolean' ? false : this.state.bestFit;
+        var raycastTarget = !this.state.raycastTarget || typeof (this.state.raycastTarget) != 'boolean' ? true : this.state.raycastTarget;
+        var fontStyle = !this.state.fontStyle || typeof (this.state.fontStyle) != 'string' ? 'Normal' : this.state.fontStyle;
+        var lineSpacing = !this.state.lineSpacing || typeof (this.state.lineSpacing) != 'number' ? 1 : this.state.lineSpacing;
         if (this.textObj) {
-            (this.textObj as any).text = textStr;
-            (this.textObj as any).fontSize = fontSize;
-            (this.textObj as any).font = this.transFont(font);
-            (this.textObj as any).alignment = this.transAlignment(alignment);
-            (this.textObj as any).color = this.colorRgb(color);
-            (this.textObj as any).richText = richText;
-            (this.textObj as any).alignByGeometry = alignByGeometry;
-            (this.textObj as any).horizontalOverflow = this.transHorizontalOverflow(horizontalOverflow);
-            (this.textObj as any).verticalOverflow = this.transVerticalOverflow(verticalOverflow);
-            (this.textObj as any).bestFit = bestFit;
-            (this.textObj as any).raycastTarget = raycastTarget;
-            (this.textObj as any).fontStyle = this.transFontStyle(fontStyle);
-            (this.textObj as any).lineSpacing = lineSpacing;
-        } else {
+            this.textObj.text = textStr;
+            this.textObj.fontSize = fontSize;
+            this.textObj.font = this.transFont(font);
+            this.textObj.alignment = this.transAlignment(alignment);
+            this.textObj.color = this.colorRgb(color);
+            this.textObj.richText = richText;
+            this.textObj.alignByGeometry = alignByGeometry;
+            this.textObj.horizontalOverflow = this.transHorizontalOverflow(horizontalOverflow);
+            this.textObj.verticalOverflow = this.transVerticalOverflow(verticalOverflow);
+            this.textObj.bestFit = bestFit;
+            this.textObj.raycastTarget = raycastTarget;
+            this.textObj.fontStyle = this.transFontStyle(fontStyle);
+            this.textObj.lineSpacing = lineSpacing;
+        }
+        else {
             this.printLog('empty CS.UnityEngine.UI.Text');
         }
-
         if (this.gradientObj) {
-            (this.gradientObj as any).direction = this.transDirection(direction);
-            (this.gradientObj as any).colorTop = this.colorRgb(colorTop);
-            (this.gradientObj as any).colorBottom = this.colorRgb(colorBottom);
-            (this.gradientObj as any).colorRight = this.colorRgb(colorRight);
-            (this.gradientObj as any).colorLeft = this.colorRgb(colorLeft);
-            (this.gradientObj as any).m_fitRectTransform = fitRectTransform;
-        } else {
+            this.gradientObj.direction = this.transDirection(direction);
+            this.gradientObj.colorTop = this.colorRgb(colorTop);
+            this.gradientObj.colorBottom = this.colorRgb(colorBottom);
+            this.gradientObj.colorRight = this.colorRgb(colorRight);
+            this.gradientObj.colorLeft = this.colorRgb(colorLeft);
+            this.gradientObj.m_fitRectTransform = fitRectTransform;
+        }
+        else {
             this.printLog('empty CS.UiEffect.GradientColor');
         }
-    }
-
-    transFont(fontName) {
-        const CS = this.getCSharp();
+    };
+    GradientText.prototype.transFont = function (fontName) {
+        var CS = this.getCSharp();
         return CS.com.tencent.pandora.TextPartner.GetFont.Invoke(fontName);
-    }
-
-    transHorizontalOverflow(str) {
-        const CS = this.getCSharp();
+    };
+    GradientText.prototype.transHorizontalOverflow = function (str) {
+        var CS = this.getCSharp();
         if (str == 'Warp') {
             return CS.UnityEngine.HorizontalWrapMode.Wrap;
-        } else if (str == 'Overflow') {
+        }
+        else if (str == 'Overflow') {
             return CS.UnityEngine.HorizontalWrapMode.Overflow;
-        } else {
+        }
+        else {
             console.error('invaild HorizontalOverflow');
             return CS.UnityEngine.HorizontalWrapMode.Wrap;
         }
-    }
-
-    transVerticalOverflow(str) {
-        const CS = this.getCSharp();
+    };
+    GradientText.prototype.transVerticalOverflow = function (str) {
+        var CS = this.getCSharp();
         if (str == 'Truncate') {
             return CS.UnityEngine.VerticalWrapMode.Truncate;
-        } else if (str == 'Overflow') {
+        }
+        else if (str == 'Overflow') {
             return CS.UnityEngine.VerticalWrapMode.Overflow;
-        } else {
+        }
+        else {
             console.error('invaild VerticalOverflow');
             return CS.UnityEngine.VerticalWrapMode.Truncate;
         }
-    }
-
-    transFontStyle(str) {
-        const CS = this.getCSharp();
+    };
+    GradientText.prototype.transFontStyle = function (str) {
+        var CS = this.getCSharp();
         if (str == 'Normal') {
             return CS.UnityEngine.FontStyle.Normal;
-        } else if (str == 'Bold') {
+        }
+        else if (str == 'Bold') {
             return CS.UnityEngine.FontStyle.Bold;
-        } else if (str == 'Italic') {
+        }
+        else if (str == 'Italic') {
             return CS.UnityEngine.FontStyle.Italic;
-        } else if (str == 'BoldAndItalic') {
+        }
+        else if (str == 'BoldAndItalic') {
             return CS.UnityEngine.FontStyle.BoldAndItalic;
-        } else {
+        }
+        else {
             console.error('invaild FontStyle');
             return CS.UnityEngine.FontStyle.Normal;
         }
-    }
-
-    colorRgb(colorStr) {
-        this.printLog(`colorList[i]/255[${0 / 255}]`);
-        this.printLog(`colorStr[${colorStr}]`);
+    };
+    GradientText.prototype.colorRgb = function (colorStr) {
+        this.printLog("colorList[i]/255[".concat(0 / 255, "]"));
+        this.printLog("colorStr[".concat(colorStr, "]"));
         //十六进制颜色值的正则表达式
-        let reg = /^#([0-9a-fA-f]{0,}|)$/;
-        let matchRes = colorStr.toString().toLowerCase().match(reg);
-        let transColor = '';
-        this.printLog(`matchRes${JSON.stringify(matchRes)}`);
-
-        if (matchRes.length > 0) transColor = matchRes[matchRes.length - 1];
-        let colorList:number[] = [];
+        var reg = /^#([0-9a-fA-f]{0,}|)$/;
+        var matchRes = colorStr.toString().toLowerCase().match(reg);
+        var transColor = '';
+        this.printLog("matchRes".concat(JSON.stringify(matchRes)));
+        if (matchRes.length > 0)
+            transColor = matchRes[matchRes.length - 1];
+        var colorList = [];
         while (transColor != '') {
-            let hex = '0x' + transColor.substring(0, 2);
-            this.printLog(`hex[${hex}]`);
-            colorList.push(parseInt(hex, 16) as any);
+            var hex = '0x' + transColor.substring(0, 2);
+            this.printLog("hex[".concat(hex, "]"));
+            colorList.push(parseInt(hex, 16));
             transColor = transColor.substring(2, transColor.length);
         }
-
-        let r, g, b, a = 1;
-
-        for (let i = 0; i < colorList.length; i++) {
-            this.printLog(`colorList i[${i}]item[${colorList[i]}]`);
+        var r, g, b, a = 1;
+        for (var i = 0; i < colorList.length; i++) {
+            this.printLog("colorList i[".concat(i, "]item[").concat(colorList[i], "]"));
             if (i == 0 && colorList[i] != null && colorList[i] != undefined) {
                 r = colorList[i] / 255;
             }
@@ -276,63 +260,70 @@ export class GradientText extends Component<GradientTextProps, GradientTextProps
                 a = colorList[i] / 255;
             }
         }
-        this.printLog(`New Color r[${r}]g[${g}]b[${b}]a[${a}]`);
-
-        const CS = this.getCSharp();
+        this.printLog("New Color r[".concat(r, "]g[").concat(g, "]b[").concat(b, "]a[").concat(a, "]"));
+        var CS = this.getCSharp();
         return CS.UnityEngine.Color(r, g, b, a);
-    }
-
-    printLog(text) {
+    };
+    GradientText.prototype.printLog = function (text) {
         if (this.isPrintLog) {
             console.log(text);
         }
-    }
-
-    transDirection(direction) {
-        const CS = this.getCSharp();
+    };
+    GradientText.prototype.transDirection = function (direction) {
+        var CS = this.getCSharp();
         if (direction == 'Both') {
             return CS.UiEffect.GradientColor.DIRECTION.Both;
-        } else if (direction == 'Vertical') {
+        }
+        else if (direction == 'Vertical') {
             return CS.UiEffect.GradientColor.DIRECTION.Vertical;
-        } else if (direction == 'Horizontal') {
+        }
+        else if (direction == 'Horizontal') {
             return CS.UiEffect.GradientColor.DIRECTION.Horizontal;
-        } else {
+        }
+        else {
             console.error('invaild direction');
             return CS.UiEffect.GradientColor.DIRECTION.Both;
         }
-    }
-
-    transAlignment(alignment) {
-        const CS = this.getCSharp();
+    };
+    GradientText.prototype.transAlignment = function (alignment) {
+        var CS = this.getCSharp();
         if (alignment == 'UpperLeft') {
             return CS.UnityEngine.TextAnchor.UpperLeft;
-        } else if (alignment == 'UpperCenter') {
+        }
+        else if (alignment == 'UpperCenter') {
             return CS.UnityEngine.TextAnchor.UpperCenter;
-        } else if (alignment == 'UpperRight') {
+        }
+        else if (alignment == 'UpperRight') {
             return CS.UnityEngine.TextAnchor.UpperRight;
-        } else if (alignment == 'MiddleCenter') {
+        }
+        else if (alignment == 'MiddleCenter') {
             return CS.UnityEngine.TextAnchor.MiddleCenter;
-        } else if (alignment == 'MiddleLeft') {
+        }
+        else if (alignment == 'MiddleLeft') {
             return CS.UnityEngine.TextAnchor.MiddleLeft;
-        } else if (alignment == 'MiddleRight') {
+        }
+        else if (alignment == 'MiddleRight') {
             return CS.UnityEngine.TextAnchor.MiddleRight;
-        } else if (alignment == 'LowerLeft') {
+        }
+        else if (alignment == 'LowerLeft') {
             return CS.UnityEngine.TextAnchor.LowerLeft;
-        } else if (alignment == 'LowerCenter') {
+        }
+        else if (alignment == 'LowerCenter') {
             return CS.UnityEngine.TextAnchor.LowerCenter;
-        } else if (alignment == 'LowerRight') {
+        }
+        else if (alignment == 'LowerRight') {
             return CS.UnityEngine.TextAnchor.LowerRight;
-        } else {
+        }
+        else {
             console.error('invaild alignment');
             return CS.UnityEngine.TextAnchor.UpperLeft;
         }
-    }
-
-    render(props) {
-        let style = !props.style ? { width: '200px', height: '200px', backgroundColor: '#FF00FFFF' } : props.style;
+    };
+    GradientText.prototype.render = function (props) {
+        var style = !props.style ? { width: '200px', height: '200px', backgroundColor: '#FF00FFFF' } : props.style;
         this.printLog('OnRender');
-        return (
-            <pixslot style={style} src='pixui://method:placeholder' onLoad={this.onLoad.bind(this)} />
-        );
-    }
-}
+        return (h("pixslot", { style: style, src: 'pixui://method:placeholder', onLoad: this.onLoad.bind(this) }));
+    };
+    return GradientText;
+}(Component));
+export { GradientText };

package/ui/components/outlinetext/OutlineText.d.ts

@@ -0,0 +1,94 @@
+import { Component, CSSProperties, h } from 'preact';
+export declare enum FontStyle {
+    Normal = 0,
+    Bold = 1,
+    Italic = 2,
+    BoldAndItalic = 3
+}
+export declare enum TextAnchor {
+    UpperLeft = 0,
+    UpperCenter = 1,
+    UpperRight = 2,
+    MiddleLeft = 3,
+    MiddleCenter = 4,
+    MiddleRight = 5,
+    LowerLeft = 6,
+    LowerCenter = 7,
+    LowerRight = 8
+}
+export declare enum HorizontalWrapMode {
+    Wrap = 0,
+    Overflow = 1
+}
+export declare enum VerticalWrapMode {
+    Truncate = 0,
+    Overflow = 1
+}
+export interface OutlineTextProps {
+    style?: CSSProperties;
+    text?: string;
+    font?: string;
+    fontStyle?: FontStyle;
+    fontSize?: number;
+    lineSpacing?: number;
+    alignment?: TextAnchor;
+    alignByGeometry?: boolean;
+    horizontalOverflow?: HorizontalWrapMode;
+    verticalOverflow?: VerticalWrapMode;
+    color: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    outlineColor: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    outlineDistance: {
+        x: number;
+        y: number;
+    };
+}
+export declare class OutlineText extends Component<OutlineTextProps, OutlineTextProps> {
+    text: any;
+    outline: any;
+    textColor: any;
+    effectColor: any;
+    constructor(props: any);
+    static defaultProps: {
+        style: import("../../lib/preact/src/jsx").JCSSProperties;
+        text: string;
+        font: string;
+        fontStyle: FontStyle;
+        fontSize: number;
+        lineSpacing: number;
+        alignment: TextAnchor;
+        alignByGeometry: boolean;
+        horizontalOverflow: HorizontalWrapMode;
+        verticalOverflow: VerticalWrapMode;
+        color: {
+            r: number;
+            g: number;
+            b: number;
+            a: number;
+        };
+        outlineColor: {
+            r: number;
+            g: number;
+            b: number;
+            a: number;
+        };
+        outlineDistance: {
+            x: number;
+            y: number;
+        };
+    };
+    componentDidUpdate(): void;
+    OnLoad: (e: any) => void;
+    colorRgb(colorStr: any): any;
+    updateOutlineText(): void;
+    render(): h.JSX.Element;
+}