<!DOCTYPE html>
<title>TextEdit demo in CanvasKit</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
<script type="text/javascript" src="textapi_utils.js"></script>
<script type="text/javascript" src="spiralshader.js"></script>

<style>
canvas {
  border: 1px dashed grey;
}
</style>

<body>
  <h1>TextEdit in CanvasKit</h1>

  <canvas id=para2 width=600 height=600 tabindex='-1'></canvas>
</body>

<script type="text/javascript" charset="utf-8">
    let CanvasKit;
    onload = async () => {
      CanvasKit = await CanvasKitInit({ locateFile: (file) => 'https://particles.skia.org/dist/'+file });
      ParagraphAPI2();
    };

    function ParagraphAPI2() {
      const surface = CanvasKit.MakeCanvasSurface('para2');
      if (!surface) {
        console.error('Could not make surface');
        return;
      }

      const mouse = MakeMouse();
      const cursor = MakeCursor(CanvasKit);
      const canvas = surface.getCanvas();
      const spiralEffect = MakeSpiralShaderEffect(CanvasKit);

      const text0 = "In a hole in the ground there lived a hobbit. Not a nasty, dirty, " +
                    "wet hole full of worms and oozy smells. This was a hobbit-hole and " +
                    "that means good food, a warm hearth, and all the comforts of home.";
      const LOC_X = 20,
            LOC_Y = 20;

      const bgPaint = new CanvasKit.Paint();
      bgPaint.setColor([0.965, 0.965, 0.965, 1]);

      const editor = MakeEditor(text0, {typeface:null, size:30}, cursor, 540);

      editor.applyStyleToRange({size:130}, 0, 1);
      editor.applyStyleToRange({italic:true}, 38, 38+6);
      editor.applyStyleToRange({color:[1,0,0,1]}, 5, 5+4);

      editor.setXY(LOC_X, LOC_Y);

      function drawFrame(canvas) {
        const lines = editor.getLines();

        canvas.clear(CanvasKit.WHITE);

        if (mouse.isActive()) {
            const pos = mouse.getPos(-LOC_X, -LOC_Y);
            const a = lines_pos_to_index(lines, pos[0], pos[1]);
            const b = lines_pos_to_index(lines, pos[2], pos[3]);
            if (a === b) {
                editor.setIndex(a);
            } else {
                editor.setIndices(a, b);
            }
        }

        canvas.drawRect(editor.bounds(), bgPaint);

        {
            // update our animated shaders
            const rad_scale = Math.sin(Date.now() / 5000) / 2;
            const shader0 = spiralEffect.makeShader([
                rad_scale,
                editor.width()/2, editor.width()/2,
                1,0,0,1,                            // color0
                0,0,1,1                             // color1
             ]);
            editor.draw(canvas, [shader0]);
            shader0.delete();
        }

        surface.requestAnimationFrame(drawFrame);
      }
      surface.requestAnimationFrame(drawFrame);

      function interact(e) {
        const type = e.type;
        if (type === 'pointerup') {
            mouse.setUp(e.offsetX, e.offsetY);
        } else if (type === 'pointermove') {
            mouse.setMove(e.offsetX, e.offsetY);
        } else if (type === 'pointerdown') {
            mouse.setDown(e.offsetX, e.offsetY);
        }
      };

      function keyhandler(e) {
          switch (e.key) {
              case 'ArrowLeft':  editor.moveDX(-1); return;
              case 'ArrowRight': editor.moveDX(1); return;
              case 'ArrowUp':
                e.preventDefault();
                editor.moveDY(-1);
                return;
              case 'ArrowDown':
                e.preventDefault();
                editor.moveDY(1);
                return;
            case 'Backspace':
                editor.deleteSelection(-1);
                return;
            case 'Delete':
                editor.deleteSelection(1);
                return;
              case 'Shift':
                return;
              case 'Tab':   // todo: figure out how to handle...
                e.preventDefault();
                return;
            }
            if (e.ctrlKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                switch (e.key) {
                    case 'r': editor.applyStyleToSelection({color:[1,0,0,1]}); return;
                    case 'g': editor.applyStyleToSelection({color:[0,0.6,0,1]}); return;
                    case 'u': editor.applyStyleToSelection({color:[0,0,1,1]}); return;
                    case 'k': editor.applyStyleToSelection({color:[0,0,0,1]}); return;

                    case 's': editor.applyStyleToSelection({shaderIndex:0}); return;

                    case 'i': editor.applyStyleToSelection({italic:'toggle'}); return;
                    case 'b': editor.applyStyleToSelection({bold:'toggle'}); return;
                    case 'w': editor.applyStyleToSelection({wavy:'toggle'}); return;

                    case ']': editor.applyStyleToSelection({size_add:1});  return;
                    case '[': editor.applyStyleToSelection({size_add:-1}); return;
                    case '}': editor.applyStyleToSelection({size_add:10});  return;
                    case '{': editor.applyStyleToSelection({size_add:-10}); return;
                }
            }
            if (!e.ctrlKey && !e.metaKey) {
                if (e.key.length == 1) {  // avoid keys like "Escape" for now
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    editor.insert(e.key);
                }
            }
      }

      document.getElementById('para2').addEventListener('pointermove', interact);
      document.getElementById('para2').addEventListener('pointerdown', interact);
      document.getElementById('para2').addEventListener('pointerup', interact);
      document.getElementById('para2').addEventListener('keydown', keyhandler);
      return surface;
    }

</script>