@formicoidea/labre-core 0.23.2 → 0.24.0

package/src/_pkgs/affine-gfx-brush/toolbar/components/pen/pen-menu.ts

@@ -1,215 +0,0 @@
-import { adjustColorAlpha } from '../../../../affine-components/color-picker/index.js';
-import {
-  BRUSH_LINE_WIDTHS,
-  DefaultTheme,
-  HIGHLIGHTER_LINE_WIDTHS,
-} from '../../../../affine-model/index.js';
-import {
-  FeatureFlagService,
-  ThemeProvider,
-} from '../../../../affine-shared/services/index.js';
-import type { ColorEvent } from '../../../../affine-shared/utils/index.js';
-import { EdgelessToolbarToolMixin } from '../../../../affine-widget-edgeless-toolbar/index.js';
-import { SignalWatcher } from '../../../../global/lit/index.js';
-import {
-  computed,
-  type ReadonlySignal,
-  type Signal,
-} from '@preact/signals-core';
-import { css, html, LitElement, type TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import { BrushTool } from '../../../brush-tool';
-import { HighlighterTool } from '../../../highlighter-tool';
-import { penInfoMap } from './consts';
-import type { Pen, PenMap } from './types';
-
-export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
-  SignalWatcher(LitElement)
-) {
-  static override styles = css`
-    :host {
-      display: flex;
-      position: absolute;
-      z-index: -1;
-    }
-
-    .pens {
-      display: flex;
-      height: 100%;
-      padding: 0 4px;
-      align-items: flex-end;
-
-      edgeless-tool-icon-button {
-        display: flex;
-        align-self: flex-start;
-      }
-
-      .pen-wrapper {
-        display: flex;
-        min-width: 38px;
-        height: 64px;
-        align-items: flex-end;
-        justify-content: center;
-        position: relative;
-        transform: translateY(-2px);
-        transition-property: color, transform;
-        transition-duration: 300ms;
-        transition-timing-function: ease-in-out;
-        cursor: pointer;
-      }
-
-      .pen-wrapper:hover,
-      .pen-wrapper:active,
-      .pen-wrapper[data-active] {
-        transform: translateY(-22px);
-      }
-    }
-
-    .menu-content {
-      display: flex;
-      align-items: center;
-    }
-
-    menu-divider {
-      display: flex;
-      align-self: center;
-      height: 24px;
-      margin: 0 9px;
-    }
-  `;
-
-  private readonly _theme$ = computed(() => {
-    return this.edgeless.std.get(ThemeProvider).theme$.value;
-  });
-
-  private readonly _onPickPen = (tool: Pen) => {
-    this.pen$.value = tool;
-    if (tool === 'brush') {
-      this.setEdgelessTool(BrushTool);
-    } else {
-      this.setEdgelessTool(HighlighterTool);
-    }
-  };
-
-  private readonly _onPickColor = (e: ColorEvent) => {
-    let color = e.detail.value;
-    if (this.pen$.peek() === 'highlighter') {
-      color = adjustColorAlpha(color, 0.3);
-    }
-    this.onChange({ color });
-  };
-
-  private readonly _onPickLineWidth = (e: CustomEvent<number>) => {
-    e.stopPropagation();
-    this.onChange({ lineWidth: e.detail });
-  };
-
-  override type = [BrushTool, HighlighterTool];
-
-  override render() {
-    const {
-      _theme$: { value: theme },
-      colors$: {
-        value: { brush: brushColor, highlighter: highlighterColor },
-      },
-      penIconMap$: {
-        value: { brush: brushIcon, highlighter: highlighterIcon },
-      },
-      penInfo$: {
-        value: { type, color, lineWidth },
-      },
-    } = this;
-
-    const lineWidths =
-      type === 'brush' ? BRUSH_LINE_WIDTHS : HIGHLIGHTER_LINE_WIDTHS;
-
-    return html`
-      <edgeless-slide-menu>
-        <div class="pens" slot="prefix">
-          <edgeless-tool-icon-button
-            class="edgeless-brush-button"
-            .tooltip=${html`<affine-tooltip-content-with-shortcut
-              data-tip="${penInfoMap.brush.tip}"
-              data-shortcut="${penInfoMap.brush.shortcut}"
-            ></affine-tooltip-content-with-shortcut>`}
-            .tooltipOffset=${20}
-            .hover=${false}
-            @click=${() => this._onPickPen('brush')}
-          >
-            <div
-              class="pen-wrapper"
-              style=${styleMap({ color: brushColor })}
-              ?data-active="${type === 'brush'}"
-            >
-              ${brushIcon}
-            </div>
-          </edgeless-tool-icon-button>
-
-          <edgeless-tool-icon-button
-            class="edgeless-highlighter-button"
-            .tooltip=${html`<affine-tooltip-content-with-shortcut
-              data-tip="${penInfoMap.highlighter.tip}"
-              data-shortcut="${penInfoMap.highlighter.shortcut}"
-            ></affine-tooltip-content-with-shortcut>`}
-            .tooltipOffset=${20}
-            .hover=${false}
-            @click=${() => this._onPickPen('highlighter')}
-          >
-            <div
-              class="pen-wrapper"
-              style=${styleMap({ color: highlighterColor })}
-              ?data-active="${type === 'highlighter'}"
-            >
-              ${highlighterIcon}
-            </div>
-          </edgeless-tool-icon-button>
-          <menu-divider .vertical=${true}></menu-divider>
-        </div>
-        <div class="menu-content">
-          <edgeless-line-width-panel
-            .selectedSize=${lineWidth}
-            .lineWidths=${lineWidths}
-            @select=${this._onPickLineWidth}
-          >
-          </edgeless-line-width-panel>
-          <menu-divider .vertical=${true}></menu-divider>
-          <edgeless-color-panel
-            class="one-way"
-            @select=${this._onPickColor}
-            .value=${color}
-            .theme=${theme}
-            .palettes=${DefaultTheme.StrokeColorShortPalettes}
-            .shouldKeepColor=${true}
-            .hasTransparent=${!this.edgeless.store
-              .get(FeatureFlagService)
-              .getFlag('enable_color_picker')}
-          ></edgeless-color-panel>
-        </div>
-      </edgeless-slide-menu>
-    `;
-  }
-
-  @property({ attribute: false })
-  accessor onChange!: (props: Record<string, unknown>) => void;
-
-  @property({ attribute: false })
-  accessor colors$!: ReadonlySignal<PenMap<string>>;
-
-  @property({ attribute: false })
-  accessor penIconMap$!: ReadonlySignal<PenMap<TemplateResult>>;
-
-  @property({ attribute: false })
-  accessor pen$!: Signal<Pen>;
-
-  @property({ attribute: false })
-  accessor penInfo$!: ReadonlySignal<{
-    type: Pen;
-    color: string;
-    icon: TemplateResult<1>;
-    lineWidth: number;
-    tip: string;
-    shortcut: string;
-  }>;
-}

