<aside> ✏️

목차

</aside>

🍀 flyout 안닫히게 고정하기.

customToolbox.tsx

import 'blockly/blocks';
import * as Blockly from 'blockly/core';

import { toolboxConfig, toolboxConfig2, classMakerPrompt } from '@/widgets';

interface IExtendedIToolbox extends Blockly.IToolbox {
  HtmlDiv: HTMLElement;
}

export const customToolbox = (newWorkspace: any) => {
  const toolbox: IExtendedIToolbox = newWorkspace.getToolbox()! as IExtendedIToolbox;
  const flyout = newWorkspace!.getToolbox()!.getFlyout();

  const tabs = document.createElement('div');
  tabs.className = 'flex w-96';

  const tagTab = document.createElement('button');
  tagTab.classList.add('tab');
  tagTab.textContent = '태그';

  const styleTab = document.createElement('button');
  styleTab.classList.add('tab');
  styleTab.textContent = '스타일';

  tagTab.addEventListener('click', () => {
    newWorkspace.updateToolbox(toolboxConfig);
    const toolboxContents = document.querySelector('.blocklyToolboxContents');
    toolboxContents!.classList.remove('hidden');
    tagTab.classList.add('tabSelected');
    styleTab.classList.remove('tabSelected');
  });

  styleTab.addEventListener('click', () => {
    newWorkspace.updateToolbox(toolboxConfig2);
    const toolboxContents = document.querySelector('.blocklyToolboxContents');
    toolboxContents!.classList.add('hidden');

    const flyoutContents = toolboxConfig2.contents;
    // 추가하기 버튼에 prompt 이벤트 뜨게 콜백등록
    newWorkspace.registerButtonCallback('classMakerPrompt', () => classMakerPrompt(newWorkspace));
    flyout.show(flyoutContents);

    styleTab.classList.add('tabSelected');
    tagTab.classList.remove('tabSelected');
  });

  tabs.appendChild(tagTab);
  tabs.appendChild(styleTab);

  toolbox!.HtmlDiv.prepend(tabs);

  flyout!.hide = () => {};
};

flyout!.hide = () => {};

• 기능: Flyout의 hide 메서드를 비활성화합니다.
• 기본 동작:
  • hide() 메서드는 Flyout을 숨기고, 콘텐츠를 제거하는 역할을 합니다.
• 효과:
  • hide 메서드를 빈 함수로 재정의하면 Flyout이 숨겨지지 않으며, 항상 화면에 표시됩니다.

• flyout 안닫히게 설정
  • 문제점 발견: 안닫히긴 하는데, 이게 블록을 집었다가 그대로 놓으면 취소가 되어야하는데 그 뒤에 블록이 flyout 뒤쪽 영역에 놓인걸로 된다. (진짜 안닫히기만 하는듯)

현재상황

• 최대한 돔조작 및 blockly 내부 함수를 이용해보려고 함.

문제

• flyout 부분에 button을 넣어도, 클릭시 동작은 아직 X
  • 동적으로 css 태그는 어떻게 넣을까…
  • 일단 만들고 생각할 것: css 태그별 속성값 어케 넣지..? 흠…
• “스타일” 버튼 누르면 toolbox 부분 없이 flyout 부분만 남아야한다.
  • 그냥 아예 커스텀을 해야하나? flyout 을 쓰려고 하면 안되나?