Skip to content

Commit

Permalink
feat: optimize and add some shortcuts
Browse files Browse the repository at this point in the history
  • Loading branch information
@vipzhicheng
vipzhicheng committed May 5, 2024
1 parent d3fa06e commit 4f18078
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 11 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
- chore: change ui to shadcn-vue
- feat: add blur switch setting
- feat: add left bottom button and control panel menu, and move most actions to it.
- feat: optimize and add some shortcuts

## 0.4.1

Expand Down
20 changes: 14 additions & 6 deletions src/components/Help.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,17 @@ const markmapShortcuts = [
description: 'Switch to linked references view.',
},
{
key: 'SPACE',
key: 'space',
description: 'Fit window in center in case you move or zoom it.',
},
{
key: 'shift+space',
description: 'Fit window in top or left to fit the window.',
},
{
key: 'shift+g',
description: 'Fit window in right or bottom to fit the window.',
},
{
key: '0',
description: 'Hide all except the central one.',
Expand Down Expand Up @@ -189,19 +197,19 @@ const markmapShortcuts = [
description: 'Collapse step by step.',
},
{
key: '⬆️',
key: '⬆️ or shift+k',
description: 'Move mindmap up.',
},
{
key: '⬇️',
key: '⬇️ or shift+j',
description: 'Move mindmap down.',
},
{
key: '⬅️',
key: '⬅️ or shift+h',
description: 'Move mindmap left.',
},
{
key: '➡️',
key: '➡️ or shift+l',
description: 'Move mindmap right.',
},
{
Expand Down Expand Up @@ -245,7 +253,7 @@ const markmapShortcuts = [
description: 'Go forward',
},
{
key: '/',
key: '?',
description: 'Toggle this modal.',
},
]
Expand Down
128 changes: 123 additions & 5 deletions src/stores/markmap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1036,7 +1036,7 @@ export const useMarkmap = defineStore('markmap', {
return false
})
hotkeys(
'up,down,left,right,esc,space,`,r,h,j,k,l,n,p,b,ctrl+b,command+b,q,-,=,0,9,1,2,3,4,5,shift+/',
'up,down,left,right,esc,space, shift+space, shift+g, `,r,h,j,k,shift+j,shift+k,l,n,shift+l,shift+h,p,b,ctrl+b,command+b,q,-,=,0,9,1,2,3,4,5,shift+/',
// @ts-ignore
async (event, handler) => {
const helpStore = useHelp()
Expand Down Expand Up @@ -1097,6 +1097,120 @@ export const useMarkmap = defineStore('markmap', {
case 'space': // space
await this.mm?.fit()
break
case 'shift+space': {
// await this.mm?.fit()
svgNode = this.mm.svg.node()

// undefined
const { width: offsetWidth, height: offsetHeight } =
svgNode.getBoundingClientRect()
const { fitRatio } = this.mm.options
const { minX, maxX, minY, maxY } = this.mm.state
const naturalWidth = maxY - minY
const naturalHeight = maxX - minX
const aspectRatio = naturalWidth / naturalHeight

// 确定基于短边缩放
let scale
if (aspectRatio > 1) {
// 宽度大于高度，基于宽度缩放
scale = Math.min(
(offsetHeight / naturalHeight) * fitRatio,
4
)
} else {
// 高度大于或等于宽度，基于高度缩放
scale = Math.min((offsetWidth / naturalWidth) * fitRatio, 4)
}

if (svgNode) {
// @ts-ignore
const transform = d3.zoomTransform(this.mm.svg.node())
// @ts-ignore
let translateX, translateY
if (aspectRatio > 1) {
// 宽度大于高度，定位到左边
translateX = 0 - minY * scale
translateY =
(offsetHeight - naturalHeight * scale) / 2 -
minX * scale
} else {
// 高度大于或等于宽度，定位到最顶部
translateX = 0 - minY * scale
translateY = 0 - minX * scale
}
transform.x = translateX
transform.y = translateY
transform.k = scale
// @ts-ignore
this.mm
.transition(this.mm.g)
.attr(
'transform',
`translate(${transform.x}, ${transform.y} ) scale(${transform.k})`
)
}
break
}
case 'shift+g': {
// await this.mm?.fit()
svgNode = this.mm.svg.node()

// undefined
const { width: offsetWidth, height: offsetHeight } =
svgNode.getBoundingClientRect()
const { fitRatio } = this.mm.options
const { minX, maxX, minY, maxY } = this.mm.state
const naturalWidth = maxY - minY
const naturalHeight = maxX - minX
const aspectRatio = naturalWidth / naturalHeight

// 确定基于短边缩放
let scale
if (aspectRatio > 1) {
// 宽度大于高度，基于宽度缩放
scale = Math.min(
(offsetHeight / naturalHeight) * fitRatio,
4
)
} else {
// 高度大于或等于宽度，基于高度缩放
scale = Math.min((offsetWidth / naturalWidth) * fitRatio, 4)
}

if (svgNode) {
// @ts-ignore
const transform = d3.zoomTransform(this.mm.svg.node())
// @ts-ignore
let translateX, translateY
if (aspectRatio > 1) {
// 宽度大于高度，定位到左边
translateX =
0 - minY * scale - (naturalWidth * scale - offsetWidth)
translateY =
(offsetHeight - naturalHeight * scale) / 2 -
minX * scale
} else {
// 高度大于或等于宽度，定位到最顶部
translateX = 0 - minY * scale
translateY =
0 -
minX * scale -
(naturalHeight * scale - offsetHeight)
}
transform.x = translateX
transform.y = translateY
transform.k = scale
// @ts-ignore
this.mm
.transition(this.mm.g)
.attr(
'transform',
`translate(${transform.x}, ${transform.y} ) scale(${transform.k})`
)
}
break
}
case '0': // 0
currentLevel = 0
hideAll(root)
Expand Down Expand Up @@ -1186,13 +1300,14 @@ export const useMarkmap = defineStore('markmap', {
eventFire(elRandomButton, 'click')
break
case 'up':
case 'shift+k':
svgNode = this.mm.svg.node()
if (svgNode) {
// @ts-ignore
const transform = d3.zoomTransform(this.mm.svg.node())
if (transform.x && transform.y && transform.k) {
// @ts-ignore
transform.y = transform.y - 100
transform.y = transform.y + 100
// @ts-ignore
this.mm
.transition(this.mm.g)
Expand All @@ -1204,13 +1319,14 @@ export const useMarkmap = defineStore('markmap', {
}
break
case 'down':
case 'shift+j':
svgNode = this.mm.svg.node()
if (svgNode) {
// @ts-ignore
const transform = d3.zoomTransform(this.mm.svg.node())
if (transform.x && transform.y && transform.k) {
// @ts-ignore
transform.y = transform.y + 100
transform.y = transform.y - 100
// @ts-ignore
this.mm
.transition(this.mm.g)
Expand All @@ -1223,13 +1339,14 @@ export const useMarkmap = defineStore('markmap', {
break

case 'left':
case 'shift+h':
svgNode = this.mm.svg.node()
if (svgNode) {
// @ts-ignore
const transform = d3.zoomTransform(this.mm.svg.node())
if (transform.x && transform.y && transform.k) {
// @ts-ignore
transform.x = transform.x - 100
transform.x = transform.x + 100
// @ts-ignore
this.mm
.transition(this.mm.g)
Expand All @@ -1241,13 +1358,14 @@ export const useMarkmap = defineStore('markmap', {
}
break
case 'right':
case 'shift+l':
svgNode = this.mm.svg.node()
if (svgNode) {
// @ts-ignore
const transform = d3.zoomTransform(this.mm.svg.node())
if (transform.x && transform.y && transform.k) {
// @ts-ignore
transform.x = transform.x + 100
transform.x = transform.x - 100
// @ts-ignore
this.mm
.transition(this.mm.g)
Expand Down

0 comments on commit 4f18078

Please sign in to comment.