package/src/_pkgs/affine-gfx-brush/toolbar/components/pen/pen-tool-button.ts

@@ -1,195 +0,0 @@
-import { keepColor } from '../../../../affine-components/color-picker/index.js';
-import {
-  EditPropsStore,
-  ThemeProvider,
-} from '../../../../affine-shared/services/index.js';
-import { EdgelessToolbarToolMixin } from '../../../../affine-widget-edgeless-toolbar/index.js';
-import { SignalWatcher } from '../../../../global/lit/index.js';
-import { computed, signal } from '@preact/signals-core';
-import { css, html, LitElement, nothing } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
-import { when } from 'lit/directives/when.js';
-
-import { BrushTool } from '../../../brush-tool';
-import { HighlighterTool } from '../../../highlighter-tool';
-import { penIconMap, penInfoMap } from './consts';
-import type { Pen } from './types';
-
-export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
-  SignalWatcher(LitElement)
-) {
-  static override styles = css`
-    :host {
-      display: flex;
-      height: 100%;
-      overflow-y: hidden;
-    }
-    .edgeless-pen-button {
-      height: 100%;
-    }
-    .pen-wrapper {
-      width: 35px;
-      height: 64px;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-    }
-    .pen-wrapper svg {
-      transition-property: color, transform;
-      transition-duration: 300ms;
-      transition-timing-function: ease-in-out;
-      transform: translateY(8px);
-    }
-    .edgeless-pen-button:hover .pen-wrapper svg,
-    .pen-wrapper.active svg {
-      transform: translateY(0);
-    }
-  `;
-
-  get themeProvider() {
-    return this.edgeless.std.get(ThemeProvider);
-  }
-
-  get settings() {
-    return this.edgeless.std.get(EditPropsStore);
-  }
-
-  private readonly colors$ = computed(() => {
-    const theme = this.themeProvider.theme$.value;
-    const brush = this.settings.lastProps$.value.brush.color;
-    const highlighter = this.settings.lastProps$.value.highlighter.color;
-    return {
-      brush: keepColor(
-        this.themeProvider.generateColorProperty(brush, undefined, theme)
-      ),
-      highlighter: keepColor(
-        this.themeProvider.generateColorProperty(highlighter, undefined, theme)
-      ),
-    };
-  });
-
-  private readonly color$ = computed(() => {
-    const pen = this.pen$.value;
-    return this.colors$.value[pen];
-  });
-
-  private readonly lineWidths$ = computed(() => {
-    const brush = this.settings.lastProps$.value.brush.lineWidth;
-    const highlighter = this.settings.lastProps$.value.highlighter.lineWidth;
-    return {
-      brush,
-      highlighter,
-    };
-  });
-
-  private readonly lineWidth$ = computed(() => {
-    const pen = this.pen$.value;
-    return this.lineWidths$.value[pen];
-  });
-
-  private readonly penIconMap$ = computed(() => {
-    const theme = this.themeProvider.app$.value;
-    return penIconMap[theme];
-  });
-
-  private readonly penIcon$ = computed(() => {
-    const pen = this.pen$.value;
-    return this.penIconMap$.value[pen];
-  });
-
-  private readonly penInfo$ = computed(() => {
-    const type = this.pen$.value;
-    return {
-      ...penInfoMap[type],
-      type: this.pen$.value,
-      icon: this.penIcon$.value,
-      color: this.color$.value,
-      lineWidth: this.lineWidth$.value,
-    };
-  });
-
-  private readonly pen$ = signal<Pen>('brush');
-
-  override enableActiveBackground = true;
-
-  override type = [BrushTool, HighlighterTool];
-
-  override firstUpdated() {
-    this.disposables.add(
-      this.gfx.tool.currentToolName$.subscribe(name => {
-        const tool = this.type.find(t => t.toolName === name);
-        if (!tool) {
-          this.tryDisposePopper();
-          return;
-        }
-
-        if (tool.toolName !== this.pen$.peek()) {
-          this.pen$.value = tool.toolName as Pen;
-        }
-
-        if (this.active) return;
-
-        this._togglePenMenu();
-      })
-    );
-  }
-
-  private _togglePenMenu() {
-    if (this.tryDisposePopper()) return;
-    const setPenByType = (pen: Pen) => {
-      if (pen === 'brush') {
-        this.setEdgelessTool(BrushTool);
-      } else {
-        this.setEdgelessTool(HighlighterTool);
-      }
-    };
-    if (!this.active) {
-      const pen = this.pen$.peek();
-      setPenByType(pen);
-    }
-    const menu = this.createPopper('edgeless-pen-menu', this);
-    Object.assign(menu.element, {
-      colors$: this.colors$,
-      penIconMap$: this.penIconMap$,
-      pen$: this.pen$,
-      penInfo$: this.penInfo$,
-      edgeless: this.edgeless,
-      onChange: (props: Record<string, unknown>) => {
-        const pen = this.pen$.peek();
-        this.edgeless.std.get(EditPropsStore).recordLastProps(pen, props);
-        setPenByType(pen);
-      },
-    });
-  }
-
-  override render() {
-    const {
-      active,
-      penInfo$: {
-        value: { type, color, icon, tip, shortcut },
-      },
-    } = this;
-
-    return html`
-      <edgeless-toolbar-button
-        class="edgeless-pen-button"
-        data-drawing-tool="${type}"
-        .tooltip=${when(
-          this.popper,
-          () => nothing,
-          () =>
-            html`<affine-tooltip-content-with-shortcut
-              data-tip="${tip}"
-              data-shortcut="${shortcut}"
-            ></affine-tooltip-content-with-shortcut>`
-        )}
-        .tooltipOffset=${4}
-        .active=${active}
-        .withHover=${true}
-        @click=${() => this._togglePenMenu()}
-      >
-        <div style=${styleMap({ color })} class="pen-wrapper">${icon}</div>
-      </edgeless-toolbar-button>
-    `;
-  }
-}

