1 Reply Latest reply on Oct 4, 2010 7:31 AM by HawkeyeOregon

    selecting individual spans

    HawkeyeOregon

      The below example code doesn't select individual spans. It selects the paragraph that contains them. How does one select individual spans?

       

      xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx">

       

      <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
      </fx:Declarations>
      <fx:Script>
        <![CDATA[
        import flashx.textLayout.elements.TextRange;
                  import flashx.textLayout.elements.*;

                  private function selectSomeText(e:Event):void {
                      /* Get the location of the cursor. This is the character position of the
                         cursor in the RichEditableText control after the user clicks on it. */
                      var activePos:int = subHead.selectionActivePosition;

                      /* Get the first SpanElement in the TextFlow. */
                      var leaf:SpanElement = new SpanElement();
                      leaf = SpanElement(subHead.textFlow.getFirstLeaf());
                     
                      /* Get the start and end index values for the first SpanElement. */
                     var spanStart:int = leaf.getParagraph().parentRelativeStart;
                      var spanEnd:int = leaf.getParagraph().parentRelativeEnd;
                     
                      /* For the first SpanElement, if the cursor position falls within the
                         SpanElement's character range, then select the entire SpanElement. */
                      if (activePos >= spanStart && activePos <= spanEnd) {
                          selectSpan(spanStart, spanEnd);
                          return;
                      }

                      /* Perform the same operations for each leaf in the TextFlow.*/
                      while(leaf = SpanElement(leaf.getNextLeaf())) {                   
                          spanStart = leaf.getParagraph().parentRelativeStart;
                          spanEnd = leaf.getParagraph().parentRelativeEnd;
                          if (activePos >= spanStart && activePos <= spanEnd) {
                              selectSpan(spanStart, spanEnd);                       
                              return;
                          }
                      }
                  }

                  private function selectSpan(i1:int, i2:int):void {
                      subHead.selectRange(i1, i2);           
                  }

        ]]>
      </fx:Script>
      <s:Panel title="Selecting text test">
      <s:TextArea id="subHead" click="selectSomeText(event)" selectable="true" editable="true" textAlign="justify" selectionHighlighting="TextSelectionHighlighting.ALWAYS">
        <s:textFlow>
                  <s:TextFlow>
          <s:p><s:span>The </s:span>
          <s:span>roof </s:span>
          <s:span>is </s:span>
          <s:span>old.</s:span></s:p>
                     </s:TextFlow>
                </s:textFlow>
      </s:TextArea>
      </s:Panel>

      </s:Application>

        • 1. Re: selecting individual spans
          HawkeyeOregon Level 1

          I found the solution. It was bugging me that leaf.getParagraph().parentRelativeStart didn't look right. This would point to the paragraph element of the leaf element. After digging further, the solution was simply to remove the reference to the paragraph element.

           

          Started with:

            /* Get the start and end index values for the first SpanElement. */
                         var spanStart:int = leaf.getParagraph().parentRelativeStart;
                          var spanEnd:int = leaf.getParagraph().parentRelativeEnd;

           

          Changed to:

          /* Get the start and end index values for the first SpanElement. */
                          var spanStart:int = leaf.parentRelativeStart;
                          var spanEnd:int = leaf.parentRelativeEnd;