Function RenderSubWindows

app/src/components/render-sub-windows.tsx:13–203

()

 * @returns
 */
export default function RenderSubWindows() {
  const subWindows = SubWindow.use();

  const onClickInner = (win: SubWindow.Window) => {
    if (win.closeWhenClickInside) {
      SubWindow.close(win.id);
    }
  };

  return (
    <div className="pointer-events-none fixed left-0 top-0 z-40 h-full w-full">
      {subWindows.map((win: SubWindow.Window) => (
        // transition 组件可以让关闭流程更平滑
        <Transition key={win.id} appear={true} show={!win.closing}>
          <SimpleCard
            data-pg-window-id={win.id}
            style={{
              top: win.rect.top + "px",
              left: win.rect.left + "px",
              zIndex: win.zIndex,
              width: win.rect.width + "px",
              height: win.rect.height + "px",
            }}
            className={cn(
              "pointer-events-auto absolute flex flex-col overflow-hidden outline-0 transition",
              "data-closed:scale-90 data-closed:opacity-0",
            )}
            onClick={() => onClickInner(win)}
            onMouseDown={(e) => {
              SubWindow.focus(win.id);
              // 如果按到的元素的父元素都没有data-pg-drag-region属性，就不移动窗口
              if (!(e.target as HTMLElement).closest("[data-pg-drag-region]")) {
                return;
              }
              const start = new Vector(e.clientX, e.clientY);
              const onMouseUp = () => {
                window.removeEventListener("mouseup", onMouseUp);
                window.removeEventListener("mousemove", onMouseMove);
              };
              const onMouseMove = (e: MouseEvent) => {
                const delta = new Vector(e.clientX, e.clientY).subtract(start);
                const newRect = win.rect.translate(delta);
                SubWindow.update(win.id, { rect: newRect });
              };
              window.addEventListener("mouseup", onMouseUp);
              window.addEventListener("mousemove", onMouseMove);
            }}
            onTouchStart={(e) => {
              SubWindow.focus(win.id);
              if (e.touches.length > 1) return;
              const touch = e.touches[0];
              // 如果按到的元素的父元素都没有data-pg-drag-region属性，就不移动窗口
              if (!(e.target as HTMLElement).closest("[data-pg-drag-region]")) {
                return;
              }
              const start = new Vector(touch.clientX, touch.clientY);
              const onTouchEnd = () => {
                window.removeEventListener("touchend", onTouchEnd);