refactor(editor): move mindmap view to mindmap package (#11102)

blocksuite/affine/widgets/widget-edgeless-toolbar/src/effects.ts

@@ -4,11 +4,18 @@ import {
   EDGELESS_TOOLBAR_WIDGET,
   EdgelessToolbarWidget,
 } from './edgeless-toolbar';
+import { EdgelessFontFamilyPanel } from './panel/font-family-panel';
+import { EdgelessFontWeightAndStylePanel } from './panel/font-weight-and-style-panel';
 
 export function effects() {
   customElements.define(EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget);
   customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
   customElements.define('edgeless-tool-icon-button', EdgelessToolIconButton);
+  customElements.define(
+    'edgeless-font-weight-and-style-panel',
+    EdgelessFontWeightAndStylePanel
+  );
+  customElements.define('edgeless-font-family-panel', EdgelessFontFamilyPanel);
 }
 
 declare global {
@@ -16,5 +23,7 @@ declare global {
     'edgeless-tool-icon-button': EdgelessToolIconButton;
     'edgeless-toolbar-button': EdgelessToolbarButton;
     'edgeless-toolbar-widget': EdgelessToolbarWidget;
+    'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
+    'edgeless-font-family-panel': EdgelessFontFamilyPanel;
   }
 }

blocksuite/affine/widgets/widget-edgeless-toolbar/src/panel/font-family-panel.ts

@@ -0,0 +1,57 @@
+import { TextUtils } from '@blocksuite/affine-block-surface';
+import { FontFamily, FontFamilyList } from '@blocksuite/affine-model';
+import { DoneIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+export class EdgelessFontFamilyPanel extends LitElement {
+  static override styles = css`
+    :host {
+      display: flex;
+      align-items: start;
+      flex-direction: column;
+      min-width: 136px;
+    }
+
+    edgeless-tool-icon-button {
+      width: 100%;
+    }
+  `;
+
+  private _onSelect(value: FontFamily) {
+    this.value = value;
+    if (this.onSelect) {
+      this.onSelect(value);
+    }
+  }
+
+  override render() {
+    return repeat(
+      FontFamilyList,
+      item => item[0],
+      ([font, name]) => {
+        const active = this.value === font;
+        return html`
+          <edgeless-tool-icon-button
+            data-font="${name}"
+            style="font-family: ${TextUtils.wrapFontFamily(font)}"
+            .iconContainerPadding=${[4, 8]}
+            .justify=${'space-between'}
+            .active=${active}
+            .iconSize=${'20px'}
+            @click=${() => this._onSelect(font)}
+          >
+            ${name} ${active ? DoneIcon() : nothing}
+          </edgeless-tool-icon-button>
+        `;
+      }
+    );
+  }
+
+  @property({ attribute: false })
+  accessor onSelect: ((value: FontFamily) => void) | undefined = undefined;
+
+  @property({ attribute: false })
+  accessor value: FontFamily = FontFamily.Inter;
+}

blocksuite/affine/widgets/widget-edgeless-toolbar/src/panel/font-weight-and-style-panel.ts

@@ -0,0 +1,163 @@
+import { TextUtils } from '@blocksuite/affine-block-surface';
+import {
+  FontFamily,
+  FontFamilyMap,
+  FontStyle,
+  FontWeight,
+} from '@blocksuite/affine-model';
+import { DoneIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { choose } from 'lit/directives/choose.js';
+import { join } from 'lit/directives/join.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+const FONT_WEIGHT_CHOOSE: [FontWeight, () => string][] = [
+  [FontWeight.Light, () => 'Light'],
+  [FontWeight.Regular, () => 'Regular'],
+  [FontWeight.SemiBold, () => 'Semibold'],
+];
+
+export class EdgelessFontWeightAndStylePanel extends LitElement {
+  static override styles = css`
+    :host {
+      display: flex;
+      align-items: start;
+      flex-direction: column;
+      min-width: 124px;
+    }
+
+    edgeless-tool-icon-button {
+      width: 100%;
+    }
+  `;
+
+  private _isActive(
+    fontWeight: FontWeight,
+    fontStyle: FontStyle = FontStyle.Normal
+  ) {
+    return this.fontWeight === fontWeight && this.fontStyle === fontStyle;
+  }
+
+  private _isDisabled(
+    fontWeight: FontWeight,
+    fontStyle: FontStyle = FontStyle.Normal
+  ) {
+    // Compatible with old data
+    if (!(this.fontFamily in FontFamilyMap)) return false;
+
+    const fontFace = TextUtils.getFontFaces()
+      .filter(TextUtils.isSameFontFamily(this.fontFamily))
+      .find(
+        fontFace =>
+          fontFace.weight === fontWeight && fontFace.style === fontStyle
+      );
+
+    return !fontFace;
+  }
+
+  private _onSelect(
+    fontWeight: FontWeight,
+    fontStyle: FontStyle = FontStyle.Normal
+  ) {
+    this.fontWeight = fontWeight;
+    this.fontStyle = fontStyle;
+    if (this.onSelect) {
+      this.onSelect(fontWeight, fontStyle);
+    }
+  }
+
+  override render() {
+    let fontFaces = TextUtils.getFontFacesByFontFamily(this.fontFamily);
+    // Compatible with old data
+    if (fontFaces.length === 0) {
+      fontFaces = TextUtils.getFontFacesByFontFamily(FontFamily.Inter);
+    }
+    const fontFacesWithNormal = fontFaces.filter(
+      fontFace => fontFace.style === FontStyle.Normal
+    );
+    const fontFacesWithItalic = fontFaces.filter(
+      fontFace => fontFace.style === FontStyle.Italic
+    );
+
+    return join(
+      [
+        fontFacesWithNormal.length > 0
+          ? repeat(
+              fontFacesWithNormal,
+              fontFace => fontFace.weight,
+              fontFace => {
+                const active = this._isActive(fontFace.weight as FontWeight);
+                return html`
+                  <edgeless-tool-icon-button
+                    data-weight="${fontFace.weight}"
+                    .iconContainerPadding=${[4, 8]}
+                    .justify=${'space-between'}
+                    .disabled=${this._isDisabled(fontFace.weight as FontWeight)}
+                    .active=${active}
+                    .iconSize=${'20px'}
+                    @click=${() =>
+                      this._onSelect(fontFace.weight as FontWeight)}
+                  >
+                    ${choose(fontFace.weight, FONT_WEIGHT_CHOOSE)}
+                    ${active ? DoneIcon() : nothing}
+                  </edgeless-tool-icon-button>
+                `;
+              }
+            )
+          : nothing,
+        fontFacesWithItalic.length > 0
+          ? repeat(
+              fontFacesWithItalic,
+              fontFace => fontFace.weight,
+              fontFace => {
+                const active = this._isActive(
+                  fontFace.weight as FontWeight,
+                  FontStyle.Italic
+                );
+                return html`
+                  <edgeless-tool-icon-button
+                    data-weight="${fontFace.weight} italic"
+                    .iconContainerPadding=${[4, 8]}
+                    .justify=${'space-between'}
+                    .disabled=${this._isDisabled(
+                      fontFace.weight as FontWeight,
+                      FontStyle.Italic
+                    )}
+                    .active=${active}
+                    @click=${() =>
+                      this._onSelect(
+                        fontFace.weight as FontWeight,
+                        FontStyle.Italic
+                      )}
+                  >
+                    ${choose(fontFace.weight, FONT_WEIGHT_CHOOSE)} Italic
+                    ${active ? DoneIcon() : nothing}
+                  </edgeless-tool-icon-button>
+                `;
+              }
+            )
+          : nothing,
+      ].filter(item => item !== nothing),
+      () => html`
+        <edgeless-menu-divider
+          data-orientation="horizontal"
+        ></edgeless-menu-divider>
+      `
+    );
+  }
+
+  @property({ attribute: false })
+  accessor fontFamily = FontFamily.Inter;
+
+  @property({ attribute: false })
+  accessor fontStyle = FontStyle.Normal;
+
+  @property({ attribute: false })
+  accessor fontWeight = FontWeight.Regular;
+
+  @property({ attribute: false })
+  accessor onSelect:
+    | ((fontWeight: FontWeight, fontStyle: FontStyle) => void)
+    | undefined;
+}