@pisell/materials 1.0.1055 → 1.0.1057
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +7 -7
- package/build/lowcode/preview.js +9 -9
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +20 -20
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +24 -24
- package/es/components/PisellLayouts/index.d.ts +9 -5
- package/es/components/PisellLayouts/index.js +5 -3
- package/es/components/dataSourceComponents/dataSourceSubForm/index.js +18 -5
- package/es/components/dataSourceComponents/dataSourceSubForm/schema-full-example.json +38 -32
- package/es/components/dataSourceComponents/fields/RecordListWrapper/WithMode.js +58 -26
- package/es/components/dataSourceComponents/fields/Tabs/Tabs.js +1 -1
- package/es/components/dataSourceComponents/fields/Tabs/Tabs.less +2 -1
- package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.d.ts +12 -0
- package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.js +264 -0
- package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.less +7 -0
- package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.d.ts +42 -0
- package/es/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.js +1234 -0
- package/es/components/pisellFloorMapLayout/components/ItemLayer.d.ts +36 -0
- package/es/components/pisellFloorMapLayout/components/ItemLayer.js +121 -0
- package/es/components/pisellFloorMapLayout/components/ItemLayer.less +19 -0
- package/es/components/pisellFloorMapLayout/components/MapLayer.d.ts +23 -0
- package/es/components/pisellFloorMapLayout/components/MapLayer.js +74 -0
- package/es/components/pisellFloorMapLayout/components/MapLayer.less +7 -0
- package/es/components/pisellFloorMapLayout/components/ViewControls.d.ts +22 -0
- package/es/components/pisellFloorMapLayout/components/ViewControls.js +59 -0
- package/es/components/pisellFloorMapLayout/components/ViewControls.less +76 -0
- package/es/components/pisellFloorMapLayout/components/index.d.ts +7 -0
- package/es/components/pisellFloorMapLayout/components/index.js +6 -0
- package/es/components/pisellFloorMapLayout/index.d.ts +6 -0
- package/es/components/pisellFloorMapLayout/index.js +5 -0
- package/es/components/pisellFloorMapLayout/types.d.ts +197 -0
- package/es/components/pisellFloorMapLayout/types.js +1 -0
- package/es/components/pisellMultipleSelect/components/EditView.js +3 -3
- package/es/index.d.ts +4 -3
- package/es/index.js +1 -0
- package/lib/components/PisellLayouts/index.d.ts +9 -5
- package/lib/components/PisellLayouts/index.js +2 -0
- package/lib/components/dataSourceComponents/dataSourceSubForm/index.js +16 -3
- package/lib/components/dataSourceComponents/dataSourceSubForm/schema-full-example.json +38 -32
- package/lib/components/dataSourceComponents/fields/RecordListWrapper/WithMode.js +49 -21
- package/lib/components/dataSourceComponents/fields/Tabs/Tabs.js +1 -1
- package/lib/components/dataSourceComponents/fields/Tabs/Tabs.less +2 -1
- package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.d.ts +12 -0
- package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.js +257 -0
- package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.less +7 -0
- package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.d.ts +42 -0
- package/lib/components/pisellFloorMapLayout/PisellFloorMapLayout.stories.js +755 -0
- package/lib/components/pisellFloorMapLayout/components/ItemLayer.d.ts +36 -0
- package/lib/components/pisellFloorMapLayout/components/ItemLayer.js +153 -0
- package/lib/components/pisellFloorMapLayout/components/ItemLayer.less +19 -0
- package/lib/components/pisellFloorMapLayout/components/MapLayer.d.ts +23 -0
- package/lib/components/pisellFloorMapLayout/components/MapLayer.js +103 -0
- package/lib/components/pisellFloorMapLayout/components/MapLayer.less +7 -0
- package/lib/components/pisellFloorMapLayout/components/ViewControls.d.ts +22 -0
- package/lib/components/pisellFloorMapLayout/components/ViewControls.js +89 -0
- package/lib/components/pisellFloorMapLayout/components/ViewControls.less +76 -0
- package/lib/components/pisellFloorMapLayout/components/index.d.ts +7 -0
- package/lib/components/pisellFloorMapLayout/components/index.js +35 -0
- package/lib/components/pisellFloorMapLayout/index.d.ts +6 -0
- package/lib/components/pisellFloorMapLayout/index.js +29 -0
- package/lib/components/pisellFloorMapLayout/types.d.ts +197 -0
- package/lib/components/pisellFloorMapLayout/types.js +17 -0
- package/lib/index.d.ts +4 -3
- package/lib/index.js +3 -0
- package/lowcode/data-source-form/utils.ts +3 -0
- package/lowcode/pisell-floor-map-layout/meta.ts +1511 -0
- package/package.json +4 -3
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ItemLayer - 楼层图展示层
|
|
3
|
+
* 按 items 的 (x, y) 与 cellSize 定位,用 renderItem 渲染每项内容
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import type { FloorMapItemBase, FloorMapItemUnit } from '../types';
|
|
7
|
+
import './ItemLayer.less';
|
|
8
|
+
export interface ItemLayerProps<T extends FloorMapItemBase> {
|
|
9
|
+
/** 资源列表 */
|
|
10
|
+
items: T[];
|
|
11
|
+
/** 每项渲染函数 */
|
|
12
|
+
renderItem: (item: T, index: number) => React.ReactNode;
|
|
13
|
+
/** 每项 key */
|
|
14
|
+
rowKey?: string | ((item: T, index: number) => string);
|
|
15
|
+
/** 每格像素尺寸(cell 单位时用;pixel 单位时作为缺省宽高) */
|
|
16
|
+
cellSize: number;
|
|
17
|
+
/** item 坐标与尺寸单位:cell 格子数,pixel 像素 */
|
|
18
|
+
itemUnit?: FloorMapItemUnit;
|
|
19
|
+
/** item 之间的间距(像素),仅 cell 单位时生效 */
|
|
20
|
+
itemGap?: number;
|
|
21
|
+
/** 内容区总宽度(像素),由 items 推导或外部传入 */
|
|
22
|
+
contentWidth: number;
|
|
23
|
+
/** 内容区总高度(像素) */
|
|
24
|
+
contentHeight: number;
|
|
25
|
+
/** 是否启用 hover 事件 */
|
|
26
|
+
enableHover?: boolean;
|
|
27
|
+
/** 点击回调 */
|
|
28
|
+
onItemClick?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
|
|
29
|
+
/** hover 进入 */
|
|
30
|
+
onItemHover?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
|
|
31
|
+
/** hover 离开 */
|
|
32
|
+
onItemLeave?: (item: T, index: number, e: React.MouseEvent<HTMLElement>) => void;
|
|
33
|
+
className?: string;
|
|
34
|
+
}
|
|
35
|
+
export declare function ItemLayer<T extends FloorMapItemBase>(props: ItemLayerProps<T>): JSX.Element;
|
|
36
|
+
export default ItemLayer;
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellFloorMapLayout/components/ItemLayer.tsx
|
|
30
|
+
var ItemLayer_exports = {};
|
|
31
|
+
__export(ItemLayer_exports, {
|
|
32
|
+
ItemLayer: () => ItemLayer,
|
|
33
|
+
default: () => ItemLayer_default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(ItemLayer_exports);
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_classnames = __toESM(require("classnames"));
|
|
38
|
+
var import_ItemLayer = require("./ItemLayer.less");
|
|
39
|
+
var PREFIX = "pisell-floor-map-layout";
|
|
40
|
+
function getItemKey(item, index, rowKey) {
|
|
41
|
+
if (!rowKey) return item.id;
|
|
42
|
+
if (typeof rowKey === "string") return String(item[rowKey] ?? item.id);
|
|
43
|
+
return rowKey(item, index);
|
|
44
|
+
}
|
|
45
|
+
function getShapeStyle(shape = "rect") {
|
|
46
|
+
switch (shape) {
|
|
47
|
+
case "circle":
|
|
48
|
+
return { borderRadius: "50%" };
|
|
49
|
+
case "triangle":
|
|
50
|
+
return { clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)" };
|
|
51
|
+
case "polygon":
|
|
52
|
+
case "custom":
|
|
53
|
+
return {};
|
|
54
|
+
default:
|
|
55
|
+
return {};
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function ItemLayer(props) {
|
|
59
|
+
const {
|
|
60
|
+
items,
|
|
61
|
+
renderItem,
|
|
62
|
+
rowKey,
|
|
63
|
+
cellSize,
|
|
64
|
+
itemUnit = "cell",
|
|
65
|
+
itemGap = 0,
|
|
66
|
+
contentWidth,
|
|
67
|
+
contentHeight,
|
|
68
|
+
enableHover = true,
|
|
69
|
+
onItemClick,
|
|
70
|
+
onItemHover,
|
|
71
|
+
onItemLeave,
|
|
72
|
+
className
|
|
73
|
+
} = props;
|
|
74
|
+
const itemNodes = (0, import_react.useMemo)(() => {
|
|
75
|
+
const isPixel = itemUnit === "pixel";
|
|
76
|
+
const g = itemGap;
|
|
77
|
+
return items.map((item, index) => {
|
|
78
|
+
let left;
|
|
79
|
+
let top;
|
|
80
|
+
let width;
|
|
81
|
+
let height;
|
|
82
|
+
if (isPixel) {
|
|
83
|
+
width = item.width ?? cellSize;
|
|
84
|
+
height = item.height ?? cellSize;
|
|
85
|
+
left = item.x;
|
|
86
|
+
top = item.y;
|
|
87
|
+
} else {
|
|
88
|
+
const w = item.width ?? 1;
|
|
89
|
+
const h = item.height ?? 1;
|
|
90
|
+
left = g > 0 ? item.x * (cellSize + g) + g : item.x * cellSize;
|
|
91
|
+
top = g > 0 ? item.y * (cellSize + g) + g : item.y * cellSize;
|
|
92
|
+
width = g > 0 ? w * cellSize + (w - 1) * g : w * cellSize;
|
|
93
|
+
height = g > 0 ? h * cellSize + (h - 1) * g : h * cellSize;
|
|
94
|
+
}
|
|
95
|
+
const key = getItemKey(item, index, rowKey);
|
|
96
|
+
const shapeStyle = getShapeStyle(item.shape);
|
|
97
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
key,
|
|
101
|
+
className: (0, import_classnames.default)(`${PREFIX}-item`, {
|
|
102
|
+
[`${PREFIX}-item-hoverable`]: enableHover
|
|
103
|
+
}),
|
|
104
|
+
style: {
|
|
105
|
+
position: "absolute",
|
|
106
|
+
left,
|
|
107
|
+
top,
|
|
108
|
+
width,
|
|
109
|
+
height,
|
|
110
|
+
boxSizing: "border-box",
|
|
111
|
+
...shapeStyle
|
|
112
|
+
},
|
|
113
|
+
onClick: (e) => onItemClick == null ? void 0 : onItemClick(item, index, e),
|
|
114
|
+
onMouseEnter: (e) => onItemHover == null ? void 0 : onItemHover(item, index, e),
|
|
115
|
+
onMouseLeave: (e) => onItemLeave == null ? void 0 : onItemLeave(item, index, e)
|
|
116
|
+
},
|
|
117
|
+
renderItem(item, index)
|
|
118
|
+
);
|
|
119
|
+
});
|
|
120
|
+
}, [
|
|
121
|
+
items,
|
|
122
|
+
renderItem,
|
|
123
|
+
rowKey,
|
|
124
|
+
cellSize,
|
|
125
|
+
itemUnit,
|
|
126
|
+
itemGap,
|
|
127
|
+
enableHover,
|
|
128
|
+
onItemClick,
|
|
129
|
+
onItemHover,
|
|
130
|
+
onItemLeave
|
|
131
|
+
]);
|
|
132
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
className: (0, import_classnames.default)(`${PREFIX}-item-layer`, className),
|
|
136
|
+
style: {
|
|
137
|
+
position: "absolute",
|
|
138
|
+
left: 0,
|
|
139
|
+
top: 0,
|
|
140
|
+
width: contentWidth,
|
|
141
|
+
height: contentHeight,
|
|
142
|
+
minWidth: contentWidth,
|
|
143
|
+
minHeight: contentHeight
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
itemNodes
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
var ItemLayer_default = ItemLayer;
|
|
150
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
151
|
+
0 && (module.exports = {
|
|
152
|
+
ItemLayer
|
|
153
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
.pisell-floor-map-layout-item-layer {
|
|
2
|
+
position: absolute;
|
|
3
|
+
left: 0;
|
|
4
|
+
top: 0;
|
|
5
|
+
z-index: 1;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.pisell-floor-map-layout-item {
|
|
9
|
+
/* 必须裁剪在格子内,避免内容溢出到格子外导致位置错乱 */
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
z-index: 0;
|
|
13
|
+
|
|
14
|
+
&-hoverable:hover {
|
|
15
|
+
outline: 2px solid rgba(24, 144, 255, 0.5);
|
|
16
|
+
outline-offset: -2px;
|
|
17
|
+
z-index: 1;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MapLayer - 楼层图底层
|
|
3
|
+
* 负责背景(无/纯色/图片/SVG)、网格线、padding、gap
|
|
4
|
+
*/
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import type { FloorMapLayerConfig } from '../types';
|
|
7
|
+
import './MapLayer.less';
|
|
8
|
+
export interface MapLayerProps {
|
|
9
|
+
/** 底层配置 */
|
|
10
|
+
config?: FloorMapLayerConfig;
|
|
11
|
+
/** 内容区域宽度(逻辑单位或像素,用于网格线计算) */
|
|
12
|
+
contentWidth?: number;
|
|
13
|
+
/** 内容区域高度 */
|
|
14
|
+
contentHeight?: number;
|
|
15
|
+
/** 每格像素尺寸(用于网格线间距) */
|
|
16
|
+
cellSize?: number;
|
|
17
|
+
/** 子节点(展示层会叠在上方) */
|
|
18
|
+
children?: React.ReactNode;
|
|
19
|
+
/** 自定义类名 */
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function MapLayer(props: MapLayerProps): JSX.Element;
|
|
23
|
+
export default MapLayer;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellFloorMapLayout/components/MapLayer.tsx
|
|
30
|
+
var MapLayer_exports = {};
|
|
31
|
+
__export(MapLayer_exports, {
|
|
32
|
+
MapLayer: () => MapLayer,
|
|
33
|
+
default: () => MapLayer_default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(MapLayer_exports);
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_classnames = __toESM(require("classnames"));
|
|
38
|
+
var import_MapLayer = require("./MapLayer.less");
|
|
39
|
+
var PREFIX = "pisell-floor-map-layout";
|
|
40
|
+
function toCssSize(v) {
|
|
41
|
+
if (v === void 0) return void 0;
|
|
42
|
+
return typeof v === "number" ? `${v}px` : v;
|
|
43
|
+
}
|
|
44
|
+
function MapLayer(props) {
|
|
45
|
+
const {
|
|
46
|
+
config = {},
|
|
47
|
+
contentWidth = 0,
|
|
48
|
+
contentHeight = 0,
|
|
49
|
+
cellSize = 64,
|
|
50
|
+
children,
|
|
51
|
+
className
|
|
52
|
+
} = props;
|
|
53
|
+
const {
|
|
54
|
+
backgroundType = "none",
|
|
55
|
+
backgroundColor,
|
|
56
|
+
backgroundImage,
|
|
57
|
+
backgroundSvg,
|
|
58
|
+
showGrid = false,
|
|
59
|
+
padding,
|
|
60
|
+
gap
|
|
61
|
+
} = config;
|
|
62
|
+
const paddingCss = toCssSize(padding);
|
|
63
|
+
const gapCss = toCssSize(gap);
|
|
64
|
+
const backgroundStyle = {};
|
|
65
|
+
if (backgroundType === "color" && backgroundColor) {
|
|
66
|
+
backgroundStyle.backgroundColor = backgroundColor;
|
|
67
|
+
}
|
|
68
|
+
if (backgroundType === "image" && backgroundImage) {
|
|
69
|
+
backgroundStyle.backgroundImage = `url(${backgroundImage})`;
|
|
70
|
+
backgroundStyle.backgroundSize = "cover";
|
|
71
|
+
backgroundStyle.backgroundPosition = "center";
|
|
72
|
+
}
|
|
73
|
+
if (backgroundType === "svg" && backgroundSvg) {
|
|
74
|
+
const isUrl = backgroundSvg.startsWith("http") || backgroundSvg.startsWith("/");
|
|
75
|
+
backgroundStyle.backgroundImage = isUrl ? `url(${backgroundSvg})` : `url("data:image/svg+xml,${encodeURIComponent(backgroundSvg)}")`;
|
|
76
|
+
backgroundStyle.backgroundSize = "cover";
|
|
77
|
+
backgroundStyle.backgroundPosition = "center";
|
|
78
|
+
}
|
|
79
|
+
const containerStyle = {
|
|
80
|
+
padding: paddingCss,
|
|
81
|
+
gap: gapCss
|
|
82
|
+
};
|
|
83
|
+
const gridStyle = showGrid ? {
|
|
84
|
+
backgroundImage: `
|
|
85
|
+
linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
|
|
86
|
+
linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px)
|
|
87
|
+
`,
|
|
88
|
+
backgroundSize: `${cellSize}px ${cellSize}px`
|
|
89
|
+
} : {};
|
|
90
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
className: (0, import_classnames.default)(`${PREFIX}-map-layer`, className),
|
|
94
|
+
style: { ...backgroundStyle, ...containerStyle, ...gridStyle }
|
|
95
|
+
},
|
|
96
|
+
children
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
var MapLayer_default = MapLayer;
|
|
100
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
101
|
+
0 && (module.exports = {
|
|
102
|
+
MapLayer
|
|
103
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { FloorMapControlsConfig } from '../types';
|
|
3
|
+
import './ViewControls.less';
|
|
4
|
+
/** 从 react-zoom-pan-pinch 拿到的控制 API(由主组件传入) */
|
|
5
|
+
export interface ViewControlsApi {
|
|
6
|
+
zoomIn: () => void;
|
|
7
|
+
zoomOut: () => void;
|
|
8
|
+
resetTransform: () => void;
|
|
9
|
+
/** 区域定位,可能由主组件基于 items 计算后封装 */
|
|
10
|
+
fitBounds?: () => void;
|
|
11
|
+
}
|
|
12
|
+
export interface ViewControlsProps {
|
|
13
|
+
/** 控制 API */
|
|
14
|
+
api: ViewControlsApi;
|
|
15
|
+
/** 显隐配置 */
|
|
16
|
+
config?: FloorMapControlsConfig;
|
|
17
|
+
/** 当前缩放比例(1 = 100%),用于 Stepper 展示 */
|
|
18
|
+
scale?: number;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
export declare function ViewControls(props: ViewControlsProps): JSX.Element;
|
|
22
|
+
export default ViewControls;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/components/pisellFloorMapLayout/components/ViewControls.tsx
|
|
30
|
+
var ViewControls_exports = {};
|
|
31
|
+
__export(ViewControls_exports, {
|
|
32
|
+
ViewControls: () => ViewControls,
|
|
33
|
+
default: () => ViewControls_default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(ViewControls_exports);
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_classnames = __toESM(require("classnames"));
|
|
38
|
+
var import_icons = require("@ant-design/icons");
|
|
39
|
+
var import_ViewControls = require("./ViewControls.less");
|
|
40
|
+
var PREFIX = "pisell-floor-map-layout";
|
|
41
|
+
function ViewControls(props) {
|
|
42
|
+
const { api, config = {}, scale = 1, className } = props;
|
|
43
|
+
const showZoom = config.showZoom !== false;
|
|
44
|
+
const showReset = config.showReset === true;
|
|
45
|
+
const showFitBounds = config.showFitBounds === true;
|
|
46
|
+
const scalePercent = Math.round(scale * 100);
|
|
47
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${PREFIX}-view-controls`, className) }, showZoom && /* @__PURE__ */ import_react.default.createElement("div", { className: `${PREFIX}-view-controls-zoom-stepper` }, /* @__PURE__ */ import_react.default.createElement(
|
|
48
|
+
"button",
|
|
49
|
+
{
|
|
50
|
+
type: "button",
|
|
51
|
+
className: `${PREFIX}-view-controls-zoom-stepper-btn`,
|
|
52
|
+
onClick: () => api.zoomOut(),
|
|
53
|
+
"aria-label": "缩小"
|
|
54
|
+
},
|
|
55
|
+
/* @__PURE__ */ import_react.default.createElement(import_icons.MinusOutlined, null)
|
|
56
|
+
), /* @__PURE__ */ import_react.default.createElement("span", { className: `${PREFIX}-view-controls-zoom-stepper-value` }, scalePercent, "%"), /* @__PURE__ */ import_react.default.createElement(
|
|
57
|
+
"button",
|
|
58
|
+
{
|
|
59
|
+
type: "button",
|
|
60
|
+
className: `${PREFIX}-view-controls-zoom-stepper-btn`,
|
|
61
|
+
onClick: () => api.zoomIn(),
|
|
62
|
+
"aria-label": "放大"
|
|
63
|
+
},
|
|
64
|
+
/* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null)
|
|
65
|
+
)), showReset && /* @__PURE__ */ import_react.default.createElement(
|
|
66
|
+
"button",
|
|
67
|
+
{
|
|
68
|
+
type: "button",
|
|
69
|
+
className: `${PREFIX}-view-controls-btn`,
|
|
70
|
+
onClick: () => api.resetTransform(),
|
|
71
|
+
"aria-label": "复位"
|
|
72
|
+
},
|
|
73
|
+
"⟲"
|
|
74
|
+
), showFitBounds && api.fitBounds && /* @__PURE__ */ import_react.default.createElement(
|
|
75
|
+
"button",
|
|
76
|
+
{
|
|
77
|
+
type: "button",
|
|
78
|
+
className: `${PREFIX}-view-controls-btn`,
|
|
79
|
+
onClick: () => api.fitBounds(),
|
|
80
|
+
"aria-label": "区域定位"
|
|
81
|
+
},
|
|
82
|
+
"⊞"
|
|
83
|
+
));
|
|
84
|
+
}
|
|
85
|
+
var ViewControls_default = ViewControls;
|
|
86
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
87
|
+
0 && (module.exports = {
|
|
88
|
+
ViewControls
|
|
89
|
+
});
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/* Figma 14131:6265:缩放在左下角;Figma 14004:1149 Stepper 样式 */
|
|
2
|
+
.pisell-floor-map-layout-view-controls {
|
|
3
|
+
position: absolute;
|
|
4
|
+
left: 12px;
|
|
5
|
+
bottom: 12px;
|
|
6
|
+
z-index: 10;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
gap: 6px;
|
|
10
|
+
|
|
11
|
+
/* Stepper:胶囊形 [减] 数值% [加] */
|
|
12
|
+
&-zoom-stepper {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
height: 56px;
|
|
16
|
+
padding: 0 4px;
|
|
17
|
+
background: #fff;
|
|
18
|
+
border: 1px solid #98a2b3;
|
|
19
|
+
border-radius: 100px;
|
|
20
|
+
box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-zoom-stepper-btn {
|
|
24
|
+
width: 52px;
|
|
25
|
+
height: 52px;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
padding: 0;
|
|
30
|
+
border: none;
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
background: transparent;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
color: #101828;
|
|
35
|
+
font-size: 18px;
|
|
36
|
+
|
|
37
|
+
&:hover {
|
|
38
|
+
background: #f2f4f7;
|
|
39
|
+
color: #101828;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&-zoom-stepper-value {
|
|
44
|
+
min-width: 56px;
|
|
45
|
+
padding: 0 8px;
|
|
46
|
+
text-align: center;
|
|
47
|
+
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
48
|
+
font-weight: 600;
|
|
49
|
+
font-size: 18px;
|
|
50
|
+
line-height: 1;
|
|
51
|
+
color: #101828;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&-btn {
|
|
55
|
+
width: 32px;
|
|
56
|
+
height: 32px;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
padding: 0;
|
|
61
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
62
|
+
border-radius: 4px;
|
|
63
|
+
background: #fff;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
font-size: 18px;
|
|
66
|
+
line-height: 1;
|
|
67
|
+
color: rgba(0, 0, 0, 0.65);
|
|
68
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
69
|
+
|
|
70
|
+
&:hover {
|
|
71
|
+
color: #1890ff;
|
|
72
|
+
border-color: #1890ff;
|
|
73
|
+
background: #e6f7ff;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/components/pisellFloorMapLayout/components/index.tsx
|
|
20
|
+
var components_exports = {};
|
|
21
|
+
__export(components_exports, {
|
|
22
|
+
ItemLayer: () => import_ItemLayer.ItemLayer,
|
|
23
|
+
MapLayer: () => import_MapLayer.MapLayer,
|
|
24
|
+
ViewControls: () => import_ViewControls.ViewControls
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(components_exports);
|
|
27
|
+
var import_MapLayer = require("./MapLayer");
|
|
28
|
+
var import_ItemLayer = require("./ItemLayer");
|
|
29
|
+
var import_ViewControls = require("./ViewControls");
|
|
30
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
31
|
+
0 && (module.exports = {
|
|
32
|
+
ItemLayer,
|
|
33
|
+
MapLayer,
|
|
34
|
+
ViewControls
|
|
35
|
+
});
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PisellFloorMapLayout 组件入口
|
|
3
|
+
* 空间布局视图:在二维平面按坐标渲染资源,支持缩放/平移/复位
|
|
4
|
+
*/
|
|
5
|
+
export { PisellFloorMapLayout } from './PisellFloorMapLayout';
|
|
6
|
+
export type { PisellFloorMapLayoutProps, PisellFloorMapLayoutRef, FloorMapItemBase, FloorMapItemUnit, FloorMapLayerConfig, FloorMapZoomConfig, FloorMapPanConfig, FloorMapControlsConfig, FloorMapItemShape, FloorMapBackgroundType, FloorMapPanBoundary, FloorMapLayoutMode, FloorMapGridLayoutConfig, } from './types';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/components/pisellFloorMapLayout/index.tsx
|
|
20
|
+
var pisellFloorMapLayout_exports = {};
|
|
21
|
+
__export(pisellFloorMapLayout_exports, {
|
|
22
|
+
PisellFloorMapLayout: () => import_PisellFloorMapLayout.PisellFloorMapLayout
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(pisellFloorMapLayout_exports);
|
|
25
|
+
var import_PisellFloorMapLayout = require("./PisellFloorMapLayout");
|
|
26
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
27
|
+
0 && (module.exports = {
|
|
28
|
+
PisellFloorMapLayout
|
|
29
|
+
});
|