awtk-widget-chart-view-mvvm JS版本适配笔记

一、前言

awtk-widget-chart-view 是 AWTK 提供的图表自定义控件，该控件包含：曲线图、柱状图和饼图。前段时
间记录了该控件适配 AWTK-MVVM C版本的过程，具体请参考：awtk-widget-chart-view-mvvm C版本适配笔记，这次记录一下适配 JS 版本的过程。

AWTK是 ZLG 开发的开源 GUI 引擎，官网地址：https://www.zlg.cn/index/pub/awtk.html。
AWTK GitHub 仓库：http://github.com/zlgopen/awtk-mvvm

AWTK-MVVM是一套用C语言开发的，专门为嵌入式平台优化的MVVM框架。它实现了数据绑定、命令绑定和窗口导航等基本功能。
AWTK-MVVM GitHub 仓库：http://github.com/zlgopen/awtk-mvvm

二、适配 JS 版本的序列点数据（FIFO）

chart view 图表控件的绝大部分属性都可使用 awtk-mvvm 缺省的方法进行绑定，但 series 控件 fifo 属性比较特殊，它是一个自定义的先进先出队列，用于储存图表的序列点数据。因此，数据绑定时，需要指定一个特殊的 Model。C 语言中可以调用 serties_fifo_default_create() 接口创建该 Model；JS语言中则需使用 JS 的 Array，本项目所实现的自定义 binder 会将 Array 适配为 series 所需的 fifo。

简单理解，即基于 JS 的原生 Array 数据类型实现一个 C 版本的先进先出队列 FIFO，也就是 series_fifo_js ，此处基于 JerryScript 实现 JS 与 C 之间的适配。

JerryScript 是一个轻量级的 JavaScript 引擎，它可以运行在受限制的设备上，官网地址：https://jerryscript.net/。

2.1 series_fifo_js 的接口

series_fifo_js 的接口如下：

#ifndef TK_SERIES_FIFO_JS_H
#define TK_SERIES_FIFO_JS_H

#include "base/series_fifo.h"
#include "mvvm/jerryscript/object_js_default.h"

BEGIN_C_DECLS

struct _series_fifo_js_t;
typedef struct _series_fifo_js_t series_fifo_js_t;

typedef ret_t (*series_fifo_jsobj_set_t)(object_t* obj, jsvalue_t jsindex, jsvalue_t array);

/**
 * @class series_fifo_js_t
 * @parent series_fifo_t
 *
 * 将jerry script Array适配成series_fifo。
 *
 */
struct _series_fifo_js_t {
   
  series_fifo_t base;
  /**
   * @property {uint32_t} capacity
   * @annotation ["readable"]
   * FIFO的容量大小。
   */
  uint32_t capacity;
  /**
   * @property {uint32_t} unit_size
   * @annotation ["readable"]
   * FIFO中单个元素的大小。
   */
  uint32_t unit_size;
  /**
   * @property {uint32_t} capacity
   * @annotation ["readable"]
   * FIFO的容量大小。
   */
  series_fifo_jsobj_set_t jsobj_set;

  /*private*/
  object_t* native_obj;
  uint8_t* temp;
  uint8_t* event_data;
};

/**
 * @method series_fifo_js_create
 * 创建series_fifo_js对象。
 *
 * @annotation ["constructor"]
 * @param {object_t} native_obj jerry script Array的obj对象。
 * @param {uint32_t} capacity FIFO的初始容量。
 * @param {const char*} type FIFO数据类型。
 *
 * @return {object_t*} 返回object对象。
 */
object_t* series_fifo_js_create(object_t* native_obj, uint32_t capacity, const char* type);

/* helper function */
ret_t series_fifo_jsobj_set(object_t* obj, jsvalue_t jsindex, jsvalue_t array);
ret_t series_fifo_jsobj_push(object_t* obj, jsvalue_t array);

#define SERIES_FIFO_JS(obj) (series_fifo_js_t*)(obj)

END_C_DECLS

#endif /*TK_SERIES_FIFO_JS_H*/

2.1 series_fifo_js 的实现

series_fifo_js 的实现如下：

#include "tkc/mem.h"
#include "tkc/utils.h"
#include "tkc/value.h"
#include "series_fifo_js.h"
#include "base/series_fifo_default.h"

#define FIFO_DATA_VALUE "value"
#define FIFO_DATA_COLOR "color"
#define FIFO_DATA_MIN "min"
#define FIFO_DATA_MAX "max"

