feat(ohos): add devtool snapshot (#135)

* Enhance pager component functionality * Update: Switch Pager API to use NodeSwiperIndex * add Pager call logic and coding standards * Add boundary check for index in Call function, improve code style * Modify: PagerView call function * modify PagerView's Call function * add NativeRenderProvider -> getComponentSnapshot * add getComponentSnapshot&getLocationOnScreen * add the return for getLocationOnScreen * add debugging code * add scopeCallback * add debug code * fix memory access issue in ArkTS async execution result callbacks by introducing mutex lock * code clean * fix debug-tools snapshot update issues and adapt snapshot sizing * add DevFloatButton * new button * add reload confirmation dialog * optimized display size * feat(ohos): delete used code * add drag action for DevFloatButton * refactor call for base_view * remove argument uiContext * feat(ohos): merge main * feat(ohos): remove used code * feat(ohos): remove used code * add debug-tools error prompt dialog * feat(ohos): hidden reload button * feat(ohos): refactor devtool snapshot * feat(ohos): refactor devtool snapshot * feat(ohos): refactor devtool snapshot * feat(ohos): refactor devtool snapshot --------- Co-authored-by: wangzheng <[email protected]> Co-authored-by: WZ <[email protected]>
sohotz · Jan 15, 2025 · db71290 · db71290
1 parent 471ce8a
commit db71290
Show file tree

Hide file tree

Showing 18 changed files with 337 additions and 156 deletions.
diff --git a/framework/examples/ohos-demo/src/main/ets/pages/PageConfiguration.ets b/framework/examples/ohos-demo/src/main/ets/pages/PageConfiguration.ets
@@ -133,7 +133,7 @@ struct PageConfiguration {
           '',
           null,
           null,
-          null,
+          null
         )
         loadParams.componentName = "Demo"
         loadParams.codeCacheTag = "Demo"
@@ -389,6 +389,7 @@ struct PageConfiguration {
     .width('100%')
     .height('100%')
     .backgroundColor($r('app.color.home_background'))
+    .id("page_configuration")
     //.expandSafeArea()
   }
 }
diff --git a/framework/examples/ohos-demo/src/main/resources/base/media/devtool.svg b/framework/examples/ohos-demo/src/main/resources/base/media/devtool.svg
diff --git a/framework/ohos/src/main/cpp/impl/renderer/native/include/renderer/components/base_view.h b/framework/ohos/src/main/cpp/impl/renderer/native/include/renderer/components/base_view.h
@@ -59,10 +59,8 @@ class BaseView : public ArkUINodeDelegate, public std::enable_shared_from_this<B
   virtual ArkUINode &GetLocalRootArkUINode() = 0;
   virtual bool SetProp(const std::string &propKey, const HippyValue &propValue);
   virtual void OnSetPropsEnd();
-
   virtual void Call(const std::string &method, const std::vector<HippyValue> params,
                     std::function<void(const HippyValue &result)> callback);
-
   void AddSubRenderView(std::shared_ptr<BaseView> &subView, int32_t index);
   void RemoveSubView(std::shared_ptr<BaseView> &subView);
   void RemoveFromParentView();
@@ -168,6 +166,9 @@ class BaseView : public ArkUINodeDelegate, public std::enable_shared_from_this<B
   bool flagInterceptPullUp_ = false;
 
   HippyValueObjectType events_;
+
+private:
+  HippyValueObjectType CallNativeRenderProviderMethod(napi_env env, napi_ref render_provider_ref, uint32_t component_id, const std::string &method);  
 };
 
 }  // namespace native

diff --git a/framework/ohos/src/main/cpp/impl/renderer/native/src/components/base_view.cc b/framework/ohos/src/main/cpp/impl/renderer/native/src/components/base_view.cc
@@ -686,6 +686,19 @@ void BaseView::Call(const std::string &method, const std::vector<HippyValue> par
     result["width"] = HippyValue(viewSize.width);
     result["height"] = HippyValue(viewSize.height);
     callback(HippyValue(result));
+  } else if (method == "getScreenShot") {
+    HippyValueObjectType snapshotResult = CallNativeRenderProviderMethod(ts_env_, ts_render_provider_ref_, ctx_->GetRootId(), "getComponentSnapshot");
+    callback(HippyValue(snapshotResult));
+  } else if (method == "addFrameCallback") {
+    // empty
+  } else if (method == "removeFrameCallback") {
+    auto resultMap = HippyValue();
+    callback(resultMap);
+  } else if (method == "getLocationOnScreen") {
+    auto resultMap = CallNativeRenderProviderMethod(ts_env_, ts_render_provider_ref_, ctx_->GetRootId(), "getLocationOnScreen");
+    callback(HippyValue(resultMap));
+  } else {
+    FOOTSTONE_DLOG(INFO) << "Unsupported method called: " << method;
   }
 }
 
