Add label picker

source/Component/LabelList/LabelList.tsx

@@ -35,6 +35,7 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
             classList.push("one-line");
         }
         const colorCss = `rgb(${label.color.join(",")})`;
+        const isDelete = label.isDeleted();
 
         return <div
             style={{
@@ -54,7 +55,13 @@ class LabelList extends Component<ILabelListProps & IMixinSettingProps> {
                 backgroundColor: colorCss,
                 borderRadius: isFocus ? 0 : 3
             }}/>
-            <div className="label-name">
+            <div
+                className="label-name"
+                style={{
+                    textDecoration: isDelete ? "line-through" : undefined,
+                    opacity: isDelete ? ".6" : undefined
+                }}
+            >
                 <div>{label.name}</div>
             </div>
             {

source/Component/LabelPicker/LabelPicker.tsx

@@ -1,6 +1,8 @@
 import { AllI18nKeys, Localization } from "@Component/Localization/Localization";
+import { PickerList } from "../PickerList/PickerList";
 import { Label } from "@Model/Label";
-import { Component, ReactNode } from "react";
+import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
+import { Component, ReactNode, createRef } from "react";
 import { LabelList } from "../LabelList/LabelList";
 import "./LabelPicker.scss"
 
@@ -8,9 +10,42 @@ interface ILabelPickerProps {
 	keyI18n: AllI18nKeys;
     infoI18n?: AllI18nKeys;
 	labels: Label[];
+	labelAdd?: (label: Label) => any;
+	labelDelete?: (label: Label) => any;
 }
 
-class LabelPicker extends Component<ILabelPickerProps> {
+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
@@ -21,15 +56,35 @@ class LabelPicker extends Component<ILabelPickerProps> {
 			</div>
 			<div className="root-content">
 				<LabelList
+					addRef={this.addButtonRef}
 					labels={this.props.labels}
 					minHeight={26}
-					deleteLabel={() => {
+					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>
 	}

source/Component/PickerList/PickerList.scss

@@ -0,0 +1,72 @@
+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,11 +1,86 @@
-import { Component, ReactNode } from "react";
+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";
 
-interface IPickerListProps {}
+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 <div></div>
+		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>
 	}
 }
 

source/Context/Status.tsx

@@ -30,6 +30,7 @@ interface IStatusEvent {
     focusObjectChange: void;
     focusLabelChange: void;
     objectChange: void;
+    rangeLabelChange: void;
     labelChange: void;
     rangeAttrChange: void;
     labelAttrChange: void;
@@ -121,6 +122,22 @@ 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");
+        }
+    }
+
     /**
      * 修改范围属性
      */

source/Localization/EN-US.ts

@@ -53,6 +53,7 @@ const EN_US = {
     "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

@@ -53,6 +53,7 @@ const ZH_CN = {
     "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/RangeDetails/RangeDetails.tsx

@@ -10,7 +10,7 @@ import { TogglesInput } from "@Component/TogglesInput/TogglesInput";
 import { LabelPicker } from "@Component/LabelPicker/LabelPicker";
 import "./RangeDetails.scss";
 
-@useStatusWithEvent("rangeAttrChange", "focusObjectChange")
+@useStatusWithEvent("rangeAttrChange", "focusObjectChange", "rangeLabelChange")
 class RangeDetails extends Component<IMixinStatusProps> {
     
     public readonly AttrI18nKey: AllI18nKeys[] = [
@@ -62,8 +62,17 @@ class RangeDetails extends Component<IMixinStatusProps> {
             })}
 
             <LabelPicker keyI18n={this.AttrI18nKey[keyIndex ++]}
-                labels={this.props.status?.model.labelPool ?? []}
+                labels={range.allLabels()}
-                // labels={[]}
+                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) => {