askui 0.20.2 → 0.20.3

package/dist/esm/execution/dsl.js

@@ -1,3 +1,8 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable max-classes-per-file */
+/* eslint-disable max-len */
+// Autogenerated from typescript.template file
 export var Separators;
 (function (Separators) {
     Separators["STRING"] = "<|string|>";
@@ -285,7 +290,7 @@ export class FluentFilters extends FluentBase {
      *     .customElement({
      *         customImage: './logo.png', // required
      *         name: 'myLogo', // optional
-     *         threshold: 0.9, // optional, defaults to 0.9
+     *         threshold: 0.5, // optional, defaults to 0.5
      *         stopThreshold: 0.9, // optional, defaults to 0.9
      *         rotationDegreePerStep: 0, // optional, defaults to 0
      *         imageCompareFormat: 'grayscale', // optional, defaults to 'grayscale'
@@ -301,7 +306,7 @@ export class FluentFilters extends FluentBase {
      * - **name** (*`string`, optional*):
      *     - A unique name that can be used for filtering for the custom element. If not given, any text inside the custom image will be detected via OCR.
      * - **threshold** (*`number`, optional*):
-     *     - A threshold for how much a UI element needs to be similar to the custom element as defined by the image. Takes values between `0.0` (== all elements are recognized as the custom element which is probably not what you want) and `1.0` (== elements need to look exactly like the `customImage` which is unlikely to be achieved as even minor differences count). Defaults to `0.9`.
+     *     - A threshold for how much a UI element needs to be similar to the custom element as defined by the image. Takes values between `0.0` (== all elements are recognized as the custom element which is probably not what you want) and `1.0` (== elements need to look exactly like the `customImage` which is unlikely to be achieved as even minor differences count). Defaults to `0.5`.
      * - **stopThreshold** (*`number`, optional*):
      *     - A threshold for when to stop searching for UI elements similar to the custom element. As soon as UI elements have been found that are at least as similar as the `stopThreshold`, the search is going to stop. After that elements are filtered using the `threshold`. Because of that the `stopThreshold` should be greater than or equal to `threshold`. It is primarily to be used as a speed improvement (by lowering the value). Takes values between `0.0` and `1.0`. Defaults to `0.9`.
      * - **rotationDegreePerStep** (*`number`, optional*):
@@ -449,7 +454,7 @@ export class FluentFilters extends FluentBase {
      * await aui.get().text().withTextRegex('\b[Ss]\w+').exec()
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/withtextregex.gif)
+     * ![](https://docs.askui.com/img/gif/withTextRegex.gif)
      *
      *
      *
@@ -481,7 +486,7 @@ export class FluentFilters extends FluentBase {
      * await aui.moveMouseTo().text().withExactText('Password').exec()
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/withexacttext.gif)
+     * ![](https://docs.askui.com/img/gif/withExactText.gif)
      *
      *
      *
@@ -529,7 +534,7 @@ export class FluentFilters extends FluentBase {
      * **Important: _Matching only returns the best matching element when you use it with `get()`_**
      *
      * A bit of playing around to find a matching description is sometimes needed:
-     * E.g., `puzzle piece` can fail while `an icon showing a puzzle piece` might work.
+     * For example, `puzzle piece` can fail while `an icon showing a puzzle piece` might work.
      * Generally, the more detail the better.
      *
      * We also recommend to not restrict the type of element by using the general selector `element()` as shown in the examples below.
@@ -713,17 +718,46 @@ export class FluentFiltersOrRelations extends FluentFilters {
      *
      * **Examples:**
      * ```typescript
-     * --------------  --------------  --------------
-     * |  leftEl    |  |  rightEl0  |  |  rightEl1  |
-     * --------------  --------------  --------------
+     * ---------- ---------                     ---------
+     * | button | | text0 |                     | text3 |
+     * ---------- --------- ---------           ---------
+     *                      | text1 | ---------
+     *                      --------- | text2 |
+     *                                ---------
      *
-     * // Returns rightEl0 because rightEl0 is the first element right of leftEl
-     * ...rightEl().rightOf().leftEl()
-     * ...rightEl().rightOf(0).leftEl()
-     * // Returns rightEl1 because rightEl1 is the second element right of leftEl
-     * ...rightEl().rightOf(1).leftEl()
-     * // Returns no element because leftEl is left of rightEl
-     * ...leftEl().rightOf().rightEl()
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().rightOf(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().rightOf(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().rightOf(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element rightOf button
+     * ...text().rightOf().button()
+     * ...text().rightOf(0).button()
+     * ...text().rightOf(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // horizontal line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().rightOf(1, 'element_center_line').button()
+     *
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area rightOf the y-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().rightOf(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element rightOf button
+     * ...text().rightOf(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is rightOf the texts
+     * ...button().rightOf().text()
      * ```
      * ![](https://docs.askui.com/img/gif/rightOf.gif)
      *
@@ -756,17 +790,46 @@ export class FluentFiltersOrRelations extends FluentFilters {
      *
      * **Examples:**
      * ```typescript
-     * --------------  --------------  --------------
-     * |  leftEl1   |  |  leftEl0   |  |  rightEl   |
-     * --------------  --------------  --------------
+     * ---------                   --------- ----------
+     * | text3 |                   | text0 | | button |
+     * ---------         --------- --------- ----------
+     *         --------- | text1 |
+     *         | text2 | ---------
+     *         ---------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().leftOf(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().leftOf(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().leftOf(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element leftOf button
+     * ...text().leftOf().button()
+     * ...text().leftOf(0).button()
+     * ...text().leftOf(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // horizontal line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().leftOf(1, 'element_center_line').button()
+     *
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area leftOf the y-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().leftOf(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element leftOf button
+     * ...text().leftOf(2, 'display_edge_area').button()
      *
-     * // Returns leftEl0 because leftEl0 is the first element left of rightEl
-     * ...leftEl().leftOf().rightEl()
-     * ...leftEl().leftOf(0).rightEl()
-     * // Returns leftEl1 because leftEl1 is the second element left of rightEl
-     * ...leftEl().leftOf(1).rightEl()
-     * // Returns no element because rightEl is left of leftEl
-     * ...rightEl().leftOf().leftEl()
+     * // Returns no element because button is rightOf the texts
+     * ...button().leftOf().text()
      * ```
      * ![](https://docs.askui.com/img/gif/leftOf.gif)
      *
@@ -799,22 +862,54 @@ export class FluentFiltersOrRelations extends FluentFilters {
      *
      * **Examples:**
      * ```typescript
-     * --------------
-     * |    text    |
-     * --------------
-     * --------------
-     * |   button0  |
-     * --------------
-     * --------------
-     * |   button1  |
-     * --------------
-     *
+     * ------------
+     * |   text   |
+     * ------------
+     * ------------
+     * |  button0 |
+     * ------------
+     *          -----------
+     *          | button1 |
+     *          -----------
+     *             -----------
+     *             | button2 |
+     *             -----------
+     * ------------
+     * |  button3 |
+     * ------------
+     *
+     * // General explanation for element_center_line
+     * // This will find button0 and button3
+     * ...button().below(..., 'element_center_line').text()
+     *
+     * // General explanation for element_edge_area
+     * // This will find button0, button1 and button3
+     * ...button().below(..., 'element_edge_area').text()
+     *
+     * // General explanation and display_edge_area
+     * // This will find button0, button1, button2 and button3
+     * ...button().below(..., 'display_edge_area').text()
+     *
+     * // More examples:
      * // Returns button0 because button0 is the first button below text
      * ...button().below().text()
      * ...button().below(0).text()
-     * // Returns button1 because button1  is the second button below text
-     * ...button().below(1).text()
-     * // Returns no element because text is above button
+     * ...button().below(0, 'element_edge_area').text()
+     *
+     * // Returns button3 because it is the second button touched by the
+     * // vertical line from the center of text
+     * // Notice: button1 is not touched
+     * ...button().below(1, 'element_center_line').text()
+     *
+     * // Returns button3 because it is the third button touched by the
+     * // vertical area below the x-axis of text
+     * // Notice: button2 is not touched!
+     * ...button().below(2, 'element_edge_area').text()
+     *
+     * // Returns button2 because it is the third element below text
+     * ...button().below(2, 'display_edge_area').text()
+     *
+     * // Returns no element because text is above the buttons
      * ...text().below().button()
      * ```
      * ![](https://docs.askui.com/img/gif/below.gif)
@@ -847,22 +942,54 @@ export class FluentFiltersOrRelations extends FluentFilters {
      *
      * **Examples:**
      * ```typescript
-     * --------------
-     * |   text1    |
-     * --------------
-     * --------------
-     * |   text0    |
-     * --------------
-     * --------------
-     * |   button   |
-     * --------------
-     *
-     * // Returns text0 because text0 is the first element above button
+     * ------------
+     * |  text3   |
+     * ------------
+     *             ------------
+     *             |  text2   |
+     *             ------------
+     *     ------------
+     *     |  text1   |
+     *     ------------
+     * ------------
+     * |  text0   |
+     * ------------
+     * ------------
+     * |  button  |
+     * ------------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().above(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().above(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().above(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element above button
      * ...text().above().button()
      * ...text().above(0).button()
-     * // Returns text1 because text1 is the second element above button
-     * ...text().above(1).button()
-     * // Returns no element because button is below text
+     * ...text().above(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // vertical line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().above(1, 'element_center_line').button()
+     *
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area above the x-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().above(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element above button
+     * ...text().above(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is below the texts
      * ...button().above().text()
      * ```
      * ![](https://docs.askui.com/img/gif/above.gif)
@@ -1159,7 +1286,7 @@ export class FluentFiltersCondition extends FluentBase {
      *     .customElement({
      *         customImage: './logo.png', // required
      *         name: 'myLogo', // optional
-     *         threshold: 0.9, // optional, defaults to 0.9
+     *         threshold: 0.5, // optional, defaults to 0.5
      *         stopThreshold: 0.9, // optional, defaults to 0.9
      *         rotationDegreePerStep: 0, // optional, defaults to 0
      *         imageCompareFormat: 'grayscale', // optional, defaults to 'grayscale'
@@ -1175,7 +1302,7 @@ export class FluentFiltersCondition extends FluentBase {
      * - **name** (*`string`, optional*):
      *     - A unique name that can be used for filtering for the custom element. If not given, any text inside the custom image will be detected via OCR.
      * - **threshold** (*`number`, optional*):
-     *     - A threshold for how much a UI element needs to be similar to the custom element as defined by the image. Takes values between `0.0` (== all elements are recognized as the custom element which is probably not what you want) and `1.0` (== elements need to look exactly like the `customImage` which is unlikely to be achieved as even minor differences count). Defaults to `0.9`.
+     *     - A threshold for how much a UI element needs to be similar to the custom element as defined by the image. Takes values between `0.0` (== all elements are recognized as the custom element which is probably not what you want) and `1.0` (== elements need to look exactly like the `customImage` which is unlikely to be achieved as even minor differences count). Defaults to `0.5`.
      * - **stopThreshold** (*`number`, optional*):
      *     - A threshold for when to stop searching for UI elements similar to the custom element. As soon as UI elements have been found that are at least as similar as the `stopThreshold`, the search is going to stop. After that elements are filtered using the `threshold`. Because of that the `stopThreshold` should be greater than or equal to `threshold`. It is primarily to be used as a speed improvement (by lowering the value). Takes values between `0.0` and `1.0`. Defaults to `0.9`.
      * - **rotationDegreePerStep** (*`number`, optional*):
@@ -1323,7 +1450,7 @@ export class FluentFiltersCondition extends FluentBase {
      * await aui.get().text().withTextRegex('\b[Ss]\w+').exec()
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/withtextregex.gif)
+     * ![](https://docs.askui.com/img/gif/withTextRegex.gif)
      *
      *
      *
@@ -1355,7 +1482,7 @@ export class FluentFiltersCondition extends FluentBase {
      * await aui.moveMouseTo().text().withExactText('Password').exec()
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/withexacttext.gif)
+     * ![](https://docs.askui.com/img/gif/withExactText.gif)
      *
      *
      *
@@ -1403,7 +1530,7 @@ export class FluentFiltersCondition extends FluentBase {
      * **Important: _Matching only returns the best matching element when you use it with `get()`_**
      *
      * A bit of playing around to find a matching description is sometimes needed:
-     * E.g., `puzzle piece` can fail while `an icon showing a puzzle piece` might work.
+     * For example, `puzzle piece` can fail while `an icon showing a puzzle piece` might work.
      * Generally, the more detail the better.
      *
      * We also recommend to not restrict the type of element by using the general selector `element()` as shown in the examples below.
@@ -1587,17 +1714,46 @@ export class FluentFiltersOrRelationsCondition extends FluentFiltersCondition {
      *
      * **Examples:**
      * ```typescript
-     * --------------  --------------  --------------
-     * |  leftEl    |  |  rightEl0  |  |  rightEl1  |
-     * --------------  --------------  --------------
+     * ---------- ---------                     ---------
+     * | button | | text0 |                     | text3 |
+     * ---------- --------- ---------           ---------
+     *                      | text1 | ---------
+     *                      --------- | text2 |
+     *                                ---------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().rightOf(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().rightOf(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().rightOf(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element rightOf button
+     * ...text().rightOf().button()
+     * ...text().rightOf(0).button()
+     * ...text().rightOf(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // horizontal line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().rightOf(1, 'element_center_line').button()
      *
-     * // Returns rightEl0 because rightEl0 is the first element right of leftEl
-     * ...rightEl().rightOf().leftEl()
-     * ...rightEl().rightOf(0).leftEl()
-     * // Returns rightEl1 because rightEl1 is the second element right of leftEl
-     * ...rightEl().rightOf(1).leftEl()
-     * // Returns no element because leftEl is left of rightEl
-     * ...leftEl().rightOf().rightEl()
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area rightOf the y-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().rightOf(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element rightOf button
+     * ...text().rightOf(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is rightOf the texts
+     * ...button().rightOf().text()
      * ```
      * ![](https://docs.askui.com/img/gif/rightOf.gif)
      *
@@ -1630,17 +1786,46 @@ export class FluentFiltersOrRelationsCondition extends FluentFiltersCondition {
      *
      * **Examples:**
      * ```typescript
-     * --------------  --------------  --------------
-     * |  leftEl1   |  |  leftEl0   |  |  rightEl   |
-     * --------------  --------------  --------------
+     * ---------                   --------- ----------
+     * | text3 |                   | text0 | | button |
+     * ---------         --------- --------- ----------
+     *         --------- | text1 |
+     *         | text2 | ---------
+     *         ---------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().leftOf(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().leftOf(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().leftOf(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element leftOf button
+     * ...text().leftOf().button()
+     * ...text().leftOf(0).button()
+     * ...text().leftOf(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // horizontal line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().leftOf(1, 'element_center_line').button()
      *
-     * // Returns leftEl0 because leftEl0 is the first element left of rightEl
-     * ...leftEl().leftOf().rightEl()
-     * ...leftEl().leftOf(0).rightEl()
-     * // Returns leftEl1 because leftEl1 is the second element left of rightEl
-     * ...leftEl().leftOf(1).rightEl()
-     * // Returns no element because rightEl is left of leftEl
-     * ...rightEl().leftOf().leftEl()
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area leftOf the y-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().leftOf(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element leftOf button
+     * ...text().leftOf(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is rightOf the texts
+     * ...button().leftOf().text()
      * ```
      * ![](https://docs.askui.com/img/gif/leftOf.gif)
      *
@@ -1673,22 +1858,54 @@ export class FluentFiltersOrRelationsCondition extends FluentFiltersCondition {
      *
      * **Examples:**
      * ```typescript
-     * --------------
-     * |    text    |
-     * --------------
-     * --------------
-     * |   button0  |
-     * --------------
-     * --------------
-     * |   button1  |
-     * --------------
-     *
+     * ------------
+     * |   text   |
+     * ------------
+     * ------------
+     * |  button0 |
+     * ------------
+     *          -----------
+     *          | button1 |
+     *          -----------
+     *             -----------
+     *             | button2 |
+     *             -----------
+     * ------------
+     * |  button3 |
+     * ------------
+     *
+     * // General explanation for element_center_line
+     * // This will find button0 and button3
+     * ...button().below(..., 'element_center_line').text()
+     *
+     * // General explanation for element_edge_area
+     * // This will find button0, button1 and button3
+     * ...button().below(..., 'element_edge_area').text()
+     *
+     * // General explanation and display_edge_area
+     * // This will find button0, button1, button2 and button3
+     * ...button().below(..., 'display_edge_area').text()
+     *
+     * // More examples:
      * // Returns button0 because button0 is the first button below text
      * ...button().below().text()
      * ...button().below(0).text()
-     * // Returns button1 because button1  is the second button below text
-     * ...button().below(1).text()
-     * // Returns no element because text is above button
+     * ...button().below(0, 'element_edge_area').text()
+     *
+     * // Returns button3 because it is the second button touched by the
+     * // vertical line from the center of text
+     * // Notice: button1 is not touched
+     * ...button().below(1, 'element_center_line').text()
+     *
+     * // Returns button3 because it is the third button touched by the
+     * // vertical area below the x-axis of text
+     * // Notice: button2 is not touched!
+     * ...button().below(2, 'element_edge_area').text()
+     *
+     * // Returns button2 because it is the third element below text
+     * ...button().below(2, 'display_edge_area').text()
+     *
+     * // Returns no element because text is above the buttons
      * ...text().below().button()
      * ```
      * ![](https://docs.askui.com/img/gif/below.gif)
@@ -1721,22 +1938,54 @@ export class FluentFiltersOrRelationsCondition extends FluentFiltersCondition {
      *
      * **Examples:**
      * ```typescript
-     * --------------
-     * |   text1    |
-     * --------------
-     * --------------
-     * |   text0    |
-     * --------------
-     * --------------
-     * |   button   |
-     * --------------
-     *
-     * // Returns text0 because text0 is the first element above button
+     * ------------
+     * |  text3   |
+     * ------------
+     *             ------------
+     *             |  text2   |
+     *             ------------
+     *     ------------
+     *     |  text1   |
+     *     ------------
+     * ------------
+     * |  text0   |
+     * ------------
+     * ------------
+     * |  button  |
+     * ------------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().above(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().above(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().above(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element above button
      * ...text().above().button()
      * ...text().above(0).button()
-     * // Returns text1 because text1 is the second element above button
-     * ...text().above(1).button()
-     * // Returns no element because button is below text
+     * ...text().above(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // vertical line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().above(1, 'element_center_line').button()
+     *
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area above the x-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().above(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element above button
+     * ...text().above(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is below the texts
      * ...button().above().text()
      * ```
      * ![](https://docs.askui.com/img/gif/above.gif)
@@ -1881,7 +2130,7 @@ export class FluentCommand extends FluentBase {
         super(undefined);
     }
     /**
-     * Expects a condition, e.g., `exists()` or `notExits()`.
+     * Expects a condition, for example, `exists()` or `notExits()`.
      *
      * Use the structure `expect().<your filter>.(exists()|notExists())` as shown in the examples below.
      *
@@ -1928,7 +2177,7 @@ export class FluentCommand extends FluentBase {
      * await aui.moveMouseTo().text().withText('Grinning_Face').exec()
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/movemouseto.gif)
+     * ![](https://docs.askui.com/img/gif/moveMouseTo.gif)
      *
      *
      *
@@ -1976,7 +2225,7 @@ export class FluentCommand extends FluentBase {
      * await aui.scrollInside(0,-500).text().withText('Bottom sheet').exec();
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/scrollinside.gif)
+     * ![](https://docs.askui.com/img/gif/scrollInside.gif)
      *
      * @param {number} x_offset - A (positive/negative) x direction.
      * @param {number} y_offset - A (positive/negative) y direction.
@@ -2080,7 +2329,7 @@ export class FluentCommand extends FluentBase {
      * await aui.moveMouseRelatively(0, 50).exec();
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/movemouserelatively.gif)
+     * ![](https://docs.askui.com/img/gif/moveMouseRelatively.gif)
      *
      * @param {number} x_offset - A (positive/negative) x direction.
      * @param {number} y_offset - A (positive/negative) y direction.
@@ -2261,7 +2510,7 @@ export class FluentCommand extends FluentBase {
      * await aui.mouseDoubleLeftClick().exec();
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/mousedoubleleftclick.gif)
+     * ![](https://docs.askui.com/img/gif/mouseDoubleLeftClick.gif)
      *
      * @return {Exec}
      */
@@ -2453,7 +2702,7 @@ export class FluentCommand extends FluentBase {
      * await aui.pressAndroidTwoKey('volume_down', 'power').exec();
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/pressAndroidTwoKey.gif)
+     * ![](https://docs.askui.com/img/gif/pressAndroidTwoKeys.gif)
      *
      * @param {ANDROID_KEY} first_key - A Android key
      * @param {ANDROID_KEY} second_key - A Android key
@@ -2712,7 +2961,7 @@ export class FluentFiltersGetter extends FluentBase {
      *     .customElement({
      *         customImage: './logo.png', // required
      *         name: 'myLogo', // optional
-     *         threshold: 0.9, // optional, defaults to 0.9
+     *         threshold: 0.5, // optional, defaults to 0.5
      *         stopThreshold: 0.9, // optional, defaults to 0.9
      *         rotationDegreePerStep: 0, // optional, defaults to 0
      *         imageCompareFormat: 'grayscale', // optional, defaults to 'grayscale'
@@ -2728,7 +2977,7 @@ export class FluentFiltersGetter extends FluentBase {
      * - **name** (*`string`, optional*):
      *     - A unique name that can be used for filtering for the custom element. If not given, any text inside the custom image will be detected via OCR.
      * - **threshold** (*`number`, optional*):
-     *     - A threshold for how much a UI element needs to be similar to the custom element as defined by the image. Takes values between `0.0` (== all elements are recognized as the custom element which is probably not what you want) and `1.0` (== elements need to look exactly like the `customImage` which is unlikely to be achieved as even minor differences count). Defaults to `0.9`.
+     *     - A threshold for how much a UI element needs to be similar to the custom element as defined by the image. Takes values between `0.0` (== all elements are recognized as the custom element which is probably not what you want) and `1.0` (== elements need to look exactly like the `customImage` which is unlikely to be achieved as even minor differences count). Defaults to `0.5`.
      * - **stopThreshold** (*`number`, optional*):
      *     - A threshold for when to stop searching for UI elements similar to the custom element. As soon as UI elements have been found that are at least as similar as the `stopThreshold`, the search is going to stop. After that elements are filtered using the `threshold`. Because of that the `stopThreshold` should be greater than or equal to `threshold`. It is primarily to be used as a speed improvement (by lowering the value). Takes values between `0.0` and `1.0`. Defaults to `0.9`.
      * - **rotationDegreePerStep** (*`number`, optional*):
@@ -2876,7 +3125,7 @@ export class FluentFiltersGetter extends FluentBase {
      * await aui.get().text().withTextRegex('\b[Ss]\w+').exec()
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/withtextregex.gif)
+     * ![](https://docs.askui.com/img/gif/withTextRegex.gif)
      *
      *
      *
@@ -2908,7 +3157,7 @@ export class FluentFiltersGetter extends FluentBase {
      * await aui.moveMouseTo().text().withExactText('Password').exec()
      * ```
      *
-     * ![](https://docs.askui.com/img/gif/withexacttext.gif)
+     * ![](https://docs.askui.com/img/gif/withExactText.gif)
      *
      *
      *
@@ -2956,7 +3205,7 @@ export class FluentFiltersGetter extends FluentBase {
      * **Important: _Matching only returns the best matching element when you use it with `get()`_**
      *
      * A bit of playing around to find a matching description is sometimes needed:
-     * E.g., `puzzle piece` can fail while `an icon showing a puzzle piece` might work.
+     * For example, `puzzle piece` can fail while `an icon showing a puzzle piece` might work.
      * Generally, the more detail the better.
      *
      * We also recommend to not restrict the type of element by using the general selector `element()` as shown in the examples below.
@@ -3140,17 +3389,46 @@ export class FluentFiltersOrRelationsGetter extends FluentFiltersGetter {
      *
      * **Examples:**
      * ```typescript
-     * --------------  --------------  --------------
-     * |  leftEl    |  |  rightEl0  |  |  rightEl1  |
-     * --------------  --------------  --------------
+     * ---------- ---------                     ---------
+     * | button | | text0 |                     | text3 |
+     * ---------- --------- ---------           ---------
+     *                      | text1 | ---------
+     *                      --------- | text2 |
+     *                                ---------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().rightOf(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().rightOf(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().rightOf(..., 'display_edge_area').button()
      *
-     * // Returns rightEl0 because rightEl0 is the first element right of leftEl
-     * ...rightEl().rightOf().leftEl()
-     * ...rightEl().rightOf(0).leftEl()
-     * // Returns rightEl1 because rightEl1 is the second element right of leftEl
-     * ...rightEl().rightOf(1).leftEl()
-     * // Returns no element because leftEl is left of rightEl
-     * ...leftEl().rightOf().rightEl()
+     * // More examples:
+     * // Returns text0 because it is the first element rightOf button
+     * ...text().rightOf().button()
+     * ...text().rightOf(0).button()
+     * ...text().rightOf(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // horizontal line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().rightOf(1, 'element_center_line').button()
+     *
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area rightOf the y-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().rightOf(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element rightOf button
+     * ...text().rightOf(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is rightOf the texts
+     * ...button().rightOf().text()
      * ```
      * ![](https://docs.askui.com/img/gif/rightOf.gif)
      *
@@ -3183,17 +3461,46 @@ export class FluentFiltersOrRelationsGetter extends FluentFiltersGetter {
      *
      * **Examples:**
      * ```typescript
-     * --------------  --------------  --------------
-     * |  leftEl1   |  |  leftEl0   |  |  rightEl   |
-     * --------------  --------------  --------------
+     * ---------                   --------- ----------
+     * | text3 |                   | text0 | | button |
+     * ---------         --------- --------- ----------
+     *         --------- | text1 |
+     *         | text2 | ---------
+     *         ---------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().leftOf(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().leftOf(..., 'element_edge_area').button()
      *
-     * // Returns leftEl0 because leftEl0 is the first element left of rightEl
-     * ...leftEl().leftOf().rightEl()
-     * ...leftEl().leftOf(0).rightEl()
-     * // Returns leftEl1 because leftEl1 is the second element left of rightEl
-     * ...leftEl().leftOf(1).rightEl()
-     * // Returns no element because rightEl is left of leftEl
-     * ...rightEl().leftOf().leftEl()
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().leftOf(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element leftOf button
+     * ...text().leftOf().button()
+     * ...text().leftOf(0).button()
+     * ...text().leftOf(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // horizontal line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().leftOf(1, 'element_center_line').button()
+     *
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area leftOf the y-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().leftOf(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element leftOf button
+     * ...text().leftOf(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is rightOf the texts
+     * ...button().leftOf().text()
      * ```
      * ![](https://docs.askui.com/img/gif/leftOf.gif)
      *
@@ -3226,22 +3533,54 @@ export class FluentFiltersOrRelationsGetter extends FluentFiltersGetter {
      *
      * **Examples:**
      * ```typescript
-     * --------------
-     * |    text    |
-     * --------------
-     * --------------
-     * |   button0  |
-     * --------------
-     * --------------
-     * |   button1  |
-     * --------------
-     *
+     * ------------
+     * |   text   |
+     * ------------
+     * ------------
+     * |  button0 |
+     * ------------
+     *          -----------
+     *          | button1 |
+     *          -----------
+     *             -----------
+     *             | button2 |
+     *             -----------
+     * ------------
+     * |  button3 |
+     * ------------
+     *
+     * // General explanation for element_center_line
+     * // This will find button0 and button3
+     * ...button().below(..., 'element_center_line').text()
+     *
+     * // General explanation for element_edge_area
+     * // This will find button0, button1 and button3
+     * ...button().below(..., 'element_edge_area').text()
+     *
+     * // General explanation and display_edge_area
+     * // This will find button0, button1, button2 and button3
+     * ...button().below(..., 'display_edge_area').text()
+     *
+     * // More examples:
      * // Returns button0 because button0 is the first button below text
      * ...button().below().text()
      * ...button().below(0).text()
-     * // Returns button1 because button1  is the second button below text
-     * ...button().below(1).text()
-     * // Returns no element because text is above button
+     * ...button().below(0, 'element_edge_area').text()
+     *
+     * // Returns button3 because it is the second button touched by the
+     * // vertical line from the center of text
+     * // Notice: button1 is not touched
+     * ...button().below(1, 'element_center_line').text()
+     *
+     * // Returns button3 because it is the third button touched by the
+     * // vertical area below the x-axis of text
+     * // Notice: button2 is not touched!
+     * ...button().below(2, 'element_edge_area').text()
+     *
+     * // Returns button2 because it is the third element below text
+     * ...button().below(2, 'display_edge_area').text()
+     *
+     * // Returns no element because text is above the buttons
      * ...text().below().button()
      * ```
      * ![](https://docs.askui.com/img/gif/below.gif)
@@ -3274,22 +3613,54 @@ export class FluentFiltersOrRelationsGetter extends FluentFiltersGetter {
      *
      * **Examples:**
      * ```typescript
-     * --------------
-     * |   text1    |
-     * --------------
-     * --------------
-     * |   text0    |
-     * --------------
-     * --------------
-     * |   button   |
-     * --------------
-     *
-     * // Returns text0 because text0 is the first element above button
+     * ------------
+     * |  text3   |
+     * ------------
+     *             ------------
+     *             |  text2   |
+     *             ------------
+     *     ------------
+     *     |  text1   |
+     *     ------------
+     * ------------
+     * |  text0   |
+     * ------------
+     * ------------
+     * |  button  |
+     * ------------
+     *
+     * // General explanation for element_center_line
+     * // This will find text0 and text3
+     * ...text().above(..., 'element_center_line').button()
+     *
+     * // General explanation for element_edge_area
+     * // This will find text0, text1 and text3
+     * ...text().above(..., 'element_edge_area').button()
+     *
+     * // General explanation and display_edge_area
+     * // This will find text0, text1, text2 and text3
+     * ...text().above(..., 'display_edge_area').button()
+     *
+     * // More examples:
+     * // Returns text0 because it is the first element above button
      * ...text().above().button()
      * ...text().above(0).button()
-     * // Returns text1 because text1 is the second element above button
-     * ...text().above(1).button()
-     * // Returns no element because button is below text
+     * ...text().above(0, 'element_edge_area').button()
+     *
+     * // Returns text3 because it is the second text touched by the
+     * // vertical line from the center of button
+     * // Notice: text1 is not touched!
+     * ...text().above(1, 'element_center_line').button()
+     *
+     * // Returns text3 because it is the third text touched by the
+     * // vertical area above the x-axis of button
+     * // Notice: text2 is not touched!
+     * ...text().above(2, 'element_edge_area').button()
+     *
+     * // Returns text2 because it is the third element above button
+     * ...text().above(2, 'display_edge_area').button()
+     *
+     * // Returns no element because button is below the texts
      * ...button().above().text()
      * ```
      * ![](https://docs.askui.com/img/gif/above.gif)