@@ -833,6 +846,29 @@ void BaseView::OnViewComponentEvent(const std::string &event_name, const HippyVa
   arkTs.Call(callback, args);
 }
 
+HippyValueObjectType BaseView::CallNativeRenderProviderMethod(napi_env env, napi_ref render_provider_ref, uint32_t component_id, const std::string &method) {
+  HippyValue futHippyValue;
+  ArkTS arkTs(env);
+  std::vector<napi_value> args = {arkTs.CreateUint32(component_id)};
+  auto delegateObject = arkTs.GetObject(render_provider_ref);
+  auto napiValue = delegateObject.Call(method.c_str(), args);
+
+  HippyValueObjectType map;
+  OhNapiObject napiObj = arkTs.GetObject(napiValue);
+  std::vector<std::pair<napi_value, napi_value>> pairs = napiObj.GetKeyValuePairs();
+  for (auto it = pairs.begin(); it != pairs.end(); it++) {
+      auto &pair = *it;
+      auto &pairItem1 = pair.first;
+      auto objKey = arkTs.GetString(pairItem1);
+      if (objKey.length() > 0) {
+        auto &pairItem2 = pair.second;
+        auto objValue = OhNapiUtils::NapiValue2HippyValue(env, pairItem2);
+        map[objKey] = objValue;
+      }
+  }
+  return map;
+}
+
 } // namespace native
 } // namespace render
 } // namespace hippy
diff --git a/framework/ohos/src/main/cpp/impl/renderer/native/src/native_render_provider_napi.cc b/framework/ohos/src/main/cpp/impl/renderer/native/src/native_render_provider_napi.cc
@@ -69,7 +69,7 @@ void CallRenderDelegateMethod(napi_env env, napi_ref render_provider_ref,
     delegateObject.Call(method.c_str(), args);
   });
 }
