refactor(editor): remote selection widget (#9408)

2026-08-03 02:20:19 +08:00 · 2024-12-28 08:47:09 +00:00
parent 1e4b1807be
commit b96a03b283
22 changed files with 135 additions and 32 deletions
@@ -0,0 +1,36 @@
+import type { DirectiveResult } from 'lit/directive.js';
+import { styleMap, type StyleMapDirective } from 'lit/directives/style-map.js';
+
+import type { SelectionRect } from './doc-remote-selection.js';
+
+export function selectionStyle(
+  rect: SelectionRect,
+  color: string
+): DirectiveResult<typeof StyleMapDirective> {
+  return styleMap({
+    position: 'absolute',
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    backgroundColor: rect.transparent ? 'transparent' : color,
+    pointerEvent: 'none',
+    opacity: '20%',
+    borderRadius: '3px',
+  });
+}
+
+export function cursorStyle(
+  rect: SelectionRect,
+  color: string
+): DirectiveResult<typeof StyleMapDirective> {
+  return styleMap({
+    position: 'absolute',
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    backgroundColor: color,
+    pointerEvent: 'none',
+  });
+}