Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(edgeless): mindmap refine #6824

Merged
merged 11 commits into from
Apr 24, 2024
45 changes: 43 additions & 2 deletions packages/blocks/src/root-block/edgeless/edgeless-keyboard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@ import { IS_MAC } from '@blocksuite/global/env';

import { type EdgelessTool, LassoMode } from '../../_common/types.js';
import { matchFlavours } from '../../_common/utils/model.js';
import type { MindmapElementModel } from '../../surface-block/element-model/mindmap.js';
import type { ShapeElementModel } from '../../surface-block/index.js';
import { MindmapElementModel } from '../../surface-block/element-model/mindmap.js';
import type {
ElementModel,
ShapeElementModel,
} from '../../surface-block/index.js';
import {
Bound,
ConnectorElementModel,
Expand Down Expand Up @@ -471,6 +474,44 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {

const { elements } = edgeless.service.selection;
const inc = shift ? 10 : 1;
const mindmapNodes = elements.filter(
el => el.group instanceof MindmapElementModel
);

if (mindmapNodes.length > 0) {
const node = mindmapNodes[0];
const mindmap = node.group as MindmapElementModel;
let targetNode: ElementModel | null = null;

switch (key) {
case 'ArrowUp':
case 'ArrowDown':
targetNode = mindmap.getSiblingNode(
node.id,
key === 'ArrowDown' ? 'next' : 'prev'
);
break;
case 'ArrowLeft':
targetNode = mindmap.getParentNode(node.id);
break;
case 'ArrowRight':
{
const children = mindmap.getChildNodes(node.id);

targetNode = children[0] ?? null;
}
break;
}

if (targetNode) {
edgeless.service.selection.set({
elements: [targetNode.id],
editing: false,
});
}

return;
}

elements.forEach(element => {
const bound = Bound.deserialize(element.xywh).clone();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export class EdgelessChangeMindmapButton extends WithDisposable(LitElement) {
return html`<div class="edgeless-change-mindmap-button">
<edgeless-tool-icon-button
class="mindmap-style-button"
.tooltip=${this._showStylePopper ? '' : 'Mindmap Style'}
.tooltip=${this._showStylePopper ? '' : 'Style'}
.tipPosition=${'bottom'}
.active=${false}
@click=${() => {
Expand All @@ -153,7 +153,7 @@ export class EdgelessChangeMindmapButton extends WithDisposable(LitElement) {

<edgeless-tool-icon-button
class="mindmap-layout-button"
.tooltip=${this._showLayoutPopper ? '' : 'Mindmap Layout'}
.tooltip=${this._showLayoutPopper ? '' : 'Layout'}
.tipPosition=${'bottom'}
.active=${false}
@click=${() => {
Expand Down Expand Up @@ -276,9 +276,9 @@ class EdgelessChangeMindmapLayoutPanel extends LitElement {
`;

static mindmapLayouts = [
[LayoutType.LEFT, MindmapLeftLayoutIcon, 'Left layout'],
[LayoutType.RIGHT, MindmapRightLayoutIcon, 'Right layout'],
[LayoutType.BALANCE, MindmapBalanceLayoutIcon, 'Balance layout'],
[LayoutType.LEFT, MindmapLeftLayoutIcon, 'Left'],
[LayoutType.RIGHT, MindmapRightLayoutIcon, 'Right'],
[LayoutType.BALANCE, MindmapBalanceLayoutIcon, 'Radial'],
];

@property({ attribute: false })
Expand Down
46 changes: 46 additions & 0 deletions packages/blocks/src/surface-block/element-model/mindmap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,18 @@ export class MindmapElementModel extends GroupLikeModel<MindmapElementProps> {
return node?.parent ? this.surface.getElementById(node.parent) : null;
}

/**
* Path is an array of indexes that represent the path from the root node to the target node.
* The first element of the array is always 0, which represents the root node.
* @param element
* @returns
*
* @example
* ```ts
* const path = mindmap.getPath('nodeId');
* // [0, 1, 2]
* ```
*/
getPath(element: string | MindmapNode) {
let node = this._nodeMap.get(
typeof element === 'string' ? element : element.id
Expand Down Expand Up @@ -563,4 +575,38 @@ export class MindmapElementModel extends GroupLikeModel<MindmapElementProps> {
});
});
}

getSiblingNode(id: string, direction: 'prev' | 'next' = 'next') {
const node = this._nodeMap.get(id);

if (!node) {
return null;
}

const parent = this._nodeMap.get(node.detail.parent!);

if (!parent) {
return null;
}

const idx = parent.children.indexOf(node);
if (idx === -1) {
return null;
}

return (
parent?.children[direction === 'next' ? idx + 1 : idx - 1]?.element ??
null
);
}

getChildNodes(id: string) {
const node = this._nodeMap.get(id);

if (!node) {
return [];
}

return node.children.map(child => child.element);
}
}
2 changes: 1 addition & 1 deletion packages/blocks/src/surface-block/utils/math-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export function getBoundsFromPoints(points: IVec[], rotation = 0): TLBounds {
let maxX = -Infinity;
let maxY = -Infinity;

if (points.length < 2) {
if (points.length < 1) {
minX = 0;
minY = 0;
maxX = 1;
Expand Down