다시 ConstantProvider를 뜯어보자

Blockly.zelos.ConstantProvider 를 상속받고 이전처럼 다시 notch값을 constructor 이후 덮어쓰는 방식으로 처음에는 구현을 했다.
이전과 마찬가지로 아무리 해도 notch값이 수정이 되지 않았다.
notch값이 수정된 버전으로 constant를 사용하려고 RenderInfo , Drawer , Renderer 부분 모든 곳에 다 커스텀 constantProvider를 적용 시켜보았는데, 결국 실패하였다.
도저히 답이 없나? 하는 상황에서 [공식문서](https://developers.google.com/blockly/reference/js/blockly.blockrendering_namespace.constantprovider_class.md?hl=ko&_gl=1*1bj36sl*_up*MQ.._gaNzE1NTM5NjkyLjE3MzIxOTE2NTM._ga_R5G2Y6GLVCMTczMjE5MTY1Mi4xLjEuMTczMjE5MTY1Mi4wLjAuMA..)를 다시 찾아 읽어보았다. 생각보다 class 오버라이딩하는 방식으로 커스텀해서 사용하는 사람들이 많았는지 각 constant 값이 무엇인지, 각 메소드는 무엇인지에 대한 설명이 잘 적혀있었다. 공식문서를 정말정말정말 잘 보자..!!!
결론은, 블록을 렌더링하고 그걸 그리기 직전에 내부적으로 make~~~ 로 시작하는 메소드를 다시 호출하면서 constant 값들을 동적으로 다시 할당해준다는 것을 알았다. ~~(아니 왜 constant야?)~~
make~~~로 시작하는 메소드들에서 동적으로 할당해주는 constant 값들을 제외하면, 나머지는 constructor 에서 다시 설정해주면 되었다.

  override makeNotch() {
    const width = this.NOTCH_WIDTH;
    const height = this.NOTCH_HEIGHT;

    const innerWidth = width / 3;
    const curveWidth = innerWidth / 3;

    const halfHeight = height / 2;
    const quarterHeight = halfHeight / 2;

    /**
     * Make the main path for the notch.
     *
     * @param dir Direction multiplier to apply to horizontal offsets along the
     *     path. Either 1 or -1.
     * @returns A path fragment describing a notch.
     */
    function makeMainPath(dir: number): string {
      return (
        svgPaths.curve('c', [
          svgPaths.point((dir * curveWidth) / 2, 0),
          svgPaths.point((dir * curveWidth * 3) / 4, quarterHeight / 2),
          svgPaths.point(dir * curveWidth, quarterHeight),
        ]) +
        svgPaths.line([svgPaths.point(dir * curveWidth, halfHeight)]) +
        svgPaths.curve('c', [
          svgPaths.point((dir * curveWidth) / 4, quarterHeight / 2),
          svgPaths.point((dir * curveWidth) / 2, quarterHeight),
          svgPaths.point(dir * curveWidth, quarterHeight),
        ]) +
        svgPaths.lineOnAxis('h', dir * innerWidth) +
        svgPaths.curve('c', [
          svgPaths.point((dir * curveWidth) / 2, 0),
          svgPaths.point((dir * curveWidth * 3) / 4, -(quarterHeight / 2)),
          svgPaths.point(dir * curveWidth, -quarterHeight),
        ]) +
        svgPaths.line([svgPaths.point(dir * curveWidth, -halfHeight)]) +
        svgPaths.curve('c', [
          svgPaths.point((dir * curveWidth) / 4, -(quarterHeight / 2)),
          svgPaths.point((dir * curveWidth) / 2, -quarterHeight),
          svgPaths.point(dir * curveWidth, -quarterHeight),
        ])
      );
    }

    const pathLeft = makeMainPath(1);
    const pathRight = makeMainPath(-1);

    return {
      type: this.SHAPES.NOTCH,
      width,
      height,
      pathLeft,
      pathRight,
    };
  }

내가 사용하는 블록리의 zelos constant provider 내 makeNocth의 설정은 이런데, 여기서 width 값에 바꾸니 실제로 블록들의 notch 부분 디자인이 일괄적으로 변경되었다.

⇒ 이 말은 즉슨, 나는 이곳에서 notch값을 설정해주면 되는 것이었다 !

일괄적 path 처리

Notch 찾은 것 까진ㅇㅋ. 근데.. 값을 뭐로 넣어주지..?

블록리의 notch 부분은 좌측 사진처럼 저 부분을 기점으로 대칭되어있다. 그러나, 우리 프로젝트 블록 디자인은 우측처럼 좌우가 대칭되어있지 않다.

path값을 보면 차이는 더 명확하다. 이게 문제점이 되었다.