Optim object picker & isDelete flag

2022-03-16 12:45:47 +08:00 · 2022-03-16 12:45:47 +08:00 · f358ac07c6
commit f358ac07c6
parent d7386bce68
10 changed files with 182 additions and 61 deletions
--- a/source/Component/ComboInput/ComboInput.scss
+++ b/source/Component/ComboInput/ComboInput.scss
@ -8,6 +8,7 @@ div.combo-input {
        width: 100%;
        height: 100%;
        min-height: $line-min-height;
+        max-width: calc( 100% - 32px );
        display: flex;
        align-items: center;
        padding-left: 8px;
@ -17,7 +18,12 @@ div.combo-input {
        overflow: hidden;

        span {
+            word-break: keep-all;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
            display: block;
+            max-width: 100%;
        }
    }

--- a/source/Component/ObjectPicker/ObjectPicker.scss
+++ b/source/Component/ObjectPicker/ObjectPicker.scss
@ -4,19 +4,32 @@ $line-min-height: 24px;

 div.object-picker {

+    div.list-color {
+        width: 3px;
+        height: $line-min-height;
+        border-radius: 1000px;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
    div.value-view {
+        flex-shrink: 1;
        width: 100%;
        height: 100%;
+        max-width: calc( 100% - 51px );
        min-height: $line-min-height;
        display: flex;
        align-items: center;
-        white-space: nowrap;
-        word-break: keep-all;
-        text-overflow: ellipsis;
-        overflow: hidden;

        span {
+            word-break: keep-all;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
            display: block;
+            max-width: 100%;
        }
    }

@ -28,4 +41,17 @@ div.object-picker {
        justify-content: center;
        align-items: center;
    }
+
+    div.list-empty {
+        width: $line-min-height;
+        height: $line-min-height;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    div.list-empty:hover {
+        color: $lt-red;
+    }
 }
--- a/source/Component/ObjectPicker/ObjectPicker.tsx
+++ b/source/Component/ObjectPicker/ObjectPicker.tsx
@ -4,10 +4,10 @@ import { Group } from "@Model/Group";
 import { Range } from "@Model/Range";
 import { TextField, ITextFieldProps } from "../TextField/TextField";
 import { useStatusWithEvent, IMixinStatusProps } from "@Context/Status";
-import { PickerList, IDisplayItem } from "../PickerList/PickerList";
+import { PickerList, IDisplayItem, getObjectDisplayInfo, IDisplayInfo } from "../PickerList/PickerList";
 import { Localization } from "@Component/Localization/Localization";
 import { Icon } from "@fluentui/react";
-import CtrlObject from "@Model/CtrlObject";
+import { CtrlObject } from "@Model/CtrlObject";
 import "./ObjectPicker.scss";

 type IObjectType = Label | Group | Range | CtrlObject;
@ -16,6 +16,7 @@ interface IObjectPickerProps extends ITextFieldProps {
    type: Array<"L" | "G" | "R">;
    value?: IObjectType;
    valueChange?: (value: IObjectType) => any;
+    cleanValue?: () => any;
 }

 interface IObjectPickerState {
@ -57,6 +58,8 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
        return option;
    }

+    private isClean: boolean = false;
+
    public constructor(props: IObjectPickerProps) {
        super(props);
        this.state = {
@ -68,6 +71,7 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb

    private renderPicker() {
        return <PickerList
+            noData="Object.Picker.List.No.Data"
            target={this.pickerTarget}
            objectList={this.getAllOption()}
            clickObjectItems={((item) => {
@ -88,22 +92,18 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb

    public render(): ReactNode {

-        let name = "";
-        let icon = "Label";
-        if (this.props.value instanceof CtrlObject) {
-            name = this.props.value.displayName;
+        let disPlayInfo: IDisplayInfo;
+        let isDelete: boolean = false;

-            if (this.props.value instanceof Range) {
-                icon = "CubeShape"
+        if (this.props.value) {
+            disPlayInfo = getObjectDisplayInfo(this.props.value);
+            isDelete = this.props.value.isDeleted();
+        } else {
+            disPlayInfo = {
+                name: "",
+                icon: "Label",
+                color: "rgba(0,0,0,0)"
            }
-
-            if (this.props.value instanceof Group) {
-                icon = "WebAppBuilderFragment"
-            }
-        }
-        if (this.props.value instanceof Label) {
-            name = this.props.value.name;
-            icon = "tag";
        }

        return <>
@ -113,21 +113,52 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                keyI18n={this.props.keyI18n}
                targetRef={this.pickerTarget}
                onClick={() => {
+                    if (this.isClean) {
+                        this.isClean = false;
+                    } else {
                        this.setState({
                            isPickerVisible: true
                        })
+                    }
                }}
            >
+                <div
+                    className="list-color"
+                    style={{
+                            backgroundColor: disPlayInfo.color
+                    }}
+                />
                <div className="list-button">
-                    <Icon iconName={icon}/>
+                    <Icon iconName={disPlayInfo.icon}/>
                </div>
-                <div className="value-view">
+                <div
+                    className="value-view"
+                    style={{
+                        textDecoration: isDelete ? "line-through" : undefined,
+                        opacity: isDelete ? ".6" : undefined
+                    }}
+                >
                    {   
-                        name ? 
-                            <span>{name}</span> :
+                        disPlayInfo.name ? 
+                            <span>{disPlayInfo.name}</span> :
                            <Localization i18nKey="Input.Error.Select"/>
                    }
                </div>
+                <div
+                    className="list-empty"
+                    onClick={() => {
+                        if (this.props.cleanValue && disPlayInfo.name) {
+                            this.isClean = true;
+                            this.props.cleanValue();
+                        }
+                    }}
+                >
+                    {   
+                        disPlayInfo.name ? 
+                            <Icon iconName="delete"/> :
+                            null
+                    }
+                </div>
            </TextField>

            {this.state.isPickerVisible ?  this.renderPicker(): null}
--- a/source/Component/PickerList/PickerList.scss
+++ b/source/Component/PickerList/PickerList.scss
@ -1,12 +1,13 @@
 div.picker-list-root {
-	max-width: 200px;
+	min-width: 200px;
 	height: 100%;
 	padding: 0px;
 	margin: 0px;
 	overflow-y: auto;

 	div.picker-list-item {
-		width: 200px;
+		min-width: 200px;
+		padding-right: 10px;
 		height: 36px;
 		display: flex;
 		justify-content: center;
@ -37,6 +38,7 @@ div.picker-list-root {

 		div.list-item-name {
 			width: 100%;
+			white-space: nowrap;
            box-sizing: border-box;
 		}
 	}
--- a/source/Component/PickerList/PickerList.tsx
+++ b/source/Component/PickerList/PickerList.tsx
@ -7,26 +7,15 @@ import { Range } from "@Model/Range";
 import { Component, ReactNode, RefObject } from "react";
 import "./PickerList.scss";

-type IPickerListItem = CtrlObject | Label;
+type IDisplayInfo = Record<"color" | "icon" | "name", string>;
+type IPickerListItem = CtrlObject | Label | Range | Group;
 type IDisplayItem = {
    nameKey: AllI18nKeys;
    key: string;
 	mark?: boolean;
 }

-interface IPickerListProps {
-    displayItems?: IDisplayItem[];
-	objectList?: IPickerListItem[];
-	target?: RefObject<any>;
-    noData?: AllI18nKeys;
-	dismiss?: () => any;
-	clickObjectItems?: (item: IPickerListItem) => any;
-    clickDisplayItems?: (item: IDisplayItem) => any;
-}
-
-class PickerList extends Component<IPickerListProps> {
-
-	private renderItem(item: IPickerListItem) {
+function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {

 	let color: number[] = [];
 	let icon: string = "tag";
@ -50,6 +39,28 @@ class PickerList extends Component<IPickerListProps> {
 		name = item.name;
 	}

+	return {
+		color: `rgb(${color[0]},${color[1]},${color[2]})`,
+		icon: icon,
+		name: name
+	}
+}
+
+interface IPickerListProps {
+    displayItems?: IDisplayItem[];
+	objectList?: IPickerListItem[];
+	target?: RefObject<any>;
+    noData?: AllI18nKeys;
+	dismiss?: () => any;
+	clickObjectItems?: (item: IPickerListItem) => any;
+    clickDisplayItems?: (item: IDisplayItem) => any;
+}
+
+class PickerList extends Component<IPickerListProps> {
+
+	private renderItem(item: IPickerListItem) {
+		const displayInfo = getObjectDisplayInfo(item);
+
 		return <div
 			className="picker-list-item"
 			key={item.id}
@ -61,14 +72,14 @@ class PickerList extends Component<IPickerListProps> {
 		>
 			<div className="list-item-color"
 				style={{
-					backgroundColor: `rgb(${color[0]},${color[1]},${color[2]})`
+					backgroundColor: displayInfo.color
 				}}
 			></div>
 			<div className="list-item-icon">
-				<Icon iconName={icon}/>
+				<Icon iconName={displayInfo.icon}/>
 			</div>
 			<div className="list-item-name">
-				{name}
+				{displayInfo.name}
 			</div>
 		</div>;
 	}
@ -124,4 +135,4 @@ class PickerList extends Component<IPickerListProps> {
 	}
 }

-export { PickerList, IDisplayItem }
+export { PickerList, IDisplayItem, IDisplayInfo, getObjectDisplayInfo }
--- a/source/Localization/EN-US.ts
+++ b/source/Localization/EN-US.ts
@ -29,6 +29,7 @@ const EN_US = {
    "Object.List.New.Range": "Range object {id}",
    "Object.List.New.Label": "Label {id}",
    "Object.List.No.Data": "There are no objects in the model, click the button to create it",
+    "Object.Picker.List.No.Data": "There is no model in the model for this option",
    "Panel.Title.Notfound": "{id}",
    "Panel.Info.Notfound": "This panel with id {id} can not found!",
    "Panel.Title.Render.View": "Live preview",
--- a/source/Localization/ZH-CN.ts
+++ b/source/Localization/ZH-CN.ts
@ -29,6 +29,7 @@ const ZH_CN = {
    "Object.List.New.Range": "范围对象 {id}",
    "Object.List.New.Label": "标签 {id}",
    "Object.List.No.Data": "模型中没有任何对象，点击按钮以创建",
+    "Object.Picker.List.No.Data": "模型中没有合适此选项的模型",
    "Panel.Title.Notfound": "{id}",
    "Panel.Info.Notfound": "这个编号为 {id} 的面板无法找到!",
    "Panel.Title.Render.View": "实时预览",
--- a/source/Model/CtrlObject.ts
+++ b/source/Model/CtrlObject.ts
@ -52,6 +52,31 @@ class CtrlObject extends LabelObject {
    public delete() {
        this.model.deleteObject([this]);
    }
+
+    /**
+     * 判断是否为相同对象
+     */
+    public equal(obj: CtrlObject): boolean {
+        return this === obj || this.id === obj.id;
+    }
+
+
+    /**
+     * 删除标记
+     */
+    private deleteFlag: boolean = false;
+
+     /**
+      * 是否被删除
+      */
+    public isDeleted(): boolean {
+        if (this.deleteFlag) return true;
+        for (let i = 0; i < this.model.objectPool.length; i++) {
+            if (this.model.objectPool[i].equal(this)) return false;
+        }
+        this.deleteFlag = true;
+        return true;
+    }
 }

 export default CtrlObject;
--- a/source/Model/Label.ts
+++ b/source/Model/Label.ts
@ -44,13 +44,20 @@ class Label {
        return this === label || this.id === label.id;
    }

+    /**
+     * 删除标记
+     */
+    private deleteFlag: boolean = false;
+
    /**
     * 是否被删除
     */
    public isDeleted(): boolean {
+        if (this.deleteFlag) return true;
        for (let i = 0; i < this.model.labelPool.length; i++) {
            if (this.model.labelPool[i].equal(this)) return false;
        }
+        this.deleteFlag = true;
        return true;
    }
 }
--- a/source/Panel/GroupDetails/GroupDetails.tsx
+++ b/source/Panel/GroupDetails/GroupDetails.tsx
@ -126,13 +126,19 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {

            {group.genMethod === GenMod.Range ? this.renderRangeGenOption(group) : null}

+            <TogglesInput
+				keyI18n="Common.Attr.Key.Generation"
+				onIconName="BuildDefinition" offIconName="BuildDefinition"
+				valueChange={() => {
+					console.log("gen");
+				}}
+			/>
+
 		</>
 	}

    private renderPointGenOption(group: Group) {
-
        return <>
-
            <AttrInput
                id={group.id} isNumber={true} step={0.1} keyI18n="Common.Attr.Key.Generation.Point.X"
                value={group.genPoint[0] ?? 0}
@ -163,12 +169,17 @@ class GroupDetails extends Component<IGroupDetailsProps & IMixinStatusProps> {
    }

    private renderRangeGenOption(group: Group) {
-
        return <>
-
            <ObjectPicker
                keyI18n="Common.Attr.Key.Generation.Use.Range"
-                type={["L", "G", "R"]}
+                type={["L", "R"]}
+                value={group.genRange}
+                valueChange={(value) => {
+                    this.props.status?.changeGroupAttrib(group.id, "genRange", value);
+                }}
+                cleanValue={() => {
+                    this.props.status?.changeGroupAttrib(group.id, "genRange", undefined);
+                }}
            />
        </>
    }