source/Component/AttrInput/AttrInput.tsx

@@ -12,7 +12,6 @@ interface IAttrInputProps {
     value?: number | string;
 	isNumber?: boolean;
     maxLength?: number;
-    minLength?: number;
     max?: number;
     min?: number;
     step?: number;
@@ -41,11 +40,6 @@ class AttrInput extends Component<IAttrInputProps> {
             return <Localization i18nKey="Input.Error.Length" options={{ num: maxLength.toString() }} />
         }
 
-        const minLength = this.props.minLength ?? 1;
-        if (value.length < minLength) {
-            return <Localization i18nKey="Input.Error.Length.Less" options={{ num: minLength.toString() }} />
-        }
-
         if (this.props.isNumber) {
             const praseNumber = (value as any) / 1;
 

source/Component/ErrorMessage/ErrorMessage.tsx

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

source/Component/LabelList/LabelList.scss

@@ -1,14 +1,8 @@
 @import "../Theme/Theme.scss";
 
-div.label-list-root {
-    margin: -5px;
-}
-
 div.label {
     width: auto;
     height: auto;
-    min-height: 24px;
-    box-sizing: border-box;
     display: inline-flex;
     margin: 5px 5px;
     justify-content: center;
@@ -29,14 +23,11 @@ div.label {
 
     div.label-name {
         padding: 2px 3px;
-        display: flex;
-        align-items: center;
         text-overflow: ellipsis;
         overflow: hidden;
     }
 
     div.delete-button {
-        flex-shrink: 0;
         padding: 2px 3px;
         border-radius: 3px;
         display: flex;
@@ -46,28 +37,6 @@ div.label {
     }
 }
 
-div.label.one-line div.label-name {
-    max-width: 100%;
-    word-break: keep-all;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-div.label.add-button {
-    width: 24px;
-    align-items: center;
-    justify-content: center;
-}
-
-div.dark.label.add-button {
-    border: .5px dashed $lt-bg-color-lvl3-dark;
-}
-
-div.light.label.add-button {
-    border: .5px dashed $lt-bg-color-lvl3-light;
-}
-
 div.dark.label {
     transition: none;
     background-color: $lt-bg-color-lvl3-dark;
@@ -94,22 +63,14 @@ div.light.label {
     }
 }
 
-div.dark.label:hover {
+div.dark.label:hover,
+div.dark.label.focus {
     color: $lt-font-color-lvl2-dark;
     background-color: $lt-bg-color-lvl2-dark;
 }
 
-div.dark.label.focus {
+div.light.label:hover,
-    color: $lt-font-color-lvl1-dark;
+div.light.label.focus {
-    background-color: $lt-bg-color-lvl1-dark;
-}
-
-div.light.label:hover {
     color: $lt-font-color-lvl2-light;
     background-color: $lt-bg-color-lvl2-light;
-}
-
-div.light.label.focus {
-    color: $lt-font-color-lvl1-light;
-    background-color: $lt-bg-color-lvl1-light;
 }

source/Component/LabelList/LabelList.tsx

@@ -1,4 +1,4 @@
-import { Component, RefObject } from "react";
+import { Component } from "react";
 import { Label } from "@Model/Label";
 import { Icon } from "@fluentui/react";
 import { useSetting, IMixinSettingProps, Themes } from "@Context/Setting";
@@ -6,15 +6,11 @@ import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import "./LabelList.scss";
 
 interface ILabelListProps {
-    minHeight?: number;
-    maxWidth?: number;
-    width?: number;
     labels: Label[];
-    addRef?: RefObject<HTMLDivElement>;
+    canDelete?: boolean;
     focusLabel?: Label;
     clickLabel?: (label: Label) => any;
     deleteLabel?: (label: Label) => any;
-    addLabel?: () => any;
 }
 
 @useSetting
@@ -25,23 +21,15 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
     private renderLabel(label: Label) {
 
         const theme = this.props.setting?.themes ?? Themes.dark;
-        const classList: string[] = ["label"];
+        const classList:string[] = ["label"];
         classList.push( theme === Themes.dark ? "dark" : "light" );
         const isFocus = this.props.focusLabel && this.props.focusLabel.equal(label);
         if (isFocus) {
             classList.push("focus");
         }
-        if (this.props.maxWidth) {
-            classList.push("one-line");
-        }
         const colorCss = `rgb(${label.color.join(",")})`;
-        const isDelete = label.isDeleted();
 
         return <div
-            style={{
-                minHeight: this.props.minHeight,
-                maxWidth: this.props.maxWidth
-            }}
             className={classList.join(" ")}
             key={label.id}
             onClick={() => {
@@ -50,22 +38,19 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
                 }
                 this.isDeleteClick = false;
             }}
+            style={{
+                borderColor: isFocus ? colorCss : undefined
+            }}
         >
             <div className="label-color" style={{
                 backgroundColor: colorCss,
                 borderRadius: isFocus ? 0 : 3
             }}/>
-            <div
+            <div className="label-name">
-                className="label-name"
+                {label.name}
-                style={{
-                    textDecoration: isDelete ? "line-through" : undefined,
-                    opacity: isDelete ? ".6" : undefined
-                }}
-            >
-                <div>{label.name}</div>
             </div>
             {
-                this.props.deleteLabel ?
+                this.props.canDelete ? 
                 <div
                     className="delete-button"
                     onClick={() => {
@@ -81,37 +66,18 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
         </div>
     }
 
-    private renderAllLabels() {
+    private renderAllLabels(labels: Label[]) {
         return this.props.labels.map((label) => {
             return this.renderLabel(label);
         });
     }
-
-    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
-            }}
-            onClick={() => {
-                this.props.addLabel ? this.props.addLabel() : null
-            }}
-        >
-            <Icon iconName="add"></Icon>
-        </div>;
-    }
     
     public render() {
-        return <div className="label-list-root">
+        if (this.props.labels.length > 0) {
-            {this.renderAllLabels()}
+            return this.renderAllLabels(this.props.labels);
-            {this.props.addLabel ? this.renderAddButton() : null}
+        } else {
-        </div>;
+            return <ErrorMessage i18nKey="Panel.Info.Label.List.Error.Nodata"/>
+        }
     }
 }
 

source/Component/LabelPicker/LabelPicker.scss

@@ -1,31 +0,0 @@
-@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

@@ -1,93 +0,0 @@
-import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
-import { PickerList } from "../PickerList/PickerList";
-import { Label } from "@Model/Label";
-import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { Component, ReactNode, createRef } from "react";
-import { LabelList } from "../LabelList/LabelList";
-import "./LabelPicker.scss"
-
-interface ILabelPickerProps {
-	keyI18n: AllI18nKeys;
-    infoI18n?: AllI18nKeys;
-	labels: Label[];
-	labelAdd?: (label: Label) => any;
-	labelDelete?: (label: Label) => any;
-}
-
-interface ILabelPickerState {
-    isPickerVisible: boolean;
-}
-
-@useStatusWithEvent("labelAttrChange", "labelChange")
-class LabelPicker extends Component<ILabelPickerProps & IMixinStatusProps, ILabelPickerState> {
-
-	public constructor(props: ILabelPickerProps) {
-        super(props);
-        this.state = {
-            isPickerVisible: false
-        }
-    }
-
-	private addButtonRef = createRef<HTMLDivElement>();
-
-	private getOtherLabel() {
-		let res: Label[] = [];
-		let nowLabel: Label[] = this.props.labels ?? [];
-		if (this.props.status) {
-			this.props.status.model.labelPool.forEach((aLabel) => {
-				let isHas = false;
-				nowLabel.forEach((nLabel) => {
-					if (aLabel.equal(nLabel)) isHas = true;
-				})
-				if (!isHas) {
-					res.push(aLabel);
-				}
-			})
-		}
-		return res;
-	}
-
-	public render(): ReactNode {
-		return <div
-			className="label-picker-root"
-		>
-			<div className="input-intro">
-				<Localization i18nKey={this.props.keyI18n}/>
-			</div>
-			<div className="root-content">
-				<LabelList
-					addRef={this.addButtonRef}
-					labels={this.props.labels}
-					minHeight={26}
-					deleteLabel={(label) => {
-						this.props.labelDelete ? this.props.labelDelete(label) : 0;
-					}}
-					addLabel={() => {
-						this.setState({
-							isPickerVisible: true
-						});
-					}}
-				/>
-				{this.state.isPickerVisible ? <PickerList
-					objectList={this.getOtherLabel()}
-					dismiss={() => {
-						this.setState({
-							isPickerVisible: false
-						});
-					}}
-					click={(label) => {
-						if (label instanceof Label && this.props.labelAdd) {
-							this.props.labelAdd(label)
-						}
-						this.setState({
-							isPickerVisible: false
-						});
-					}}
-					target={this.addButtonRef}
-				/> : null}
-			</div>
-		</div>
-	}
-}
-
-export { LabelPicker }

source/Component/ObjectPicker/ObjectPicker.tsx

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

source/Component/PickerList/PickerList.scss

@@ -1,72 +0,0 @@
-div.picker-list-root {
-	max-width: 200px;
-	padding: 0px;
-	margin: 0px;
-	overflow-y: auto;
-
-	div.picker-list-item {
-		width: 200px;
-		height: 36px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		vertical-align: middle;
-		cursor: pointer;
-		user-select: none;
-		border-radius: 3px;
-		overflow: hidden;
-
-		div.list-item-color {
-			width: 3px;
-			height: calc( 100% - 6px );
-			margin: 3px 0 3px 3px;
-			flex-shrink: 0;
-			border-radius: 1000px;
-			overflow: hidden;
-			background-color: black;
-		}
-
-		div.list-item-icon {
-			width: 30px;
-			flex-shrink: 0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-
-		div.list-item-name {
-			width: 100%;
-		}
-	}
-
-	div.picker-list-item:hover {
-		background-color: rgba($color: #000000, $alpha: .1);
-	}
-
-	span.picker-list-nodata {
-		display: inline-block;
-		padding: 5px;
-	}
-}
-
-div.picker-list-root::-webkit-scrollbar {
-	width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
-	height: 0;
-}
-
-div.picker-list-root::-webkit-scrollbar {
-	width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
-	  height: 0;
-}
-
-div.picker-list-root::-webkit-scrollbar-thumb {
-	/*滚动条里面小方块*/
-	border-radius: 8px;
-	background-color: rgba($color: #000000, $alpha: .1);
-}
-
-div.picker-list-root::-webkit-scrollbar-track {
-	/*滚动条里面轨道*/
-	border-radius: 8px;
-	background-color: rgba($color: #000000, $alpha: 0);
-}

source/Component/PickerList/PickerList.tsx

@@ -1,87 +0,0 @@
-import { Localization } from "@Component/Localization/Localization";
-import { Callout, DirectionalHint, Icon } from "@fluentui/react";
-import { CtrlObject } from "@Model/CtrlObject";
-import { Group } from "@Model/Group";
-import { Label } from "@Model/Label";
-import { Range } from "@Model/Range";
-import { Component, ReactNode, RefObject } from "react";
-import "./PickerList.scss";
-
-type IPickerListItem = CtrlObject | Label;
-
-interface IPickerListProps {
-	objectList?: IPickerListItem[];
-	target?: RefObject<any>;
-	dismiss?: () => any;
-	click?: (item: IPickerListItem) => any;
-}
-
-class PickerList extends Component<IPickerListProps> {
-
-	private renderItem(item: IPickerListItem) {
-
-		let color: number[] = [];
-		let icon: string = "tag";
-		let name: string = "";
-
-		if (item instanceof Range) {
-			icon = "CubeShape"
-		}
-		if (item instanceof Group) {
-			icon = "WebAppBuilderFragment"
-		}
-		if (item instanceof CtrlObject) {
-			color[0] = Math.round(item.color[0] * 255);
-			color[1] = Math.round(item.color[1] * 255);
-			color[2] = Math.round(item.color[2] * 255);
-			name = item.displayName;
-		}
-		if (item instanceof Label) {
-			icon = "tag";
-			color = item.color.concat([]);
-			name = item.name;
-		}
-
-		return <div
-			className="picker-list-item"
-			key={item.id}
-			onClick={() => {
-				if (this.props.click) {
-					this.props.click(item)
-				}
-			}}
-		>
-			<div className="list-item-color"
-				style={{
-					backgroundColor: `rgb(${color[0]},${color[1]},${color[2]})`
-				}}
-			></div>
-			<div className="list-item-icon">
-				<Icon iconName={icon}/>
-			</div>
-			<div className="list-item-name">
-				{name}
-			</div>
-		</div>;
-	}
-
-	public render(): ReactNode {
-		return <Callout
-			onDismiss={this.props.dismiss}
-			target={this.props.target}
-			directionalHint={DirectionalHint.topAutoEdge}
-		>
-			<div className="picker-list-root">
-				{this.props.objectList ? this.props.objectList.map((item) => {
-					return this.renderItem(item);
-				}) : null}
-				{!this.props.objectList || (this.props.objectList && this.props.objectList.length <= 0) ?
-					<Localization className="picker-list-nodata" i18nKey="Common.Attr.Key.Label.Picker.Nodata"/>
-					: null
-				}
-			</div>
-		</Callout>
-	}
-}
-
-export { PickerList }

source/Component/TogglesInput/TogglesInput.tsx

@@ -9,9 +9,7 @@ interface ITogglesInputProps {
     infoI18n?: AllI18nKeys;
     value?: boolean;
     disable?: boolean;
-    onIconName?: string;
+    valueChange?: (color: boolean) => any;
-    offIconName?: string;
-    valueChange?: (value: boolean) => any;
 }
 
 class TogglesInput extends Component<ITogglesInputProps> {
@@ -35,17 +33,9 @@ class TogglesInput extends Component<ITogglesInputProps> {
                         }
                     })}
                 >
-                    <Icon
+                    <Icon iconName="CheckMark" style={{
-                        iconName={
+                        display: this.props.value ? "inline-block" : "none"
-                            this.props.value ? 
+                    }}></Icon>
-                                this.props.onIconName ?? "CheckMark" :
-                                this.props.offIconName ?? undefined
-                        }
-                        style={{
-                            display: this.props.value ? "inline-block" : 
-                                this.props.offIconName ? "inline-block" : "none"
-                        }}
-                    ></Icon>
                 </div>    
             </div>
         </Theme>

source/Context/Status.tsx

@@ -30,10 +30,8 @@ interface IStatusEvent {
     focusObjectChange: void;
     focusLabelChange: void;
     objectChange: void;
-    rangeLabelChange: void;
     labelChange: void;
     rangeAttrChange: void;
-    labelAttrChange: void;
 }
 
 class Status extends Emitter<IStatusEvent> {
@@ -122,40 +120,6 @@ class Status extends Emitter<IStatusEvent> {
         }
     }
 
-    public addRangeLabel(id: ObjectID, val: Label) {
-        const range = this.model.getObjectById(id);
-        if (range && range instanceof Range) {
-            range.addLabel(val);
-            this.emit("rangeLabelChange");
-        }
-    }
-
-    public deleteRangeLabel(id: ObjectID, val: Label) {
-        const range = this.model.getObjectById(id);
-        if (range && range instanceof Range) {
-            range.removeLabel(val);
-            this.emit("rangeLabelChange");
-        }
-    }
-
-    /**
-     * 修改范围属性
-     */
-    public changeLabelAttrib<K extends keyof Label>
-    (label: Label, key: K, val: Label[K]) {
-        let findLabel: Label | undefined;
-        for (let i = 0; i < this.model.labelPool.length; i++) {
-            if (this.model.labelPool[i].equal(label)) {
-                findLabel = this.model.labelPool[i];
-                break;
-            }
-        }
-        if (findLabel) {
-            findLabel[key] = val;
-            this.emit("labelAttrChange");
-        }
-    }
-
     /**
      * 鼠标工具状态
      */

source/Localization/EN-US.ts

@@ -23,7 +23,6 @@ const EN_US = {
     "Input.Error.Max": "Enter value must be less than {num}",
     "Input.Error.Min": "Enter value must be greater than {num}",
     "Input.Error.Length": "The length of the input content must be less than {num}",
-    "Input.Error.Length.Less": "The length of the input content must be greater than {num}",
     "Object.List.New.Group": "Group object {id}",
     "Object.List.New.Range": "Range object {id}",
     "Object.List.New.Label": "Label {id}",
@@ -50,10 +49,7 @@ const EN_US = {
     "Common.Attr.Key.Color": "Color",
     "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",
-    "Common.Attr.Key.Label.Picker.Nodata": "No tags can be added",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "Object is not a Range",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "Unspecified range object",
     "Panel.Info.Label.Details.Error.Unspecified": "Label object not specified",

source/Localization/ZH-CN.ts

@@ -23,7 +23,6 @@ const ZH_CN = {
     "Input.Error.Max": "输入数值须小于 {number}",
     "Input.Error.Min": "输入数值须大于 {number}",
     "Input.Error.Length": "输入内容长度须小于 {number}",
-    "Input.Error.Length.Less": "输入内容长度须大于 {number}",
     "Object.List.New.Group": "组对象 {id}",
     "Object.List.New.Range": "范围对象 {id}",
     "Object.List.New.Label": "标签 {id}",
@@ -50,10 +49,7 @@ const ZH_CN = {
     "Common.Attr.Key.Color": "颜色",
     "Common.Attr.Key.Display": "显示",
     "Common.Attr.Key.Update": "更新",
-    "Common.Attr.Key.Delete": "删除",
-    "Common.Attr.Key.Label": "标签",
     "Common.Attr.Key.Error.Multiple": "多重数值",
-    "Common.Attr.Key.Label.Picker.Nodata": "没有可以被添加的标签",
     "Panel.Info.Range.Details.Attr.Error.Not.Range": "对象不是一个范围",
     "Panel.Info.Range.Details.Attr.Error.Unspecified": "未指定范围对象",
     "Panel.Info.Label.Details.Error.Unspecified": "未指定标签对象",

source/Panel/LabelDetails/LabelDetails.tsx

@@ -4,32 +4,37 @@ import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
 import { AllI18nKeys } from "@Component/Localization/Localization";
 import { ErrorMessage } from "@Component/ErrorMessage/ErrorMessage";
 import { ColorInput } from "@Component/ColorInput/ColorInput";
-import { Label } from "@Model/Label";
-import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
 import "./LabelDetails.scss";
+import { LabelList } from "@Component/LabelList/LabelList";
+import { Label } from "@Model/Label";
 
-@useStatusWithEvent("focusLabelChange", "labelAttrChange", "labelChange")
+@useStatusWithEvent("focusLabelChange")
 class LabelDetails extends Component<IMixinStatusProps> {
+    
+    public readonly AttrI18nKey: AllI18nKeys[] = [
+        "Common.Attr.Key.Display.Name",
+        "Common.Attr.Key.Color",
+    ]
 
     private renderFrom(label: Label) {
         return <>
+
+            <LabelList
+                labels={[label]}
+                canDelete
+                deleteLabel={() => {
+                    if (this.props.status) {
+                        this.props.status.model.deleteLabel(label);
+                        this.props.status.setLabelObject();
+                    }
+                }}
+            />
             
-            <AttrInput keyI18n="Common.Attr.Key.Display.Name" maxLength={15} value={label.name} valueChange={(value) => {
+            <AttrInput keyI18n="Common.Attr.Key.Display.Name" maxLength={15} value={label.name}/>
-                if (this.props.status) {
-                    this.props.status.changeLabelAttrib(label, "name", value);
-                }
-            }}/>
 
             <ColorInput keyI18n="Common.Attr.Key.Color" value={label.color} valueChange={(color) => {
                 if (this.props.status) {
-                    this.props.status.changeLabelAttrib(label, "color", color);
+                    
-                }
-            }}/>
-
-            <TogglesInput keyI18n="Common.Attr.Key.Delete" onIconName="delete" offIconName="delete" valueChange={() => {
-                if (this.props.status) {
-                    this.props.status.model.deleteLabel(label);
-                    this.props.status.setLabelObject();
                 }
             }}/>
 

source/Panel/LabelList/LabelList.scss

@@ -2,11 +2,7 @@
 
 div.label-list-panel-root {
     width: 100%;
-    min-height: 100%;
+    height: 100%;
     padding: 10px;
     box-sizing: border-box;
-}
-
-div.label-list-pabel-err-msg {
-    padding-bottom: 5px;
 }

source/Panel/LabelList/LabelList.tsx

@@ -3,7 +3,6 @@ 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 {
@@ -11,7 +10,7 @@ interface ILabelListProps {
 }
 
 @useSetting
-@useStatusWithEvent("labelChange", "focusLabelChange", "labelAttrChange")
+@useStatusWithEvent("labelChange", "focusLabelChange")
 class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSettingProps> {
     
     private labelInnerClick: boolean = false;
@@ -30,13 +29,8 @@ 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
+                canDelete
                 labels={labels}
                 focusLabel={this.props.status ? this.props.status.focusLabel : undefined}
                 clickLabel={(label) => {
@@ -55,10 +49,6 @@ class LabelList extends Component<ILabelListProps & IMixinStatusProps & IMixinSe
                     }
                     this.labelInnerClick = true;
                 }}
-                minHeight={26}
-                addLabel={() => {
-                    this.props.status ? this.props.status.newLabel() : undefined;
-                }}
             />
         </div>;
     }

source/Panel/RangeDetails/RangeDetails.tsx

@@ -7,15 +7,13 @@ 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", "rangeLabelChange")
+@useStatusWithEvent("rangeAttrChange", "focusObjectChange")
 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",
@@ -60,20 +58,6 @@ class RangeDetails extends Component<IMixinStatusProps> {
             {this.renderAttrInput(range.id, keyIndex ++, range.displayName, (val, status) => {
                 status.changeRangeAttrib(range.id, "displayName", val);
             })}
-
-            <LabelPicker keyI18n={this.AttrI18nKey[keyIndex ++]}
-                labels={range.allLabels()}
-                labelAdd={(label) => {
-                    if (this.props.status) {
-                        this.props.status.addRangeLabel(range.id, label);
-                    }
-                }}
-                labelDelete={(label) => {
-                    if (this.props.status) {
-                        this.props.status.deleteRangeLabel(range.id, label);
-                    }
-                }}
-            />
             
             <TogglesInput keyI18n={this.AttrI18nKey[keyIndex ++]} value={range.display} valueChange={(val) => {
                 if (this.props.status) {