static int series_fifo_js_base_compare(object_t* obj, const void* a, const void* b) {
   
  series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
  return_value_if_fail(fifo != NULL, RET_BAD_PARAMS);

  return memcmp(a, b, fifo->unit_size);
}

static void* series_fifo_js_default_get(object_t* obj, uint32_t index) {
   
  series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
  jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
  jsvalue_t elem = jsobj_get_prop_value_by_index(jsobj, index);

  if (jsvalue_check(elem) == RET_OK) {
   
    float_t data = 0;
    jsvalue_t value = jsobj_get_prop_value(elem, FIFO_DATA_VALUE);

    data = jsvalue_to_number(value);
    memcpy(fifo->temp, &data, sizeof(float_t));

    jsvalue_unref(value);
    jsvalue_unref(elem);
  }

  return fifo->temp;
}

static void* series_fifo_js_colorful_get(object_t* obj, uint32_t index) {
   
  series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
  jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
  jsvalue_t elem = jsobj_get_prop_value_by_index(jsobj, index);

  if (jsvalue_check(elem) == RET_OK) {
   
    series_data_colorful_t data = {
   0};
    jsvalue_t value = jsobj_get_prop_value(elem, FIFO_DATA_VALUE);
    jsvalue_t color = jsobj_get_prop_value(elem, FIFO_DATA_COLOR);

    data.v = jsvalue_to_number(value);
    data.c.color = jsvalue_to_number(color);
    memcpy(fifo->temp, &data, sizeof(series_data_colorful_t));

    jsvalue_unref(value);
    jsvalue_unref(color);
    jsvalue_unref(elem);
  }

  return fifo->temp;
}

static void* series_fifo_js_minmax_get(object_t* obj, uint32_t index) {
   
  series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
  jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
  jsvalue_t elem = jsobj_get_prop_value_by_index(jsobj, index);

  if (jsvalue_check(elem) == RET_OK) {
   
    series_data_minmax_t data = {
   0};
    jsvalue_t min_v = jsobj_get_prop_value(elem, FIFO_DATA_MIN);
    jsvalue_t max_v = jsobj_get_prop_value(elem, FIFO_DATA_MAX);

    data.min = jsvalue_to_number(min_v);
    data.max = jsvalue_to_number(max_v);
    memcpy(fifo->temp, &data, sizeof(series_data_minmax_t));

    jsvalue_unref(min_v);
    jsvalue_unref(max_v);
    jsvalue_unref(elem);
  }

  return fifo->temp;
}

static uint8_t* series_fifo_js_prepare_set(object_t* obj, uint32_t* index, const void* data,
                                           uint32_t* nr) {
   
  int32_t i = 0;
  int32_t over_nr = 0;
  series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
  uint32_t unit_size = fifo->unit_size;
  uint8_t* start = (uint8_t*)(data);
  jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
  jsvalue_t shift = jsobj_get_prop_value(jsobj, "shift");
  jsvalue_t args[1];

  if (*nr > fifo->capacity) {
   
    if (start != NULL) {
   
      start += (*nr - fifo->capacity) * unit_size;
    }
    *nr = fifo->capacity;
  }

  over_nr = *index + *nr - fifo->capacity;
  if (over_nr > 0) {
   
    args[0] = JS_UNDEFINED;
    for (i = 0; i < over_nr; i++) {
   
      jsvalue_unref(jsfunc_call(shift, jsobj, args, 1));
    }
    *index -= over_nr;
    jsvalue_unref(args[0]);
  }

  jsvalue_unref(shift);

  return start;
}

static ret_t series_fifo_js_default_set(object_t* obj, uint32_t index, const void* data,
                                        uint32_t nr) {
   
  value_t v;
  int32_t i = 0;
  series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
  uint32_t unit_size = fifo->unit_size;
  jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
  jsvalue_t splice = jsobj_get_prop_value(jsobj, "splice");
  uint8_t* start = series_fifo_js_prepare_set(obj, &index, data, &nr);
  jsvalue_t args[3];

  for (i = 0; i < nr; i++) {
   
    float_t elem = 0;
    if (start != NULL) {
   
      memcpy(&elem, start + unit_size * i, unit_size);
    }

    args[0] = jsvalue_from_number(index + i);
    args[1] = jsvalue_from_number(1);
    args[2] = JS_EMPTY_OBJ;

    value_set_float(&v, elem);
    jsobj_set_prop(args[2], FIFO_DATA_VALUE, &v, NULL);

    jsvalue_unref(jsfunc_call(splice, jsobj, args, 3));
    jsvalue_unref(args[0]