refactor(editor): extract drag handle widget (#9415)

2026-08-22 04:21:40 +08:00 · 2024-12-29 06:51:48 +00:00
parent b96a03b283
commit cec4a4b2c0
47 changed files with 277 additions and 92 deletions
@@ -0,0 +1,63 @@
+import type { EditorHost } from '@blocksuite/block-std';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { Point } from '@blocksuite/global/utils';
+import { baseTheme } from '@toeverything/theme';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class DragPreview extends ShadowlessElement {
+  offset: Point;
+
+  constructor(offset?: Point) {
+    super();
+    this.offset = offset ?? new Point(0, 0);
+  }
+
+  override disconnectedCallback() {
+    if (this.onRemove) {
+      this.onRemove();
+    }
+    super.disconnectedCallback();
+  }
+
+  override render() {
+    return html`<style>
+        affine-drag-preview {
+          box-sizing: border-box;
+          position: absolute;
+          display: block;
+          height: auto;
+          font-family: ${baseTheme.fontSansFamily};
+          font-size: var(--affine-font-base);
+          line-height: var(--affine-line-height);
+          color: var(--affine-text-primary-color);
+          font-weight: 400;
+          top: 0;
+          left: 0;
+          transform-origin: 0 0;
+          opacity: 0.5;
+          user-select: none;
+          pointer-events: none;
+          caret-color: transparent;
+          z-index: 3;
+        }
+
+        .affine-drag-preview-grabbing * {
+          cursor: grabbing !important;
+        }</style
+      >${this.template}`;
+  }
+
+  @property({ attribute: false })
+  accessor onRemove: (() => void) | null = null;
+
+  @property({ attribute: false })
+  accessor template: TemplateResult | EditorHost | null = null;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-drag-preview': DragPreview;
+  }
+}
@@ -0,0 +1,45 @@
+import type { Rect } from '@blocksuite/global/utils';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export class DropIndicator extends LitElement {
+  static override styles = css`
+    .affine-drop-indicator {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--affine-primary-color);
+      transition-property: height, transform;
+      transition-duration: 100ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-delay: 0s;
+      transform-origin: 0 0;
+      pointer-events: none;
+      z-index: 2;
+    }
+  `;
+
+  override render() {
+    if (!this.rect) {
+      return null;
+    }
+    const { left, top, width, height } = this.rect;
+    const style = styleMap({
+      width: `${width}px`,
+      height: `${height}px`,
+      top: `${top}px`,
+      left: `${left}px`,
+    });
+    return html`<div class="affine-drop-indicator" style=${style}></div>`;
+  }
+
+  @property({ attribute: false })
+  accessor rect: Rect | null = null;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-drop-indicator': DropIndicator;
+  }
+}