MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Optim object picker & isDelete flag

Browse Source
This commit is contained in:
MrKBear 2022-03-16 12:45:47 +08:00
parent d7386bce68
commit f358ac07c6
10 changed files with 182 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
source/Component/ComboInput/ComboInput.scss
View File

@ -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%;
}
}

34
source/Component/ObjectPicker/ObjectPicker.scss
View File

@ -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;
}
}

77
source/Component/ObjectPicker/ObjectPicker.tsx
View File

@ -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={() => {
this.setState({
isPickerVisible: true
})
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}

6
source/Component/PickerList/PickerList.scss
View File

@ -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;
}
}

65
source/Component/PickerList/PickerList.tsx
View File

@ -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<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;
}
const displayInfo = getObjectDisplayInfo(item);
return <div
className="picker-list-item"
@ -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 }

1
source/Localization/EN-US.ts
View File

@ -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",

1
source/Localization/ZH-CN.ts
View File

@ -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": "实时预览",

25
source/Model/CtrlObject.ts
View File

@ -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;

7
source/Model/Label.ts
View File

@ -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;
}
}

21
source/Panel/GroupDetails/GroupDetails.tsx
View File

@ -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);
}}
/>
</>
}