WIP - Selection Copy + a11y features

packages/troika-3d-text/src/facade/SelectionManagerFacade.js

@@ -1,8 +1,8 @@
 import { ListFacade } from 'troika-3d'
 import { Matrix4, Plane, Vector2, Vector3 } from 'three'
-import { getCaretAtPoint, getSelectionRects } from 'troika-three-text'
 import { invertMatrix4 } from 'troika-three-utils'
 import SelectionRangeRect from './SelectionRangeRect.js'
+import { Mesh } from '../../../../node_modules/three/src/Three.js'
 
 const THICKNESS = 0.25 //rect depth as percentage of height
 
@@ -19,6 +19,7 @@ class SelectionManagerFacade extends ListFacade {
   constructor (parent, onSelectionChange) {
     super(parent)
     const textMesh = parent.threeObject
+    console.log(textMesh)
 
     this.rangeColor = 0x00ccff
     this.clipRect = noClip
@@ -42,10 +43,13 @@ class SelectionManagerFacade extends ListFacade {
     }
 
     const onDragStart = e => {
+      if(e.which===3){//contextmenu
+        return false
+      }
       const textRenderInfo = textMesh.textRenderInfo
       if (textRenderInfo) {
         const textPos = textMesh.worldPositionToTextCoords(e.intersection.point, tempVec2)
-        const caret = getCaretAtPoint(textRenderInfo, textPos.x, textPos.y)
+        const caret = textMesh.startCaret(textPos.x, textPos.y)
         if (caret) {
           onSelectionChange(caret.charIndex, caret.charIndex)
           parent.addEventListener('drag', onDrag)
@@ -56,6 +60,9 @@ class SelectionManagerFacade extends ListFacade {
     }
 
     const onDrag = e => {
+      if(e.which===3){//contextmenu
+        return false
+      }
       const textRenderInfo = textMesh.textRenderInfo
       if (e.ray && textRenderInfo) {
         // If it's hitting on the Text mesh, do an exact translation; otherwise raycast to an
@@ -65,11 +72,11 @@ class SelectionManagerFacade extends ListFacade {
         if (ix && ix.object === textMesh && ix.point) {
           textPos = textMesh.worldPositionToTextCoords(ix.point, tempVec2)
         } else {
-          const ray = e.ray.clone().applyMatrix4(invertMatrix4(textMesh.matrixWorld, tempMat4))
-          textPos = ray.intersectPlane(tempPlane.setComponents(0, 0, 1, 0), tempVec3)
+          // const ray = e.ray.clone().applyMatrix4(invertMatrix4(textMesh.matrixWorld, tempMat4))
+          // textPos = ray.intersectPlane(tempPlane.setComponents(0, 0, 1, 0), tempVec3)
         }
         if (textPos) {
-          const caret = getCaretAtPoint(textRenderInfo, textPos.x, textPos.y)
+          const caret = textMesh.moveCaret(textPos.x, textPos.y)
           if (caret) {
             onSelectionChange(this.selectionStart, caret.charIndex)
           }
@@ -83,8 +90,31 @@ class SelectionManagerFacade extends ListFacade {
       parent.removeEventListener('dragend', onDragEnd)
     }
 
+    //clear selection if missed click
+    parent.getSceneFacade().addEventListener('click',(e)=>{
+      let target = e.target
+      do {
+        if(target.$facadeId === textMesh.parent.$facade.$facadeId){
+          return
+        }
+        target = target.parent
+      } while (target !== null)
+      //clear selection
+      textMesh.startCaret(0,0)
+    })
+
     parent.addEventListener('dragstart', onDragStart)
     parent.addEventListener('mousedown', onDragStart)
+    var canvas = parent.getSceneFacade().parent._threeRenderer.domElement;
+    canvas.addEventListener('contextmenu',(e)=>{
+      textMesh._domElSelectedText.style.pointerEvents = 'auto'
+      textMesh.updateSelection()
+      window.setTimeout(()=>{
+        textMesh._domElSelectedText.style.pointerEvents = 'none'
+        console.log('contextmenu')
+      },50)
+      console.log('contextmenu')
+    })
 
     this._cleanupEvents = () => {
       onDragEnd()
@@ -94,7 +124,6 @@ class SelectionManagerFacade extends ListFacade {
   }
 
   afterUpdate() {
-    this.data = getSelectionRects(this.textRenderInfo, this.selectionStart, this.selectionEnd)
     super.afterUpdate()
   }
 

packages/troika-3d-text/src/facade/Text3DFacade.js

@@ -18,6 +18,7 @@ const TEXT_MESH_PROPS = [
   'whiteSpace',
   'material',
   'color',
+  'selectionColor',
   'colorRanges',
   'fillOpacity',
   'outlineOpacity',
@@ -35,7 +36,10 @@ const TEXT_MESH_PROPS = [
   'orientation',
   'glyphGeometryDetail',
   'sdfGlyphSize',
-  'debugSDF'
+  'debugSDF',
+  'supportScreenReader',
+  'selectable',
+  'selectionMaterial'
 ]
 
 

packages/troika-examples/text/TextExample.jsx

@@ -104,6 +104,7 @@ class TextExample extends React.Component {
       anchorX: 'center',
       anchorY: 'middle',
       color: 0xffffff,
+      selectionColor: 'white',
       fillOpacity: 1,
       strokeOpacity: 1,
       strokeColor: 0x808080,
@@ -121,10 +122,11 @@ class TextExample extends React.Component {
       material: 'MeshStandardMaterial',
       useTexture: false,
       shadows: false,
-      selectable: false,
+      selectable: true,
       colorRanges: false,
       sdfGlyphSize: 6,
-      debugSDF: false
+      debugSDF: false,
+      supportScreenReader: true
     }
 
     this._onConfigUpdate = (newState) => {
@@ -191,6 +193,8 @@ class TextExample extends React.Component {
               facade: Text3DFacade,
               castShadow: state.shadows,
               text: TEXTS[state.text],
+              x:0.5,
+              y:0.5,
               font: FONTS[state.font],
               fontSize: state.fontSize,
               maxWidth: state.maxWidth,
@@ -212,8 +216,11 @@ class TextExample extends React.Component {
               strokeWidth: state.strokeWidth,
               strokeColor: state.strokeColor,
               curveRadius: state.curveRadius,
+              supportScreenReader: state.supportScreenReader,
               material: material,
               color: 0xffffff,
+              selectionMaterial: null,
+              selectionColor: 0xfffff,
               scaleX: state.textScale || 1,
               scaleY: state.textScale || 1,
               scaleZ: state.textScale || 1,
@@ -314,6 +321,8 @@ class TextExample extends React.Component {
                 {type: 'boolean', path: "shadows", label: "Shadows"},
                 {type: 'boolean', path: "colorRanges", label: "colorRanges (WIP)"},
                 {type: 'boolean', path: "selectable", label: "Selectable (WIP)"},
+                {type: 'select', path: 'selectionColor', label: "Selection Color (WIP)", options: ['white','red','blue']},
+                {type: 'boolean', path: "supportScreenReader", label: "Support Screen readers (WIP)"},
                 {type: 'number', path: "fontSize", label: "fontSize", min: 0.01, max: 0.2, step: 0.01},
                 {type: 'number', path: "textScale", label: "scale", min: 0.1, max: 10, step: 0.1},
                 //{type: 'number', path: "textIndent", label: "indent", min: 0.1, max: 1, step: 0.01},