diff --git a/source/Component/ComboInput/ComboInput.scss b/source/Component/ComboInput/ComboInput.scss index 0f3930a..3bc1d8c 100644 --- 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%; } } diff --git a/source/Component/ObjectPicker/ObjectPicker.scss b/source/Component/ObjectPicker/ObjectPicker.scss index e0dc06f..c2ae567 100644 --- 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; + } } \ No newline at end of file diff --git a/source/Component/ObjectPicker/ObjectPicker.tsx b/source/Component/ObjectPicker/ObjectPicker.tsx index f78a2e1..6da97ae 100644 --- 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 { @@ -88,22 +92,18 @@ class ObjectPicker extends Component @@ -113,21 +113,52 @@ class ObjectPicker extends Component { - this.setState({ - isPickerVisible: true - }) + if (this.isClean) { + this.isClean = false; + } else { + this.setState({ + isPickerVisible: true + }) + } }} > +
- +
-
+
{ - name ? - {name} : + disPlayInfo.name ? + {disPlayInfo.name} : }
+
{ + if (this.props.cleanValue && disPlayInfo.name) { + this.isClean = true; + this.props.cleanValue(); + } + }} + > + { + disPlayInfo.name ? + : + null + } +
{this.state.isPickerVisible ? this.renderPicker(): null} diff --git a/source/Component/PickerList/PickerList.scss b/source/Component/PickerList/PickerList.scss index 260e3f0..c961877 100644 --- 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; } } diff --git a/source/Component/PickerList/PickerList.tsx b/source/Component/PickerList/PickerList.tsx index 7ed5d71..85fd526 100644 --- a/source/Component/PickerList/PickerList.tsx +++ b/source/Component/PickerList/PickerList.tsx @@ -7,13 +7,45 @@ 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; } +function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo { + + 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 { + color: `rgb(${color[0]},${color[1]},${color[2]})`, + icon: icon, + name: name + } +} + interface IPickerListProps { displayItems?: IDisplayItem[]; objectList?: IPickerListItem[]; @@ -27,28 +59,7 @@ interface IPickerListProps { class PickerList extends Component { 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; - } + const displayInfo = getObjectDisplayInfo(item); return
{ >
- +
- {name} + {displayInfo.name}
; } @@ -124,4 +135,4 @@ class PickerList extends Component { } } -export { PickerList, IDisplayItem } \ No newline at end of file +export { PickerList, IDisplayItem, IDisplayInfo, getObjectDisplayInfo } \ No newline at end of file diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts index 8625bf1..6f733f4 100644 --- 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", diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts index b212256..241761e 100644 --- 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": "实时预览", diff --git a/source/Model/CtrlObject.ts b/source/Model/CtrlObject.ts index 47857dc..982d20d 100644 --- 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; diff --git a/source/Model/Label.ts b/source/Model/Label.ts index e9748c8..7e3010c 100644 --- 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; } } diff --git a/source/Panel/GroupDetails/GroupDetails.tsx b/source/Panel/GroupDetails/GroupDetails.tsx index 8e71176..c03ce9c 100644 --- a/source/Panel/GroupDetails/GroupDetails.tsx +++ b/source/Panel/GroupDetails/GroupDetails.tsx @@ -126,13 +126,19 @@ class GroupDetails extends Component { {group.genMethod === GenMod.Range ? this.renderRangeGenOption(group) : null} + { + console.log("gen"); + }} + /> + } private renderPointGenOption(group: Group) { - return <> - { } private renderRangeGenOption(group: Group) { - return <> - { + this.props.status?.changeGroupAttrib(group.id, "genRange", value); + }} + cleanValue={() => { + this.props.status?.changeGroupAttrib(group.id, "genRange", undefined); + }} /> }