Add toggles input component

source/Component/TogglesInput/TogglesInput.scss

@@ -0,0 +1,63 @@
+@import "../Theme/Theme.scss";
+
+$line-min-height: 26px;
+
+div.toggles-input {
+	width: 100%;
+	display: flex;
+	min-height: $line-min-height;
+	padding: 5px 0;
+
+	div.toggles-intro {
+		width: 50%;
+		height: 100%;
+		max-width: 220px;
+		display: flex;
+		align-items: center;
+        padding-right: 5px;
+        box-sizing: border-box;
+	}
+
+    div.toggles-content {
+        width: 50%;
+        height: 100%;
+        max-width: 180px;
+        min-height: $line-min-height;
+
+        div.checkbox {
+            width: $line-min-height;
+            height: $line-min-height;
+            overflow: hidden;
+            border-radius: 3px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            user-select: none;
+        }
+    }
+}
+
+div.dark.toggles-input {
+
+    div.toggles-content div.checkbox {
+        background-color: $lt-bg-color-lvl3-dark;
+		color: $lt-font-color-normal-dark;
+    }
+
+	div.toggles-content div.checkbox:hover {
+		background-color: $lt-bg-color-lvl2-dark;
+	}
+}
+
+div.light.toggles-input {
+
+    div.toggles-content div.checkbox {
+        background-color: $lt-bg-color-lvl3-light;
+		color: $lt-font-color-normal-light;
+    }
+
+	div.toggles-content div.checkbox:hover {
+		background-color: $lt-bg-color-lvl2-light;
+	}
+}

source/Component/TogglesInput/TogglesInput.tsx

@@ -0,0 +1,45 @@
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { Theme } from "@Component/Theme/Theme";
+import { Icon } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import "./TogglesInput.scss";
+
+interface ITogglesInputProps {
+    keyI18n: AllI18nKeys;
+    infoI18n?: AllI18nKeys;
+    value?: boolean;
+    disable?: boolean;
+    valueChange?: (color: boolean) => any;
+}
+
+class TogglesInput extends Component<ITogglesInputProps> {
+    public render(): ReactNode {
+        return <Theme className="toggles-input">
+            <div className="toggles-intro">
+                <Localization i18nKey={this.props.keyI18n}/>
+            </div>
+            <div className="toggles-content">
+                <div
+                    className="checkbox"
+                    style={{
+                        cursor: this.props.disable ? "not-allowed" : "pointer"
+                    }}
+                    onClick={(() => {
+                        if (this.props.disable) {
+                            return;
+                        }
+                        if (this.props.valueChange) {
+                            this.props.valueChange(!this.props.value);
+                        }
+                    })}
+                >
+                    <Icon iconName="CheckMark" style={{
+                        display: this.props.value ? "inline-block" : "none"
+                    }}></Icon>
+                </div>    
+            </div>
+        </Theme>
+    }
+}
+
+export { TogglesInput };

source/Localization/EN-US.ts

@@ -42,6 +42,7 @@ const EN_US = {
     "Common.Attr.Key.Radius.Y": "Radius Y",
     "Common.Attr.Key.Radius.Z": "Radius Z",
     "Common.Attr.Key.Color": "Color",
+    "Common.Attr.Key.Display": "Display",
     "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",

source/Localization/ZH-CN.ts

@@ -42,6 +42,7 @@ const ZH_CN = {
     "Common.Attr.Key.Radius.Y": "Y 半径",
     "Common.Attr.Key.Radius.Z": "Z 半径",
     "Common.Attr.Key.Color": "颜色",
+    "Common.Attr.Key.Display": "显示",
     "Common.Attr.Key.Error.Multiple": "多重数值",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",

source/Panel/RangeDetails/RangeDetails.tsx

@@ -5,6 +5,7 @@ import { AllI18nKeys } from "@Component/Localization/Localization";
 import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
+import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
 import "./RangeDetails.scss";
 
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange")
@@ -12,6 +13,7 @@ class RangeDetails extends Component<IMixinStatusProps> {
     
     public readonly AttrI18nKey: AllI18nKeys[] = [
         "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Display",
         "Common.Attr.Key.Color",
         "Common.Attr.Key.Position.X",
         "Common.Attr.Key.Position.Y",
@@ -55,40 +57,48 @@ class RangeDetails extends Component<IMixinStatusProps> {
     }
 
     private renderFrom(range: Range) {
-        // console.log(range);
+        
+        let keyIndex = 0;
+
         return <>
-            {this.renderAttrInput(range.id, 0, range.displayName, (val, status) => {
+            {this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => {
                 status.changeRangeAttrib(range.id, "displayName", val);
             })}
             
-            <ColorInput keyI18n="Common.Attr.Key.Color" value={range.color} normal valueChange={(color) => {
+            <TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.display} valueChange={(val) => {
+                if (this.props.status) {
+                    this.props.status.changeRangeAttrib(range.id, "display", val);
+                }
+            }}/>
+
+            <ColorInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.color} normal valueChange={(color) => {
                 if (this.props.status) {
                     this.props.status.changeRangeAttrib(range.id, "color", color);
                 }
             }}/>
 
-            {this.renderAttrInput(range.id, 2, range.position[0], (val, status) => {
+            {this.renderAttrInput(range.id, keyIndex ++, range.position[0], (val, status) => {
                 range.position[0] = (val as any) / 1;
                 status.changeRangeAttrib(range.id, "position", range.position);
             }, .1)}
-            {this.renderAttrInput(range.id, 3, range.position[1], (val, status) => {
+            {this.renderAttrInput(range.id, keyIndex ++, range.position[1], (val, status) => {
                 range.position[1] = (val as any) / 1;
                 status.changeRangeAttrib(range.id, "position", range.position);
             }, .1)}
-            {this.renderAttrInput(range.id, 4, range.position[2], (val, status) => {
+            {this.renderAttrInput(range.id, keyIndex ++, range.position[2], (val, status) => {
                 range.position[2] = (val as any) / 1;
                 status.changeRangeAttrib(range.id, "position", range.position);
             }, .1)}
 			
-            {this.renderAttrInput(range.id, 5, range.radius[0], (val, status) => {
+            {this.renderAttrInput(range.id, keyIndex ++, 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, 6, range.radius[1], (val, status) => {
+            {this.renderAttrInput(range.id, keyIndex ++, 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, 7, range.radius[2], (val, status) => {
+            {this.renderAttrInput(range.id, keyIndex ++, range.radius[2], (val, status) => {
                 range.radius[2] = (val as any) / 1;
                 status.changeRangeAttrib(range.id, "radius", range.radius);
             }, .1, undefined, 0)}