source/Behavior/Behavior.ts

@@ -1,7 +1,7 @@
 import { BehaviorRecorder, IAnyBehaviorRecorder } from "@Model/Behavior";
 import { Template } from "./Template";
 
-const AllBehaviors: IAnyBehaviorRecorder[] = new Array(4).fill(0).map((_, i) => {
+const AllBehaviors: IAnyBehaviorRecorder[] = new Array(20).fill(0).map((_, i) => {
     let behavior = new BehaviorRecorder(Template);
     behavior.behaviorId = behavior.behaviorId + i;
     return behavior;

source/Component/BehaviorList/BehaviorList.scss

@@ -10,7 +10,6 @@ div.behavior-list {
 	div.behavior-item {
 		margin: 5px;
 		height: $behavior-item-height;
-		user-select: none;
 		border-radius: 3px;
 		cursor: pointer;
 		display: flex;

source/Component/BehaviorPopup/BehaviorPopup.scss

@@ -5,10 +5,6 @@ div.behavior-popup {
 	height: 100%;
 }
 
-span.behavior-popup-select-counter {
-	opacity: .75;
-}
-
 div.behavior-popup-search-box {
 	padding: 10px 0 10px 10px;
 	width: calc(100% - 10px);

source/Component/BehaviorPopup/BehaviorPopup.tsx

@@ -62,46 +62,19 @@ class BehaviorPopupComponent extends Component<
 		</div>;
 	}
 
-	private showBehaviorInfo = (behavior: IRenderBehavior) => {
-		if (this.props.status) {
-			const status = this.props.status;
-			status.popup.showPopup(ConfirmPopup, {
-				infoI18n: behavior.describe as any,
-				titleI18N: "Popup.Behavior.Info.Title",
-				titleI18NOption: {
-					behavior: I18N(this.props, behavior.behaviorName as any)
-				},
-				yesI18n: "Popup.Behavior.Info.Confirm",
-			})
-		}
-	}
-
-	private renderActionBar = () => {
-		return <Localization
-			className="behavior-popup-select-counter"
-			i18nKey="Popup.Add.Behavior.Select.Counter"
-			options={{
-				count: this.state.focusBehavior.size.toString()
-			}}
-		/>
-	}
-
 	public render(): ReactNode {
 		return <ConfirmContent
 			className="behavior-popup"
 			actions={[{
-				i18nKey: "Popup.Add.Behavior.Action.Add",
+				i18nKey: "Popup.Add.Behavior.Action.Add"
-				disable: this.state.focusBehavior.size <= 0
 			}]}
 			header={this.renderHeader}
-			customFooter={this.renderActionBar}
 			headerHeight={46}
 		>
 			<Message i18nKey="ZH_CN" isTitle first/>
 			<BehaviorList
 				focusBehaviors={Array.from(this.state.focusBehavior)}
 				behaviors={AllBehaviors}
-				action={this.showBehaviorInfo}
 				click={(behavior) => {
 					if (this.state.focusBehavior.has(behavior)) {
 						this.state.focusBehavior.delete(behavior);
@@ -110,6 +83,19 @@ class BehaviorPopupComponent extends Component<
 					}
 					this.forceUpdate();
 				}}
+				action={(behavior)=>{
+					if (this.props.status) {
+						const status = this.props.status;
+						status.popup.showPopup(ConfirmPopup, {
+							infoI18n: behavior.describe as any,
+							titleI18N: "Popup.Behavior.Info.Title",
+							titleI18NOption: {
+								behavior: I18N(this.props, behavior.behaviorName as any)
+							},
+							yesI18n: "Popup.Behavior.Info.Confirm",
+						})
+					}
+				}}
 			/>
 		</ConfirmContent>
 	}

source/Component/ConfirmPopup/ConfirmPopup.scss

@@ -47,17 +47,7 @@ div.confirm-root {
 		justify-content: flex-end;
 		align-items: center;
 
-		div.action-right-view {
-			width: 100%;
-			height: 100%;
-			flex-shrink: 1;
-			display: flex;
-			align-items: center;
-			padding-left: 10px;
-		}
-
 		div.action-button {
-			flex-shrink: 0;
 			height: 26px;
 			padding: 0 10px;
 			border-radius: 3px;

source/Component/ConfirmPopup/ConfirmPopup.tsx

@@ -68,7 +68,6 @@ interface IConfirmContentProps {
 	hidePadding?: boolean;
 	className?: string;
 	actions: IActionButtonProps[];
-	customFooter?: () => ReactNode;
 	header?: () => ReactNode;
 	headerHeight?: number;
 }
@@ -155,14 +154,10 @@ class ConfirmContent extends Component<IConfirmContentProps> {
 			</div>
 			
 			<div className="action-view">
-				<div className="action-right-view">
-					{this.props.customFooter ? this.props.customFooter() : null}
-				</div>
 				{
-					this.props.actions ? 
+					this.props.actions.map((prop, index) => {
-						this.props.actions.map((prop, index) => {
+						return this.renderActionButton(prop, index);
-							return this.renderActionButton(prop, index);
+					})
-						}) : null
 				}
 			</div>
 		</Theme>;

source/Component/Localization/Localization.tsx

@@ -9,7 +9,7 @@ const LanguageDataBase = {
     EN_US, ZH_CN
 }
 
-type AllI18nKeys = (keyof typeof EN_US) | string;
+type AllI18nKeys = keyof typeof EN_US;
 
 interface ILocalizationProps {
     className?: string;
@@ -17,17 +17,14 @@ interface ILocalizationProps {
     options?: Record<string, string>;
 }
 
-function I18N(language: Language | IMixinSettingProps, key: AllI18nKeys, values?: Record<string, string>) {
+function I18N(language: Language | IMixinSettingProps, key: keyof typeof EN_US, values?: Record<string, string>) {
     let lang: Language;
     if (typeof language === "string") {
         lang = language;
     } else {
         lang = language.setting?.language ?? "EN_US";
     }
-    let languageDataBase = LanguageDataBase[lang];
+    let i18nValue = LanguageDataBase[lang][key];
-    if (!languageDataBase) languageDataBase = LanguageDataBase["EN_US"];
-    let i18nValue = languageDataBase[key as keyof typeof EN_US];
-    if (!i18nValue) i18nValue = key;
     if (values) {
         for (let valueKey in values) {
             i18nValue = i18nValue.replaceAll(new RegExp(`\\{\\s*${valueKey}\\s*\\}`, "g"), values[valueKey]);

source/Component/ObjectPicker/ObjectPicker.scss

@@ -1,5 +1,4 @@
 @import "../Theme/Theme.scss";
-@import "../PickerList/RainbowBg.scss";
 
 $line-min-height: 24px;
 

source/Component/ObjectPicker/ObjectPicker.tsx

@@ -97,8 +97,20 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
 
     public render(): ReactNode {
 
-        let disPlayInfo: IDisplayInfo = getObjectDisplayInfo(this.props.value);
+        let disPlayInfo: IDisplayInfo;
-        let isDelete: boolean = !!this.props.value?.isDeleted();
+        let isDelete: boolean = false;
+
+        if (this.props.value) {
+            disPlayInfo = getObjectDisplayInfo(this.props.value);
+            isDelete = this.props.value.isDeleted();
+        } else {
+            disPlayInfo = {
+                name: "Input.Error.Select",
+                icon: "Label",
+                color: "transparent",
+                needI18n: true
+            }
+        }
 
         return <>
             <TextField
@@ -117,13 +129,9 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                 }}
             >
                 <div
-                    className={
+                    className="list-color"
-                        "list-color" + (
-                            disPlayInfo.allLabel ? " rainbow-back-ground-color" : ""
-                        )
-                    }
                     style={{
-                        backgroundColor: disPlayInfo.color
+                            backgroundColor: disPlayInfo.color
                     }}
                 />
                 <div className="list-button">
@@ -137,7 +145,7 @@ class ObjectPicker extends Component<IObjectPickerProps & IMixinStatusProps, IOb
                     }}
                 >
                     {   
-                        disPlayInfo.internal ? 
+                        disPlayInfo.needI18n ? 
                             <Localization i18nKey={disPlayInfo.name as any}/> :
                             <span>{disPlayInfo.name}</span>
                     }

source/Component/PickerList/PickerList.scss

@@ -1,5 +1,3 @@
-@import "./RainbowBg.scss";
-
 div.picker-list-root {
 	min-width: 200px;
 	height: 100%;

source/Component/PickerList/PickerList.tsx

@@ -12,8 +12,7 @@ interface IDisplayInfo {
     color: string;
     icon: string;
     name: string;
-    internal: boolean;
+    needI18n?: boolean;
-    allLabel: boolean;
 };
 
 interface IDisplayItem {
@@ -22,23 +21,12 @@ interface IDisplayItem {
 	mark?: boolean;
 }
 
-function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
+function getObjectDisplayInfo(item: IPickerListItem): IDisplayInfo {
 
-    if (!item) {
+	let color: number[] = [];
-        return {
-            color: "transparent",
-            icon: "Label",
-            name: "Input.Error.Select",
-            internal: true,
-            allLabel: false
-        }
-    }
-
-	let color: number[] | string = [];
 	let icon: string = "tag";
 	let name: string = "";
-    let internal: boolean = false;
+    let needI18n: boolean = false;
-    let allLabel: boolean = false;
 
 	if (item instanceof Range) {
 		icon = "CubeShape"
@@ -47,7 +35,6 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
 		icon = "WebAppBuilderFragment"
 	}
 	if (item instanceof CtrlObject) {
-        color = [];
 		color[0] = Math.round(item.color[0] * 255);
 		color[1] = Math.round(item.color[1] * 255);
 		color[2] = Math.round(item.color[2] * 255);
@@ -56,9 +43,7 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
 	if (item instanceof Label) {
 
 		if (item.isBuildIn) {
-            internal = true;
+            needI18n = true;
-            allLabel = true;
-            color = "transparent";
             if (item.id === "AllRange") {
                 icon = "ProductList";
                 name = "Build.In.Label.Name.All.Range";
@@ -75,16 +60,11 @@ function getObjectDisplayInfo(item?: IPickerListItem): IDisplayInfo {
         }
 	}
 
-    if (Array.isArray(color)) {
-        color = `rgb(${color[0]},${color[1]},${color[2]})`;
-    }
-
 	return {
-		color: color,
+		color: needI18n ? "transparent" : `rgb(${color[0]},${color[1]},${color[2]})`,
 		icon: icon,
 		name: name,
-        internal: internal,
+        needI18n: needI18n
-        allLabel: allLabel
 	}
 }
 
@@ -112,11 +92,7 @@ class PickerList extends Component<IPickerListProps> {
 				}
 			}}
 		>
-			<div className={
+			<div className="list-item-color"
-                "list-item-color" + (
-                    displayInfo.allLabel ? " rainbow-back-ground-color" : ""
-                )
-            }
 				style={{
 					backgroundColor: displayInfo.color
 				}}
@@ -126,8 +102,8 @@ class PickerList extends Component<IPickerListProps> {
 			</div>
 			<div className="list-item-name">
 				{
-                    displayInfo.internal ? 
+                    displayInfo.needI18n ? 
-                        <Localization i18nKey={displayInfo.name}/> :
+                        <Localization i18nKey={displayInfo.name as any}/> : 
                         displayInfo.name
                 }
 			</div>

source/Component/PickerList/RainbowBg.scss

@@ -1,13 +0,0 @@
-div.rainbow-back-ground-color {
-    background-image: linear-gradient(
-        to top,
-        orangered,
-        orange,
-        gold,
-        lightgreen,
-        cyan,
-        dodgerblue,
-        mediumpurple,
-        hotpink,
-        orangered);
-}

source/Component/Popup/Popup.tsx

@@ -78,6 +78,9 @@ class Popup extends Component<IPopupProps & IMixinStatusProps & IMixinSettingPro
                     popup.isOnMouseDown = true;
                     popup.lastMouseLeft = e.clientX;
                     popup.lastMouseTop = e.clientY;
+                    if (this.props.status) {
+                        this.props.status.popup.topping(popup);
+                    }
                 }}
             >
                 {popup.onRenderHeader()}
@@ -254,11 +257,6 @@ class Popup extends Component<IPopupProps & IMixinStatusProps & IMixinSettingPro
                 className: "popup-layer" + (hasAnimate ? " show-scale" : ""),
                 backgroundLevel: BackgroundLevel.Level4,
             }, this.props.setting).join(" ")}
-            onClick={() => {
-                if (this.props.status) {
-                    this.props.status.popup.topping(popup);
-                }
-            }}
         >
             {this.renderDragLine(ResizeDragDirection.top, popup)}
             <div className="popup-layer-container">

source/Context/Popups.ts

@@ -163,12 +163,8 @@ class PopupController extends Emitter<IPopupControllerEvent> {
             newPopup = new (popup ?? Popup)(props);
         }
         newPopup.init(this, `P-${this.idIndex ++}`);
-
+        this.popups.push(newPopup);
-        // 延迟渲染防止焦点冲突
+        this.sortPopup();
-        setTimeout(() => {
-            this.popups.push(newPopup);
-            this.sortPopup();
-        });
         return newPopup;
     }
 

source/Localization/EN-US.ts

@@ -54,7 +54,6 @@ const EN_US = {
     "Popup.Setting.Title": "Preferences setting",
     "Popup.Add.Behavior.Title": "Add behavior",
     "Popup.Add.Behavior.Action.Add": "Add all select behavior",
-    "Popup.Add.Behavior.Select.Counter": "Selected {count} behavior",
     "Popup.Behavior.Info.Title": "Behavior details: {behavior}",
     "Popup.Behavior.Info.Confirm": "OK, I know it",
     "Build.In.Label.Name.All.Group": "All group",

source/Localization/ZH-CN.ts

@@ -54,7 +54,6 @@ const ZH_CN = {
     "Popup.Setting.Title": "首选项设置",
     "Popup.Add.Behavior.Title": "添加行为",
     "Popup.Add.Behavior.Action.Add": "添加全部选中行为",
-    "Popup.Add.Behavior.Select.Counter": "已选择 {count} 个行为",
     "Popup.Behavior.Info.Title": "行为详情: {behavior}",
     "Popup.Behavior.Info.Confirm": "好的, 我知道了",
     "Build.In.Label.Name.All.Group": "全部群",