Add label picker

source/Component/ErrorMessage/ErrorMessage.tsx

@@ -5,10 +5,11 @@ import "./ErrorMessage.scss";
 interface IErrorMessageProps {
     i18nKey: AllI18nKeys;
     options?: Record<string, string>;
+    className?: string;
 }
 
 const ErrorMessage: FunctionComponent<IErrorMessageProps> = (props) => {
-    return <div className="panel-error-message">
+    return <div className={["panel-error-message", props.className].filter(c => !!c).join(" ")}>
         <Localization i18nKey={props.i18nKey} options={props.options}/>
     </div>
 }

source/Component/LabelList/LabelList.scss

@@ -1,5 +1,9 @@
 @import "../Theme/Theme.scss";
 
+div.label-list-root {
+    margin: -5px;
+}
+
 div.label {
     width: auto;
     height: auto;

source/Component/LabelList/LabelList.tsx

@@ -1,4 +1,4 @@
-import { Component } from "react";
+import { Component, RefObject } from "react";
 import { Label } from "@Model/Label";
 import { Icon } from "@fluentui/react";
 import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
@@ -10,6 +10,7 @@ interface ILabelListProps {
     maxWidth?: number;
     width?: number;
     labels: Label[];
+    addRef?: RefObject<HTMLDivElement>;
     focusLabel?: Label;
     clickLabel?: (label: Label) => any;
     deleteLabel?: (label: Label) => any;
@@ -79,17 +80,17 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
         });
     }
 
-    private renderAddButton(isNoMargin: boolean = false) {
+    private renderAddButton() {
         const theme = this.props.setting?.themes ?? Themes.dark;
         const classList: string[] = ["label", "add-button"];
         classList.push( theme === Themes.dark ? "dark" : "light" );
 
         return <div
             className={classList.join(" ")}
+            ref={this.props.addRef}
             style={{
                 minHeight: this.props.minHeight,
-                minWidth: this.props.minHeight,
+                minWidth: this.props.minHeight
-                marginLeft: isNoMargin ? "0" : undefined
             }}
             onClick={() => {
                 this.props.addLabel ? this.props.addLabel() : null
@@ -100,17 +101,10 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
     }
     
     public render() {
-        if (this.props.labels.length > 0) {
+        return <div className="label-list-root">
-            return <>
+            {this.renderAllLabels()}
-                {this.renderAllLabels()}
+            {this.props.addLabel ? this.renderAddButton() : null}
-                {this.props.addLabel ? this.renderAddButton() : null}
+        </div>;
-            </>;
-        } else {
-            return <>
-                <ErrorMessage i18nKey="Panel.Info.Label.List.Error.Nodata"/>
-                {this.props.addLabel ? this.renderAddButton(true) : null}
-            </>;
-        }
     }
 }
 

source/Component/LabelPicker/LabelPicker.scss

@@ -0,0 +1,31 @@
+@import "../Theme/Theme.scss";
+
+$line-min-height: 26px;
+
+div.label-picker-root {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	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;
+	}
+}

source/Component/LabelPicker/LabelPicker.tsx

@@ -0,0 +1,38 @@
+import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { Label } from "@Model/Label";
+import { Component, ReactNode } from "react";
+import { LabelList } from "../LabelList/LabelList";
+import "./LabelPicker.scss"
+
+interface ILabelPickerProps {
+	keyI18n: AllI18nKeys;
+    infoI18n?: AllI18nKeys;
+	labels: Label[];
+}
+
+class LabelPicker extends Component<ILabelPickerProps> {
+
+	public render(): ReactNode {
+		return <div
+			className="label-picker-root"
+		>
+			<div className="input-intro">
+				<Localization i18nKey={this.props.keyI18n}/>
+			</div>
+			<div className="root-content">
+				<LabelList
+					labels={this.props.labels}
+					minHeight={26}
+					deleteLabel={() => {
+						
+					}}
+					addLabel={() => {
+
+					}}
+				/>
+			</div>
+		</div>
+	}
+}
+
+export { LabelPicker }

source/Component/ObjectPicker/ObjectPicker.tsx

@@ -0,0 +1,12 @@
+import { Component, ReactNode } from "react";
+
+interface IObjectPickerProps {}
+
+class ObjectPicker extends Component<IObjectPickerProps> {
+
+	public render(): ReactNode {
+		return <div></div>
+	}
+}
+
+export { ObjectPicker }

source/Component/PickerList/PickerList.tsx

@@ -0,0 +1,12 @@
+import { Component, ReactNode } from "react";
+
+interface IPickerListProps {}
+
+class PickerList extends Component<IPickerListProps> {
+
+	public render(): ReactNode {
+		return <div></div>
+	}
+}
+
+export { PickerList }

source/Localization/EN-US.ts

@@ -51,6 +51,7 @@ const EN_US = {
     "Common.Attr.Key.Display": "Display",
     "Common.Attr.Key.Update": "Update",
     "Common.Attr.Key.Delete": "Delete",
+    "Common.Attr.Key.Label": "Label",
     "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

@@ -51,6 +51,7 @@ const ZH_CN = {
     "Common.Attr.Key.Display": "显示",
     "Common.Attr.Key.Update": "更新",
     "Common.Attr.Key.Delete": "删除",
+    "Common.Attr.Key.Label": "标签",
     "Common.Attr.Key.Error.Multiple": "多重数值",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",

source/Panel/LabelList/LabelList.scss

@@ -6,3 +6,7 @@ div.label-list-panel-root {
     padding: 10px;
     box-sizing: border-box;
 }
+
+div.label-list-pabel-err-msg {
+    padding-bottom: 5px;
+}

source/Panel/LabelList/LabelList.tsx

@@ -3,6 +3,7 @@ import { Component } from "react";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { useSetting, IMixinSettingProps } from "@Context/Setting";
 import { Label } from "@Model/Label";
+import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import "./LabelList.scss";
 
 interface ILabelListProps {
@@ -29,6 +30,12 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
                 this.labelInnerClick = false;
             }}
         >
+            {labels.length <=0 ? 
+                <ErrorMessage
+                    className="label-list-pabel-err-msg"
+                    i18nKey="Panel.Info.Label.List.Error.Nodata"
+                /> : null
+            }
             <LabelListComponent
                 labels={labels}
                 focusLabel={this.props.status ? this.props.status.focusLabel : undefined}

source/Panel/RangeDetails/RangeDetails.tsx

@@ -7,6 +7,7 @@ import { Range } from "@Model/Range";
 import { ObjectID } from "@Model/Renderer";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
 import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
+import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
 import "./RangeDetails.scss";
 
 @useStatusWithEvent("rangeAttrChange", "focusObjectChange")
@@ -14,6 +15,7 @@ class RangeDetails extends Component<IMixinStatusProps> {
     
     public readonly AttrI18nKey: AllI18nKeys[] = [
         "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Label",
         "Common.Attr.Key.Display",
         "Common.Attr.Key.Update",
         "Common.Attr.Key.Color",
@@ -59,6 +61,11 @@ class RangeDetails extends Component<IMixinStatusProps> {
                 status.changeRangeAttrib(range.id, "displayName", val);
             })}
 
+            <LabelPicker keyI18n={this.AttrI18nKey[keyIndex ++]}
+                labels={this.props.status?.model.labelPool ?? []}
+                // labels={[]}
+            />
+            
             <TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.display} valueChange={(val) => {
                 if (this.props.status) {
                     this.props.status.changeRangeAttrib(range.id, "display", val);