Merge pull request 'Optimize attr inputer & Add color picker' (#16) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/16

.gitignore

@@ -41,6 +41,7 @@ build/Release
 node_modules/
 jspm_packages/
 build/
+out/
 
 # TypeScript v1 declaration files
 typings/

source/Component/AttrInput/AttrInput.scss

@@ -1,7 +1,6 @@
 @import "../Theme/Theme.scss";
 
-$line-min-height: 24px;
+$line-min-height: 26px;
-$root-min-height: 26px;
 
 div.attr-input {
 	width: 100%;
@@ -23,7 +22,7 @@ div.attr-input {
         width: 50%;
         height: 100%;
         max-width: 180px;
-        min-height: $root-min-height;
+        min-height: $line-min-height;
 
         div.input-content {
             box-sizing: border-box;
@@ -33,14 +32,13 @@ div.attr-input {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            min-height: $root-min-height;
+            height: $line-min-height;
     
             input {
                 width: 100%;
                 height: 100%;
                 border: none;
                 outline:none;
-                min-height: $line-min-height;
             };
     
             input:focus {
@@ -73,17 +71,35 @@ div.attr-input {
             padding-top: 5px;
             min-height: $line-min-height;
         }
+
+        div.error-view {
+            border-radius: 3px;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            height: $line-min-height;
+            text-overflow: ellipsis;
+            word-wrap: none;
+            word-break: keep-all;
+            white-space: nowrap;
+            cursor:not-allowed;
+
+            span {
+                padding-left: 8px;
+            }
+        }
     }
 }
 
 div.dark.attr-input {
 
-	div.input-content,
+	div.input-content, div.error-view,
 	div.input-content input {
 		background-color: $lt-bg-color-lvl3-dark;
 		color: $lt-font-color-normal-dark;
 	}
 
+    div.error-view:hover,
 	div.button-left:hover, div.button-right:hover {
 		background-color: $lt-bg-color-lvl2-dark;
 	}
@@ -91,12 +107,13 @@ div.dark.attr-input {
 
 div.light.attr-input {
 
-	div.input-content,
+	div.input-content, div.error-view,
 	div.input-content input {
 		background-color: $lt-bg-color-lvl3-light;
 		color: $lt-font-color-normal-light;
 	}
 
+    div.error-view:hover,
 	div.button-left:hover, div.button-right:hover {
 		background-color: $lt-bg-color-lvl2-light;
 	}

source/Component/AttrInput/AttrInput.tsx

@@ -142,12 +142,27 @@ class AttrInput extends Component<IAttrInputProps> {
         return true;
     }
 
+    public constructor(props: IAttrInputProps) {
+        super(props);
+        this.updateValueFromProps(props.value);
+    }
+
     private updateValueFromProps(val: IAttrInputProps["value"]) {
         const value = val ?? (this.props.isNumber ? "0" : "");
         this.value = value.toString();
         this.error = this.check(value.toString());
     }
 
+    private renderErrorInput() {
+        return <div className="error-view">
+            {
+                this.props.disableI18n ? 
+                <Localization i18nKey={this.props.disableI18n}/> :
+                <span>{this.props.value}</span>
+            }
+        </div>
+    }
+
 	public render(): ReactNode {
 
 		return <Theme
@@ -160,9 +175,7 @@ class AttrInput extends Component<IAttrInputProps> {
             <div className="root-content">
                 {
                     this.props.disable ? 
-                        this.props.disableI18n ? 
+                        this.renderErrorInput() :
-                            <Localization i18nKey={this.props.disableI18n}/> :
-                            <div>{this.props.value}</div> :
                         this.renderInput()
                 }
             </div>

source/Component/ColorInput/ColorInput.scss

@@ -0,0 +1,90 @@
+@import "../Theme/Theme.scss";
+
+$line-min-height: 26px;
+
+div.color-input-root {
+	width: 100%;
+	display: flex;
+	min-height: $line-min-height;
+	padding: 5px 0;
+
+    div.input-intro {
+		width: 50%;
+		height: 100%;
+		max-width: 220px;
+		display: flex;
+		align-items: center;
+        padding-right: 5px;
+        box-sizing: border-box;
+	}
+
+    div.root-content {
+        width: 50%;
+        height: 100%;
+        max-width: 180px;
+        min-height: $line-min-height;
+        border-radius: 3px;
+        overflow: hidden;
+        display: flex;
+
+        div.color-view {
+            width: $line-min-height;
+            max-width: $line-min-height;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            div.color-box {
+                width: 12px;
+                height: 12px;
+            }
+        }
+
+        div.value-view {
+            width: 100%;
+            height: 100%;
+            min-height: $line-min-height;
+            display: flex;
+            align-items: center;
+
+            div.text-box {
+                padding-left: 1px;
+            }
+        }
+
+        div.error-box {
+            display: flex;
+            align-items: center;
+            padding-left: 8px;
+        }
+    }
+}
+
+div.dark.color-input-root {
+
+	div.root-content {
+		background-color: $lt-bg-color-lvl3-dark;
+		color: $lt-font-color-normal-dark;
+	}
+
+	div.root-content:hover {
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+}
+
+div.light.color-input-root {
+
+	div.root-content {
+		background-color: $lt-bg-color-lvl3-light;
+		color: $lt-font-color-normal-light;
+	}
+
+	div.root-content:hover {
+		background-color: $lt-bg-color-lvl2-light;
+	}
+}
+
+div.color-picker-root {
+    width: 300px;
+    height: 340px;
+}

source/Component/ColorInput/ColorInput.tsx

@@ -0,0 +1,133 @@
+import { Component, createRef, ReactNode } from "react";
+import { FontLevel, Theme } from "@Component/Theme/Theme";
+import { Callout, ColorPicker, DirectionalHint } from "@fluentui/react";
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import "./ColorInput.scss";
+
+interface IColorInputProps {
+    keyI18n: AllI18nKeys;
+    infoI18n?: AllI18nKeys;
+    value?: number[];
+    normal?: boolean;
+    disable?: boolean;
+    disableI18n?: AllI18nKeys;
+    valueChange?: (color: number[]) => any;
+}
+
+interface IColorInputState {
+    isPickerVisible: boolean;
+}
+
+class ColorInput extends Component<IColorInputProps, IColorInputState> {
+
+    public constructor(props: IColorInputProps) {
+        super(props);
+        this.state = {
+            isPickerVisible: false
+        }
+    }
+
+    private pickerTarget = createRef<HTMLDivElement>();
+
+    private renderPicker() {
+        return <Callout
+            target={this.pickerTarget}
+            directionalHint={DirectionalHint.topAutoEdge}
+            onDismiss={() => {
+                this.setState({
+                    isPickerVisible: false
+                })
+            }}
+        >
+            <div className="color-picker-root">
+                <ColorPicker
+                    color={this.getColorString()}
+                    alphaType={"none"}
+                    onChange={(_, color) => {
+                        if (this.props.valueChange) {
+                            if (this.props.normal) {
+                                this.props.valueChange([
+                                    color.r / 255,
+                                    color.g / 255,
+                                    color.b / 255,
+                                ])
+                            } else {
+                                this.props.valueChange([
+                                    color.r,
+                                    color.g,
+                                    color.b,
+                                ])
+                            }
+                        }
+                    }}
+                />
+            </div>
+        </Callout>
+    }
+
+    private renderErrorInput() {
+        return <div className="error-box">
+            {
+                this.props.disableI18n ? 
+                <Localization i18nKey={this.props.disableI18n}/> :
+                <span>{this.props.value}</span>
+            }
+        </div>;
+    }
+
+    private renderColorInput() {
+        return <>
+            <div className="color-view">
+                <div className="color-box" style={{
+                    backgroundColor: this.getColorString()
+                }}/>
+            </div>
+            <div className="value-view">
+                <div className="text-box">{this.getColorString(true)}</div>
+            </div>
+        </>;
+    }
+
+    private getColorString(display?: boolean) {
+        let color: number[] = this.props.value?.concat([]) ?? [0, 0, 0];
+        if (this.props.normal) {
+            color[0] = Math.round(color[0] * 255);
+            color[1] = Math.round(color[1] * 255);
+            color[2] = Math.round(color[2] * 255);
+        }
+        if (display) {
+            return `rgb ( ${color[0] ?? 0}, ${color[1] ?? 0}, ${color[2] ?? 0} )`;
+        } else {
+            return `rgb(${color[0] ?? 0},${color[1] ?? 0},${color[2] ?? 0})`;
+        }
+    }
+
+    public render(): ReactNode {
+        return <>
+            <Theme className="color-input-root" fontLevel={FontLevel.normal}>
+                <div className="input-intro">
+                    <Localization i18nKey={this.props.keyI18n}/>
+                </div>
+                <div
+                    className="root-content"
+                    ref={this.pickerTarget}
+                    style={{
+                        cursor: this.props.disable ? "not-allowed" : "pointer"
+                    }}
+                    onClick={() => {
+                        this.setState({
+                            isPickerVisible: !this.props.disable
+                        })
+                    }}
+                >
+                    { this.props.disable ? null : this.renderColorInput() }
+                    { this.props.disable ? this.renderErrorInput() : null }
+                </div>
+            </Theme>
+
+            {this.state.isPickerVisible ?  this.renderPicker(): null}
+        </>
+    }
+}
+
+export { ColorInput };

source/Component/DetailsList/DetailsList.scss

@@ -39,7 +39,7 @@ div.details-list {
 div.light.details-list {
     
     div.details-list-item:nth-child(2n-1) {
-        background-color: rgba($lt-bg-color-lvl5-light, .4);
+        background-color: rgba($lt-bg-color-lvl5-light, .3);
     }
 
     div.details-list-item:hover {
@@ -59,7 +59,7 @@ div.light.details-list {
 div.dark.details-list {
 
     div.details-list-item:nth-child(2n-1) {
-        background-color: rgba($lt-bg-color-lvl5-dark, .8);
+        background-color: rgba($lt-bg-color-lvl5-dark, .4);
     }
 
     div.details-list-item:hover {

source/Context/Status.tsx

@@ -173,7 +173,7 @@ function useStatusWithEvent(...events: Array<keyof IStatusEvent>) {
             private mountEvent() {
                 if (this.status && !this.isEventMount) {
                     this.isEventMount = true;
-                    console.log("event mount");
+                    console.log("Component dep event mount: " + events.join(", "));
                     for (let i = 0; i < events.length; i++) {
                         this.status.on(events[i], this.handelChange);
                     }

source/Localization/EN-US.ts

@@ -38,8 +38,12 @@ const EN_US = {
     "Common.Attr.Key.Position.X": "Position X",
     "Common.Attr.Key.Position.Y": "Position Y",
     "Common.Attr.Key.Position.Z": "Position Z",
-    "Common.Attr.Key.Error.Multiple": "Cannot edit multiple values",
+    "Common.Attr.Key.Radius.X": "Radius X",
-    "Panel.Info.Range.Details.Attr.Error.Not.Range": "The focus object is not a Range",
+    "Common.Attr.Key.Radius.Y": "Radius Y",
+    "Common.Attr.Key.Radius.Z": "Radius Z",
+    "Common.Attr.Key.Color": "Color",
+    "Common.Attr.Key.Error.Multiple": "Multiple values",
+    "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
 }
 export default EN_US;

source/Localization/ZH-CN.ts

@@ -38,8 +38,12 @@ const ZH_CN = {
     "Common.Attr.Key.Position.X": "X 坐标",
     "Common.Attr.Key.Position.Y": "Y 坐标",
     "Common.Attr.Key.Position.Z": "Z 坐标",
-    "Common.Attr.Key.Error.Multiple": "无法编辑多重数值",
+    "Common.Attr.Key.Radius.X": "X 半径",
-    "Panel.Info.Range.Details.Attr.Error.Not.Range": "焦点对象不是一个范围",
+    "Common.Attr.Key.Radius.Y": "Y 半径",
+    "Common.Attr.Key.Radius.Z": "Z 半径",
+    "Common.Attr.Key.Color": "颜色",
+    "Common.Attr.Key.Error.Multiple": "多重数值",
+    "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
 }
 export default ZH_CN;

source/Panel/RangeDetails/RangeDetails.tsx

@@ -1,72 +1,97 @@
 import { Component, ReactNode } from "react";
 import { AttrInput } from "@Component/AttrInput/AttrInput";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { useStatusWithEvent, IMixinStatusProps, Status } from "@Context/Status";
 import { AllI18nKeys } from "@Component/Localization/Localization";
 import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
+import { ColorInput } from "@Component/ColorInput/ColorInput";
 import "./RangeDetails.scss";
 
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange")
 class RangeDetails extends Component<IMixinStatusProps> {
     
+    public readonly AttrI18nKey: AllI18nKeys[] = [
+        "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Color",
+        "Common.Attr.Key.Position.X",
+        "Common.Attr.Key.Position.Y",
+        "Common.Attr.Key.Position.Z",
+        "Common.Attr.Key.Radius.X",
+        "Common.Attr.Key.Radius.Y",
+        "Common.Attr.Key.Radius.Z"
+    ]
+
     private renderErrorFrom(error: AllI18nKeys) {
         return <>
-			<AttrInput keyI18n="Common.Attr.Key.Display.Name" disable disableI18n={error}/>
+            {this.AttrI18nKey.map((key, index) => {
-			<AttrInput keyI18n="Common.Attr.Key.Position.X" disable disableI18n={error}/>
+                return <AttrInput key={index} keyI18n={key} disable disableI18n={error}/>
-            <AttrInput keyI18n="Common.Attr.Key.Position.Y" disable disableI18n={error}/>
+            })}
-            <AttrInput keyI18n="Common.Attr.Key.Position.Z" disable disableI18n={error}/>
+        </>
-		</>
+    }
+
+    private renderAttrInput(
+        id: ObjectID, key: number, val: string | number | undefined,
+        change: (val: string, status: Status) => any,
+        step?: number, max?: number, min?: number
+    ) {
+        // console.log(id, key, val, step, max, min)
+        const handelFunc = (e: string) => {
+            if (this.props.status) {
+                change(e, this.props.status);
+            }
+        }
+        if (step) {
+            return <AttrInput
+                id={id} isNumber={true} step={step} keyI18n={this.AttrI18nKey[key]}
+                value={val} max={max} min={min}
+                valueChange={handelFunc}
+            />
+        } else {
+            return <AttrInput
+                id={id} keyI18n={this.AttrI18nKey[key]} value={val}
+                valueChange={handelFunc}
+            />
+        }
     }
 
     private renderFrom(range: Range) {
+        // console.log(range);
         return <>
-			<AttrInput
+            {this.renderAttrInput(range.id, 0, range.displayName, (val, status) => {
-                id={range.id}
+                status.changeRangeAttrib(range.id, "displayName", val);
-                keyI18n="Common.Attr.Key.Display.Name"
+            })}
-                value={range.displayName}
+
-                valueChange={(e) => {
+            <ColorInput keyI18n="Common.Attr.Key.Color" value={range.color} normal valueChange={(color) => {
-                    this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null;
+                if (this.props.status) {
-                }}
+                    this.props.status.changeRangeAttrib(range.id, "color", color);
-            />
+                }
-			<AttrInput
+            }}/>
-                id={range.id}
+
-                isNumber={true}
+            {this.renderAttrInput(range.id, 2, range.position[0], (val, status) => {
-                step={.1}
+                range.position[0] = (val as any) / 1;
-                keyI18n="Common.Attr.Key.Position.X"
+                status.changeRangeAttrib(range.id, "position", range.position);
-                value={range.position[0]}
+            }, .1)}
-                valueChange={(e) => {
+            {this.renderAttrInput(range.id, 3, range.position[1], (val, status) => {
-                    if (this.props.status) {
+                range.position[1] = (val as any) / 1;
-                        range.position[0] = (e as any) / 1;
+                status.changeRangeAttrib(range.id, "position", range.position);
-                        this.props.status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1)}
-                    }
+            {this.renderAttrInput(range.id, 4, range.position[2], (val, status) => {
-                }}
+                range.position[2] = (val as any) / 1;
-            />
+                status.changeRangeAttrib(range.id, "position", range.position);
-            <AttrInput
+            }, .1)}
-                id={range.id}
+			
-                isNumber={true}
+            {this.renderAttrInput(range.id, 5, range.radius[0], (val, status) => {
-                step={.1}
+                range.radius[0] = (val as any) / 1;
-                keyI18n="Common.Attr.Key.Position.Y"
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-                value={range.position[1]}
+            }, .1, undefined, 0)}
-                valueChange={(e) => {
+            {this.renderAttrInput(range.id, 6, range.radius[1], (val, status) => {
-                    if (this.props.status) {
+                range.radius[1] = (val as any) / 1;
-                        range.position[1] = (e as any) / 1;
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-                        this.props.status.changeRangeAttrib(range.id, "position", range.position);
+            }, .1, undefined, 0)}
-                    }
+            {this.renderAttrInput(range.id, 7, range.radius[2], (val, status) => {
-                }}
+                range.radius[2] = (val as any) / 1;
-            />
+                status.changeRangeAttrib(range.id, "radius", range.radius);
-            <AttrInput
+            }, .1, undefined, 0)}
-                id={range.id}
-                isNumber={true}
-                step={.1}
-                keyI18n="Common.Attr.Key.Position.Z"
-                value={range.position[2]}
-                valueChange={(e) => {
-                    if (this.props.status) {
-                        range.position[2] = (e as any) / 1;
-                        this.props.status.changeRangeAttrib(range.id, "position", range.position);
-                    }
-                }}
-            />
 		</>
     }