package/src/_pkgs/affine-gfx-brush/toolbar/components/pen/types.ts

@@ -1,3 +0,0 @@
-export type Pen = 'brush' | 'highlighter';
-
-export type PenMap<T> = Record<Pen, T>;

package/src/_pkgs/affine-gfx-brush/toolbar/configs/brush.ts

@@ -1,120 +0,0 @@
-import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import {
-  packColor,
-  type PickColorEvent,
-} from '../../../affine-components/color-picker/index.js';
-import {
-  BrushElementModel,
-  DefaultTheme,
-  LineWidth,
-  resolveColor,
-} from '../../../affine-model/index.js';
-import {
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '../../../affine-shared/services/index.js';
-import {
-  getMostCommonResolvedValue,
-  getMostCommonValue,
-} from '../../../affine-shared/utils/index.js';
-import { BlockFlavourIdentifier } from '../../../std/index.js';
-import { html } from 'lit';
-
-export const brushToolbarConfig = {
-  actions: [
-    {
-      id: 'a.line-width',
-      content(ctx) {
-        const models = ctx.getSurfaceModelsByType(BrushElementModel);
-        if (!models.length) return null;
-
-        const lineWidth =
-          getMostCommonValue(models, 'lineWidth') ?? LineWidth.Four;
-        const onPick = (e: CustomEvent<LineWidth>) => {
-          e.stopPropagation();
-
-          const lineWidth = e.detail;
-
-          for (const model of models) {
-            ctx.std
-              .get(EdgelessCRUDIdentifier)
-              .updateElement(model.id, { lineWidth });
-          }
-        };
-
-        return html`
-          <edgeless-line-width-panel
-            .selectedSize=${lineWidth}
-            @select=${onPick}
-          >
-          </edgeless-line-width-panel>
-        `;
-      },
-    },
-    {
-      id: 'b.color-picker',
-      content(ctx) {
-        const models = ctx.getSurfaceModelsByType(BrushElementModel);
-        if (!models.length) return null;
-
-        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
-        const theme = ctx.theme.edgeless$.value;
-
-        const field = 'color';
-        const firstModel = models[0];
-        const originalColor = firstModel[field];
-        const color =
-          getMostCommonResolvedValue(models, field, color =>
-            resolveColor(color, theme)
-          ) ?? resolveColor(DefaultTheme.black, theme);
-        const onPick = (e: PickColorEvent) => {
-          switch (e.type) {
-            case 'pick':
-              {
-                const color = e.detail.value;
-                const props = packColor(field, color);
-                const crud = ctx.std.get(EdgelessCRUDIdentifier);
-                models.forEach(model => {
-                  crud.updateElement(model.id, props);
-                });
-              }
-              break;
-            case 'start':
-              ctx.store.captureSync();
-              models.forEach(model => {
-                model.stash(field);
-              });
-              break;
-            case 'end':
-              ctx.store.transact(() => {
-                models.forEach(model => {
-                  model.pop(field);
-                });
-              });
-              break;
-          }
-        };
-
-        return html`
-          <edgeless-color-picker-button
-            class="color"
-            .label="${'Color'}"
-            .pick=${onPick}
-            .color=${color}
-            .theme=${theme}
-            .originalColor=${originalColor}
-            .enableCustomColor=${enableCustomColor}
-          >
-          </edgeless-color-picker-button>
-        `;
-      },
-    },
-  ],
-
-  when: ctx => ctx.getSurfaceModelsByType(BrushElementModel).length > 0,
-} as const satisfies ToolbarModuleConfig;
-
-export const brushToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:brush'),
-  config: brushToolbarConfig,
-});

