Tui image editor, adding two drawable shapes

Question

I need to only show two shapes in my custom Tui image editor, a rectangle and a circle, nothing more nothing less.

I added the rectangle and it works perfectly but if I add another function to add a circle and draw either or first the and then select the other, it still draws the first item. (if you click on a circle and draw, then click on the rectangle and draw then it draws a circle)

I am not sure how I can get this to function properly.

here is my two functions for my circle and rectangle.

  const onAddCircle = () => {
    imageEditorRef.current.startDrawingMode('SHAPE');
    if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
      const { height } = imageEditorRef.current.getCanvasSize();
      imageEditorRef.current.startDrawingMode('SHAPE');
      imageEditorRef.current.setDrawingShape('circle', {
        fill: 'transparent',
        stroke: COLOR_STATUS_ORANGE,
        strokeWidth: height / 100,
        isRegular: true,
      });
    }
  };

  const onAddRectangle = () => {
    if (imageEditorRef.current.getDrawingMode() !== 'SHAPE') {
      const { height } = imageEditorRef.current.getCanvasSize();
      imageEditorRef.current.startDrawingMode('SHAPE');
      imageEditorRef.current.clearObjects();
      imageEditorRef.current.setDrawingShape('rect', {
        fill: 'transparent',
        stroke: COLOR_STATUS_ORANGE,
        strokeWidth: height / 100,
        isRegular: true,
      });
    }
  };

and they are triggered by buttons

  <button
   onClick={onAddCircle}
   color="green"
  />

 <button
   onClick={onAddRectangle}
   color="red"
  />

I've tried adding imageEditorRef.current.clearDrawingShape(); to the beginning of the functions but it says its not a function because it doesn't exist. then I tried adding imageEditorRef.current.clearObjects(); but that clears everything that it draw by that shape.

I've looked their documentation as well and there is nothing on how to actually clear shape cache before drawing or selecting another shape.

Could someone please help ?

Answer 1

I fixed it!

Ive combined both functions into one added a prop called shape, and it checks if the prop is set to either or and then if it is then it uses that logic else it clears the drawing board.

  const drawShape = (Shape) => {
    const { height } = imageEditorRef.current.getCanvasSize();
    imageEditorRef.current.startDrawingMode('SHAPE');
    if (Shape === 'circle') {
      imageEditorRef.current.setDrawingShape('circle', {
        fill: 'transparent',
        stroke: COLOR_STATUS_ORANGE,
        strokeWidth: height / 100,
        isRegular: true,
      });
    } else if (Shape === 'rectangle') {
      imageEditorRef.current.setDrawingShape('rect', {
        fill: 'transparent',
        stroke: COLOR_STATUS_ORANGE,
        strokeWidth: height / 100,
        isRegular: true,
      });
    } else {
      imageEditorRef.current.stopDrawingMode();
    }
  };