From 45975cafe78aa1bd6b146cf2fc1120cda2c7d248 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 8 Mar 2022 13:53:08 +0800 Subject: [PATCH 1/4] Optimize attr inputer --- source/Component/AttrInput/AttrInput.tsx | 5 + source/Context/Status.tsx | 2 +- source/Localization/EN-US.ts | 3 + source/Localization/ZH-CN.ts | 3 + source/Panel/RangeDetails/RangeDetails.tsx | 123 ++++++++++++--------- 5 files changed, 82 insertions(+), 54 deletions(-) diff --git a/source/Component/AttrInput/AttrInput.tsx b/source/Component/AttrInput/AttrInput.tsx index d798072..52c26ba 100644 --- a/source/Component/AttrInput/AttrInput.tsx +++ b/source/Component/AttrInput/AttrInput.tsx @@ -142,6 +142,11 @@ class AttrInput extends Component { 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(); diff --git a/source/Context/Status.tsx b/source/Context/Status.tsx index 81cbdcc..0c9084f 100644 --- a/source/Context/Status.tsx +++ b/source/Context/Status.tsx @@ -173,7 +173,7 @@ function useStatusWithEvent(...events: Array) { 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); } diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 6211a6d..6b79f72 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -38,6 +38,9 @@ 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.Radius.X": "Radius X", + "Common.Attr.Key.Radius.Y": "Radius Y", + "Common.Attr.Key.Radius.Z": "Radius Z", "Common.Attr.Key.Error.Multiple": "Cannot edit multiple values", "Panel.Info.Range.Details.Attr.Error.Not.Range": "The focus object is not a Range", "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index bed66b3..3c5663b 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -38,6 +38,9 @@ const ZH_CN = { "Common.Attr.Key.Position.X": "X 坐标", "Common.Attr.Key.Position.Y": "Y 坐标", "Common.Attr.Key.Position.Z": "Z 坐标", + "Common.Attr.Key.Radius.X": "X 半径", + "Common.Attr.Key.Radius.Y": "Y 半径", + "Common.Attr.Key.Radius.Z": "Z 半径", "Common.Attr.Key.Error.Multiple": "无法编辑多重数值", "Panel.Info.Range.Details.Attr.Error.Not.Range": "焦点对象不是一个范围", "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象", diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index 21c944d..f583bed 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -1,6 +1,6 @@ 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"; @@ -8,65 +8,82 @@ import "./RangeDetails.scss"; @useStatusWithEvent("rangeAttrChange", "focusObjectChange") class RangeDetails extends Component { + + public readonly AttrI18nKey: AllI18nKeys[] = [ + "Common.Attr.Key.Display.Name", + "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 <> - - - - - + {this.AttrI18nKey.map((key, index) => { + return + })} + + } + + 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 + } else { + return + } } private renderFrom(range: Range) { + // console.log(range); return <> - { - this.props.status ? this.props.status.changeRangeAttrib(range.id, "displayName", e) : null; - }} - /> - { - if (this.props.status) { - range.position[0] = (e as any) / 1; - this.props.status.changeRangeAttrib(range.id, "position", range.position); - } - }} - /> - { - if (this.props.status) { - range.position[1] = (e as any) / 1; - this.props.status.changeRangeAttrib(range.id, "position", range.position); - } - }} - /> - { - if (this.props.status) { - range.position[2] = (e as any) / 1; - this.props.status.changeRangeAttrib(range.id, "position", range.position); - } - }} - /> + {this.renderAttrInput(range.id, 0, range.displayName, (val, status) => { + status.changeRangeAttrib(range.id, "displayName", val); + })} + + {this.renderAttrInput(range.id, 1, range.position[0], (val, status) => { + range.position[0] = (val as any) / 1; + status.changeRangeAttrib(range.id, "position", range.position); + }, .1)} + {this.renderAttrInput(range.id, 2, range.position[1], (val, status) => { + range.position[1] = (val as any) / 1; + status.changeRangeAttrib(range.id, "position", range.position); + }, .1)} + {this.renderAttrInput(range.id, 3, range.position[2], (val, status) => { + range.position[2] = (val as any) / 1; + status.changeRangeAttrib(range.id, "position", range.position); + }, .1)} + + {this.renderAttrInput(range.id, 4, range.radius[0], (val, status) => { + range.radius[0] = (val as any) / 1; + status.changeRangeAttrib(range.id, "radius", range.radius); + }, .1, undefined, 0)} + {this.renderAttrInput(range.id, 5, range.radius[1], (val, status) => { + range.radius[1] = (val as any) / 1; + status.changeRangeAttrib(range.id, "radius", range.radius); + }, .1, undefined, 0)} + {this.renderAttrInput(range.id, 6, range.radius[2], (val, status) => { + range.radius[2] = (val as any) / 1; + status.changeRangeAttrib(range.id, "radius", range.radius); + }, .1, undefined, 0)} } From 4c9a0622e1b6014f398577f3a09d70470b016363 Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 8 Mar 2022 14:11:06 +0800 Subject: [PATCH 2/4] Update git ignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 72ed506..4104ff8 100644 --- a/.gitignore +++ b/.gitignore @@ -41,6 +41,7 @@ build/Release node_modules/ jspm_packages/ build/ +out/ # TypeScript v1 declaration files typings/ From a8e6f9f5bec96e90b989c56db1ac7c092bede50d Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 8 Mar 2022 16:27:14 +0800 Subject: [PATCH 3/4] Add color picker --- source/Component/AttrInput/AttrInput.scss | 31 +++- source/Component/AttrInput/AttrInput.tsx | 14 +- source/Component/ColorInput/ColorInput.scss | 90 ++++++++++++ source/Component/ColorInput/ColorInput.tsx | 133 ++++++++++++++++++ source/Component/DetailsList/DetailsList.scss | 4 +- source/Localization/EN-US.ts | 5 +- source/Localization/ZH-CN.ts | 5 +- source/Panel/RangeDetails/RangeDetails.tsx | 20 ++- 8 files changed, 280 insertions(+), 22 deletions(-) create mode 100644 source/Component/ColorInput/ColorInput.scss create mode 100644 source/Component/ColorInput/ColorInput.tsx diff --git a/source/Component/AttrInput/AttrInput.scss b/source/Component/AttrInput/AttrInput.scss index 727a96e..f578672 100644 --- a/source/Component/AttrInput/AttrInput.scss +++ b/source/Component/AttrInput/AttrInput.scss @@ -1,7 +1,6 @@ @import "../Theme/Theme.scss"; -$line-min-height: 24px; -$root-min-height: 26px; +$line-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; } diff --git a/source/Component/AttrInput/AttrInput.tsx b/source/Component/AttrInput/AttrInput.tsx index 52c26ba..c496140 100644 --- a/source/Component/AttrInput/AttrInput.tsx +++ b/source/Component/AttrInput/AttrInput.tsx @@ -153,6 +153,16 @@ class AttrInput extends Component { this.error = this.check(value.toString()); } + private renderErrorInput() { + return
+ { + this.props.disableI18n ? + : + {this.props.value} + } +
+ } + public render(): ReactNode { return {
{ this.props.disable ? - this.props.disableI18n ? - : -
{this.props.value}
: + this.renderErrorInput() : this.renderInput() }
diff --git a/source/Component/ColorInput/ColorInput.scss b/source/Component/ColorInput/ColorInput.scss new file mode 100644 index 0000000..7f8706f --- /dev/null +++ b/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: 5px; + } + } + + 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; +} \ No newline at end of file diff --git a/source/Component/ColorInput/ColorInput.tsx b/source/Component/ColorInput/ColorInput.tsx new file mode 100644 index 0000000..febf0fb --- /dev/null +++ b/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 { + + public constructor(props: IColorInputProps) { + super(props); + this.state = { + isPickerVisible: false + } + } + + private pickerTarget = createRef(); + + private renderPicker() { + return { + this.setState({ + isPickerVisible: false + }) + }} + > +
+ { + 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, + ]) + } + } + }} + /> +
+ + } + + private renderErrorInput() { + return
+ { + this.props.disableI18n ? + : + {this.props.value} + } +
; + } + + private renderColorInput() { + return <> +
+
+
+
+
{this.getColorString(true)}
+
+ ; + } + + 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 <> + +
+ +
+
{ + this.setState({ + isPickerVisible: !this.props.disable + }) + }} + > + { this.props.disable ? null : this.renderColorInput() } + { this.props.disable ? this.renderErrorInput() : null } +
+ + + {this.state.isPickerVisible ? this.renderPicker(): null} + + } +} + +export { ColorInput }; \ No newline at end of file diff --git a/source/Component/DetailsList/DetailsList.scss b/source/Component/DetailsList/DetailsList.scss index c9a6d31..d98dcbb 100644 --- a/source/Component/DetailsList/DetailsList.scss +++ b/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 { diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 6b79f72..2ab0d8c 100644 --- a/source/Localization/EN-US.ts +++ b/source/Localization/EN-US.ts @@ -41,8 +41,9 @@ const EN_US = { "Common.Attr.Key.Radius.X": "Radius X", "Common.Attr.Key.Radius.Y": "Radius Y", "Common.Attr.Key.Radius.Z": "Radius Z", - "Common.Attr.Key.Error.Multiple": "Cannot edit multiple values", - "Panel.Info.Range.Details.Attr.Error.Not.Range": "The focus object is not a Range", + "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; \ No newline at end of file diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index 3c5663b..80753da 100644 --- a/source/Localization/ZH-CN.ts +++ b/source/Localization/ZH-CN.ts @@ -41,8 +41,9 @@ const ZH_CN = { "Common.Attr.Key.Radius.X": "X 半径", "Common.Attr.Key.Radius.Y": "Y 半径", "Common.Attr.Key.Radius.Z": "Z 半径", - "Common.Attr.Key.Error.Multiple": "无法编辑多重数值", - "Panel.Info.Range.Details.Attr.Error.Not.Range": "焦点对象不是一个范围", + "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; \ No newline at end of file diff --git a/source/Panel/RangeDetails/RangeDetails.tsx b/source/Panel/RangeDetails/RangeDetails.tsx index f583bed..4fe9548 100644 --- a/source/Panel/RangeDetails/RangeDetails.tsx +++ b/source/Panel/RangeDetails/RangeDetails.tsx @@ -4,6 +4,7 @@ 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") @@ -11,6 +12,7 @@ class RangeDetails extends Component { 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", @@ -59,28 +61,34 @@ class RangeDetails extends Component { status.changeRangeAttrib(range.id, "displayName", val); })} - {this.renderAttrInput(range.id, 1, range.position[0], (val, status) => { + { + if (this.props.status) { + this.props.status.changeRangeAttrib(range.id, "color", color); + } + }}/> + + {this.renderAttrInput(range.id, 2, range.position[0], (val, status) => { range.position[0] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 2, range.position[1], (val, status) => { + {this.renderAttrInput(range.id, 3, range.position[1], (val, status) => { range.position[1] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 3, range.position[2], (val, status) => { + {this.renderAttrInput(range.id, 4, range.position[2], (val, status) => { range.position[2] = (val as any) / 1; status.changeRangeAttrib(range.id, "position", range.position); }, .1)} - {this.renderAttrInput(range.id, 4, range.radius[0], (val, status) => { + {this.renderAttrInput(range.id, 5, range.radius[0], (val, status) => { range.radius[0] = (val as any) / 1; status.changeRangeAttrib(range.id, "radius", range.radius); }, .1, undefined, 0)} - {this.renderAttrInput(range.id, 5, range.radius[1], (val, status) => { + {this.renderAttrInput(range.id, 6, range.radius[1], (val, status) => { range.radius[1] = (val as any) / 1; status.changeRangeAttrib(range.id, "radius", range.radius); }, .1, undefined, 0)} - {this.renderAttrInput(range.id, 6, range.radius[2], (val, status) => { + {this.renderAttrInput(range.id, 7, range.radius[2], (val, status) => { range.radius[2] = (val as any) / 1; status.changeRangeAttrib(range.id, "radius", range.radius); }, .1, undefined, 0)} From 6f70f3d75fc7ccc8fddc66ef6cf9dfade3f4cc2c Mon Sep 17 00:00:00 2001 From: MrKBear Date: Tue, 8 Mar 2022 16:54:09 +0800 Subject: [PATCH 4/4] Optimize color inputer style --- source/Component/ColorInput/ColorInput.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/Component/ColorInput/ColorInput.scss b/source/Component/ColorInput/ColorInput.scss index 7f8706f..8f63de7 100644 --- a/source/Component/ColorInput/ColorInput.scss +++ b/source/Component/ColorInput/ColorInput.scss @@ -48,7 +48,7 @@ div.color-input-root { align-items: center; div.text-box { - padding-left: 5px; + padding-left: 1px; } }