WIP: fix() Text on a path bounding box and cursor display

.codesandbox/templates/vanilla/src/index.ts

@@ -1,6 +1,6 @@
 import * as fabric from 'fabric';
 import './styles.css';
-import { testCase } from './testcases/loadingSvgs';
+import { testCase } from './testcases/simpleTextbox';
 
 const el = document.getElementById('canvas');
 const canvas = (window.canvas = new fabric.Canvas(el));

.codesandbox/templates/vanilla/src/testcases/simpleTextbox.ts

@@ -1,40 +1,20 @@
 import * as fabric from 'fabric';
 
 export function testCase(canvas: fabric.Canvas) {
-  const textValue = 'fabric.js sandbox';
-  const text = new fabric.Textbox(textValue, {
-    originX: 'center',
-    splitByGrapheme: true,
+  const textValue = 'LOL';
+  const path = new fabric.Path(
+    'M0 200 v-200 h200      a100,100 90 0,1 0,200     a100,100 90 0,1 -200,0     z',
+    {
+      fill: '',
+      stroke: 'red',
+    },
+  );
+  const text = new fabric.IText(textValue, {
     width: 200,
     top: 20,
-    styles: fabric.util.stylesFromArray(
-      [
-        {
-          style: {
-            fontWeight: 'bold',
-            fontSize: 64,
-          },
-          start: 0,
-          end: 9,
-        },
-      ],
-      textValue,
-    ),
+    path,
+    objectCaching: false,
   });
   canvas.add(text);
   canvas.centerObjectH(text);
-  function animate(toState) {
-    text.animate(
-      { scaleX: Math.max(toState, 0.1) * 2 },
-      {
-        onChange: () => canvas.renderAll(),
-        onComplete: () => animate(!toState),
-        duration: 1000,
-        easing: toState
-          ? fabric.util.ease.easeInOutQuad
-          : fabric.util.ease.easeInOutSine,
-      },
-    );
-  }
-  // animate(1);
 }

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- WIP: fix() Text on a path bounding box and cursor display [#10209](https://github.com/fabricjs/fabric.js/pull/10209)
 - feat(IText): expose getCursorRenderingData() function. [#10204](https://github.com/fabricjs/fabric.js/pull/10204)
 - fix(Canvas): allowTouchScrolling interactions [#10078](https://github.com/fabricjs/fabric.js/pull/10078)
 - update(IText): Add method enterEditingImpl/exitEditingImpl that executes the logic of enterEditing/exitEditing without events [#10187](https://github.com/fabricjs/fabric.js/issues/10187)

dist-extensions/fabric.d.ts

@@ -80,7 +80,7 @@ export { FabricText,
  *
  */
 FabricText as Text, } from './src/shapes/Text/Text';
-export type { ITextProps, SerializedITextProps, } from './src/shapes/IText/IText';
+export type { ITextProps, SerializedITextProps, CursorRenderingData, CursorBoundaries, } from './src/shapes/IText/IText';
 export { IText } from './src/shapes/IText/IText';
 export type { GraphemeData, SerializedTextboxProps, TextboxProps, } from './src/shapes/Textbox';
 export { Textbox } from './src/shapes/Textbox';