-
+    
 void CallRenderDelegateMethod(napi_env env, napi_ref render_provider_ref,
   const std::string& method, uint32_t root_id) {
   OhNapiTaskRunner *taskRunner = OhNapiTaskRunner::Instance(env);
@@ -426,7 +426,7 @@ static napi_value DoMeasureText(napi_env env, napi_callback_info info) {
   int height = arkTs.GetInteger(args[4]);
   int heightMode = arkTs.GetInteger(args[5]);
   float density = render_manager->GetDensity();
-    
+
   uint32_t p = 0;
   OhMeasureText measureInst;
   OhMeasureResult result;

diff --git a/framework/ohos/src/main/ets/hippy_framework/HippyEngineContextImpl.ets b/framework/ohos/src/main/ets/hippy_framework/HippyEngineContextImpl.ets
@@ -167,11 +167,11 @@ export class HippyEngineContextImpl implements HippyEngineContext {
 
   onBridgeDestroyed(isReload: boolean): void {
     // TODO devtools relaod
-    // if (isReload) {
-    //   this.restartEngineInBackground(true);
-    // } else {
-    //   this.destroy(false);
-    // }
+    if (isReload) {
+      // this.restartEngineInBackground(true);
+    } else {
+      this.destroy(false);
+    }
   }
 
   setLoadModuleCallback(loadModuleCallback: Function | null) {

diff --git a/framework/ohos/src/main/ets/hippy_framework/devsupport/DevExceptionDialog.ets b/framework/ohos/src/main/ets/hippy_framework/devsupport/DevExceptionDialog.ets
diff --git a/framework/ohos/src/main/ets/hippy_framework/devsupport/DevFloatButton.ets b/framework/ohos/src/main/ets/hippy_framework/devsupport/DevFloatButton.ets
@@ -17,72 +17,164 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { display } from '@kit.ArkUI';
+import { ComponentContent, display, window } from '@kit.ArkUI';
 
-export class DevFloatButton{
-  private mWidth: number;
+class Params {
+  text: string = "";
+  onClickHandle: (event: ClickEvent) => void;
+  radius: number;
+  btnPosition: Position | null = { x: 0, y: 0 };
+  onTouchHandle: (event: TouchEvent) => void;
+  runColor = 0x317aff;
+  stopColor = 0xddd9d8;
+  btnColor = this.runColor;
 
-  constructor(context: Context) {
-    // super();
-    this.mWidth = this.dip2px(context) as number;
-    this.buildBackground();
-    // setFocusable(true);
+  constructor(text: string, btnPosition: Position | null,
+    radius: number,
+    onClickHandle: (event: ClickEvent) => void,
+    onTouchHandle: (event: TouchEvent) => void
+  ) {
+    this.text = text;
+    this.radius = radius;
+    this.onClickHandle = onClickHandle;
+    this.btnPosition = btnPosition;
+    this.onTouchHandle = onTouchHandle;
   }
+}
 
-  private dip2px(context: Context): number {
-    let displayClass: display.Display = display.getDefaultDisplaySync();
-    return displayClass.densityPixels
-    // DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
-    // return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, SIZE, displayMetrics);
+@Builder
+function buildeFloatBtn(params: Params) {
+  Row() {
+    Image(null).width(params.radius).backgroundColor(params.btnColor).fillColor(params.btnColor)
   }
+  .width(params.radius * 2)
+  .height(params.radius * 2)
+  .justifyContent(FlexAlign.Center)
+  .borderRadius(params.radius)
+  .backgroundColor(params.btnColor)
+  .position(params.btnPosition)
+  .onClick(params.onClickHandle)
+  .onTouch(params.onTouchHandle)
+}
 
-  private buildBackground() {
-    this.buildDrawableState();
+@Builder
+function buildReload(params: Params) {
+  Flex() {
+    Text(params.text).fontSize(20).margin({ left: 20, top: 20 })
   }
+  .width("88%")
+  .height("8%")
+  .align(Alignment.Center)
+  .backgroundColor(Color.White)
+  .onClick(params.onClickHandle)
+}
 
-  /**
-   * 构建背景Drawble
-   */
-  private buildDrawableState() {
+export class DevFloatButton {
+  private mWidth: number;
+  private floatButtonArray: ComponentContent<Params>[] = [];
+  private uiContext?: UIContext;
+  private btnPosition: Position = {
+    x: 0,
+    y: 0,
+  };
+  private statusHeight: number = 0
+  private bottomAvoidAreaHeight: number = 0
+  private startLeft: number = 0
+  private startTop: number = 0
+  private startX: number = 0
+  private startY: number = 0
+  private radius: number = 18
+  private winWidth: number = 0
+  private winHeight: number = 0
 
-    //   let mNormalState = new int[];
-    // let mFocusedSate = new int[]{android.R.attr.state_focused, android.R.attr.state_enabled};
+  constructor(context: Context, onClickHandle: (event: ClickEvent) => void) {
+    this.mWidth = this.getDensityPixels(context) as number;
+    this.getWindowInfo(onClickHandle);
+  }
 
-    //默认文字和背景颜色
-    // let mBgNormalColor = Color.parseColor("#ddd9d9");
-    // let mBgFocusedColor = Color.GREEN;
-    //创建状态管理器
-    // StateListDrawable drawable = new StateListDrawable();
-    // int radius = mWidth / 2;
-    // float[] outRect = new float[]{radius, radius, radius, radius, radius, radius, radius,
-    // radius};
-    // RoundRectShape rectShape = new RoundRectShape(outRect, null, null);
+  getWindowInfo(onClickHandle: (event: ClickEvent) => void) {
+    window.getLastWindow(getContext(this), (err, windowClass) => {
+      if (!err.code) {
+        this.uiContext = windowClass.getUIContext();
+        //状态栏高度
+        this.statusHeight =
+          px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height)
+        //获取手机底部规避区域高度
+        this.bottomAvoidAreaHeight =
+          px2vp(windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
+            .bottomRect
+            .height)
+        //获取窗口宽高
+        let windowProperties = windowClass.getWindowProperties()
+        this.winWidth = px2vp(windowProperties.windowRect.width)
+        this.winHeight = px2vp(windowProperties.windowRect.height)
+        //设置初始位置
+        this.btnPosition.x = this.winWidth * 0
+        this.btnPosition.y = this.winHeight * 0.1
+        // this.create(onClickHandle);
+      }
+    });
+  }
 
-    //创建圆弧形状
-    //创建drawable
-    // let pressedDrawable = new ShapeDrawable(rectShape);
-    //设置我们按钮背景的颜色
-    // pressedDrawable.getPaint().setColor(mBgFocusedColor);
-    //添加到状态管理里面
-    // drawable.addState(mFocusedSate, pressedDrawable);
+  private updateCurrentBtnPosition(params: Params, event: TouchEvent) {
+    let touch = event.touches[0];
+    let curLeft = this.startLeft + (touch.windowX - this.startX);
+    curLeft = Math.max(0, curLeft)
+    this.btnPosition.x = Math.min(this.winWidth - 2 * this.radius, curLeft);
 
-    // ShapeDrawable normalDrawable = new ShapeDrawable(rectShape);
-    // normalDrawable.getPaint().setColor(mBgNormalColor);
-    // drawable.addState(mNormalState, normalDrawable);
-    //设置我们的背景，就是xml里面的selector
-    // this.setBackgroundDrawable(drawable);
+    let curTop = this.startTop + (touch.windowY - this.startY);
+    curTop = Math.max(0, curTop);
+    this.btnPosition.y = Math.min(this.winHeight - 2 * this.radius - this.bottomAvoidAreaHeight -
+    this.statusHeight, curTop);
+    this.floatButtonArray.forEach((btn: ComponentContent<Params>) => {
+      btn.update(params);
+    });
+  }
+
+  private create(onClickHandle: (event: ClickEvent) => void) {
+    let params = new Params("Test", this.btnPosition, this.radius, (event: ClickEvent) => {
+      const action = this.uiContext?.getPromptAction();
+      if (this.uiContext != null) {
+        let contentNode = new ComponentContent(this.uiContext, wrapBuilder(buildReload),
+          new Params("Reload", null, this.radius, (reloaClickEvent: ClickEvent) => {
+            onClickHandle(reloaClickEvent);
+            action?.closeCustomDialog(contentNode);
+          }, (event: TouchEvent) => {
+          }));
+        action?.openCustomDialog(contentNode, {
+          autoCancel: true,
+          alignment: DialogAlignment.Center,
+        });
+      }
+    },
+      (event: TouchEvent) => {
+        if (event.type === TouchType.Down) {
+          this.startX = event.touches[0].windowX;
+          this.startY = event.touches[0].windowY;
+          this.startLeft = this.btnPosition.x as number;
+          this.startTop = this.btnPosition.y as number;
+        } else if (event.type === TouchType.Move) {
+          this.updateCurrentBtnPosition(params, event);
+        }
+      }
+    );
+    if (this.uiContext != null) {
+      let componentContent =
+        new ComponentContent(this.uiContext, wrapBuilder<[Params]>(buildeFloatBtn), params);
+      this.floatButtonArray.push(componentContent);
+      this.uiContext?.getOverlayManager().addComponentContent(componentContent, 99);
+    }
+  }
 
-    // Looper.getMainLooper().myQueue().addIdleHandler(new MessageQueue.IdleHandler() {
-    //             @Override
-    //             public boolean queueIdle() {
-    //                 boolean result = requestFocusFromTouch();
-    //                 LogUtils.d("requestFocus", "requestFocusFromTouch result:" + result);
-    //                 if (!result) {
-    //                     result = requestFocus();
-    //                     LogUtils.d("requestFocus", "requestFocus result:" + result);
-    //                 }
-    // return false;
-    // }
-    // });
+  public delete() {
+    if (this.floatButtonArray.length > 0) {
+      this.uiContext?.getOverlayManager().removeComponentContent(this.floatButtonArray.pop());
+    }
   }
+
+  private getDensityPixels(context: Context): number {
+    let displayClass: display.Display = display.getDefaultDisplaySync();
+    return displayClass.densityPixels;
+  }
+
 }
diff --git a/framework/ohos/src/main/ets/hippy_framework/devsupport/DevServerCallBack.ets b/framework/ohos/src/main/ets/hippy_framework/devsupport/DevServerCallBack.ets
@@ -26,3 +26,7 @@ export interface DevServerCallBack {
   onDebugReLoad(): void
 
 }
+
+export interface OnReloadListener {
+  onReload(): void
+}