diff --git a/examples/feature-examples/.umirc.ts b/examples/feature-examples/.umirc.ts index ed2d44cde..385c41f87 100644 --- a/examples/feature-examples/.umirc.ts +++ b/examples/feature-examples/.umirc.ts @@ -92,6 +92,11 @@ export default defineConfig({ name: 'SelectionSelect 插件', component: './extensions/selection-select', }, + { + path: '/extension/mini-map', + name: 'MiniMap 插件', + component: './extensions/mini-map', + }, ], }, ], diff --git a/examples/feature-examples/src/pages/extensions/mini-map/index.less b/examples/feature-examples/src/pages/extensions/mini-map/index.less new file mode 100644 index 000000000..64c39c9a3 --- /dev/null +++ b/examples/feature-examples/src/pages/extensions/mini-map/index.less @@ -0,0 +1,5 @@ +.viewport { + position: relative; + height: calc(100vh - 250px); + overflow: hidden; +} diff --git a/examples/feature-examples/src/pages/extensions/mini-map/index.tsx b/examples/feature-examples/src/pages/extensions/mini-map/index.tsx new file mode 100644 index 000000000..941d1ccce --- /dev/null +++ b/examples/feature-examples/src/pages/extensions/mini-map/index.tsx @@ -0,0 +1,140 @@ +import LogicFlow from '@logicflow/core' +import { Control, MiniMap } from '@logicflow/extension' + +import { Button, Card, Flex, Divider } from 'antd' +import { useState, useEffect, useRef } from 'react' +import styles from './index.less' + +import '@logicflow/core/es/index.css' +import '@logicflow/extension/es/index.css' + +const config: Partial = { + isSilentMode: false, + stopScrollGraph: true, + stopZoomGraph: true, + style: { + rect: { + rx: 5, + ry: 5, + strokeWidth: 2, + }, + circle: { + fill: '#f5f5f5', + stroke: '#666', + }, + ellipse: { + fill: '#dae8fc', + stroke: '#6c8ebf', + }, + polygon: { + fill: '#d5e8d4', + stroke: '#82b366', + }, + diamond: { + fill: '#ffe6cc', + stroke: '#d79b00', + }, + text: { + color: '#b85450', + fontSize: 12, + }, + }, +} + +const nodes: LogicFlow.NodeConfig[] = [] +const edges: LogicFlow.EdgeConfig[] = [] + +for (let i = 0; i < 200; i++) { + const nodeStartId = `${i * 2 + 1}` + const nodeEndId = `${i * 2 + 2}` + const nodeStart: LogicFlow.NodeConfig = { + id: nodeStartId, + type: 'rect', + x: 400 * (i % 10) - 200, + y: 100 * Math.floor(i / 10) - 500, + text: `${i}-start`, + } + const nodeEnd: LogicFlow.NodeConfig = { + id: nodeEndId, + type: 'rect', + x: 400 * (i % 10), + y: 100 * Math.floor(i / 10) - 500, + text: `${i}-end`, + } + const edge: LogicFlow.EdgeConfig = { + id: `e_${i}`, + type: 'polyline', + sourceNodeId: nodeStartId, + targetNodeId: nodeEndId, + } + nodes.push(nodeStart) + nodes.push(nodeEnd) + edges.push(edge) +} + +const data: LogicFlow.GraphConfigData = { + nodes, + edges, +} + +export default function MiniMapExtension() { + const lfRef = useRef() + const containerRef = useRef(null) + const [visible, setVisible] = useState(false) + + useEffect(() => { + if (!lfRef.current) { + const lf = new LogicFlow({ + ...config, + container: containerRef.current as HTMLElement, + grid: { + size: 20, + }, + plugins: [Control, MiniMap], + pluginsOptions: { + MiniMap: { + isShowHeader: false, + isShowCloseIcon: true, + headerTitle: 'MiniMap', + width: 200, + height: 120, + }, + }, + }) + + lf.render(data) + lfRef.current = lf + } + }, []) + + const toggleVisible = () => { + if (lfRef.current) { + const miniMap = lfRef.current.extension.miniMap as MiniMap + if (visible) { + miniMap.hide() + } else { + miniMap.show(0, 0) + } + setVisible(!visible) + } + } + + const handleReset = () => { + if (lfRef.current) { + ;(lfRef.current.extension.miniMap as MiniMap).reset() + } + } + + return ( + + + + {visible && } + + +
+ + ) +} diff --git a/packages/extension/src/components/mini-map/index.ts b/packages/extension/src/components/mini-map/index.ts index 094c03dd1..675503541 100644 --- a/packages/extension/src/components/mini-map/index.ts +++ b/packages/extension/src/components/mini-map/index.ts @@ -1,5 +1,4 @@ import LogicFlow from '@logicflow/core' -import { throttle } from 'lodash-es' import Position = LogicFlow.Position interface MiniMapStaticOption { @@ -14,92 +13,82 @@ interface MiniMapStaticOption { headerTitle?: string } -type Constructor = new (...args: any[]) => T +type Bounds = Record<'left' | 'top' | 'bottom' | 'right', number> export class MiniMap { static pluginName = 'miniMap' - static width = 150 - static height = 220 - static viewPortWidth = 150 - static viewPortHeight = 75 - static isShowHeader = true - static isShowCloseIcon = true - static leftPosition = 0 - static topPosition = 0 - static rightPosition = null - static bottomPosition = null - static headerTitle = '导航' + private lf: LogicFlow - private LFCtor: Constructor + private LFCtor: LogicFlow.LogicFlowConstructor private container?: HTMLElement private miniMapWrap!: HTMLDivElement private miniMapContainer?: HTMLDivElement private lfMap!: LogicFlow private viewport!: HTMLDivElement - private width = 150 - private height = 220 + private width = 200 + private height = 150 + private scale = 1 + private translateX = 0 + private translateY = 0 + private bounds: Bounds + private elementAreaBounds: Bounds + private viewPortBounds: Bounds private leftPosition?: number private topPosition?: number private rightPosition?: number private bottomPosition?: number - private miniMapWidth = 450 - private miniMapHeight = 660 private viewPortTop = 0 private viewPortLeft = 0 private startPosition?: Position - private viewPortScale = 1 private viewPortWidth = 150 private viewPortHeight = 75 - private resetDataX = 0 - private resetDataY = 0 private isShow = false - private isShowHeader = true - private isShowCloseIcon = true - private dragging = false + private isShowHeader = false + private isShowCloseIcon = false + private headerTitle = '导航' private disabledPlugins = ['miniMap', 'control', 'selectionSelect'] - constructor({ lf, LogicFlow, options }) { + constructor({ lf, LogicFlow, options }: LogicFlow.ExtensionProps) { this.lf = lf this.LFCtor = LogicFlow if (options && options.MiniMap) { this.setOption(options) } - this.miniMapWidth = lf.graphModel.width - this.miniMapHeight = (lf.graphModel.width * this.height) / this.width + this.viewPortWidth = lf.graphModel.width + this.viewPortHeight = lf.graphModel.height + const boundsInit: Bounds = { + left: 0, + right: this.viewPortWidth, + top: 0, + bottom: this.viewPortHeight, + } + this.bounds = boundsInit + this.elementAreaBounds = boundsInit + this.viewPortBounds = boundsInit this.initMiniMap() } - render(_lf, container) { + render(_: LogicFlow, container: HTMLElement) { this.container = container this.lf.on('history:change', () => { if (this.isShow) { this.setView() } }) - this.lf.on( - 'graph:transform', - throttle(() => { - // 小地图已展示，并且没有拖拽小地图视口 - if (this.isShow && !this.dragging) { - this.setView() - } - }, 300), - ) - } - - init(option) { - this.disabledPlugins = this.disabledPlugins.concat( - option.disabledPlugins || [], - ) + this.lf.on('graph:transform', () => { + if (this.isShow) { + this.setView(false) + } + }) } /** * 显示mini map */ show = (leftPosition?: number, topPosition?: number) => { - this.setView() if (!this.isShow) { this.createMiniMap(leftPosition, topPosition) + this.setView() } this.isShow = true } @@ -112,48 +101,51 @@ export class MiniMap { } this.isShow = false } + /** + * 重置画布的缩放和平移 + */ reset = () => { this.lf.resetTranslate() this.lf.resetZoom() - this.hide() - this.show() } - private setOption(options) { + private setOption(options: Record) { const { width = 150, height = 220, - isShowHeader = true, - isShowCloseIcon = true, + isShowHeader = false, + isShowCloseIcon = false, leftPosition = 0, topPosition = 0, rightPosition, bottomPosition, + headerTitle = '导航', } = options.MiniMap as MiniMapStaticOption this.width = width this.height = height this.isShowHeader = isShowHeader this.isShowCloseIcon = isShowCloseIcon - this.viewPortWidth = width this.leftPosition = leftPosition this.topPosition = topPosition this.rightPosition = rightPosition this.bottomPosition = bottomPosition + this.headerTitle = headerTitle } private initMiniMap() { const miniMapWrap = document.createElement('div') miniMapWrap.className = 'lf-mini-map-graph' - miniMapWrap.style.width = `${this.width + 4}px` + miniMapWrap.style.width = `${this.width}px` miniMapWrap.style.height = `${this.height}px` this.lfMap = new this.LFCtor({ container: miniMapWrap, + grid: false, isSilentMode: true, stopZoomGraph: true, stopScrollGraph: true, - stopMoveGraph: true, - // hideAnchors: true, - // hoverOutline: false, + stopMoveGraph: false, + history: false, + snapline: false, disabledPlugins: this.disabledPlugins, }) // minimap中禁用adapter。 @@ -195,7 +187,7 @@ export class MiniMap { const header = document.createElement('div') header.className = 'lf-mini-map-header' - header.innerText = MiniMap.headerTitle + header.innerText = this.headerTitle miniMapContainer.appendChild(header) const close = document.createElement('span') @@ -211,259 +203,236 @@ export class MiniMap { } } + /** + * 获取小地图的边界范围 + * @param data + */ + private updateBounds(data?: LogicFlow.GraphData) { + if (data) { + this.updateElementAreaBounds(data) + } + this.updateViewPortBounds() + this.bounds = { + left: Math.min(this.elementAreaBounds.left, this.viewPortBounds.left), + right: Math.max(this.elementAreaBounds.right, this.viewPortBounds.right), + top: Math.min(this.elementAreaBounds.top, this.viewPortBounds.top), + bottom: Math.max( + this.elementAreaBounds.bottom, + this.viewPortBounds.bottom, + ), + } + } + /** * 计算所有图形一起，占领的区域范围。 * @param data */ - private getBounds(data) { - let left = 0 - let right = this.miniMapWidth - let top = 0 - let bottom = this.miniMapHeight + private updateElementAreaBounds(data: LogicFlow.GraphData) { + const elementAreaBounds: Bounds = { + left: 0, + right: 0, + top: 0, + bottom: 0, + } const { nodes } = data if (nodes && nodes.length > 0) { - // 因为获取的节点不知道真实的宽高，这里需要补充一点数值 - nodes.forEach(({ x, y, width = 200, height = 200 }) => { + // TODO: 后续能获取节点高宽信息后，需要更新这里的计算方式 + nodes.forEach((node) => { + const { x, y } = node + const width = (node.width as number) ?? 200 + const height = (node.height as number) ?? 200 + const nodeLeft = x - width / 2 const nodeRight = x + width / 2 const nodeTop = y - height / 2 const nodeBottom = y + height / 2 - left = nodeLeft < left ? nodeLeft : left - right = nodeRight > right ? nodeRight : right - top = nodeTop < top ? nodeTop : top - bottom = nodeBottom > bottom ? nodeBottom : bottom + + elementAreaBounds.left = Math.min(nodeLeft, elementAreaBounds.left) + elementAreaBounds.right = Math.max(nodeRight, elementAreaBounds.right) + elementAreaBounds.top = Math.min(nodeTop, elementAreaBounds.top) + elementAreaBounds.bottom = Math.max( + nodeBottom, + elementAreaBounds.bottom, + ) }) } - return { - left, - top, - bottom, - right, + this.elementAreaBounds = elementAreaBounds + } + + /** + * 获取视口范围 + */ + private updateViewPortBounds() { + const { TRANSLATE_X, TRANSLATE_Y, SCALE_X, SCALE_Y } = + this.lf.getTransform() + const { width, height } = this.lf.graphModel + + this.viewPortBounds = { + left: -TRANSLATE_X / SCALE_X, + right: (-TRANSLATE_X + width) / SCALE_X, + top: -TRANSLATE_Y / SCALE_Y, + bottom: (-TRANSLATE_Y + height) / SCALE_Y, } } /** - * 将负值的平移转换为正值。 - * 保证渲染的时候，minimap能完全展示。 - * 获取将画布所有元素平移到0，0开始时，所有节点数据 + * 删除部分内容以简化渲染，包括边与节点文本 */ - private resetData(data) { - const { nodes, edges } = data - let left = 0 - let top = 0 - if (nodes && nodes.length > 0) { - // 因为获取的节点不知道真实的宽高，这里需要补充一点数值 - nodes.forEach(({ x, y, width = 200, height = 200 }) => { - const nodeLeft = x - width / 2 - const nodeTop = y - height / 2 - left = nodeLeft < left ? nodeLeft : left - top = nodeTop < top ? nodeTop : top - }) - if (left < 0 || top < 0) { - this.resetDataX = left - this.resetDataY = top - nodes.forEach((node) => { - node.x = node.x - left - node.y = node.y - top - if (node.text) { - node.text.x = node.text.x - left - node.text.y = node.text.y - top - } - }) - edges.forEach((edge) => { - if (edge.startPoint) { - edge.startPoint.x = edge.startPoint.x - left - edge.startPoint.y = edge.startPoint.y - top - } - if (edge.endPoint) { - edge.endPoint.x = edge.endPoint.x - left - edge.endPoint.y = edge.endPoint.y - top - } - if (edge.text) { - edge.text.x = edge.text.x - left - edge.text.y = edge.text.y - top - } - if (edge.pointsList) { - edge.pointsList.forEach((point) => { - point.x = point.x - left - point.y = point.y - top - }) - } - }) - } + private resetData(data: LogicFlow.GraphData) { + const { nodes } = data + nodes.forEach((node) => { + // 删除节点文本 + node.text = undefined + }) + return { + nodes, + // 不渲染边 + edges: [], } - return data } /** - * 显示导航 - * 显示视口范围 - * 1. 基于画布的范围比例，设置视口范围比例。宽度默认为导航宽度。 + * MiniMap视图重绘 + * @param reRender 是否重新渲染画布元素 */ - private setView() { - // 1. 获取到图中所有的节点中的位置，将其偏移到原点开始（避免节点位置为负的时候无法展示问题）。 - const graphData = this.lf.getGraphRawData() - const data = this.resetData(graphData) - // 由于随时都会有新节点注册进来，需要同步将注册的 - const { viewMap }: { viewMap: Map } = this.lf - const { modelMap }: { modelMap: Map } = this.lf.graphModel - const { viewMap: minimapViewMap }: { viewMap: Map } = - this.lfMap - - for (const key of viewMap.keys()) { - if (!minimapViewMap.has(key)) { - this.lfMap.setView(key, viewMap.get(key)) - this.lfMap.graphModel.modelMap.set(key, modelMap.get(key)) + private setView(reRender: boolean = true) { + if (reRender) { + // 1. 获取到图中所有的节点中的位置 + const graphData = this.lf.getGraphRawData() + const data = this.resetData(graphData) + // 由于随时都会有新节点注册进来，需要同步将注册的 + const { viewMap }: { viewMap: Map } = this.lf + const { modelMap }: { modelMap: Map } = this.lf.graphModel + const { viewMap: minimapViewMap }: { viewMap: Map } = + this.lfMap + + for (const key of viewMap.keys()) { + if (!minimapViewMap.has(key)) { + this.lfMap.setView(key, viewMap.get(key)) + this.lfMap.graphModel.modelMap.set(key, modelMap.get(key)) + } } + + // 2. 将数据渲染到minimap画布上 + this.lfMap.render(data) + + // 3. 计算出所有节点与当前视口构成的边界。 + this.updateBounds(data) + } else { + this.updateBounds() } - this.lfMap.render(data) - // 2. 将偏移后的数据渲染到minimap画布上 - // 3. 计算出所有节点在一起的边界。 - const { left, top, right, bottom } = this.getBounds(data) - // 4. 计算所有节点的边界与minimap看板的边界的比例. - const realWidthScale = this.width / (right - left) - const realHeightScale = this.height / (bottom - top) + + // 4. 计算minimap画布相对minimap面板的缩放比例，并移动minimap的视图保证元素全部可见且整体居中。 + const { left, top, right, bottom } = this.bounds + const realWidth = right - left + const realHeight = bottom - top + const realWidthScale = this.width / realWidth + const realHeightScale = this.height / realHeight + const scale = Math.min(realWidthScale, realHeightScale) + this.scale = scale + + const translateX = left - (this.width / scale - realWidth) / 2 + const translateY = top - (this.height / scale - realHeight) / 2 + this.lfMap.graphModel.transformModel.translate( + -translateX + this.translateX, + -translateY + this.translateY, + ) + this.translateX = translateX + this.translateY = translateY + // 5. 取比例最小的值，将渲染的画布缩小对应比例。 if (this.miniMapWrap.firstChild) { const innerStyle = (this.miniMapWrap.firstChild as HTMLElement).style - const scale = Math.min(realWidthScale, realHeightScale) innerStyle.pointerEvents = 'none' innerStyle.transform = `matrix(${scale}, 0, 0, ${scale}, 0, 0)` innerStyle.transformOrigin = 'left top' - innerStyle.height = `${bottom - Math.min(top, 0)}px` - innerStyle.width = `${right - Math.min(left, 0)}px` - this.viewPortScale = scale - this.setViewPort(scale, { - left, - right, - // top, - // bottom, - }) + innerStyle.height = `${this.height / scale}px` + innerStyle.width = `${this.width / scale}px` + this.updateViewPort() } } - // 设置视口 - private setViewPort( - scale, - { - left, - right, - // top, - // bottom, - }, - ) { + /** + * 更新预览视窗位置 + */ + private updateViewPort() { const viewStyle = this.viewport.style - viewStyle.width = `${this.viewPortWidth}px` - viewStyle.height = `${ - this.viewPortWidth / - (this.lf.graphModel.width / this.lf.graphModel.height) - }px` const { TRANSLATE_X, TRANSLATE_Y, SCALE_X, SCALE_Y } = this.lf.getTransform() - const realWidth = right - left - // 视口宽 = 小地图宽 / (所有元素一起占据的真实宽 / 绘布宽) - const viewPortWidth = this.width / (realWidth / this.lf.graphModel.width) - // 实际视口宽 = 小地图宽 * 占宽度比例 - const realViewPortWidth = this.width * (viewPortWidth / this.width) - const graphRatio = this.lf.graphModel.width / this.lf.graphModel.height - // 视口实际高 = 视口实际宽 / (绘布宽 / 绘布高) - const realViewPortHeight = realViewPortWidth / graphRatio - const graphData = this.lf.getGraphRawData() - const { left: graphLeft, top: graphTop } = this.getBounds(graphData) - let viewportLeft = graphLeft - let viewportTop = graphTop - viewportLeft += TRANSLATE_X / SCALE_X - viewportTop += TRANSLATE_Y / SCALE_Y - this.viewPortTop = viewportTop > 0 ? 0 : -viewportTop * scale - this.viewPortLeft = viewportLeft > 0 ? 0 : -viewportLeft * scale - this.viewPortWidth = realViewPortWidth - this.viewPortHeight = realViewPortHeight - viewStyle.top = `${this.viewPortTop}px` - viewStyle.left = `${this.viewPortLeft}px` - viewStyle.width = `${realViewPortWidth / SCALE_X}px` - viewStyle.height = `${realViewPortHeight / SCALE_Y}px` + const { width, height } = this.lf.graphModel + + this.viewPortLeft = -TRANSLATE_X / SCALE_X + this.viewPortTop = -TRANSLATE_Y / SCALE_Y + this.viewPortWidth = (width / SCALE_X) * this.scale + this.viewPortHeight = (height / SCALE_Y) * this.scale + + viewStyle.width = `${this.viewPortWidth}px` + viewStyle.height = `${this.viewPortHeight}px` + viewStyle.left = `${(this.viewPortLeft - this.translateX) * this.scale}px` + viewStyle.top = `${(this.viewPortTop - this.translateY) * this.scale}px` } - // 预览视窗 + // 创建预览视窗元素 private createViewPort() { const div = document.createElement('div') div.className = 'lf-minimap-viewport' div.addEventListener('mousedown', this.startDrag) + // 禁止预览视窗的点击事件冒泡 + div.addEventListener('click', (e: MouseEvent) => { + e.stopPropagation() + }) this.viewport = div } - private startDrag = (e) => { + private startDrag = (e: MouseEvent) => { document.addEventListener('mousemove', this.drag) document.addEventListener('mouseup', this.drop) - this.startPosition = { - x: e.x, - y: e.y, - } + const { x, y } = e + this.startPosition = { x, y } } - private moveViewport = (top, left) => { + /** + * 移动预览视窗 + * @param top 画布视口左上角的坐标 y + * @param left 画布视口左上角的坐标 x + */ + private moveViewport = (top: number, left: number) => { const viewStyle = this.viewport.style this.viewPortTop = top this.viewPortLeft = left - viewStyle.top = `${this.viewPortTop}px` - viewStyle.left = `${this.viewPortLeft}px` + viewStyle.top = `${(this.viewPortTop - this.translateY) * this.scale}px` + viewStyle.left = `${(this.viewPortLeft - this.translateX) * this.scale}px` } - private drag = (e) => { - this.dragging = true - const top = this.viewPortTop + e.y - (this.startPosition?.y ?? 0) - const left = this.viewPortLeft + e.x - (this.startPosition?.x ?? 0) + private drag = (e: MouseEvent) => { + const { x, y } = e + const translateX = (x - (this.startPosition?.x ?? 0)) / this.scale + const translateY = (y - (this.startPosition?.y ?? 0)) / this.scale + const left = this.viewPortLeft + translateX + const top = this.viewPortTop + translateY this.moveViewport(top, left) - this.startPosition = { - x: e.x, - y: e.y, - } - const centerX = - (this.viewPortLeft + this.viewPortWidth / 2) / this.viewPortScale - const centerY = - (this.viewPortTop + this.viewPortHeight / 2) / this.viewPortScale + this.startPosition = { x, y } + const centerX = this.viewPortLeft + this.viewPortWidth / this.scale / 2 + const centerY = this.viewPortTop + this.viewPortHeight / this.scale / 2 this.lf.focusOn({ coordinate: { - x: centerX + this.resetDataX, - y: centerY + this.resetDataY, + x: centerX, + y: centerY, }, }) } private drop = () => { document.removeEventListener('mousemove', this.drag) document.removeEventListener('mouseup', this.drop) - let top = this.viewPortTop - let left = this.viewPortLeft - if (this.viewPortLeft > this.width) { - left = this.width - this.viewPortWidth - } - if (this.viewPortTop > this.height) { - top = this.height - this.viewPortHeight - } - if (this.viewPortLeft < -this.width) { - left = 0 - } - if (this.viewPortTop < -this.height) { - top = 0 - } - this.moveViewport(top, left) } - private mapClick = (e) => { - if (this.dragging) { - this.dragging = false - } else { - const { layerX, layerY } = e - const ViewPortCenterX = layerX - const ViewPortCenterY = layerY - const graphData = this.lf.getGraphRawData() - const { left, top } = this.getBounds(graphData) - const resetGraphX = left + ViewPortCenterX / this.viewPortScale - const resetGraphY = top + ViewPortCenterY / this.viewPortScale - this.lf.focusOn({ - coordinate: { - x: resetGraphX, - y: resetGraphY, - }, - }) - } + private mapClick = (e: MouseEvent) => { + const { offsetX, offsetY } = e + const centerX = this.translateX + offsetX / this.scale + const centerY = this.translateY + offsetY / this.scale + this.lf.focusOn({ + coordinate: { + x: centerX, + y: centerY, + }, + }) } } diff --git a/packages/extension/src/style/index.less b/packages/extension/src/style/index.less index de606a821..5dcc09bd5 100644 --- a/packages/extension/src/style/index.less +++ b/packages/extension/src/style/index.less @@ -144,9 +144,10 @@ /* 缩略图 */ .lf-mini-map { position: absolute; - padding-top: 20px; + padding: 8px; + padding-top: 28px; overflow: hidden; - background: rgb(255 255 255 / 100%); + background: #eaedf2; border: 1px solid #93a3b4; } @@ -159,7 +160,8 @@ position: absolute; top: 0; left: 0; - border: 2px solid rgb(24 125 255); + // border: 2px solid rgb(24 125 255); + background-color: rgb(48 48 48 / 20%); cursor: grab; } @@ -191,7 +193,7 @@ } .lf-mini-map-no-header { - padding-top: 0; + padding-top: 8px; } .lf-mini-map-no-header .lf-mini-map-header { diff --git a/packages/extension/src/style/raw.ts b/packages/extension/src/style/raw.ts index 059102772..e0e1a69e6 100644 --- a/packages/extension/src/style/raw.ts +++ b/packages/extension/src/style/raw.ts @@ -128,9 +128,10 @@ export const content = `.lf-control { /* 缩略图 */ .lf-mini-map { position: absolute; - padding-top: 20px; + padding: 8px; + padding-top: 28px; overflow: hidden; - background: #ffffff; + background: #eaedf2; border: 1px solid #93a3b4; } .lf-mini-map-graph { @@ -141,7 +142,7 @@ export const content = `.lf-control { position: absolute; top: 0; left: 0; - border: 2px solid #187dff; + background-color: rgba(48, 48, 48, 0.2); cursor: grab; } .lf-mini-map-header { @@ -170,7 +171,7 @@ export const content = `.lf-control { cursor: pointer; } .lf-mini-map-no-header { - padding-top: 0; + padding-top: 8px; } .lf-mini-map-no-header .lf-mini-map-header { display: none;