feat(dev-tools): higlight overlay

nativescript-core/debugger/devtools-elements.common.ts

@@ -1,11 +1,18 @@
-import { getNodeById } from "./dom-node";
+import { getNodeById, DOMNode } from "./dom-node";
+import { Color } from "../color";
 
 // Needed for typings only
-import { ViewBase } from "../ui/core/view-base";
-import { mainThreadify } from "../utils/utils";
+import { View, ViewBase } from "../ui/core/view";
+
+
+
+import { isIOS, isAndroid } from "../platform";
+
+import { mainThreadify, layout } from "../utils/utils";
+import { TouchGestureEventData, GestureTypes } from "../ui/gestures";
 
 // Use lazy requires for core modules
-const getAppRootView = () => require("../application").getRootView();
+const getAppRootView: () => View = () => require("../application").getRootView();
 
 let unsetValue;
 function unsetViewValue(view, name) {
@@ -96,3 +103,178 @@ export const setAttributeAsText = mainThreadify(function setAttributeAsText(node
         view.domNode.loadAttributes();
     }
 });
+
+interface HighlightedView {
+    view: ViewBase;
+    cachedValue: any;
+};
+
+
+const highlightColor = new Color("#A86FA8DC");
+const highlightedViews: HighlightedView[] = [];
+
+export const highlightNode = mainThreadify((nodeId: number, selector?) => {
+    console.log("[overlay]: highlightNode", nodeId, selector);
+
+    hideHighlight();
+
+    const view = getViewById(nodeId);
+    if (!view) {
+        return;
+    }
+
+    const adView = view.android;
+    if (adView && adView.setForeground) {
+        const highlightForeground = new android.graphics.drawable.ColorDrawable(highlightColor.android);
+        highlightedViews.push({
+            view: view,
+            cachedValue: adView.getForeground()
+        });
+        adView.setForeground(highlightForeground);
+    }
+
+    const iosView: UIView = view.ios;
+    if (iosView && iosView.addSubview) {
+        const maskView = UIView.alloc().initWithFrame(iosView.bounds);
+        maskView.backgroundColor = highlightColor.ios;
+        maskView.userInteractionEnabled = false;
+        iosView.addSubview(maskView);
+
+        highlightedViews.push({
+            view: view,
+            cachedValue: maskView
+        });
+    }
+
+});
+
+export const hideHighlight = mainThreadify(() => {
+    console.log("[overlay]: hideHighlight");
+
+    while (highlightedViews.length > 0) {
+        const hv = highlightedViews.pop();
+
+        const adView = hv.view.android;
+        if (adView && adView.setForeground) {
+            adView.setForeground(hv.cachedValue);
+        }
+
+        const iosView = hv.view.ios;
+        if (iosView && hv.cachedValue) {
+            (<UIView>hv.cachedValue).removeFromSuperview();
+        }
+    }
+})
+
+
+function eachDescendant(view: View, callback: (child: View) => boolean) {
+    if (!callback || !view) {
+        return;
+    }
+
+    let traverseChildren: boolean;
+    let localCallback = function (child: View): boolean {
+        traverseChildren = callback(child);
+        if (traverseChildren) {
+            child.eachChildView(localCallback);
+        }
+
+        return true;
+    };
+
+    view.eachChildView(localCallback);
+}
+
+function rootViewTouched(event: TouchGestureEventData) {
+    if (event.action === "up" || event.action === "cancel") {
+        DOMNode.requestCancelInspect();
+    } else {
+        handleSearch(event.view, event.getX(), event.getY());
+    }
+}
+
+function handleSearch(root: View, x: number, y: number) {
+    console.log("rootViewTouched", x, y);
+
+    const stack: View[] = [];
+    eachDescendant(root, (child: View) => {
+        const point = child.getLocationInWindow();
+        const size = child.getActualSize();
+
+        // console.log("Child: ", child, point, size)
+
+        if (point && size &&
+            point.x < x && x < (point.x + size.width) &&
+            point.y < y && y < (point.y + size.height)) {
+
+            stack.push(child);
+            return true;
+        }
+        return false;
+    })
+
+    console.log(stack.join(", "));
+
+    if (stack.length) {
+        const topView = stack[stack.length - 1];
+        const domNode = topView.domNode
+
+        highlightNode(domNode.nodeId);
+        domNode.requestHighligh();
+    }
+
+}
+
+
+let overlayContentView: org.nativescript.widgets.ContentLayout;
+export const setInspectMode = mainThreadify((mode: "none" | "searchForNode") => {
+    console.log("[overlay]: setInspectMode", mode)
+
+    const root = getAppRootView();
+    if (root) {
+        if (isIOS) {
+            if (mode === "searchForNode") {
+                console.log("start listening for root view touches");
+                root.on(GestureTypes.touch, rootViewTouched);
+                root.eachChildView(cv => {
+                    cv.isUserInteractionEnabled = false;
+                    return true;
+                })
+            } else {
+                console.log("stop listening for root view touches");
+                root.off(GestureTypes.touch, rootViewTouched);
+                root.eachChildView(cv => {
+                    cv.isUserInteractionEnabled = true;
+                    return true;
+                })
+            }
+        }
+
+        if (isAndroid) {
+            if (mode === "searchForNode") {
+                const activity: android.app.Activity = root._context;
+                if (!overlayContentView) {
+                    overlayContentView = new org.nativescript.widgets.ContentLayout(activity);
+
+                    overlayContentView.setOnTouchListener(new android.view.View.OnTouchListener({
+                        onTouch: (v: android.view.View, event: android.view.MotionEvent): boolean => {
+                            if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
+                                console.log("Canceling touch listener");
+
+                                DOMNode.requestCancelInspect();
+                            } else {
+                                handleSearch(root, event.getX() / layout.getDisplayDensity(), event.getY() / layout.getDisplayDensity())
+                            }
+                            return true;
+                        }
+                    }))
+                }
+                activity.addContentView(overlayContentView, new org.nativescript.widgets.CommonLayoutParams());
+            } else {
+                if (overlayContentView) {
+                    (<android.view.ViewGroup>overlayContentView.getParent()).removeView(overlayContentView);
+                }
+            }
+        }
+    }
+})