package/src/_pkgs/affine-gfx-brush/toolbar/configs/highlighter.ts

@@ -1,139 +0,0 @@
-import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import {
-  adjustColorAlpha,
-  keepColor,
-  packColor,
-  type PickColorEvent,
-} from '../../../affine-components/color-picker/index.js';
-import {
-  DEFAULT_HIGHLIGHTER_LINE_WIDTH,
-  DefaultTheme,
-  HIGHLIGHTER_LINE_WIDTHS,
-  HighlighterElementModel,
-  resolveColor,
-} from '../../../affine-model/index.js';
-import {
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '../../../affine-shared/services/index.js';
-import {
-  getMostCommonResolvedValue,
-  getMostCommonValue,
-} from '../../../affine-shared/utils/index.js';
-import { BlockFlavourIdentifier } from '../../../std/index.js';
-import { html } from 'lit';
-
-const trackBaseProps = {
-  category: 'highlighter',
-};
-
-export const highlighterToolbarConfig = {
-  actions: [
-    {
-      id: 'a.line-width',
-      content(ctx) {
-        const models = ctx.getSurfaceModelsByType(HighlighterElementModel);
-        if (!models.length) return null;
-
-        const lineWidth =
-          getMostCommonValue(models, 'lineWidth') ??
-          DEFAULT_HIGHLIGHTER_LINE_WIDTH;
-        const onPick = (e: CustomEvent<number>) => {
-          e.stopPropagation();
-
-          const lineWidth = e.detail;
-
-          for (const model of models) {
-            ctx.std
-              .get(EdgelessCRUDIdentifier)
-              .updateElement(model.id, { lineWidth });
-          }
-
-          ctx.track('CanvasElementUpdated', {
-            ...trackBaseProps,
-            control: 'line width',
-          });
-        };
-
-        return html`
-          <edgeless-line-width-panel
-            .config=${{
-              width: 140,
-              itemSize: 16,
-              itemIconSize: 8,
-              dragHandleSize: 14,
-              count: HIGHLIGHTER_LINE_WIDTHS.length,
-            }}
-            .lineWidths=${HIGHLIGHTER_LINE_WIDTHS}
-            .selectedSize=${lineWidth}
-            @select=${onPick}
-          >
-          </edgeless-line-width-panel>
-        `;
-      },
-    },
-    {
-      id: 'b.color-picker',
-      content(ctx) {
-        const models = ctx.getSurfaceModelsByType(HighlighterElementModel);
-        if (!models.length) return null;
-
-        const theme = ctx.theme.edgeless$.value;
-
-        const field = 'color';
-        const firstModel = models[0];
-        const originalColor = firstModel[field];
-        const color = keepColor(
-          getMostCommonResolvedValue(models, field, color =>
-            resolveColor(color, theme)
-          ) ?? resolveColor(DefaultTheme.black, theme)
-        );
-        const onPick = (e: PickColorEvent) => {
-          if (e.type === 'pick') {
-            const color = adjustColorAlpha(e.detail.value, 0.3);
-            for (const model of models) {
-              const props = packColor(field, color);
-              ctx.std
-                .get(EdgelessCRUDIdentifier)
-                .updateElement(model.id, props);
-            }
-            return;
-          }
-
-          const isStartEvent = e.type === 'start';
-          for (const model of models) {
-            model[isStartEvent ? 'stash' : 'pop'](field);
-          }
-
-          if (!isStartEvent) return;
-          ctx.track('CanvasElementUpdated', {
-            ...trackBaseProps,
-            control: 'color picker',
-          });
-        };
-
-        return html`
-          <edgeless-color-picker-button
-            .colorPanelClass="${'one-way small'}"
-            .label="${'Color'}"
-            .pick=${onPick}
-            .color=${color}
-            .theme=${theme}
-            .originalColor=${originalColor}
-            .palettes=${DefaultTheme.StrokeColorShortPalettes}
-            .shouldKeepColor=${true}
-            .enableCustomColor=${false}
-          >
-          </edgeless-color-picker-button>
-        `;
-      },
-    },
-  ],
-
-  when: ctx => ctx.getSurfaceModelsByType(HighlighterElementModel).length > 0,
-} as const satisfies ToolbarModuleConfig;
-
-export const highlighterToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:highlighter'),
-  config: highlighterToolbarConfig,
-});

package/src/_pkgs/affine-gfx-brush/toolbar/configs/index.ts

@@ -1,2 +0,0 @@
-export * from './brush';
-export * from './highlighter';

package/src/_pkgs/affine-gfx-brush/toolbar/senior-tool.ts

@@ -1,15 +0,0 @@
-import { SeniorToolExtension } from '../../affine-widget-edgeless-toolbar/index.js';
-import { html } from 'lit';
-
-export const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
-  return {
-    name: 'Pen',
-    content: html`<div class="pen-and-eraser">
-      <edgeless-pen-tool-button .edgeless=${block}></edgeless-pen-tool-button>
-
-      <edgeless-eraser-tool-button
-        .edgeless=${block}
-      ></edgeless-eraser-tool-button>
-    </div> `,
-  };
-});