snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/gfx/group/src/renderer/dom-renderer.ts

@@ -0,0 +1,62 @@
+import { DomElementRendererExtension } from '@blocksuite/affine-block-surface';
+import { FontWeight, type GroupElementModel } from '@blocksuite/affine-model';
+
+import {
+  GROUP_TITLE_FONT,
+  GROUP_TITLE_FONT_SIZE,
+  GROUP_TITLE_PADDING,
+} from './consts';
+import { titleRenderParams } from './utils';
+
+export const GroupDomRendererExtension = DomElementRendererExtension(
+  'group',
+  (model: GroupElementModel, domElement, renderer) => {
+    const { zoom } = renderer.viewport;
+    const [, , w, h] = model.deserializedXYWH;
+
+    const renderParams = titleRenderParams(model, zoom);
+    model.externalXYWH = renderParams.titleBound.serialize();
+
+    domElement.innerHTML = '';
+    domElement.style.outlineColor = '';
+    domElement.style.outlineWidth = '';
+    domElement.style.outlineStyle = '';
+
+    const elements = renderer.provider.selectedElements?.() || [];
+
+    const renderTitle = () => {
+      const { text } = renderParams;
+      const titleElement = document.createElement('div');
+      titleElement.style.transform = `translate(0, -100%)`;
+      titleElement.style.fontFamily = GROUP_TITLE_FONT;
+      titleElement.style.fontWeight = `${FontWeight.Regular}`;
+      titleElement.style.fontStyle = 'normal';
+      titleElement.style.fontSize = `${GROUP_TITLE_FONT_SIZE}px`;
+      titleElement.style.color = renderer.getPropertyValue('--affine-blue');
+      titleElement.style.textAlign = 'left';
+      titleElement.style.padding = `${GROUP_TITLE_PADDING[0]}px ${GROUP_TITLE_PADDING[1]}px`;
+      titleElement.textContent = text;
+      domElement.replaceChildren(titleElement);
+    };
+
+    if (elements.includes(model.id)) {
+      if (model.showTitle) {
+        renderTitle();
+      } else {
+        domElement.style.outlineColor =
+          renderer.getPropertyValue('--affine-blue');
+        domElement.style.outlineWidth = '2px';
+        domElement.style.outlineStyle = 'solid';
+      }
+    } else if (model.childElements.some(child => elements.includes(child.id))) {
+      domElement.style.outlineColor = '#8FD1FF';
+      domElement.style.outlineWidth = '2px';
+      domElement.style.outlineStyle = 'solid';
+    }
+
+    domElement.style.width = `${w * zoom}px`;
+    domElement.style.height = `${h * zoom}px`;
+    domElement.style.overflow = 'visible';
+    domElement.style.pointerEvents = 'none';
+  }
+);