Repository: toeverything/AFFiNE
File: blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts (TypeScript)

Code before:
import type { DomRenderer } from '@blocksuite/affine-block-surface';
import type { ShapeElementModel } from '@blocksuite/affine-model';
import { DefaultTheme } from '@blocksuite/affine-model';

import { manageClassNames, setStyles } from './utils';

function applyShapeSpecificStyles(
  model: ShapeElementModel,
  element: HTMLElement,
  zoom: number
) {
  // Reset properties that might be set by different shape types
  element.style.clipPath = '';
  element.style.borderRadius = '';
  // Clear innerHTML for shapes that don't use SVG, or if type changes from SVG-based to non-SVG-based
  if (model.shapeType !== 'diamond' && model.shapeType !== 'triangle') {
    element.innerHTML = '';
  }

  if (model.shapeType === 'rect') {
    const w = model.w * zoom;
    const h = model.h * zoom;
    const r = model.radius ?? 0;
    const borderRadius =
      r < 1 ? `${Math.min(w * r, h * r)}px` : `${r * zoom}px`;
    element.style.borderRadius = borderRadius;
  } else if (model.shapeType === 'ellipse') {
    element.style.borderRadius = '50%';
  } else if (model.shapeType === 'diamond') {
    element.style.clipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)';
  } else if (model.shapeType === 'triangle') {
    element.style.clipPath = 'polygon(50% 0%, 100% 100%, 0% 100%)';
  }
  // No 'else' needed to clear styles, as they are reset at the beginning of the function.
}

function applyBorderStyles(
  model: ShapeElementModel,
  element: HTMLElement,
  strokeColor: string,
  zoom: number
) {

Review comment (suggestion):
Use
```ts
while(div.firstChild)
    div.removeChild(div.firstChild);
```
to clear a dom.

Code after:
import type { DomRenderer } from '@blocksuite/affine-block-surface';
import type { ShapeElementModel } from '@blocksuite/affine-model';
import { DefaultTheme } from '@blocksuite/affine-model';

import { manageClassNames, setStyles } from './utils';

function applyShapeSpecificStyles(
  model: ShapeElementModel,
  element: HTMLElement,
  zoom: number
) {
  // Reset properties that might be set by different shape types
  element.style.removeProperty('clip-path');
  element.style.removeProperty('border-radius');
  // Clear DOM for shapes that don't use SVG, or if type changes from SVG-based to non-SVG-based
  if (model.shapeType !== 'diamond' && model.shapeType !== 'triangle') {
    while (element.firstChild) element.firstChild.remove();
  }

  switch (model.shapeType) {
    case 'rect': {
      const w = model.w * zoom;
      const h = model.h * zoom;
      const r = model.radius ?? 0;
      const borderRadius =
        r < 1 ? `${Math.min(w * r, h * r)}px` : `${r * zoom}px`;
      element.style.borderRadius = borderRadius;
      break;
    }
    case 'ellipse':
      element.style.borderRadius = '50%';
      break;
    case 'diamond':
      element.style.clipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)';
      break;
    case 'triangle':
      element.style.clipPath = 'polygon(50% 0%, 100% 100%, 0% 100%)';
      break;
  }
  // No 'else' needed to clear styles, as they are reset at the beginning of the function.
}