From 7d018faa598100ca378ecac8dcfcdd3952ab4966 Mon Sep 17 00:00:00 2001
From: hufeixiong <hufeixiong@sto.cn>
Date: Tue, 14 Dec 2021 16:15:35 +0800
Subject: [PATCH] feat: add visible

---
 .../dooringx-example/src/layouts/index.tsx    |  9 +++++++
 .../src/plugin/commands/hide.ts               | 20 ++++++++++++++
 .../dooringx-lib/src/components/blocks.tsx    |  2 +-
 .../src/components/timeLine/timeline.tsx      | 27 +++++++++++++++++--
 .../src/core/components/createBlock.ts        |  1 +
 .../dooringx-lib/src/core/store/storetype.ts  |  1 +
 .../src/core/storeChanger/index.ts            |  1 +
 7 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 packages/dooringx-example/src/plugin/commands/hide.ts

diff --git a/packages/dooringx-example/src/layouts/index.tsx b/packages/dooringx-example/src/layouts/index.tsx
index d6f9680..014125b 100644
--- a/packages/dooringx-example/src/layouts/index.tsx
+++ b/packages/dooringx-example/src/layouts/index.tsx
@@ -50,6 +50,15 @@ const ContextMenu = () => {
 			>
 				<Button>自定义</Button>
 			</div>
+			<div
+				style={{ width: '100%' }}
+				onClick={() => {
+					commander.exec('hide');
+					handleclick();
+				}}
+			>
+				<Button style={{ width: '100%' }}>隐藏</Button>
+			</div>
 			<div
 				style={{ width: '100%' }}
 				onClick={() => {
diff --git a/packages/dooringx-example/src/plugin/commands/hide.ts b/packages/dooringx-example/src/plugin/commands/hide.ts
new file mode 100644
index 0000000..37d3726
--- /dev/null
+++ b/packages/dooringx-example/src/plugin/commands/hide.ts
@@ -0,0 +1,20 @@
+import deepcopy from 'deepcopy';
+import { CommanderItemFactory } from 'dooringx-lib';
+import { IStoreData } from 'dooringx-lib/dist/core/store/storetype';
+
+const hide = new CommanderItemFactory(
+	'hide',
+	'',
+	(store) => {
+		const clonedata: IStoreData = deepcopy(store.getData());
+		clonedata.block.forEach((v) => {
+			if (v.focus) {
+				v.canSee = false;
+			}
+		});
+		store.setData(clonedata);
+	},
+	'隐藏'
+);
+
+export default hide;
diff --git a/packages/dooringx-lib/src/components/blocks.tsx b/packages/dooringx-lib/src/components/blocks.tsx
index 0f34fdf..31c5b96 100644
--- a/packages/dooringx-lib/src/components/blocks.tsx
+++ b/packages/dooringx-lib/src/components/blocks.tsx
@@ -146,7 +146,7 @@ function Blocks(props: PropsWithChildren<BlockProps>) {
 						width: props.data.width,
 						height: props.data.height,
 						zIndex: props.data.zIndex,
-						display: props.data.display,
+						display: props.data.canSee ? props.data.display : 'none',
 						opacity: props.iframe ? 0 : 1,
 						transform: `rotate(${props.data.rotate.value}deg)`,
 					}}
diff --git a/packages/dooringx-lib/src/components/timeLine/timeline.tsx b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
index c8d199e..8ebf87c 100644
--- a/packages/dooringx-lib/src/components/timeLine/timeline.tsx
+++ b/packages/dooringx-lib/src/components/timeLine/timeline.tsx
@@ -11,7 +11,13 @@ import { SortableContainer, SortableElement, SortableHandle, SortEnd } from 'rea
 import UserConfig from '../../config';
 import { IBlockType, IStoreData } from '../../core/store/storetype';
 import { arrayMove } from '../../core/utils';
-import { DeleteOutlined, MenuOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import {
+	DeleteOutlined,
+	EyeInvisibleOutlined,
+	EyeOutlined,
+	MenuOutlined,
+	PlayCircleOutlined,
+} from '@ant-design/icons';
 import {
 	TimeLineItem,
 	itemHeight,
@@ -83,7 +89,24 @@ const SortableItem = SortableElement(
 				</div>
 				<div>{value.config.getComponentRegister().getMap()[value.value.name].display}</div>
 				<div>{value.value.id.slice(-6)}</div>
-				<div style={{ marginLeft: 5 }}>
+				<div style={{ marginLeft: 5, flex: 1, textAlign: 'right', paddingRight: 5 }}>
+					<span
+						style={{ marginRight: 5 }}
+						onClick={() => {
+							const store = value.config.getStore();
+							const clone = deepcopy(store.getData());
+							clone.block = clone.block.map((v) => {
+								if (v.id === value.value.id && !specialCoList.includes(value.value.name)) {
+									v.canSee = !v.canSee;
+									return v;
+								}
+								return v;
+							});
+							store.setData(clone);
+						}}
+					>
+						{value.value.canSee ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+					</span>
 					<Popconfirm
 						title={replaceLocale('control.popup.delete', '确认删除么', value.config)}
 						onConfirm={() => {
diff --git a/packages/dooringx-lib/src/core/components/createBlock.ts b/packages/dooringx-lib/src/core/components/createBlock.ts
index 75943c1..52e4c66 100644
--- a/packages/dooringx-lib/src/core/components/createBlock.ts
+++ b/packages/dooringx-lib/src/core/components/createBlock.ts
@@ -34,6 +34,7 @@ export function createBlock(
 		height: ComponentItem.initData.height,
 		syncList: ComponentItem.initData.syncList || [],
 		canDrag: ComponentItem.initData.canDrag ?? true,
+		canSee: ComponentItem.initData.canSee ?? true,
 		eventMap: ComponentItem.initData.eventMap || {},
 		functionList: ComponentItem.initData.functionList || [],
 		animate: ComponentItem.initData.animate || [],
diff --git a/packages/dooringx-lib/src/core/store/storetype.ts b/packages/dooringx-lib/src/core/store/storetype.ts
index 0527d53..1f676c6 100644
--- a/packages/dooringx-lib/src/core/store/storetype.ts
+++ b/packages/dooringx-lib/src/core/store/storetype.ts
@@ -41,6 +41,7 @@ export interface IBlockType {
 	focus: boolean;
 	resize: boolean;
 	canDrag: boolean;
+	canSee: boolean;
 	props: Record<string, any>;
 	syncList: Array<string>;
 	eventMap: EventCenterMapType; //调用的event 与对应的函数名 如果要增加参数，则类型不能是Array<string>,需要[{name:string,...args}]
diff --git a/packages/dooringx-lib/src/core/storeChanger/index.ts b/packages/dooringx-lib/src/core/storeChanger/index.ts
index 7d4c308..ea09d8e 100644
--- a/packages/dooringx-lib/src/core/storeChanger/index.ts
+++ b/packages/dooringx-lib/src/core/storeChanger/index.ts
@@ -33,6 +33,7 @@ function createDefaultModalBlock(): IStoreData['block'] {
 			props: {},
 			resize: true,
 			focus: false,
+			canSee: true,
 			position: 'absolute',
 			display: 'block',
 			syncList: [],