• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16/// <reference path='./import.ts' />
17const arkUINativeModule = globalThis.getArkUINativeModule();
18function getUINativeModule(): Object {
19  if (arkUINativeModule) {
20    return arkUINativeModule;
21  }
22  return globalThis.getArkUINativeModule();
23}
24
25const arkUINativeAdvancedModule = globalThis.getArkUIAdvancedModule();
26function getUINativeAdvancedModule(): Object {
27  if (arkUINativeAdvancedModule) {
28    return arkUINativeAdvancedModule;
29  }
30  return globalThis.getArkUIAdvancedModule();
31}
32
33enum ModifierType {
34  ORIGIN = 0,
35  STATE = 1,
36  FRAME_NODE = 2,
37  EXPOSE_MODIFIER = 3,
38}
39
40type AttributeModifierWithKey = ModifierWithKey<number | string | boolean | object>;
41
42class ObservedMap {
43  private map_: Map<Symbol, AttributeModifierWithKey>;
44  private changeCallback: ((key: Symbol, value: AttributeModifierWithKey) => void) | undefined;
45  private isFrameNode_: boolean = false;
46
47  constructor() {
48    this.map_ = new Map();
49  }
50
51  public clear(): void {
52    this.map_.clear();
53  }
54
55  public delete(key: Symbol): boolean {
56    return this.map_.delete(key);
57  }
58
59  public forEach(callbackfn: (value: AttributeModifierWithKey, key: Symbol,
60    map: Map<Symbol, AttributeModifierWithKey>) => void, thisArg?: any): void {
61    this.map_.forEach(callbackfn, thisArg);
62  }
63  public get(key: Symbol): AttributeModifierWithKey | undefined {
64    return this.map_.get(key);
65  }
66  public has(key: Symbol): boolean {
67    return this.map_.has(key);
68  }
69  public set(key: Symbol, value: AttributeModifierWithKey): this {
70    const _a = this.changeCallback;
71    this.map_.set(key, value);
72    _a === null || _a === void 0 ? void 0 : _a(key, value);
73    return this;
74  }
75  public get size(): number {
76    return this.map_.size;
77  }
78  public entries(): IterableIterator<[Symbol, AttributeModifierWithKey]> {
79    return this.map_.entries();
80  }
81  public keys(): IterableIterator<Symbol> {
82    return this.map_.keys();
83  }
84  public values(): IterableIterator<AttributeModifierWithKey> {
85    return this.map_.values();
86  }
87  public [Symbol.iterator](): IterableIterator<[Symbol, AttributeModifierWithKey]> {
88    return this.map_.entries();
89  }
90  public get [Symbol.toStringTag](): string {
91    return 'ObservedMapTag';
92  }
93  public setOnChange(callback: (key: Symbol, value: AttributeModifierWithKey) => void): void {
94    if (this.changeCallback === undefined) {
95      this.changeCallback = callback;
96    }
97  }
98  public setFrameNode(isFrameNode: boolean): void {
99    this.isFrameNode_ = isFrameNode;
100  }
101  public isFrameNode(): boolean {
102    return this.isFrameNode_;
103  }
104}
105
106const UI_STATE_NORMAL = 0;
107const UI_STATE_PRESSED = 1;
108const UI_STATE_FOCUSED = 1 << 1;
109const UI_STATE_DISABLED = 1 << 2;
110const UI_STATE_SELECTED = 1 << 3;
111
112function applyUIAttributesInit(modifier: AttributeModifier<CommonAttribute>, nativeNode: KNode): void {
113  if (modifier.applyPressedAttribute === undefined &&
114    modifier.applyFocusedAttribute === undefined &&
115    modifier.applyDisabledAttribute === undefined &&
116    modifier.applySelectedAttribute === undefined) {
117    return;
118  }
119  let state = 0;
120  if (modifier.applyPressedAttribute !== undefined) {
121    state |= UI_STATE_PRESSED;
122  }
123  if (modifier.applyFocusedAttribute !== undefined) {
124    state |= UI_STATE_FOCUSED;
125  }
126  if (modifier.applyDisabledAttribute !== undefined) {
127    state |= UI_STATE_DISABLED;
128  }
129  if (modifier.applySelectedAttribute !== undefined) {
130    state |= UI_STATE_SELECTED;
131  }
132
133  getUINativeModule().setSupportedUIState(nativeNode, state);
134}
135
136function applyUIAttributes(modifier: AttributeModifier<CommonAttribute>, nativeNode: KNode, component: ArkComponent): void {
137  applyUIAttributesInit(modifier, nativeNode);
138  const currentUIState = getUINativeModule().getUIState(nativeNode);
139
140  if (modifier.applyNormalAttribute !== undefined) {
141    modifier.applyNormalAttribute(component);
142  }
143  if ((currentUIState & UI_STATE_PRESSED) && (modifier.applyPressedAttribute !== undefined)) {
144    modifier.applyPressedAttribute(component);
145  }
146  if ((currentUIState & UI_STATE_FOCUSED) && (modifier.applyFocusedAttribute !== undefined)) {
147    modifier.applyFocusedAttribute(component);
148  }
149  if ((currentUIState & UI_STATE_DISABLED) && (modifier.applyDisabledAttribute !== undefined)) {
150    modifier.applyDisabledAttribute(component);
151  }
152  if ((currentUIState & UI_STATE_SELECTED) && (modifier.applySelectedAttribute !== undefined)) {
153    modifier.applySelectedAttribute(component);
154  }
155}
156
157function isResource(variable: any): variable is Resource {
158  return (variable as Resource)?.bundleName !== undefined;
159}
160
161function isResourceEqual(stageValue: Resource, value: Resource): boolean {
162  return (stageValue.bundleName === value.bundleName) &&
163    (stageValue.moduleName === value.moduleName) &&
164    (stageValue.id === value.id) &&
165    (stageValue.params === value.params) &&
166    (stageValue.type === value.type);
167}
168function isBaseOrResourceEqual(stageValue: any, value: any): boolean {
169  if (isResource(stageValue) && isResource(value)) {
170    return isResourceEqual(stageValue, value);
171  } else if (!isResource(stageValue) && !isResource(value)) {
172    return (stageValue === value);
173  }
174  return false;
175}
176
177const SAFE_AREA_TYPE_NONE = 0;
178const SAFE_AREA_TYPE_SYSTEM = 1;
179const SAFE_AREA_TYPE_CUTOUT = 2;
180const SAFE_AREA_TYPE_KEYBOARD = 4;
181const SAFE_AREA_TYPE_ALL = 7;
182
183const SAFE_AREA_EDGE_NONE = 0;
184const SAFE_AREA_EDGE_TOP = 1;
185const SAFE_AREA_EDGE_BOTTOM = 2;
186const SAFE_AREA_EDGE_START = 4;
187const SAFE_AREA_EDGE_END = 8;
188const SAFE_AREA_EDGE_ALL = 15;
189
190const SAFE_AREA_TYPE_LIMIT = 3;
191const SAFE_AREA_EDGE_LIMIT = 4;
192const DIRECTION_RANGE = 3;
193
194type KNode = number | null
195
196interface Equable {
197  isEqual(value: Equable): boolean;
198}
199
200class ModifierWithKey<T extends number | string | boolean | object | Function> {
201  stageValue?: T;
202  value?: T;
203  constructor(value: T) {
204    this.stageValue = value;
205  }
206
207  applyStage(node: KNode, component?: ArkComponent): boolean {
208    if (this.stageValue === undefined || this.stageValue === null) {
209      this.value = this.stageValue;
210      this.applyPeer(node, true, component);
211      return true;
212    }
213    const stageTypeInfo: string = typeof this.stageValue;
214    const valueTypeInfo: string = typeof this.value;
215    let different: boolean = false;
216    if (stageTypeInfo !== valueTypeInfo) {
217      different = true;
218    } else if (stageTypeInfo === 'number' || stageTypeInfo === 'string' || stageTypeInfo === 'boolean') {
219      different = (this.stageValue !== this.value);
220    } else {
221      different = this.checkObjectDiff();
222    }
223    if (different) {
224      this.value = this.stageValue;
225      this.applyPeer(node, false, component);
226    }
227    return false;
228  }
229
230  applyStageImmediately(node: KNode, component?: ArkComponent): void {
231    this.value = this.stageValue;
232    if (this.stageValue === undefined || this.stageValue === null) {
233      this.applyPeer(node, true, component);
234      return;
235    }
236    this.applyPeer(node, false, component);
237  }
238
239  applyPeer(node: KNode, reset: boolean, component?: ArkComponent): void { }
240
241  checkObjectDiff(): boolean {
242    return true;
243  }
244}
245
246class BackgroundColorModifier extends ModifierWithKey<ResourceColor> {
247  constructor(value: ResourceColor) {
248    super(value);
249  }
250  static identity: Symbol = Symbol('backgroundColor');
251  applyPeer(node: KNode, reset: boolean): void {
252    if (reset) {
253      getUINativeModule().common.resetBackgroundColor(node);
254    } else {
255      getUINativeModule().common.setBackgroundColor(node, this.value);
256    }
257  }
258
259  checkObjectDiff(): boolean {
260    if (isResource(this.stageValue) && isResource(this.value)) {
261      return !isResourceEqual(this.stageValue, this.value);
262    } else {
263      return true;
264    }
265  }
266}
267
268class WidthModifier extends ModifierWithKey<Length> {
269  constructor(value: Length) {
270    super(value);
271  }
272  static identity: Symbol = Symbol('width');
273  applyPeer(node: KNode, reset: boolean): void {
274    if (reset) {
275      getUINativeModule().common.resetWidth(node);
276    } else {
277      getUINativeModule().common.setWidth(node, this.value);
278    }
279  }
280
281  checkObjectDiff(): boolean {
282    if (isResource(this.stageValue) && isResource(this.value)) {
283      return !isResourceEqual(this.stageValue, this.value);
284    } else {
285      return true;
286    }
287  }
288}
289
290class BorderWidthModifier extends ModifierWithKey<Length | EdgeWidths> {
291  constructor(value: Length | EdgeWidths | LocalizedEdgeWidths) {
292    super(value);
293  }
294  static identity: Symbol = Symbol('borderWidth');
295  applyPeer(node: KNode, reset: boolean): void {
296    if (reset) {
297      getUINativeModule().common.resetBorderWidth(node);
298    } else {
299      if (isNumber(this.value) || isString(this.value) || isResource(this.value)) {
300        getUINativeModule().common.setBorderWidth(node, this.value, this.value, this.value, this.value);
301      } else {
302        if ((Object.keys(this.value).indexOf('start') >= 0) ||
303            (Object.keys(this.value).indexOf('end') >= 0)) {
304          getUINativeModule().common.setBorderWidth(node,
305            (this.value as LocalizedEdgeWidths).top,
306            (this.value as LocalizedEdgeWidths).end,
307            (this.value as LocalizedEdgeWidths).bottom,
308            (this.value as LocalizedEdgeWidths).start);
309        } else {
310          getUINativeModule().common.setBorderWidth(node,
311            (this.value as EdgeWidths).top,
312            (this.value as EdgeWidths).right,
313            (this.value as EdgeWidths).bottom,
314            (this.value as EdgeWidths).left);
315        }
316      }
317    }
318  }
319
320  checkObjectDiff(): boolean {
321    if (isResource(this.stageValue) && isResource(this.value)) {
322      return !isResourceEqual(this.stageValue, this.value);
323    } else if (!isResource(this.stageValue) && !isResource(this.value)) {
324      if ((Object.keys(this.value).indexOf('start') >= 0) ||
325          (Object.keys(this.value).indexOf('end') >= 0)) {
326        return !((this.stageValue as LocalizedEdgeWidths).start === (this.value as LocalizedEdgeWidths).start &&
327          (this.stageValue as LocalizedEdgeWidths).end === (this.value as LocalizedEdgeWidths).end &&
328          (this.stageValue as LocalizedEdgeWidths).top === (this.value as LocalizedEdgeWidths).top &&
329          (this.stageValue as LocalizedEdgeWidths).bottom === (this.value as LocalizedEdgeWidths).bottom);
330      }
331      return !((this.stageValue as EdgeWidths).left === (this.value as EdgeWidths).left &&
332        (this.stageValue as EdgeWidths).right === (this.value as EdgeWidths).right &&
333        (this.stageValue as EdgeWidths).top === (this.value as EdgeWidths).top &&
334        (this.stageValue as EdgeWidths).bottom === (this.value as EdgeWidths).bottom);
335    } else {
336      return true;
337    }
338  }
339}
340
341class HeightModifier extends ModifierWithKey<Length> {
342  constructor(value: Length) {
343    super(value);
344  }
345  static identity: Symbol = Symbol('height');
346  applyPeer(node: KNode, reset: boolean): void {
347    if (reset) {
348      getUINativeModule().common.resetHeight(node);
349    } else {
350      getUINativeModule().common.setHeight(node, this.value);
351    }
352  }
353
354  checkObjectDiff(): boolean {
355    if (isResource(this.stageValue) && isResource(this.value)) {
356      return !isResourceEqual(this.stageValue, this.value);
357    } else {
358      return true;
359    }
360  }
361}
362
363class ChainModeifier extends ModifierWithKey<Length> {
364  constructor(value: Length) {
365    super(value);
366  }
367  static identity: Symbol = Symbol('chainMode');
368  applyPeer(node: KNode, reset: boolean): void {
369    if (reset) {
370      getUINativeModule().common.resetChainMode(node);
371    } else {
372      getUINativeModule().common.setChainMode(node, this.value.direction, this.value.style);
373    }
374  }
375
376  checkObjectDiff(): boolean {
377    return !isBaseOrResourceEqual(this.stageValue, this.value);
378  }
379}
380
381class BorderRadiusModifier extends ModifierWithKey<Length | BorderRadiuses | LocalizedBorderRadius> {
382  constructor(value: Length | BorderRadiuses | LocalizedBorderRadius) {
383    super(value);
384  }
385  static identity: Symbol = Symbol('borderRadius');
386  applyPeer(node: KNode, reset: boolean): void {
387    if (reset) {
388      getUINativeModule().common.resetBorderRadius(node);
389    } else {
390      if (isNumber(this.value) || isString(this.value) || isResource(this.value)) {
391        getUINativeModule().common.setBorderRadius(node, this.value, this.value, this.value, this.value);
392      } else {
393        if ((Object.keys(this.value).indexOf('topStart') >= 0) ||
394            (Object.keys(this.value).indexOf('topEnd') >= 0) ||
395            (Object.keys(this.value).indexOf('bottomStart') >= 0) ||
396            (Object.keys(this.value).indexOf('bottomEnd') >= 0)) {
397          getUINativeModule().common.setBorderRadius(node,
398            (this.value as LocalizedBorderRadius).topStart,
399            (this.value as LocalizedBorderRadius).topEnd,
400            (this.value as LocalizedBorderRadius).bottomStart,
401            (this.value as LocalizedBorderRadius).bottomEnd);
402        } else {
403          getUINativeModule().common.setBorderRadius(node,
404            (this.value as BorderRadiuses).topLeft,
405            (this.value as BorderRadiuses).topRight,
406            (this.value as BorderRadiuses).bottomLeft,
407            (this.value as BorderRadiuses).bottomRight);
408        }
409      }
410    }
411  }
412
413  checkObjectDiff(): boolean {
414    if (isResource(this.stageValue) && isResource(this.value)) {
415      return !isResourceEqual(this.stageValue, this.value);
416    } else if (!isResource(this.stageValue) && !isResource(this.value)) {
417      if ((Object.keys(this.value).indexOf('topStart') >= 0) ||
418          (Object.keys(this.value).indexOf('topEnd') >= 0) ||
419          (Object.keys(this.value).indexOf('bottomStart') >= 0) ||
420          (Object.keys(this.value).indexOf('bottomEnd') >= 0)) {
421        return !((this.stageValue as LocalizedBorderRadius).topStart === (this.value as LocalizedBorderRadius).topStart &&
422          (this.stageValue as LocalizedBorderRadius).topEnd === (this.value as LocalizedBorderRadius).topEnd &&
423          (this.stageValue as LocalizedBorderRadius).bottomStart === (this.value as LocalizedBorderRadius).bottomStart &&
424          (this.stageValue as LocalizedBorderRadius).bottomEnd === (this.value as LocalizedBorderRadius).bottomEnd);
425      }
426      return !((this.stageValue as BorderRadiuses).topLeft === (this.value as BorderRadiuses).topLeft &&
427        (this.stageValue as BorderRadiuses).topRight === (this.value as BorderRadiuses).topRight &&
428        (this.stageValue as BorderRadiuses).bottomLeft === (this.value as BorderRadiuses).bottomLeft &&
429        (this.stageValue as BorderRadiuses).bottomRight === (this.value as BorderRadiuses).bottomRight);
430    } else {
431      return true;
432    }
433  }
434}
435
436class PositionModifier extends ModifierWithKey<Position | Edges | LocalizedEdges> {
437  constructor(value: Position | Edges | LocalizedEdges) {
438    super(value);
439  }
440  static identity: Symbol = Symbol('position');
441  applyPeer(node: KNode, reset: boolean): void {
442    if (reset) {
443      getUINativeModule().common.resetPosition(node);
444    } else {
445      if (isUndefined(this.value)) {
446        getUINativeModule().common.resetPosition(node);
447      } else if (('x' in this.value) || ('y' in this.value)) {
448        getUINativeModule().common.setPosition(node, false, this.value.x, this.value.y);
449      } else if (('top' in this.value) || ('bottom' in this.value) || ('left' in this.value) || ('start' in this.value) || ('right' in this.value) || ('end' in this.value)) {
450        if (('start' in this.value)) {
451          this.value.left = this.value.start;
452        }
453        if (('end' in this.value)) {
454          this.value.right = this.value.end;
455        }
456        getUINativeModule().common.setPosition(node, true, this.value.top, this.value.left, this.value.bottom, this.value.right);
457      } else {
458        getUINativeModule().common.resetPosition(node);
459      }
460    }
461  }
462
463  checkObjectDiff(): boolean {
464    return !isBaseOrResourceEqual(this.stageValue.x, this.value.x) ||
465      !isBaseOrResourceEqual(this.stageValue.y, this.value.y) ||
466      !isBaseOrResourceEqual(this.stageValue.top, this.value.top) ||
467      !isBaseOrResourceEqual(this.stageValue.left, this.value.left) ||
468      !isBaseOrResourceEqual(this.stageValue.bottom, this.value.bottom) ||
469      !isBaseOrResourceEqual(this.stageValue.right, this.value.right) ||
470      !isBaseOrResourceEqual(this.stageValue.start, this.value.start) ||
471      !isBaseOrResourceEqual(this.stageValue.end, this.value.end);
472  }
473}
474
475class BorderColorModifier extends ModifierWithKey<ResourceColor | EdgeColors | LocalizedEdgeColors> {
476  constructor(value: ResourceColor | EdgeColors | LocalizedEdgeColors) {
477    super(value);
478  }
479  static identity: Symbol = Symbol('borderColor');
480  applyPeer(node: KNode, reset: boolean): void {
481    if (reset) {
482      getUINativeModule().common.resetBorderColor(node);
483    } else {
484      const valueType: string = typeof this.value;
485      if (valueType === 'number' || valueType === 'string' || isResource(this.value)) {
486        getUINativeModule().common.setBorderColor(node, this.value, this.value, this.value, this.value);
487      } else {
488        if ((Object.keys(this.value).indexOf('start') >= 0) ||
489            (Object.keys(this.value).indexOf('end') >= 0)) {
490          getUINativeModule().common.setBorderColor(node,
491            (this.value as LocalizedEdgeColors).top,
492            (this.value as LocalizedEdgeColors).end,
493            (this.value as LocalizedEdgeColors).bottom,
494            (this.value as LocalizedEdgeColors).start,
495            true);
496        } else {
497          getUINativeModule().common.setBorderColor(node,
498            (this.value as EdgeColors).top,
499            (this.value as EdgeColors).right,
500            (this.value as EdgeColors).bottom,
501            (this.value as EdgeColors).left,
502            false);
503        }
504      }
505
506    }
507  }
508
509  checkObjectDiff(): boolean {
510    if (isResource(this.stageValue) && isResource(this.value)) {
511      return !isResourceEqual(this.stageValue, this.value);
512    } else if (!isResource(this.stageValue) && !isResource(this.value)) {
513      if ((Object.keys(this.value).indexOf('start') >= 0) ||
514          (Object.keys(this.value).indexOf('end') >= 0)) {
515        return !((this.stageValue as LocalizedEdgeColors).start === (this.value as LocalizedEdgeColors).start &&
516          (this.stageValue as LocalizedEdgeColors).end === (this.value as LocalizedEdgeColors).end &&
517          (this.stageValue as LocalizedEdgeColors).top === (this.value as LocalizedEdgeColors).top &&
518          (this.stageValue as LocalizedEdgeColors).bottom === (this.value as LocalizedEdgeColors).bottom);
519      }
520      return !((this.stageValue as EdgeColors).left === (this.value as EdgeColors).left &&
521        (this.stageValue as EdgeColors).right === (this.value as EdgeColors).right &&
522        (this.stageValue as EdgeColors).top === (this.value as EdgeColors).top &&
523        (this.stageValue as EdgeColors).bottom === (this.value as EdgeColors).bottom);
524    } else {
525      return true;
526    }
527  }
528}
529
530interface Matrix {
531  matrix4x4: []
532}
533
534
535class TransformModifier extends ModifierWithKey<object> {
536  constructor(value: object) {
537    super(value);
538  }
539  static identity: Symbol = Symbol('transform');
540  applyPeer(node: KNode, reset: boolean): void {
541    if (reset) {
542      getUINativeModule().common.resetTransform(node);
543    } else {
544      getUINativeModule().common.setTransform(node, (this.value as Matrix).matrix4x4);
545    }
546  }
547  checkObjectDiff(): boolean {
548    return !deepCompareArrays((this.stageValue as Matrix).matrix4x4, (this.value as Matrix).matrix4x4);
549  }
550}
551
552class BorderStyleModifier extends ModifierWithKey<BorderStyle | EdgeStyles> {
553  constructor(value: BorderStyle | EdgeStyles) {
554    super(value);
555  }
556  static identity: Symbol = Symbol('borderStyle');
557  applyPeer(node: KNode, reset: boolean): void {
558    if (reset) {
559      getUINativeModule().common.resetBorderStyle(node);
560    } else {
561      let type: boolean;
562      let style: BorderStyle;
563      let top: BorderStyle;
564      let right: BorderStyle;
565      let bottom: BorderStyle;
566      let left: BorderStyle;
567      if (isNumber(this.value)) {
568        style = this.value as BorderStyle;
569        type = true;
570      } else if (isObject(this.value)) {
571        top = (this.value as EdgeStyles)?.top;
572        right = (this.value as EdgeStyles)?.right;
573        bottom = (this.value as EdgeStyles)?.bottom;
574        left = (this.value as EdgeStyles)?.left;
575        type = true;
576      }
577      if (type === true) {
578        getUINativeModule().common.setBorderStyle(node, type, style, top, right, bottom, left);
579      } else {
580        getUINativeModule().common.resetBorderStyle(node);
581      }
582    }
583  }
584  checkObjectDiff(): boolean {
585    return !((this.value as EdgeStyles)?.top === (this.stageValue as EdgeStyles)?.top &&
586      (this.value as EdgeStyles)?.right === (this.stageValue as EdgeStyles)?.right &&
587      (this.value as EdgeStyles)?.bottom === (this.stageValue as EdgeStyles)?.bottom &&
588      (this.value as EdgeStyles)?.left === (this.stageValue as EdgeStyles)?.left);
589  }
590}
591
592class ShadowModifier extends ModifierWithKey<ShadowOptions | ShadowStyle> {
593  constructor(value: ShadowOptions | ShadowStyle) {
594    super(value);
595  }
596  static identity: Symbol = Symbol('shadow');
597  applyPeer(node: KNode, reset: boolean): void {
598    if (reset) {
599      getUINativeModule().common.resetShadow(node);
600    } else {
601      if (isNumber(this.value)) {
602        getUINativeModule().common.setShadow(node, this.value, undefined, undefined, undefined, undefined, undefined, undefined);
603      } else {
604        getUINativeModule().common.setShadow(node, undefined,
605          (this.value as ShadowOptions).radius,
606          (this.value as ShadowOptions).type,
607          (this.value as ShadowOptions).color,
608          (this.value as ShadowOptions).offsetX,
609          (this.value as ShadowOptions).offsetY,
610          (this.value as ShadowOptions).fill);
611      }
612    }
613  }
614
615  checkObjectDiff(): boolean {
616    return !((this.stageValue as ShadowOptions).radius === (this.value as ShadowOptions).radius &&
617      (this.stageValue as ShadowOptions).type === (this.value as ShadowOptions).type &&
618      (this.stageValue as ShadowOptions).color === (this.value as ShadowOptions).color &&
619      (this.stageValue as ShadowOptions).offsetX === (this.value as ShadowOptions).offsetX &&
620      (this.stageValue as ShadowOptions).offsetY === (this.value as ShadowOptions).offsetY &&
621      (this.stageValue as ShadowOptions).fill === (this.value as ShadowOptions).fill);
622  }
623}
624
625class HitTestBehaviorModifier extends ModifierWithKey<number> {
626  constructor(value: number) {
627    super(value);
628  }
629  static identity: Symbol = Symbol('hitTestBehavior');
630  applyPeer(node: KNode, reset: boolean): void {
631    if (reset) {
632      getUINativeModule().common.resetHitTestBehavior(node);
633    } else {
634      getUINativeModule().common.setHitTestBehavior(node, this.value);
635    }
636  }
637}
638
639class ZIndexModifier extends ModifierWithKey<number> {
640  constructor(value: number) {
641    super(value);
642  }
643  static identity: Symbol = Symbol('zIndex');
644  applyPeer(node: KNode, reset: boolean): void {
645    if (reset) {
646      getUINativeModule().common.resetZIndex(node);
647    } else {
648      getUINativeModule().common.setZIndex(node, this.value);
649    }
650  }
651}
652
653class OpacityModifier extends ModifierWithKey<number | Resource> {
654  constructor(value: number | Resource) {
655    super(value);
656  }
657  static identity: Symbol = Symbol('opacity');
658  applyPeer(node: KNode, reset: boolean): void {
659    if (reset) {
660      getUINativeModule().common.resetOpacity(node);
661    } else {
662      getUINativeModule().common.setOpacity(node, this.value);
663    }
664  }
665
666  checkObjectDiff(): boolean {
667    if (isResource(this.stageValue) && isResource(this.value)) {
668      return !isResourceEqual(this.stageValue, this.value);
669    } else {
670      return true;
671    }
672  }
673}
674
675class AlignModifier extends ModifierWithKey<number> {
676  constructor(value: number) {
677    super(value);
678  }
679  static identity: Symbol = Symbol('align');
680  applyPeer(node: KNode, reset: boolean): void {
681    if (reset) {
682      getUINativeModule().common.resetAlign(node);
683    } else {
684      getUINativeModule().common.setAlign(node, this.value);
685    }
686  }
687}
688
689class BackdropBlurModifier extends ModifierWithKey<ArkBlurOptions> {
690  constructor(value: ArkBlurOptions) {
691    super(value);
692  }
693  static identity: Symbol = Symbol('backdropBlur');
694  applyPeer(node: KNode, reset: boolean): void {
695    if (reset) {
696      getUINativeModule().common.resetBackdropBlur(node);
697    } else {
698      getUINativeModule().common.setBackdropBlur(node, this.value.value, this.value.options?.grayscale);
699    }
700  }
701  checkObjectDiff(): boolean {
702    return !((this.stageValue.value === this.value.value) &&
703      (this.stageValue.options === this.value.options));
704  }
705}
706
707class HueRotateModifier extends ModifierWithKey<number | string> {
708  constructor(value: number | string) {
709    super(value);
710  }
711  static identity: Symbol = Symbol('hueRotate');
712  applyPeer(node: KNode, reset: boolean): void {
713    if (reset) {
714      getUINativeModule().common.resetHueRotate(node);
715    } else {
716      getUINativeModule().common.setHueRotate(node, this.value);
717    }
718  }
719}
720
721class InvertModifier extends ModifierWithKey<number | InvertOptions> {
722  constructor(value: number | InvertOptions) {
723    super(value);
724  }
725  static identity: Symbol = Symbol('invert');
726  applyPeer(node: KNode, reset: boolean): void {
727    if (reset) {
728      getUINativeModule().common.resetInvert(node);
729    } else {
730      if (isNumber(this.value)) {
731        getUINativeModule().common.setInvert(node, this.value, undefined, undefined, undefined, undefined);
732      } else {
733        getUINativeModule().common.setInvert(node, undefined,
734          (this.value as InvertOptions).low,
735          (this.value as InvertOptions).high,
736          (this.value as InvertOptions).threshold,
737          (this.value as InvertOptions).thresholdRange);
738      }
739    }
740  }
741  checkObjectDiff(): boolean {
742    return !((this.stageValue as InvertOptions).high === (this.value as InvertOptions).high &&
743      (this.stageValue as InvertOptions).low === (this.value as InvertOptions).low &&
744      (this.stageValue as InvertOptions).threshold === (this.value as InvertOptions).threshold &&
745      (this.stageValue as InvertOptions).thresholdRange === (this.value as InvertOptions).thresholdRange);
746  }
747}
748
749class SepiaModifier extends ModifierWithKey<number> {
750  constructor(value: number) {
751    super(value);
752  }
753  static identity: Symbol = Symbol('sepia');
754  applyPeer(node: KNode, reset: boolean): void {
755    if (reset) {
756      getUINativeModule().common.resetSepia(node);
757    } else {
758      getUINativeModule().common.setSepia(node, this.value);
759    }
760  }
761}
762
763class SaturateModifier extends ModifierWithKey<number> {
764  constructor(value: number) {
765    super(value);
766  }
767  static identity: Symbol = Symbol('saturate');
768  applyPeer(node: KNode, reset: boolean): void {
769    if (reset) {
770      getUINativeModule().common.resetSaturate(node);
771    } else {
772      getUINativeModule().common.setSaturate(node, this.value);
773    }
774  }
775}
776
777class ColorBlendModifier extends ModifierWithKey<Color | string | Resource> {
778  constructor(value: Color | string | Resource) {
779    super(value);
780  }
781  static identity: Symbol = Symbol('colorBlend');
782  applyPeer(node: KNode, reset: boolean): void {
783    if (reset) {
784      getUINativeModule().common.resetColorBlend(node);
785    } else {
786      getUINativeModule().common.setColorBlend(node, this.value);
787    }
788  }
789
790  checkObjectDiff(): boolean {
791    if (isResource(this.stageValue) && isResource(this.value)) {
792      return !isResourceEqual(this.stageValue, this.value);
793    } else {
794      return true;
795    }
796  }
797}
798
799class GrayscaleModifier extends ModifierWithKey<number> {
800  constructor(value: number) {
801    super(value);
802  }
803  static identity: Symbol = Symbol('grayscale');
804  applyPeer(node: KNode, reset: boolean): void {
805    if (reset) {
806      getUINativeModule().common.resetGrayscale(node);
807    } else {
808      getUINativeModule().common.setGrayscale(node, this.value);
809    }
810  }
811}
812
813class ContrastModifier extends ModifierWithKey<number> {
814  constructor(value: number) {
815    super(value);
816  }
817  static identity: Symbol = Symbol('contrast');
818  applyPeer(node: KNode, reset: boolean): void {
819    if (reset) {
820      getUINativeModule().common.resetContrast(node);
821    } else {
822      getUINativeModule().common.setContrast(node, this.value);
823    }
824  }
825}
826
827class BrightnessModifier extends ModifierWithKey<number> {
828  constructor(value: number) {
829    super(value);
830  }
831  static identity: Symbol = Symbol('brightness');
832  applyPeer(node: KNode, reset: boolean): void {
833    if (reset) {
834      getUINativeModule().common.resetBrightness(node);
835    } else {
836      getUINativeModule().common.setBrightness(node, this.value);
837    }
838  }
839}
840
841class BlurModifier extends ModifierWithKey<ArkBlurOptions> {
842  constructor(value: ArkBlurOptions) {
843    super(value);
844  }
845  static identity: Symbol = Symbol('blur');
846  applyPeer(node: KNode, reset: boolean): void {
847    if (reset) {
848      getUINativeModule().common.resetBlur(node);
849    } else {
850      getUINativeModule().common.setBlur(node, this.value.value, this.value.options?.grayscale);
851    }
852  }
853  checkObjectDiff(): boolean {
854    return !((this.stageValue.value === this.value.value) &&
855      (this.stageValue.options === this.value.options));
856  }
857}
858
859class LinearGradientModifier extends ModifierWithKey<{
860  angle?: number | string;
861  direction?: GradientDirection; colors: Array<any>; repeating?: boolean;
862}> {
863  constructor(value: {
864    angle?: number | string; direction?: GradientDirection;
865    colors: Array<any>; repeating?: boolean;
866  }) {
867    super(value);
868  }
869  static identity: Symbol = Symbol('linearGradient');
870  applyPeer(node: KNode, reset: boolean): void {
871    if (reset) {
872      getUINativeModule().common.resetLinearGradient(node);
873    } else {
874      getUINativeModule().common.setLinearGradient(node,
875        this.value.angle, this.value.direction,
876        this.value.colors, this.value.repeating);
877    }
878  }
879  checkObjectDiff(): boolean {
880    return !((this.stageValue.angle === this.value.angle) &&
881      (this.stageValue.direction === this.value.direction) &&
882      (this.stageValue.colors === this.value.colors) &&
883      (this.stageValue.repeating === this.value.repeating));
884  }
885}
886
887class RadialGradientModifier extends ModifierWithKey<{ center: Array<any>; radius: number | string; colors: Array<any>; repeating?: boolean }> {
888  constructor(value: { center: Array<any>; radius: number | string; colors: Array<any>; repeating?: boolean }) {
889    super(value);
890  }
891  static identity: Symbol = Symbol('radialGradient');
892  applyPeer(node: KNode, reset: boolean): void {
893    if (reset) {
894      getUINativeModule().common.resetRadialGradient(node);
895    } else {
896      getUINativeModule().common.setRadialGradient(node,
897        this.value.center, this.value.radius, this.value.colors, this.value.repeating);
898    }
899  }
900  checkObjectDiff(): boolean {
901    return !((this.stageValue.center === this.value.center) &&
902      (this.stageValue.radius === this.value.radius) &&
903      (this.stageValue.colors === this.value.colors) &&
904      (this.stageValue.repeating === this.value.repeating));
905  }
906}
907
908class SweepGradientModifier extends ModifierWithKey<{
909  center: Array<any>; start?: number |
910  string; end?: number | string; rotation?: number | string;
911  colors: Array<any>; repeating?: boolean;
912}> {
913  constructor(value: {
914    center: Array<any>;
915    start?: number | string; end?: number | string;
916    rotation?: number | string; colors: Array<any>; repeating?: boolean;
917  }) {
918    super(value);
919  }
920  static identity: Symbol = Symbol('sweepGradient');
921  applyPeer(node: KNode, reset: boolean): void {
922    if (reset) {
923      getUINativeModule().common.resetSweepGradient(node);
924    } else {
925      getUINativeModule().common.setSweepGradient(node,
926        this.value.center,
927        this.value.start, this.value.end, this.value.rotation,
928        this.value.colors, this.value.repeating);
929    }
930  }
931  checkObjectDiff(): boolean {
932    return !((this.stageValue.center === this.value.center) &&
933      (this.stageValue.start === this.value.start) &&
934      (this.stageValue.end === this.value.end) &&
935      (this.stageValue.rotation === this.value.rotation) &&
936      (this.stageValue.colors === this.value.colors) &&
937      (this.stageValue.repeating === this.value.repeating));
938  }
939}
940
941class OverlayModifier extends ModifierWithKey<ArkOverlay> {
942  constructor(value: ArkOverlay) {
943    super(value);
944  }
945  static identity: Symbol = Symbol('overlay');
946  applyPeer(node: KNode, reset: boolean): void {
947    if (reset) {
948      getUINativeModule().common.resetOverlay(node);
949    } else {
950      getUINativeModule().common.setOverlay(node,
951        this.value.value, this.value.align,
952        this.value.offsetX, this.value.offsetY,
953        this.value.hasOptions, this.value.hasOffset);
954    }
955  }
956  checkObjectDiff(): boolean {
957    if (isUndefined(this.value)) {
958      return !isUndefined(this.stageValue);
959    }
960    return this.value.checkObjectDiff(this.stageValue);
961  }
962}
963
964class BorderImageModifier extends ModifierWithKey<BorderImageOption> {
965  constructor(value: BorderImageOption) {
966    super(value);
967  }
968  static identity: Symbol = Symbol('borderImage');
969  applyPeer(node: KNode, reset: boolean): void {
970    if (reset) {
971      getUINativeModule().common.resetBorderImage(node);
972    } else {
973      let sliceTop: Length | undefined;
974      let sliceRight: Length | undefined;
975      let sliceBottom: Length | undefined;
976      let sliceLeft: Length | undefined;
977      let repeat: RepeatMode | undefined;
978      let source: string | Resource | LinearGradient | undefined;
979      let sourceAngle: number | string | undefined;
980      let sourceDirection: GradientDirection | undefined;
981      let sourceColors: Array<any> | undefined;
982      let sourceRepeating: boolean | undefined;
983      let widthTop: Length | undefined;
984      let widthRight: Length | undefined;
985      let widthBottom: Length | undefined;
986      let widthLeft: Length | undefined;
987      let outsetTop: Length | undefined;
988      let outsetRight: Length | undefined;
989      let outsetBottom: Length | undefined;
990      let outsetLeft: Length | undefined;
991      let fill: boolean | undefined;
992
993      if (!isUndefined(this.value.slice)) {
994        if (isLengthType(this.value.slice) || isResource(this.value.slice)) {
995          let tmpSlice = this.value.slice as Length;
996          sliceTop = tmpSlice;
997          sliceRight = tmpSlice;
998          sliceBottom = tmpSlice;
999          sliceLeft = tmpSlice;
1000        } else {
1001          let tmpSlice = this.value.slice as EdgeWidths;
1002          sliceTop = tmpSlice.top;
1003          sliceRight = tmpSlice.right;
1004          sliceBottom = tmpSlice.bottom;
1005          sliceLeft = tmpSlice.left;
1006        }
1007      }
1008      repeat = this.value.repeat;
1009      if (!isUndefined(this.value.source)) {
1010        if (isString(this.value.source) || isResource(this.value.source)) {
1011          source = this.value.source;
1012        } else {
1013          let tmpSource = this.value.source as LinearGradient;
1014          sourceAngle = tmpSource.angle;
1015          sourceDirection = tmpSource.direction;
1016          sourceColors = tmpSource.colors;
1017          sourceRepeating = tmpSource.repeating;
1018        }
1019      }
1020      if (!isUndefined(this.value.width)) {
1021        if (isLengthType(this.value.width) || isResource(this.value.width)) {
1022          let tmpWidth = this.value.width as Length;
1023          widthTop = tmpWidth;
1024          widthRight = tmpWidth;
1025          widthBottom = tmpWidth;
1026          widthLeft = tmpWidth;
1027        } else {
1028          let tmpWidth = this.value.width as EdgeWidths;
1029          widthTop = tmpWidth.top;
1030          widthRight = tmpWidth.right;
1031          widthBottom = tmpWidth.bottom;
1032          widthLeft = tmpWidth.left;
1033        }
1034      }
1035      if (!isUndefined(this.value.outset)) {
1036        if (isLengthType(this.value.outset) || isResource(this.value.outset)) {
1037          let tmpOutset = this.value.outset as Length;
1038          outsetTop = tmpOutset;
1039          outsetRight = tmpOutset;
1040          outsetBottom = tmpOutset;
1041          outsetLeft = tmpOutset;
1042        } else {
1043          let tmpOutset = this.value.outset as EdgeWidths;
1044          outsetTop = tmpOutset.top;
1045          outsetRight = tmpOutset.right;
1046          outsetBottom = tmpOutset.bottom;
1047          outsetLeft = tmpOutset.left;
1048        }
1049      }
1050      fill = this.value.fill;
1051      getUINativeModule().common.setBorderImage(node,
1052        sliceTop, sliceRight, sliceBottom, sliceLeft,
1053        repeat,
1054        source, sourceAngle, sourceDirection, sourceColors, sourceRepeating,
1055        widthTop, widthRight, widthBottom, widthLeft,
1056        outsetTop, outsetRight, outsetBottom, outsetLeft,
1057        fill);
1058    }
1059  }
1060}
1061
1062class BorderModifier extends ModifierWithKey<ArkBorder> {
1063  constructor(value: ArkBorder) {
1064    super(value);
1065  }
1066  static identity: Symbol = Symbol('border');
1067  applyPeer(node: KNode, reset: boolean): void {
1068    if (reset) {
1069      getUINativeModule().common.resetBorder(node);
1070    } else {
1071      let isLocalizedBorderWidth;
1072      let isLocalizedBorderColor;
1073      let isLocalizedBorderRadius;
1074      if ((Object.keys(this.value.arkWidth).indexOf('start') >= 0 && isUndefined(this.value.arkWidth.start)) ||
1075        (Object.keys(this.value.arkWidth).indexOf('end') >= 0 && isUndefined(this.value.arkWidth.end))) {
1076        isLocalizedBorderWidth = true;
1077      } else {
1078        isLocalizedBorderWidth = false;
1079      }
1080      if ((Object.keys(this.value.arkColor).indexOf('startColor') >= 0 && isUndefined(this.value.arkColor.startColor)) ||
1081        (Object.keys(this.value.arkColor).indexOf('endColor') >= 0 && isUndefined(this.value.arkColor.endColor))) {
1082        isLocalizedBorderColor = true;
1083      } else {
1084        isLocalizedBorderColor = false;
1085      }
1086      if ((Object.keys(this.value.arkRadius).indexOf('topStart') >= 0 && isUndefined(this.value.arkRadius.topStart)) ||
1087        (Object.keys(this.value.arkRadius).indexOf('topEnd') >= 0 && isUndefined(this.value.arkRadius.topEnd)) ||
1088        (Object.keys(this.value.arkRadius).indexOf('bottomStart') >= 0 && isUndefined(this.value.arkRadius.bottomStart)) ||
1089        (Object.keys(this.value.arkRadius).indexOf('bottomEnd') >= 0 && isUndefined(this.value.arkRadius.bottomEnd))) {
1090        isLocalizedBorderRadius = true;
1091      } else {
1092        isLocalizedBorderRadius = false;
1093      }
1094      getUINativeModule().common.setBorderWithDashParams(node,
1095        this.value.arkWidth.left, this.value.arkWidth.right, this.value.arkWidth.top, this.value.arkWidth.bottom,
1096        this.value.arkColor.leftColor, this.value.arkColor.rightColor, this.value.arkColor.topColor, this.value.arkColor.bottomColor,
1097        this.value.arkRadius.topLeft, this.value.arkRadius.topRight, this.value.arkRadius.bottomLeft, this.value.arkRadius.bottomRight,
1098        this.value.arkStyle.top, this.value.arkStyle.right, this.value.arkStyle.bottom, this.value.arkStyle.left,
1099        this.value.arkDashGap.left, this.value.arkDashGap.right, this.value.arkDashGap.top, this.value.arkDashGap.bottom,
1100        this.value.arkDashWidth.left, this.value.arkDashWidth.right, this.value.arkDashWidth.top, this.value.arkDashWidth.bottom,
1101        this.value.arkWidth.start, this.value.arkWidth.end, this.value.arkColor.startColor, this.value.arkColor.endColor,
1102        this.value.arkRadius.topStart, this.value.arkRadius.topEnd, this.value.arkRadius.bottomStart, this.value.arkRadius.bottomEnd,
1103        isLocalizedBorderWidth, isLocalizedBorderColor, isLocalizedBorderRadius);
1104    }
1105  }
1106
1107  checkObjectDiff(): boolean {
1108    return this.value.checkObjectDiff(this.stageValue);
1109  }
1110}
1111
1112class OutlineColorModifier extends ModifierWithKey<ResourceColor | EdgeColors> {
1113  constructor(value: ResourceColor | EdgeColors) {
1114    super(value);
1115  }
1116  static identity: Symbol = Symbol('outlineColor');
1117  applyPeer(node: KNode, reset: boolean): void {
1118    if (reset) {
1119      getUINativeModule().common.resetOutlineColor(node);
1120    } else {
1121      const valueType: string = typeof this.value;
1122      if (valueType === 'number' || valueType === 'string' || isResource(this.value)) {
1123        getUINativeModule().common.setOutlineColor(node, this.value, this.value, this.value, this.value);
1124      } else {
1125        getUINativeModule().common.setOutlineColor(node, (this.value as EdgeColors).left,
1126          (this.value as EdgeColors).right, (this.value as EdgeColors).top,
1127          (this.value as EdgeColors).bottom);
1128      }
1129    }
1130  }
1131
1132  checkObjectDiff(): boolean {
1133    if (isResource(this.stageValue) && isResource(this.value)) {
1134      return !isResourceEqual(this.stageValue, this.value);
1135    } else if (!isResource(this.stageValue) && !isResource(this.value)) {
1136      return !((this.stageValue as EdgeColors).left === (this.value as EdgeColors).left &&
1137        (this.stageValue as EdgeColors).right === (this.value as EdgeColors).right &&
1138        (this.stageValue as EdgeColors).top === (this.value as EdgeColors).top &&
1139        (this.stageValue as EdgeColors).bottom === (this.value as EdgeColors).bottom);
1140    } else {
1141      return true;
1142    }
1143  }
1144}
1145
1146class OutlineRadiusModifier extends ModifierWithKey<Dimension | OutlineRadiuses> {
1147  constructor(value: Dimension | OutlineRadiuses) {
1148    super(value);
1149  }
1150  static identity: Symbol = Symbol('outlineRadius');
1151  applyPeer(node: KNode, reset: boolean): void {
1152    if (reset) {
1153      getUINativeModule().common.resetOutlineRadius(node);
1154    } else {
1155      const valueType: string = typeof this.value;
1156      if (valueType === 'number' || valueType === 'string' || isResource(this.value)) {
1157        getUINativeModule().common.setOutlineRadius(node, this.value, this.value, this.value, this.value);
1158      } else {
1159        getUINativeModule().common.setOutlineRadius(node, (this.value as OutlineRadiuses).topLeft,
1160          (this.value as OutlineRadiuses).topRight, (this.value as OutlineRadiuses).bottomLeft,
1161          (this.value as OutlineRadiuses).bottomRight);
1162      }
1163    }
1164  }
1165  checkObjectDiff(): boolean {
1166    if (isResource(this.stageValue) && isResource(this.value)) {
1167      return !isResourceEqual(this.stageValue, this.value);
1168    } else if (!isResource(this.stageValue) && !isResource(this.value)) {
1169      return !((this.stageValue as BorderRadiuses).topLeft === (this.value as BorderRadiuses).topLeft &&
1170        (this.stageValue as BorderRadiuses).topRight === (this.value as BorderRadiuses).topRight &&
1171        (this.stageValue as BorderRadiuses).bottomLeft === (this.value as BorderRadiuses).bottomLeft &&
1172        (this.stageValue as BorderRadiuses).bottomRight === (this.value as BorderRadiuses).bottomRight);
1173    } else {
1174      return true;
1175    }
1176  }
1177}
1178
1179class OutlineStyleModifier extends ModifierWithKey<OutlineStyle | EdgeOutlineStyles> {
1180  constructor(value: OutlineStyle | EdgeOutlineStyles) {
1181    super(value);
1182  }
1183  static identity: Symbol = Symbol('outlineStyle');
1184  applyPeer(node: KNode, reset: boolean): void {
1185    if (reset) {
1186      getUINativeModule().common.resetOutlineStyle(node);
1187    } else {
1188      if (isNumber(this.value)) {
1189        getUINativeModule().common.setOutlineStyle(node, this.value, this.value, this.value, this.value);
1190      } else {
1191        getUINativeModule().common.setOutlineStyle(node,
1192          (this.value as EdgeOutlineStyles).top,
1193          (this.value as EdgeOutlineStyles).right,
1194          (this.value as EdgeOutlineStyles).bottom,
1195          (this.value as EdgeOutlineStyles).left);
1196      }
1197    }
1198  }
1199  checkObjectDiff(): boolean {
1200    return !((this.value as EdgeOutlineStyles).top === (this.stageValue as EdgeOutlineStyles).top &&
1201      (this.value as EdgeOutlineStyles).right === (this.stageValue as EdgeOutlineStyles).right &&
1202      (this.value as EdgeOutlineStyles).bottom === (this.stageValue as EdgeOutlineStyles).bottom &&
1203      (this.value as EdgeOutlineStyles).left === (this.stageValue as EdgeOutlineStyles).left);
1204  }
1205}
1206
1207class OutlineWidthModifier extends ModifierWithKey<Dimension | EdgeOutlineWidths> {
1208  constructor(value: Dimension | EdgeOutlineWidths) {
1209    super(value);
1210  }
1211  static identity: Symbol = Symbol('outlineWidth');
1212  applyPeer(node: KNode, reset: boolean): void {
1213    if (reset) {
1214      getUINativeModule().common.resetOutlineWidth(node);
1215    } else {
1216      if (isNumber(this.value) || isString(this.value) || isResource(this.value)) {
1217        getUINativeModule().common.setOutlineWidth(node, this.value, this.value, this.value, this.value);
1218      } else {
1219        getUINativeModule().common.setOutlineWidth(node,
1220          (this.value as EdgeOutlineWidths).left,
1221          (this.value as EdgeOutlineWidths).right,
1222          (this.value as EdgeOutlineWidths).top,
1223          (this.value as EdgeOutlineWidths).bottom);
1224      }
1225    }
1226  }
1227
1228  checkObjectDiff(): boolean {
1229    if (isResource(this.stageValue) && isResource(this.value)) {
1230      return !isResourceEqual(this.stageValue, this.value);
1231    } else if (!isResource(this.stageValue) && !isResource(this.value)) {
1232      return !((this.stageValue as EdgeOutlineWidths).left === (this.value as EdgeOutlineWidths).left &&
1233        (this.stageValue as EdgeOutlineWidths).right === (this.value as EdgeOutlineWidths).right &&
1234        (this.stageValue as EdgeOutlineWidths).top === (this.value as EdgeOutlineWidths).top &&
1235        (this.stageValue as EdgeOutlineWidths).bottom === (this.value as EdgeOutlineWidths).bottom);
1236    } else {
1237      return true;
1238    }
1239  }
1240}
1241
1242class OutlineModifier extends ModifierWithKey<OutlineOptions> {
1243  constructor(value: OutlineOptions) {
1244    super(value);
1245  }
1246  static identity: Symbol = Symbol('outline');
1247  applyPeer(node: KNode, reset: boolean): void {
1248    if (reset) {
1249      getUINativeModule().common.resetOutline(node);
1250    } else {
1251      let widthLeft;
1252      let widthRight;
1253      let widthTop;
1254      let widthBottom;
1255      if (!isUndefined(this.value.width) && this.value.width != null) {
1256        if (isNumber(this.value.width) || isString(this.value.width) || isResource(this.value.width)) {
1257          widthLeft = this.value.width;
1258          widthRight = this.value.width;
1259          widthTop = this.value.width;
1260          widthBottom = this.value.width;
1261        } else {
1262          widthLeft = (this.value.width as EdgeOutlineWidths).left;
1263          widthRight = (this.value.width as EdgeOutlineWidths).right;
1264          widthTop = (this.value.width as EdgeOutlineWidths).top;
1265          widthBottom = (this.value.width as EdgeOutlineWidths).bottom;
1266        }
1267      }
1268      let leftColor;
1269      let rightColor;
1270      let topColor;
1271      let bottomColor;
1272      if (!isUndefined(this.value.color) && this.value.color != null) {
1273        if (isNumber(this.value.color) || isString(this.value.color) || isResource(this.value.color)) {
1274          leftColor = this.value.color;
1275          rightColor = this.value.color;
1276          topColor = this.value.color;
1277          bottomColor = this.value.color;
1278        } else {
1279          leftColor = (this.value.color as EdgeColors).left;
1280          rightColor = (this.value.color as EdgeColors).right;
1281          topColor = (this.value.color as EdgeColors).top;
1282          bottomColor = (this.value.color as EdgeColors).bottom;
1283        }
1284      }
1285      let topLeft;
1286      let topRight;
1287      let bottomLeft;
1288      let bottomRight;
1289      if (!isUndefined(this.value.radius) && this.value.radius != null) {
1290        if (isNumber(this.value.radius) || isString(this.value.radius) || isResource(this.value.radius)) {
1291          topLeft = this.value.radius;
1292          topRight = this.value.radius;
1293          bottomLeft = this.value.radius;
1294          bottomRight = this.value.radius;
1295        } else {
1296          topLeft = (this.value.radius as OutlineRadiuses).topLeft;
1297          topRight = (this.value.radius as OutlineRadiuses).topRight;
1298          bottomLeft = (this.value.radius as OutlineRadiuses).bottomLeft;
1299          bottomRight = (this.value.radius as OutlineRadiuses).bottomRight;
1300        }
1301      }
1302      let styleTop;
1303      let styleRight;
1304      let styleBottom;
1305      let styleLeft;
1306      if (!isUndefined(this.value.style) && this.value.style != null) {
1307        if (isNumber(this.value.style) || isString(this.value.style) || isResource(this.value.style)) {
1308          styleTop = this.value.style;
1309          styleRight = this.value.style;
1310          styleBottom = this.value.style;
1311          styleLeft = this.value.style;
1312        } else {
1313          styleTop = (this.value.style as EdgeOutlineStyles).top;
1314          styleRight = (this.value.style as EdgeOutlineStyles).right;
1315          styleBottom = (this.value.style as EdgeOutlineStyles).bottom;
1316          styleLeft = (this.value.style as EdgeOutlineStyles).left;
1317        }
1318      }
1319      getUINativeModule().common.setOutline(node, widthLeft, widthRight, widthTop, widthBottom,
1320        leftColor, rightColor, topColor, bottomColor,
1321        topLeft, topRight, bottomLeft, bottomRight,
1322        styleTop, styleRight, styleBottom, styleLeft);
1323    }
1324  }
1325
1326  checkObjectDiff(): boolean {
1327    return !isBaseOrResourceEqual(this.stageValue.width, this.value.width) ||
1328      !isBaseOrResourceEqual(this.stageValue.color, this.value.color) ||
1329      !isBaseOrResourceEqual(this.stageValue.radius, this.value.radius) ||
1330      !isBaseOrResourceEqual(this.stageValue.style, this.value.style);
1331  }
1332}
1333
1334class ForegroundBlurStyleModifier extends ModifierWithKey<ArkForegroundBlurStyle> {
1335  constructor(value: ArkForegroundBlurStyle) {
1336    super(value);
1337  }
1338  static identity: Symbol = Symbol('foregroundBlurStyle');
1339  applyPeer(node: KNode, reset: boolean): void {
1340    if (reset) {
1341      getUINativeModule().common.resetForegroundBlurStyle(node);
1342    } else {
1343      getUINativeModule().common.setForegroundBlurStyle(node,
1344        this.value.blurStyle, this.value.colorMode, this.value.adaptiveColor, this.value.scale,
1345          this.value.blurOptions?.grayscale);
1346    }
1347  }
1348
1349  checkObjectDiff(): boolean {
1350    return !((this.stageValue as ArkForegroundBlurStyle).blurStyle === (this.value as ArkForegroundBlurStyle).blurStyle &&
1351      (this.stageValue as ArkForegroundBlurStyle).colorMode === (this.value as ArkForegroundBlurStyle).colorMode &&
1352      (this.stageValue as ArkForegroundBlurStyle).adaptiveColor === (this.value as ArkForegroundBlurStyle).adaptiveColor &&
1353      (this.stageValue as ArkForegroundBlurStyle).scale === (this.value as ArkForegroundBlurStyle).scale &&
1354      (this.stageValue as ArkForegroundBlurStyle).blurOptions === (this.value as ArkForegroundBlurStyle).blurOptions);
1355  }
1356}
1357
1358class BackgroundImagePositionModifier extends ModifierWithKey<Position | Alignment> {
1359  constructor(value: Position | Alignment) {
1360    super(value);
1361  }
1362  static identity: Symbol = Symbol('backgroundImagePosition');
1363  applyPeer(node: KNode, reset: boolean): void {
1364    if (reset) {
1365      getUINativeModule().common.resetBackgroundImagePosition(node);
1366    } else {
1367      if (isNumber(this.value)) {
1368        getUINativeModule().common.setBackgroundImagePosition(node, this.value, undefined, undefined);
1369      } else {
1370        getUINativeModule().common.setBackgroundImagePosition(node, undefined, (this.value as Position)?.x, (this.value as Position)?.y);
1371      }
1372    }
1373  }
1374  checkObjectDiff(): boolean {
1375    return !((this.value as Position)?.x === (this.stageValue as Position)?.x &&
1376      (this.value as Position)?.y === (this.stageValue as Position)?.y);
1377  }
1378}
1379
1380class BackgroundImageResizableModifier extends ModifierWithKey<ResizableOptions> {
1381  constructor(value: ResizableOptions) {
1382    super(value);
1383  }
1384  static identity: Symbol = Symbol('backgroundImageResizable');
1385  applyPeer(node: KNode, reset: boolean): void {
1386    if (reset) {
1387      getUINativeModule().common.resetBackgroundImageResizable(node);
1388    } else {
1389      let sliceTop: Length | undefined;
1390      let sliceBottom: Length | undefined;
1391      let sliceLeft: Length | undefined;
1392      let sliceRight: Length | undefined;
1393      if (!isUndefined(this.value.slice)) {
1394        let tempSlice = this.value.slice as EdgeWidths;
1395        sliceTop = tempSlice.top;
1396        sliceBottom = tempSlice.bottom;
1397        sliceLeft = tempSlice.left;
1398        sliceRight = tempSlice.right;
1399      }
1400      getUINativeModule().common.setBackgroundImageResizable(node, sliceTop, sliceBottom, sliceLeft, sliceRight);
1401    }
1402  }
1403  checkObjectDiff(): boolean {
1404    return !isBaseOrResourceEqual(this.stageValue, this.value);
1405  }
1406}
1407
1408class LinearGradientBlurModifier extends ModifierWithKey<ArkLinearGradientBlur> {
1409  constructor(value: ArkLinearGradientBlur) {
1410    super(value);
1411  }
1412  static identity: Symbol = Symbol('linearGradientBlur');
1413  applyPeer(node: KNode, reset: boolean): void {
1414    if (reset) {
1415      getUINativeModule().common.resetLinearGradientBlur(node);
1416    } else {
1417      getUINativeModule().common.setLinearGradientBlur(node,
1418        this.value.blurRadius, this.value.fractionStops, this.value.direction);
1419    }
1420  }
1421  checkObjectDiff(): boolean {
1422    return !this.value.isEqual(this.stageValue);
1423  }
1424}
1425
1426class BackgroundImageModifier extends ModifierWithKey<ArkBackgroundImage> {
1427  constructor(value: ArkBackgroundImage) {
1428    super(value);
1429  }
1430  static identity: Symbol = Symbol('backgroundImage');
1431  applyPeer(node: KNode, reset: boolean): void {
1432    if (reset) {
1433      getUINativeModule().common.resetBackgroundImage(node);
1434    } else {
1435      getUINativeModule().common.setBackgroundImage(node, this.value.src, this.value.repeat);
1436    }
1437  }
1438  checkObjectDiff(): boolean {
1439    return !((this.stageValue as ArkBackgroundImage).src === (this.value as ArkBackgroundImage).src &&
1440      (this.stageValue as ArkBackgroundImage).repeat === (this.value as ArkBackgroundImage).repeat);
1441  }
1442}
1443
1444class BackgroundBlurStyleModifier extends ModifierWithKey<ArkBackgroundBlurStyle> {
1445  constructor(value: ArkBackgroundBlurStyle) {
1446    super(value);
1447  }
1448  static identity: Symbol = Symbol('backgroundBlurStyle');
1449  applyPeer(node: KNode, reset: boolean): void {
1450    if (reset) {
1451      getUINativeModule().common.resetBackgroundBlurStyle(node);
1452    } else {
1453      getUINativeModule().common.setBackgroundBlurStyle(node,
1454        this.value.blurStyle, this.value.colorMode, this.value.adaptiveColor, this.value.scale,
1455          this.value.blurOptions?.grayscale);
1456    }
1457  }
1458}
1459
1460class BackgroundImageSizeModifier extends ModifierWithKey<SizeOptions | ImageSize> {
1461  constructor(value: SizeOptions | ImageSize) {
1462    super(value);
1463  }
1464  static identity: Symbol = Symbol('backgroundImageSize');
1465  applyPeer(node: KNode, reset: boolean): void {
1466    if (reset) {
1467      getUINativeModule().common.resetBackgroundImageSize(node);
1468    } else {
1469      if (isNumber(this.value)) {
1470        getUINativeModule().common.setBackgroundImageSize(node, this.value, undefined, undefined);
1471      } else {
1472        getUINativeModule().common.setBackgroundImageSize(node, undefined, (this.value as SizeOptions)?.width, (this.value as SizeOptions)?.height);
1473      }
1474    }
1475  }
1476  checkObjectDiff(): boolean {
1477    return !((this.value as SizeOptions).width === (this.stageValue as SizeOptions).width &&
1478      (this.value as SizeOptions).height === (this.stageValue as SizeOptions).height);
1479  }
1480}
1481
1482class TranslateModifier extends ModifierWithKey<TranslateOptions> {
1483  constructor(value: TranslateOptions) {
1484    super(value);
1485  }
1486  static identity: Symbol = Symbol('translate');
1487  applyPeer(node: KNode, reset: boolean): void {
1488    if (reset) {
1489      getUINativeModule().common.resetTranslate(node);
1490    } else {
1491      getUINativeModule().common.setTranslate(node, this.value.x, this.value.y, this.value.z);
1492    }
1493  }
1494  checkObjectDiff(): boolean {
1495    return !(this.value.x === this.stageValue.x &&
1496      this.value.y === this.stageValue.y &&
1497      this.value.z === this.stageValue.z);
1498  }
1499}
1500
1501class ScaleModifier extends ModifierWithKey<ScaleOptions> {
1502  constructor(value: ScaleOptions) {
1503    super(value);
1504  }
1505  static identity: Symbol = Symbol('scale');
1506  applyPeer(node: KNode, reset: boolean): void {
1507    if (reset) {
1508      getUINativeModule().common.resetScale(node);
1509    } else {
1510      getUINativeModule().common.setScale(node, this.value.x, this.value.y, this.value.z, this.value.centerX, this.value.centerY);
1511    }
1512  }
1513  checkObjectDiff(): boolean {
1514    return !(
1515      this.value.x === this.stageValue.x &&
1516      this.value.y === this.stageValue.y &&
1517      this.value.z === this.stageValue.z &&
1518      this.value.centerX === this.stageValue.centerX &&
1519      this.value.centerY === this.stageValue.centerY
1520    );
1521  }
1522}
1523
1524class RotateModifier extends ModifierWithKey<RotateOptions> {
1525  constructor(value: RotateOptions) {
1526    super(value);
1527  }
1528  static identity: Symbol = Symbol('rotate');
1529  applyPeer(node: KNode, reset: boolean): void {
1530    if (reset) {
1531      getUINativeModule().common.resetRotate(node);
1532    } else {
1533      getUINativeModule().common.setRotate(node, this.value.x, this.value.y, this.value.z, this.value.angle,
1534        this.value.centerX, this.value.centerY, this.value.centerY, this.value.perspective);
1535    }
1536  }
1537  checkObjectDiff(): boolean {
1538    return !(
1539      this.value.x === this.stageValue.x &&
1540      this.value.y === this.stageValue.y &&
1541      this.value.z === this.stageValue.z &&
1542      this.value.angle === this.stageValue.angle &&
1543      this.value.centerX === this.stageValue.centerX &&
1544      this.value.centerY === this.stageValue.centerY &&
1545      this.value.centerZ === this.stageValue.centerZ &&
1546      this.value.perspective === this.stageValue.perspective
1547    );
1548  }
1549}
1550
1551class GeometryTransitionModifier extends ModifierWithKey<ArkGeometryTransition> {
1552  constructor(value: ArkGeometryTransition) {
1553    super(value);
1554  }
1555  static identity: Symbol = Symbol('geometryTransition');
1556  applyPeer(node: KNode, reset: boolean): void {
1557    if (reset) {
1558      getUINativeModule().common.resetGeometryTransition(node);
1559    } else {
1560      getUINativeModule().common.setGeometryTransition(node, this.value.id,
1561        (this.value.options as GeometryTransitionOptions)?.follow,
1562        (this.value.options as GeometryTransitionOptions)?.hierarchyStrategy);
1563    }
1564  }
1565}
1566
1567class AdvancedBlendModeModifier extends ModifierWithKey<ArkBlendMode> {
1568  constructor(value: ArkBlendMode) {
1569    super(value);
1570  }
1571  static identity: Symbol = Symbol('advancedBlendMode');
1572  applyPeer(node: KNode, reset: boolean): void {
1573    if (reset) {
1574      getUINativeModule().common.resetAdvancedBlendMode(node);
1575    } else {
1576      getUINativeModule().common.setAdvancedBlendMode(node, this.value.blendMode, this.value.blendApplyType);
1577    }
1578  }
1579}
1580
1581class BlendModeModifier extends ModifierWithKey<ArkBlendMode> {
1582  constructor(value: ArkBlendMode) {
1583    super(value);
1584  }
1585  static identity: Symbol = Symbol('blendMode');
1586  applyPeer(node: KNode, reset: boolean): void {
1587    if (reset) {
1588      getUINativeModule().common.resetBlendMode(node);
1589    } else {
1590      getUINativeModule().common.setBlendMode(node, this.value.blendMode, this.value.blendApplyType);
1591    }
1592  }
1593}
1594
1595class ClipModifier extends ModifierWithKey<boolean | object> {
1596  constructor(value: boolean | object) {
1597    super(value);
1598  }
1599  static identity: Symbol = Symbol('clip');
1600  applyPeer(node: KNode, reset: boolean): void {
1601    if (reset) {
1602      getUINativeModule().common.resetClip(node);
1603    } else {
1604      getUINativeModule().common.setClip(node, this.value);
1605    }
1606  }
1607
1608  checkObjectDiff(): boolean {
1609    return true;
1610  }
1611}
1612
1613class ClipShapeModifier extends ModifierWithKey<object> {
1614  constructor(value: object) {
1615    super(value);
1616  }
1617  static identity: Symbol = Symbol('clipShape');
1618  applyPeer(node: KNode, reset: boolean): void {
1619    if (reset) {
1620      getUINativeModule().common.resetClipShape(node);
1621    } else {
1622      getUINativeModule().common.setClipShape(node, this.value);
1623    }
1624  }
1625
1626  checkObjectDiff(): boolean {
1627    return true;
1628  }
1629}
1630
1631class MaskModifier extends ModifierWithKey<boolean | object> {
1632  constructor(value: boolean | object) {
1633    super(value);
1634  }
1635  static identity: Symbol = Symbol('mask');
1636  applyPeer(node: KNode, reset: boolean): void {
1637    if (reset) {
1638      getUINativeModule().common.resetMask(node);
1639    } else {
1640      getUINativeModule().common.setMask(node, this.value);
1641    }
1642  }
1643
1644  checkObjectDiff(): boolean {
1645    return true;
1646  }
1647}
1648
1649class MaskShapeModifier extends ModifierWithKey<object> {
1650  constructor(value: object) {
1651    super(value);
1652  }
1653  static identity: Symbol = Symbol('maskShape');
1654  applyPeer(node: KNode, reset: boolean): void {
1655    if (reset) {
1656      getUINativeModule().common.resetMaskShape(node);
1657    } else {
1658      getUINativeModule().common.setMaskShape(node, this.value);
1659    }
1660  }
1661
1662  checkObjectDiff(): boolean {
1663    return true;
1664  }
1665}
1666
1667class PixelStretchEffectModifier extends ModifierWithKey<PixelStretchEffectOptions> {
1668  constructor(value: PixelStretchEffectOptions) {
1669    super(value);
1670  }
1671  static identity: Symbol = Symbol('pixelStretchEffect');
1672  applyPeer(node: KNode, reset: boolean): void {
1673    if (reset) {
1674      getUINativeModule().common.resetPixelStretchEffect(node);
1675    } else {
1676      getUINativeModule().common.setPixelStretchEffect(node,
1677        this.value.top, this.value.right, this.value.bottom, this.value.left);
1678    }
1679  }
1680
1681  checkObjectDiff(): boolean {
1682    return !((this.stageValue as PixelStretchEffectOptions).left === (this.value as PixelStretchEffectOptions).left &&
1683      (this.stageValue as PixelStretchEffectOptions).right === (this.value as PixelStretchEffectOptions).right &&
1684      (this.stageValue as PixelStretchEffectOptions).top === (this.value as PixelStretchEffectOptions).top &&
1685      (this.stageValue as PixelStretchEffectOptions).bottom === (this.value as PixelStretchEffectOptions).bottom);
1686  }
1687}
1688
1689class LightUpEffectModifier extends ModifierWithKey<number> {
1690  constructor(value: number) {
1691    super(value);
1692  }
1693  static identity: Symbol = Symbol('lightUpEffect');
1694  applyPeer(node: KNode, reset: boolean): void {
1695    if (reset) {
1696      getUINativeModule().common.resetLightUpEffect(node);
1697    } else {
1698      getUINativeModule().common.setLightUpEffect(node, this.value);
1699    }
1700  }
1701}
1702
1703class SphericalEffectModifier extends ModifierWithKey<number> {
1704  constructor(value: number) {
1705    super(value);
1706  }
1707  static identity: Symbol = Symbol('sphericalEffect');
1708  applyPeer(node: KNode, reset: boolean): void {
1709    if (reset) {
1710      getUINativeModule().common.resetSphericalEffect(node);
1711    } else {
1712      getUINativeModule().common.setSphericalEffect(node, this.value);
1713    }
1714  }
1715}
1716
1717class RenderGroupModifier extends ModifierWithKey<boolean> {
1718  constructor(value: boolean) {
1719    super(value);
1720  }
1721  static identity: Symbol = Symbol('renderGroup');
1722  applyPeer(node: KNode, reset: boolean): void {
1723    if (reset) {
1724      getUINativeModule().common.resetRenderGroup(node);
1725    } else {
1726      getUINativeModule().common.setRenderGroup(node, this.value);
1727    }
1728  }
1729}
1730
1731class RenderFitModifier extends ModifierWithKey<number> {
1732  constructor(value: number) {
1733    super(value);
1734  }
1735  static identity: Symbol = Symbol('renderFit');
1736  applyPeer(node: KNode, reset: boolean): void {
1737    if (reset) {
1738      getUINativeModule().common.resetRenderFit(node);
1739    } else {
1740      getUINativeModule().common.setRenderFit(node, this.value);
1741    }
1742  }
1743}
1744
1745class UseEffectModifier extends ModifierWithKey<boolean> {
1746  constructor(value: boolean) {
1747    super(value);
1748  }
1749  static identity: Symbol = Symbol('useEffect');
1750  applyPeer(node: KNode, reset: boolean): void {
1751    if (reset) {
1752      getUINativeModule().common.resetUseEffect(node);
1753    } else {
1754      getUINativeModule().common.setUseEffect(node, this.value);
1755    }
1756  }
1757}
1758
1759class ForegroundColorModifier extends ModifierWithKey<ResourceColor | ColoringStrategy> {
1760  constructor(value: ResourceColor | ColoringStrategy) {
1761    super(value);
1762  }
1763  static identity: Symbol = Symbol('foregroundColor');
1764  applyPeer(node: KNode, reset: boolean): void {
1765    if (reset) {
1766      getUINativeModule().common.resetForegroundColor(node);
1767    } else {
1768      getUINativeModule().common.setForegroundColor(node, this.value);
1769    }
1770  }
1771
1772  checkObjectDiff(): boolean {
1773    if (isResource(this.stageValue) && isResource(this.value)) {
1774      return !isResourceEqual(this.stageValue, this.value);
1775    } else {
1776      return true;
1777    }
1778  }
1779}
1780
1781declare type ClickCallback = (event: ClickEvent) => void;
1782class OnClickModifier extends ModifierWithKey<ClickCallback> {
1783  constructor(value: ClickCallback) {
1784    super(value);
1785  }
1786  static identity: Symbol = Symbol('onClick');
1787  applyPeer(node: KNode, reset: boolean): void {
1788    if (reset) {
1789      getUINativeModule().common.resetOnClick(node);
1790    } else {
1791      getUINativeModule().common.setOnClick(node, this.value);
1792    }
1793  }
1794}
1795
1796declare type TouchCallback = (event: TouchEvent) => void;
1797class OnTouchModifier extends ModifierWithKey<TouchCallback> {
1798  constructor(value: TouchCallback) {
1799    super(value);
1800  }
1801  static identity: Symbol = Symbol('onTouch');
1802  applyPeer(node: KNode, reset: boolean): void {
1803    if (reset) {
1804      getUINativeModule().common.resetOnTouch(node);
1805    } else {
1806      getUINativeModule().common.setOnTouch(node, this.value);
1807    }
1808  }
1809}
1810
1811declare type VoidCallback = () => void;
1812class OnAppearModifier extends ModifierWithKey<VoidCallback> {
1813  constructor(value: VoidCallback) {
1814    super(value);
1815  }
1816  static identity: Symbol = Symbol('onAppear');
1817  applyPeer(node: KNode, reset: boolean): void {
1818    if (reset) {
1819      getUINativeModule().common.resetOnAppear(node);
1820    } else {
1821      getUINativeModule().common.setOnAppear(node, this.value);
1822    }
1823  }
1824}
1825
1826class OnDisappearModifier extends ModifierWithKey<VoidCallback> {
1827  constructor(value: VoidCallback) {
1828    super(value);
1829  }
1830  static identity: Symbol = Symbol('onDisappear');
1831  applyPeer(node: KNode, reset: boolean): void {
1832    if (reset) {
1833      getUINativeModule().common.resetOnDisappear(node);
1834    } else {
1835      getUINativeModule().common.setOnDisappear(node, this.value);
1836    }
1837  }
1838}
1839
1840class OnAttachModifier extends ModifierWithKey<VoidCallback> {
1841  constructor(value: VoidCallback) {
1842    super(value);
1843  }
1844  static identity: Symbol = Symbol('onAttach');
1845  applyPeer(node: KNode, reset: boolean): void {
1846    if (reset) {
1847      getUINativeModule().common.resetOnAttach(node);
1848    } else {
1849      getUINativeModule().common.setOnAttach(node, this.value);
1850    }
1851  }
1852}
1853
1854class OnDetachModifier extends ModifierWithKey<VoidCallback> {
1855  constructor(value: VoidCallback) {
1856    super(value);
1857  }
1858  static identity: Symbol = Symbol('onDetach');
1859  applyPeer(node: KNode, reset: boolean): void {
1860    if (reset) {
1861      getUINativeModule().common.resetOnDetach(node);
1862    } else {
1863      getUINativeModule().common.setOnDetach(node, this.value);
1864    }
1865  }
1866}
1867
1868declare type KeyEventCallback = (event: KeyEvent) => void;
1869class OnKeyEventModifier extends ModifierWithKey<KeyEventCallback> {
1870  constructor(value: KeyEventCallback) {
1871    super(value);
1872  }
1873  static identity: Symbol = Symbol('onKeyEvent');
1874  applyPeer(node: KNode, reset: boolean): void {
1875    if (reset) {
1876      getUINativeModule().common.resetOnKeyEvent(node);
1877    } else {
1878      getUINativeModule().common.setOnKeyEvent(node, this.value);
1879    }
1880  }
1881}
1882
1883class OnKeyPreImeModifier extends ModifierWithKey<Callback<KeyEvent, boolean>> {
1884  constructor(value: Callback<KeyEvent, boolean>) {
1885    super(value);
1886  }
1887  static identity: Symbol = Symbol('onKeyPreIme');
1888  applyPeer(node: KNode, reset: boolean): void {
1889    if (reset) {
1890      getUINativeModule().common.resetOnKeyPreIme(node);
1891    } else {
1892      getUINativeModule().common.setOnKeyPreIme(node, this.value);
1893    }
1894  }
1895}
1896
1897class OnFocusModifier extends ModifierWithKey<VoidCallback> {
1898  constructor(value: VoidCallback) {
1899    super(value);
1900  }
1901  static identity: Symbol = Symbol('onFocus');
1902  applyPeer(node: KNode, reset: boolean): void {
1903    if (reset) {
1904      getUINativeModule().common.resetOnFocus(node);
1905    } else {
1906      getUINativeModule().common.setOnFocus(node, this.value);
1907    }
1908  }
1909}
1910
1911class OnBlurModifier extends ModifierWithKey<VoidCallback> {
1912  constructor(value: VoidCallback) {
1913    super(value);
1914  }
1915  static identity: Symbol = Symbol('onBlur');
1916  applyPeer(node: KNode, reset: boolean): void {
1917    if (reset) {
1918      getUINativeModule().common.resetOnBlur(node);
1919    } else {
1920      getUINativeModule().common.setOnBlur(node, this.value);
1921    }
1922  }
1923}
1924
1925declare type HoverEventCallback = (isHover: boolean, event: HoverEvent) => void;
1926class OnHoverModifier extends ModifierWithKey<HoverEventCallback> {
1927  constructor(value: HoverEventCallback) {
1928    super(value);
1929  }
1930  static identity: Symbol = Symbol('onHover');
1931  applyPeer(node: KNode, reset: boolean): void {
1932    if (reset) {
1933      getUINativeModule().common.resetOnHover(node);
1934    } else {
1935      getUINativeModule().common.setOnHover(node, this.value);
1936    }
1937  }
1938}
1939
1940declare type MouseEventCallback = (event: MouseEvent) => void;
1941class OnMouseModifier extends ModifierWithKey<MouseEventCallback> {
1942  constructor(value: MouseEventCallback) {
1943    super(value);
1944  }
1945  static identity: Symbol = Symbol('onMouse');
1946  applyPeer(node: KNode, reset: boolean): void {
1947    if (reset) {
1948      getUINativeModule().common.resetOnMouse(node);
1949    } else {
1950      getUINativeModule().common.setOnMouse(node, this.value);
1951    }
1952  }
1953}
1954
1955declare type SizeChangeEventCallback = (oldValue: SizeOptions, newValue: SizeOptions) => void;
1956class OnSizeChangeModifier extends ModifierWithKey<SizeChangeEventCallback> {
1957  constructor(value: SizeChangeEventCallback) {
1958    super(value);
1959  }
1960  static identity: Symbol = Symbol('onSizeChange');
1961  applyPeer(node: KNode, reset: boolean): void {
1962    if (reset) {
1963      getUINativeModule().common.resetOnSizeChange(node);
1964    } else {
1965      getUINativeModule().common.setOnSizeChange(node, this.value);
1966    }
1967  }
1968}
1969
1970declare type AreaChangeEventCallback = (oldValue: Area, newValue: Area) => void;
1971class OnAreaChangeModifier extends ModifierWithKey<AreaChangeEventCallback> {
1972  constructor(value: AreaChangeEventCallback) {
1973    super(value);
1974  }
1975  static identity: Symbol = Symbol('onAreaChange');
1976  applyPeer(node: KNode, reset: boolean): void {
1977    if (reset) {
1978      getUINativeModule().common.resetOnAreaChange(node);
1979    } else {
1980      getUINativeModule().common.setOnAreaChange(node, this.value);
1981    }
1982  }
1983}
1984
1985declare type GestureJudgeBeginCallback = (gestureInfo: GestureInfo, event: BaseGestureEvent) => GestureJudgeResult;
1986class OnGestureJudgeBeginModifier extends ModifierWithKey<GestureJudgeBeginCallback> {
1987  constructor(value: GestureJudgeBeginCallback) {
1988    super(value);
1989  }
1990  static identity: Symbol = Symbol('onGestureJudgeBegin');
1991  applyPeer(node: KNode, reset: boolean): void {
1992    if (reset) {
1993      getUINativeModule().common.resetOnGestureJudgeBegin(node);
1994    } else {
1995      getUINativeModule().common.setOnGestureJudgeBegin(node, this.value);
1996    }
1997  }
1998}
1999
2000declare type GestureRecognizerJudgeBeginCallback = (event: BaseGestureEvent, current: GestureRecognizer, recognizers: Array<GestureRecognizer>) => GestureJudgeResult;
2001class OnGestureRecognizerJudgeBeginModifier extends ModifierWithKey<GestureRecognizerJudgeBeginCallback> {
2002  constructor(value: GestureRecognizerJudgeBeginCallback) {
2003    super(value);
2004  }
2005  static identity: Symbol = Symbol('onGestureRecognizerJudgeBegin');
2006  applyPeer(node: KNode, reset: boolean): void {
2007    if (reset) {
2008      getUINativeModule().common.resetOnGestureRecognizerJudgeBegin(node);
2009    } else {
2010      getUINativeModule().common.setOnGestureRecognizerJudgeBegin(node, this.value);
2011    }
2012  }
2013}
2014
2015declare type ShouldBuiltInRecognizerParallelWithCallback = (current: GestureRecognizer, others: Array<GestureRecognizer>) => GestureRecognizer;
2016class ShouldBuiltInRecognizerParallelWithModifier extends ModifierWithKey<ShouldBuiltInRecognizerParallelWithCallback> {
2017  constructor(value: ShouldBuiltInRecognizerParallelWithCallback) {
2018    super(value);
2019  }
2020  static identity: Symbol = Symbol('shouldBuiltInRecognizerParallelWith');
2021  applyPeer(node: KNode, reset: boolean): void {
2022    if (reset) {
2023      getUINativeModule().common.resetShouldBuiltInRecognizerParallelWith(node);
2024    } else {
2025      getUINativeModule().common.setShouldBuiltInRecognizerParallelWith(node, this.value);
2026    }
2027  }
2028}
2029
2030class MotionPathModifier extends ModifierWithKey<MotionPathOptions> {
2031  constructor(value: MotionPathOptions) {
2032    super(value);
2033  }
2034  static identity: Symbol = Symbol('motionPath');
2035  applyPeer(node: KNode, reset: boolean): void {
2036    if (reset) {
2037      getUINativeModule().common.resetMotionPath(node);
2038    } else {
2039      let path: string;
2040      let rotatable: boolean;
2041      let from: number;
2042      let to: number;
2043      if (isString(this.value.path)) {
2044        path = this.value.path;
2045      }
2046      if (isBoolean(this.value.rotatable)) {
2047        rotatable = this.value.rotatable;
2048      }
2049      if (isNumber(this.value.from) && isNumber(this.value.to)) {
2050        from = this.value.from;
2051        to = this.value.to;
2052      }
2053      getUINativeModule().common.setMotionPath(node, path, from, to, rotatable);
2054    }
2055  }
2056  checkObjectDiff(): boolean {
2057    return !(this.value.path === this.stageValue.path &&
2058      this.value.from === this.stageValue.from &&
2059      this.value.to === this.stageValue.to &&
2060      this.value.rotatable === this.stageValue.rotatable);
2061  }
2062}
2063
2064class MotionBlurModifier extends ModifierWithKey<MotionBlurOptions> {
2065  constructor(value: MotionBlurOptions) {
2066    super(value);
2067  }
2068  static identity: Symbol = Symbol('motionBlur');
2069  applyPeer(node: KNode, reset: boolean): void {
2070    if (reset) {
2071      getUINativeModule().common.resetMotionBlur(node);
2072    } else {
2073      getUINativeModule().common.setMotionBlur(node, this.value.radius, this.value.anchor.x, this.value.anchor.y);
2074    }
2075  }
2076}
2077
2078class GroupDefaultFocusModifier extends ModifierWithKey<boolean> {
2079  constructor(value: boolean) {
2080    super(value);
2081  }
2082  static identity: Symbol = Symbol('groupDefaultFocus');
2083  applyPeer(node: KNode, reset: boolean): void {
2084    if (reset) {
2085      getUINativeModule().common.resetGroupDefaultFocus(node);
2086    } else {
2087      getUINativeModule().common.setGroupDefaultFocus(node, this.value);
2088    }
2089  }
2090}
2091
2092class FocusOnTouchModifier extends ModifierWithKey<boolean> {
2093  constructor(value: boolean) {
2094    super(value);
2095  }
2096  static identity: Symbol = Symbol('focusOnTouch');
2097  applyPeer(node: KNode, reset: boolean): void {
2098    if (reset) {
2099      getUINativeModule().common.resetFocusOnTouch(node);
2100    } else {
2101      getUINativeModule().common.setFocusOnTouch(node, this.value);
2102    }
2103  }
2104}
2105class OffsetModifier extends ModifierWithKey<Position | Edges | LocalizedEdges> {
2106  constructor(value: Position | Edges | LocalizedEdges) {
2107    super(value);
2108  }
2109  static identity: Symbol = Symbol('offset');
2110  applyPeer(node: KNode, reset: boolean): void {
2111    if (reset) {
2112      getUINativeModule().common.resetOffset(node);
2113    } else {
2114      if (isUndefined(this.value)) {
2115        getUINativeModule().common.resetOffset(node);
2116      } else if (('x' in this.value) || ('y' in this.value)) {
2117        getUINativeModule().common.setOffset(node, false, this.value.x, this.value.y);
2118      } else if (('top' in this.value) || ('bottom' in this.value) || ('left' in this.value) || ('start' in this.value) || ('right' in this.value) || ('end' in this.value)) {
2119        if (('start' in this.value)) {
2120          this.value.left = this.value.start;
2121        }
2122        if (('end' in this.value)) {
2123          this.value.right = this.value.end;
2124        }
2125        getUINativeModule().common.setOffset(node, true, this.value.top, this.value.left, this.value.bottom, this.value.right);
2126      } else {
2127        getUINativeModule().common.resetOffset(node);
2128      }
2129    }
2130  }
2131
2132  checkObjectDiff(): boolean {
2133    return !isBaseOrResourceEqual(this.stageValue.x, this.value.x) ||
2134      !isBaseOrResourceEqual(this.stageValue.y, this.value.y) ||
2135      !isBaseOrResourceEqual(this.stageValue.top, this.value.top) ||
2136      !isBaseOrResourceEqual(this.stageValue.left, this.value.left) ||
2137      !isBaseOrResourceEqual(this.stageValue.bottom, this.value.bottom) ||
2138      !isBaseOrResourceEqual(this.stageValue.right, this.value.right) ||
2139      !isBaseOrResourceEqual(this.stageValue.start, this.value.start) ||
2140      !isBaseOrResourceEqual(this.stageValue.end, this.value.end);
2141  }
2142}
2143
2144class MarkAnchorModifier extends ModifierWithKey<Position | LocalizedPosition> {
2145  constructor(value: Position | LocalizedPosition) {
2146    super(value);
2147  }
2148  static identity: Symbol = Symbol('markAnchor');
2149  applyPeer(node: KNode, reset: boolean): void {
2150    if (reset) {
2151      getUINativeModule().common.resetMarkAnchor(node);
2152    } else {
2153      if (this.value === void 0) {
2154        getUINativeModule().common.resetMarkAnchor(node);
2155      } else {
2156        if ('start' in this.value) {
2157          this.value.x = this.value.start;
2158        }
2159        if ('top' in this.value) {
2160          this.value.y = this.value.top;
2161        }
2162      }
2163      getUINativeModule().common.setMarkAnchor(node, this.value.x, this.value.y);
2164    }
2165  }
2166
2167  checkObjectDiff(): boolean {
2168    return !isBaseOrResourceEqual(this.stageValue.x, this.value.x) ||
2169      !isBaseOrResourceEqual(this.stageValue.y, this.value.y) ||
2170      !isBaseOrResourceEqual(this.stageValue.start, this.value.start) ||
2171      !isBaseOrResourceEqual(this.stageValue.top, this.value.top);
2172  }
2173}
2174class DefaultFocusModifier extends ModifierWithKey<boolean> {
2175  constructor(value: boolean) {
2176    super(value);
2177  }
2178  static identity: Symbol = Symbol('defaultFocus');
2179  applyPeer(node: KNode, reset: boolean): void {
2180    if (reset) {
2181      getUINativeModule().common.resetDefaultFocus(node);
2182    } else {
2183      getUINativeModule().common.setDefaultFocus(node, this.value);
2184    }
2185  }
2186}
2187
2188class FocusableModifier extends ModifierWithKey<boolean> {
2189  constructor(value: boolean) {
2190    super(value);
2191  }
2192  static identity: Symbol = Symbol('focusable');
2193  applyPeer(node: KNode, reset: boolean): void {
2194    getUINativeModule().common.setFocusable(node, this.value);
2195  }
2196}
2197
2198class TouchableModifier extends ModifierWithKey<boolean> {
2199  constructor(value: boolean) {
2200    super(value);
2201  }
2202  static identity: Symbol = Symbol('touchable');
2203  applyPeer(node: KNode, reset: boolean): void {
2204    if (reset) {
2205      getUINativeModule().common.resetTouchable(node);
2206    } else {
2207      getUINativeModule().common.setTouchable(node, this.value);
2208    }
2209  }
2210}
2211
2212class MarginModifier extends ModifierWithKey<ArkPadding> {
2213  static identity: Symbol = Symbol('margin');
2214  applyPeer(node: KNode, reset: boolean): void {
2215    if (reset) {
2216      getUINativeModule().common.resetMargin(node);
2217    } else {
2218      getUINativeModule().common.setMargin(node, this.value.top,
2219        this.value.right, this.value.bottom, this.value.left);
2220    }
2221  }
2222
2223  checkObjectDiff(): boolean {
2224    return !isBaseOrResourceEqual(this.stageValue.top, this.value.top) ||
2225      !isBaseOrResourceEqual(this.stageValue.right, this.value.right) ||
2226      !isBaseOrResourceEqual(this.stageValue.bottom, this.value.bottom) ||
2227      !isBaseOrResourceEqual(this.stageValue.left, this.value.left);
2228  }
2229}
2230
2231class PaddingModifier extends ModifierWithKey<ArkPadding> {
2232  static identity: Symbol = Symbol('padding');
2233  applyPeer(node: KNode, reset: boolean): void {
2234    if (reset) {
2235      getUINativeModule().common.resetPadding(node);
2236    } else {
2237      getUINativeModule().common.setPadding(node, this.value.top,
2238        this.value.right, this.value.bottom, this.value.left);
2239    }
2240  }
2241
2242  checkObjectDiff(): boolean {
2243    return !isBaseOrResourceEqual(this.stageValue.top, this.value.top) ||
2244      !isBaseOrResourceEqual(this.stageValue.right, this.value.right) ||
2245      !isBaseOrResourceEqual(this.stageValue.bottom, this.value.bottom) ||
2246      !isBaseOrResourceEqual(this.stageValue.left, this.value.left);
2247  }
2248}
2249
2250class VisibilityModifier extends ModifierWithKey<number> {
2251  static identity: Symbol = Symbol('visibility');
2252  applyPeer(node: KNode, reset: boolean): void {
2253    if (reset) {
2254      getUINativeModule().common.resetVisibility(node);
2255    } else {
2256      getUINativeModule().common.setVisibility(node, this.value!);
2257    }
2258  }
2259  checkObjectDiff(): boolean {
2260    return this.stageValue !== this.value;
2261  }
2262}
2263
2264class AccessibilityTextModifier extends ModifierWithKey<string> {
2265  constructor(value: string) {
2266    super(value);
2267  }
2268  static identity: Symbol = Symbol('accessibilityText');
2269  applyPeer(node: KNode, reset: boolean): void {
2270    if (reset) {
2271      getUINativeModule().common.resetAccessibilityText(node);
2272    } else {
2273      getUINativeModule().common.setAccessibilityText(node, this.value);
2274    }
2275  }
2276}
2277
2278class AllowDropModifier extends ModifierWithKey<Array<UniformDataType>> {
2279  constructor(value: Array<UniformDataType>) {
2280    super(value);
2281  }
2282  static identity: Symbol = Symbol('allowDrop');
2283  applyPeer(node: KNode, reset: boolean): void {
2284    if (reset) {
2285      getUINativeModule().common.resetAllowDrop(node);
2286    } else {
2287      getUINativeModule().common.setAllowDrop(node, this.value);
2288    }
2289  }
2290  checkObjectDiff(): boolean {
2291    return !(Array.isArray(this.value) && Array.isArray(this.stageValue) &&
2292      this.value.length === this.stageValue.length &&
2293      this.value.every((value, index) => value === this.stageValue[index]));
2294  }
2295}
2296
2297class AccessibilityLevelModifier extends ModifierWithKey<string> {
2298  constructor(value: string) {
2299    super(value);
2300  }
2301  static identity: Symbol = Symbol('accessibilityLevel');
2302  applyPeer(node: KNode, reset: boolean): void {
2303    if (reset) {
2304      getUINativeModule().common.resetAccessibilityLevel(node);
2305    } else {
2306      getUINativeModule().common.setAccessibilityLevel(node, this.value);
2307    }
2308  }
2309}
2310
2311class AccessibilityDescriptionModifier extends ModifierWithKey<string> {
2312  constructor(value: string) {
2313    super(value);
2314  }
2315  static identity: Symbol = Symbol('accessibilityDescription');
2316  applyPeer(node: KNode, reset: boolean): void {
2317    if (reset) {
2318      getUINativeModule().common.resetAccessibilityDescription(node);
2319    } else {
2320      getUINativeModule().common.setAccessibilityDescription(node, this.value);
2321    }
2322  }
2323}
2324
2325class DirectionModifier extends ModifierWithKey<number> {
2326  static identity: Symbol = Symbol('direction');
2327  applyPeer(node: KNode, reset: boolean): void {
2328    if (reset) {
2329      getUINativeModule().common.resetDirection(node);
2330    } else {
2331      getUINativeModule().common.setDirection(node, this.value!);
2332    }
2333  }
2334  checkObjectDiff(): boolean {
2335    return !isBaseOrResourceEqual(this.stageValue, this.value);
2336  }
2337}
2338class AlignRulesModifier extends ModifierWithKey<ArkAlignRules> {
2339  constructor(value: ArkAlignRules) {
2340    super(value);
2341  }
2342  static identity: Symbol = Symbol('alignRules');
2343  applyPeer(node: KNode, reset: boolean): void {
2344    if (reset) {
2345      getUINativeModule().common.resetAlignRules(node);
2346    } else {
2347      getUINativeModule().common.setAlignRules(node, this.value.left,
2348        this.value.middle, this.value.right, this.value.top, this.value.center, this.value.bottom);
2349    }
2350  }
2351  checkObjectDiff(): boolean {
2352    return !isBaseOrResourceEqual(this.stageValue.left, this.value.left) ||
2353      !isBaseOrResourceEqual(this.stageValue.middle, this.value.middle) ||
2354      !isBaseOrResourceEqual(this.stageValue.right, this.value.right) ||
2355      !isBaseOrResourceEqual(this.stageValue.top, this.value.top) ||
2356      !isBaseOrResourceEqual(this.stageValue.center, this.value.center) ||
2357      !isBaseOrResourceEqual(this.stageValue.bottom, this.value.bottom);
2358  }
2359}
2360
2361class ExpandSafeAreaModifier extends ModifierWithKey<ArkSafeAreaExpandOpts | undefined> {
2362  constructor(value: ArkSafeAreaExpandOpts | undefined) {
2363    super(value);
2364  }
2365  static identity: Symbol = Symbol('expandSafeArea');
2366  applyPeer(node: KNode, reset: boolean): void {
2367    if (reset) {
2368      getUINativeModule().common.resetExpandSafeArea(node);
2369    } else {
2370      getUINativeModule().common.setExpandSafeArea(node, this.value.type, this.value.edges);
2371    }
2372  }
2373  checkObjectDiff(): boolean {
2374    return !isBaseOrResourceEqual(this.stageValue.type, this.value.type) ||
2375      !isBaseOrResourceEqual(this.stageValue.edges, this.value.edges);
2376  }
2377}
2378
2379class GridSpanModifier extends ModifierWithKey<number> {
2380  constructor(value: number) {
2381    super(value);
2382  }
2383  static identity: Symbol = Symbol('gridSpan');
2384  applyPeer(node: KNode, reset: boolean): void {
2385    if (reset) {
2386      getUINativeModule().common.resetGridSpan(node);
2387    } else {
2388      getUINativeModule().common.setGridSpan(node, this.value!);
2389    }
2390  }
2391}
2392
2393class GridOffsetModifier extends ModifierWithKey<number> {
2394  constructor(value: number) {
2395    super(value);
2396  }
2397  static identity: Symbol = Symbol('gridOffset');
2398  applyPeer(node: KNode, reset: boolean): void {
2399    if (reset) {
2400      getUINativeModule().common.resetGridOffset(node);
2401    } else {
2402      getUINativeModule().common.setGridOffset(node, this.value!);
2403    }
2404  }
2405}
2406
2407class AlignSelfModifier extends ModifierWithKey<number> {
2408  static identity: Symbol = Symbol('alignSelf');
2409  applyPeer(node: KNode, reset: boolean): void {
2410    if (reset) {
2411      getUINativeModule().common.resetAlignSelf(node);
2412    } else {
2413      getUINativeModule().common.setAlignSelf(node, this.value!);
2414    }
2415  }
2416  checkObjectDiff(): boolean {
2417    return !isBaseOrResourceEqual(this.stageValue, this.value);
2418  }
2419}
2420
2421class SizeModifier extends ModifierWithKey<SizeOptions> {
2422  static identity: Symbol = Symbol('size');
2423  applyPeer(node: KNode, reset: boolean): void {
2424    if (reset) {
2425      getUINativeModule().common.resetSize(node);
2426    } else {
2427      getUINativeModule().common.setSize(node, this.value.width, this.value.height);
2428    }
2429  }
2430
2431  checkObjectDiff(): boolean {
2432    return !isBaseOrResourceEqual(this.stageValue.width, this.value.width) ||
2433      !isBaseOrResourceEqual(this.stageValue.height, this.value.height);
2434  }
2435}
2436
2437class DisplayPriorityModifier extends ModifierWithKey<number> {
2438  static identity: Symbol = Symbol('displayPriority');
2439  applyPeer(node: KNode, reset: boolean): void {
2440    if (reset) {
2441      getUINativeModule().common.resetDisplayPriority(node);
2442    } else {
2443      getUINativeModule().common.setDisplayPriority(node, this.value!);
2444    }
2445  }
2446  checkObjectDiff(): boolean {
2447    return !isBaseOrResourceEqual(this.stageValue, this.value);
2448  }
2449}
2450
2451class IdModifier extends ModifierWithKey<string> {
2452  constructor(value: string) {
2453    super(value);
2454  }
2455  static identity: Symbol = Symbol('id');
2456  applyPeer(node: KNode, reset: boolean): void {
2457    if (reset) {
2458      getUINativeModule().common.resetId(node);
2459    } else {
2460      getUINativeModule().common.setId(node, this.value);
2461    }
2462  }
2463}
2464
2465class KeyModifier extends ModifierWithKey<string> {
2466  constructor(value: string) {
2467    super(value);
2468  }
2469  static identity: Symbol = Symbol('key');
2470  applyPeer(node: KNode, reset: boolean): void {
2471    if (reset) {
2472      getUINativeModule().common.resetKey(node);
2473    } else {
2474      getUINativeModule().common.setKey(node, this.value);
2475    }
2476  }
2477}
2478
2479class RestoreIdModifier extends ModifierWithKey<number> {
2480  constructor(value: number) {
2481    super(value);
2482  }
2483  static identity: Symbol = Symbol('restoreId');
2484  applyPeer(node: KNode, reset: boolean): void {
2485    if (reset) {
2486      getUINativeModule().common.resetRestoreId(node);
2487    } else {
2488      getUINativeModule().common.setRestoreId(node, this.value);
2489    }
2490  }
2491}
2492
2493class TabIndexModifier extends ModifierWithKey<number> {
2494  constructor(value: number) {
2495    super(value);
2496  }
2497  static identity: Symbol = Symbol('tabIndex');
2498  applyPeer(node: KNode, reset: boolean): void {
2499    if (reset) {
2500      getUINativeModule().common.resetTabIndex(node);
2501    } else {
2502      getUINativeModule().common.setTabIndex(node, this.value);
2503    }
2504  }
2505}
2506
2507class ObscuredModifier extends ModifierWithKey<Array<ObscuredReasons>> {
2508  constructor(value: Array<ObscuredReasons>) {
2509    super(value);
2510  }
2511  static identity: Symbol = Symbol('obscured');
2512  applyPeer(node: KNode, reset: boolean): void {
2513    if (reset || (!Array.isArray(this.value))) {
2514      getUINativeModule().common.resetObscured(node);
2515    } else {
2516      getUINativeModule().common.setObscured(node, this.value);
2517    }
2518  }
2519  checkObjectDiff(): boolean {
2520    return !(Array.isArray(this.value) && Array.isArray(this.stageValue) &&
2521      this.value.length === this.stageValue.length &&
2522      this.value.every((value, index) => value === this.stageValue[index]));
2523  }
2524}
2525
2526class ForegroundEffectModifier extends ModifierWithKey<ForegroundEffectOptions> {
2527  constructor(value: ForegroundEffectOptions) {
2528    super(value);
2529  }
2530  static identity: Symbol = Symbol('foregroundEffect');
2531  applyPeer(node: KNode, reset: boolean): void {
2532    if (reset) {
2533      getUINativeModule().common.resetForegroundEffect(node);
2534    } else {
2535      getUINativeModule().common.setForegroundEffect(node, this.value.radius);
2536    }
2537  }
2538
2539  checkObjectDiff(): boolean {
2540    return !(this.value.radius === this.stageValue.radius);
2541  }
2542}
2543
2544class BackgroundEffectModifier extends ModifierWithKey<BackgroundEffectOptions> {
2545  constructor(options: BackgroundEffectOptions) {
2546    super(options);
2547  }
2548  static identity: Symbol = Symbol('backgroundEffect');
2549  applyPeer(node: KNode, reset: boolean): void {
2550    if (reset) {
2551      getUINativeModule().common.resetBackgroundEffect(node);
2552    } else {
2553      getUINativeModule().common.setBackgroundEffect(node, this.value.radius, this.value.saturation,
2554        this.value.brightness, this.value.color, this.value.adaptiveColor, this.value.blurOptions?.grayscale);
2555    }
2556  }
2557
2558  checkObjectDiff(): boolean {
2559    return !(this.value.radius === this.stageValue.radius && this.value.saturation === this.stageValue.saturation &&
2560      this.value.brightness === this.stageValue.brightness &&
2561      isBaseOrResourceEqual(this.stageValue.color, this.value.color) &&
2562      this.value.adaptiveColor === this.stageValue.adaptiveColor &&
2563      this.value.blurOptions?.grayscale === this.stageValue.blurOptions?.grayscale);
2564  }
2565}
2566
2567class BackgroundBrightnessModifier extends ModifierWithKey<BackgroundBrightnessOptions> {
2568  constructor(params: BackgroundBrightnessOptions) {
2569    super(params);
2570  }
2571  static identity: Symbol = Symbol('backgroundBrightness');
2572  applyPeer(node: KNode, reset: boolean): void {
2573    if (reset) {
2574      getUINativeModule().common.resetBackgroundBrightness(node);
2575    } else {
2576      getUINativeModule().common.setBackgroundBrightness(node, this.value.rate, this.value.lightUpDegree);
2577    }
2578  }
2579
2580  checkObjectDiff(): boolean {
2581    return !(this.value.rate === this.stageValue.rate && this.value.lightUpDegree === this.stageValue.lightUpDegree);
2582  }
2583}
2584
2585class BackgroundBrightnessInternalModifier extends ModifierWithKey<BrightnessOptions> {
2586  constructor(params: BrightnessOptions) {
2587    super(params);
2588  }
2589  static identity: Symbol = Symbol('backgroundBrightnessInternal');
2590  applyPeer(node: KNode, reset: boolean): void {
2591    if (reset) {
2592      getUINativeModule().common.resetBackgroundBrightnessInternal(node);
2593    } else {
2594      getUINativeModule().common.setBackgroundBrightnessInternal(node, this.value.rate, this.value.lightUpDegree, this.value.cubicCoeff,
2595        this.value.quadCoeff, this.value.saturation, this.value.posRGB, this.value.negRGB, this.value.fraction);
2596    }
2597  }
2598
2599  checkObjectDiff(): boolean {
2600    return !(this.value.rate === this.stageValue.rate && this.value.lightUpDegree === this.stageValue.lightUpDegree &&
2601      this.value.cubicCoeff === this.stageValue.cubicCoeff && this.value.quadCoeff === this.stageValue.quadCoeff &&
2602      this.value.saturation === this.stageValue.saturation && this.value.posRGB === this.stageValue.posRGB &&
2603      this.value.negRGB === this.stageValue.negRGB && this.value.fraction === this.stageValue.fraction);
2604  }
2605}
2606
2607class ForegroundBrightnessModifier extends ModifierWithKey<BrightnessOptions> {
2608  constructor(params: BrightnessOptions) {
2609    super(params);
2610  }
2611  static identity: Symbol = Symbol('foregroundBrightness');
2612  applyPeer(node: KNode, reset: boolean): void {
2613    if (reset) {
2614      getUINativeModule().common.resetForegroundBrightness(node);
2615    } else {
2616      getUINativeModule().common.setForegroundBrightness(node, this.value.rate, this.value.lightUpDegree, this.value.cubicCoeff,
2617        this.value.quadCoeff, this.value.saturation, this.value.posRGB, this.value.negRGB, this.value.fraction);
2618    }
2619  }
2620
2621  checkObjectDiff(): boolean {
2622    return !(this.value.rate === this.stageValue.rate && this.value.lightUpDegree === this.stageValue.lightUpDegree &&
2623      this.value.cubicCoeff === this.stageValue.cubicCoeff && this.value.quadCoeff === this.stageValue.quadCoeff &&
2624      this.value.saturation === this.stageValue.saturation && this.value.posRGB === this.stageValue.posRGB &&
2625      this.value.negRGB === this.stageValue.negRGB && this.value.fraction === this.stageValue.fraction);
2626  }
2627}
2628
2629class DragPreviewOptionsModifier extends ModifierWithKey<ArkDragPreviewOptions> {
2630  constructor(value: ArkDragPreviewOptions) {
2631    super(value);
2632  }
2633  static identity: Symbol = Symbol('dragPreviewOptions');
2634  applyPeer(node: KNode, reset: boolean): void {
2635    if (reset) {
2636      getUINativeModule().common.resetDragPreviewOptions(node);
2637    } else {
2638      getUINativeModule().common.setDragPreviewOptions(node, this.value.mode, this.value.numberBadge,
2639        this.value.isMultiSelectionEnabled, this.value.defaultAnimationBeforeLifting);
2640    }
2641  }
2642
2643  checkObjectDiff(): boolean {
2644    return !(this.value.mode === this.stageValue.mode &&
2645      this.value.numberBadge === this.stageValue.numberBadge &&
2646      this.value.isMultiSelectionEnabled === this.stageValue.isMultiSelectionEnabled &&
2647      this.value.defaultAnimationBeforeLifting === this.stageValue.defaultAnimationBeforeLifting);
2648  }
2649}
2650
2651class DragPreviewModifier extends ModifierWithKey<ArkDragPreview> {
2652  constructor(value: ArkDragPreview) {
2653    super(value);
2654  }
2655  static identity: Symbol = Symbol('dragPreview');
2656  applyPeer(node: KNode, reset: boolean): void {
2657    if (reset) {
2658      getUINativeModule().common.resetDragPreview(node);
2659    } else {
2660      getUINativeModule().common.setDragPreview(node, this.value.inspetorId);
2661    }
2662  }
2663
2664  checkObjectDiff(): boolean {
2665    return this.value.inspetorId !== this.stageValue.inspetorId;
2666  }
2667}
2668
2669class MouseResponseRegionModifier extends ModifierWithKey<Array<Rectangle> | Rectangle> {
2670  constructor(value: Array<Rectangle> | Rectangle) {
2671    super(value);
2672  }
2673  static identity = Symbol('mouseResponseRegion');
2674  applyPeer(node: KNode, reset: boolean): void {
2675    if (reset) {
2676      getUINativeModule().common.resetMouseResponseRegion(node);
2677    } else {
2678      let responseRegion: (number | string | Resource)[] = [];
2679      if (Array.isArray(this.value)) {
2680        for (let i = 0; i < this.value.length; i++) {
2681          responseRegion.push(this.value[i].x ?? 'PLACEHOLDER');
2682          responseRegion.push(this.value[i].y ?? 'PLACEHOLDER');
2683          responseRegion.push(this.value[i].width ?? 'PLACEHOLDER');
2684          responseRegion.push(this.value[i].height ?? 'PLACEHOLDER');
2685        }
2686      } else {
2687        responseRegion.push(this.value.x ?? 'PLACEHOLDER');
2688        responseRegion.push(this.value.y ?? 'PLACEHOLDER');
2689        responseRegion.push(this.value.width ?? 'PLACEHOLDER');
2690        responseRegion.push(this.value.height ?? 'PLACEHOLDER');
2691      }
2692      getUINativeModule().common.setMouseResponseRegion(node, responseRegion, responseRegion.length);
2693    }
2694  }
2695
2696  checkObjectDiff(): boolean {
2697    if (Array.isArray(this.value) && Array.isArray(this.stageValue)) {
2698      if (this.value.length !== this.stageValue.length) {
2699        return true;
2700      } else {
2701        for (let i = 0; i < this.value.length; i++) {
2702          if (!(isBaseOrResourceEqual(this.stageValue[i].x, this.value[i].x) &&
2703            isBaseOrResourceEqual(this.stageValue[i].y, this.value[i].y) &&
2704            isBaseOrResourceEqual(this.stageValue[i].width, this.value[i].width) &&
2705            isBaseOrResourceEqual(this.stageValue[i].height, this.value[i].height)
2706          )) {
2707            return true;
2708          }
2709        }
2710        return false;
2711      }
2712    } else if (!Array.isArray(this.value) && !Array.isArray(this.stageValue)) {
2713      return (!(isBaseOrResourceEqual(this.stageValue.x, this.value.x) &&
2714        isBaseOrResourceEqual(this.stageValue.y, this.value.y) &&
2715        isBaseOrResourceEqual(this.stageValue.width, this.value.width) &&
2716        isBaseOrResourceEqual(this.stageValue.height, this.value.height)
2717      ));
2718    } else {
2719      return false;
2720    }
2721  }
2722}
2723
2724class ResponseRegionModifier extends ModifierWithKey<Array<Rectangle> | Rectangle> {
2725  constructor(value: Array<Rectangle> | Rectangle) {
2726    super(value);
2727  }
2728  static identity = Symbol('responseRegion');
2729  applyPeer(node: KNode, reset: boolean): void {
2730    if (reset) {
2731      getUINativeModule().common.resetResponseRegion(node);
2732    } else {
2733      let responseRegion: (number | string | Resource)[] = [];
2734      if (Array.isArray(this.value)) {
2735        for (let i = 0; i < this.value.length; i++) {
2736          responseRegion.push(this.value[i].x ?? 'PLACEHOLDER');
2737          responseRegion.push(this.value[i].y ?? 'PLACEHOLDER');
2738          responseRegion.push(this.value[i].width ?? 'PLACEHOLDER');
2739          responseRegion.push(this.value[i].height ?? 'PLACEHOLDER');
2740        }
2741      } else {
2742        responseRegion.push(this.value.x ?? 'PLACEHOLDER');
2743        responseRegion.push(this.value.y ?? 'PLACEHOLDER');
2744        responseRegion.push(this.value.width ?? 'PLACEHOLDER');
2745        responseRegion.push(this.value.height ?? 'PLACEHOLDER');
2746      }
2747      getUINativeModule().common.setResponseRegion(node, responseRegion, responseRegion.length);
2748    }
2749  }
2750
2751  checkObjectDiff(): boolean {
2752    if (Array.isArray(this.value) && Array.isArray(this.stageValue)) {
2753      if (this.value.length !== this.stageValue.length) {
2754        return true;
2755      } else {
2756        for (let i = 0; i < this.value.length; i++) {
2757          if (!(isBaseOrResourceEqual(this.stageValue[i].x, this.value[i].x) &&
2758            isBaseOrResourceEqual(this.stageValue[i].y, this.value[i].y) &&
2759            isBaseOrResourceEqual(this.stageValue[i].width, this.value[i].width) &&
2760            isBaseOrResourceEqual(this.stageValue[i].height, this.value[i].height)
2761          )) {
2762            return true;
2763          }
2764        }
2765        return false;
2766      }
2767    } else if (!Array.isArray(this.value) && !Array.isArray(this.stageValue)) {
2768      return (!(isBaseOrResourceEqual(this.stageValue.x, this.value.x) &&
2769        isBaseOrResourceEqual(this.stageValue.y, this.value.y) &&
2770        isBaseOrResourceEqual(this.stageValue.width, this.value.width) &&
2771        isBaseOrResourceEqual(this.stageValue.height, this.value.height)
2772      ));
2773    } else {
2774      return false;
2775    }
2776  }
2777}
2778class FlexGrowModifier extends ModifierWithKey<number> {
2779  static identity: Symbol = Symbol('flexGrow');
2780  applyPeer(node: KNode, reset: boolean): void {
2781    if (reset) {
2782      getUINativeModule().common.resetFlexGrow(node);
2783    } else {
2784      getUINativeModule().common.setFlexGrow(node, this.value!);
2785    }
2786  }
2787  checkObjectDiff(): boolean {
2788    return this.stageValue !== this.value;
2789  }
2790}
2791
2792class FlexShrinkModifier extends ModifierWithKey<number> {
2793  static identity: Symbol = Symbol('flexShrink');
2794  applyPeer(node: KNode, reset: boolean): void {
2795    if (reset) {
2796      getUINativeModule().common.resetFlexShrink(node);
2797    } else {
2798      getUINativeModule().common.setFlexShrink(node, this.value!);
2799    }
2800  }
2801  checkObjectDiff(): boolean {
2802    return this.stageValue !== this.value;
2803  }
2804}
2805
2806class AspectRatioModifier extends ModifierWithKey<number> {
2807  static identity: Symbol = Symbol('aspectRatio');
2808  applyPeer(node: KNode, reset: boolean): void {
2809    if (reset) {
2810      getUINativeModule().common.resetAspectRatio(node);
2811    } else {
2812      getUINativeModule().common.setAspectRatio(node, this.value!);
2813    }
2814  }
2815  checkObjectDiff(): boolean {
2816    return this.stageValue !== this.value;
2817  }
2818}
2819
2820class ConstraintSizeModifier extends ModifierWithKey<ConstraintSizeOptions> {
2821  static identity: Symbol = Symbol('constraintSize');
2822  applyPeer(node: KNode, reset: boolean): void {
2823    if (reset) {
2824      getUINativeModule().common.resetConstraintSize(node);
2825    } else {
2826      getUINativeModule().common.setConstraintSize(node, this.value.minWidth,
2827        this.value.maxWidth, this.value.minHeight, this.value.maxHeight);
2828    }
2829  }
2830
2831  checkObjectDiff(): boolean {
2832    return !isBaseOrResourceEqual(this.stageValue.minWidth, this.value.minWidth) ||
2833      !isBaseOrResourceEqual(this.stageValue.maxWidth, this.value.maxWidth) ||
2834      !isBaseOrResourceEqual(this.stageValue.minHeight, this.value.minHeight) ||
2835      !isBaseOrResourceEqual(this.stageValue.maxHeight, this.value.maxHeight);
2836  }
2837}
2838
2839class FlexBasisModifier extends ModifierWithKey<number | string> {
2840  static identity: Symbol = Symbol('flexBasis');
2841  applyPeer(node: KNode, reset: boolean): void {
2842    if (reset) {
2843      getUINativeModule().common.resetFlexBasis(node);
2844    } else {
2845      getUINativeModule().common.setFlexBasis(node, this.value!);
2846    }
2847  }
2848  checkObjectDiff(): boolean {
2849    return this.stageValue !== this.value;
2850  }
2851}
2852
2853class LayoutWeightModifier extends ModifierWithKey<number | string> {
2854  constructor(value: number | string) {
2855    super(value);
2856  }
2857  static identity: Symbol = Symbol('layoutWeight');
2858  applyPeer(node: KNode, reset: boolean): void {
2859    if (reset) {
2860      getUINativeModule().common.resetLayoutWeight(node);
2861    } else {
2862      getUINativeModule().common.setLayoutWeight(node, this.value!);
2863    }
2864  }
2865}
2866
2867class EnabledModifier extends ModifierWithKey<boolean> {
2868  constructor(value: boolean) {
2869    super(value);
2870  }
2871  static identity: Symbol = Symbol('enabled');
2872  applyPeer(node: KNode, reset: boolean): void {
2873    if (reset) {
2874      getUINativeModule().common.resetEnabled(node);
2875
2876    } else {
2877      getUINativeModule().common.setEnabled(node, this.value);
2878    }
2879  }
2880}
2881
2882class UseShadowBatchingModifier extends ModifierWithKey<boolean> {
2883  constructor(value: boolean) {
2884    super(value);
2885  }
2886  static identity: Symbol = Symbol('useShadowBatching');
2887  applyPeer(node: KNode, reset: boolean): void {
2888    if (reset) {
2889      getUINativeModule().common.resetUseShadowBatching(node);
2890
2891    } else {
2892      getUINativeModule().common.setUseShadowBatching(node, this.value);
2893    }
2894  }
2895}
2896
2897class MonopolizeEventsModifier extends ModifierWithKey<boolean> {
2898  constructor(value: boolean) {
2899    super(value);
2900  }
2901  static identity: Symbol = Symbol('monopolizeEvents');
2902  applyPeer(node: KNode, reset: boolean): void {
2903    if (reset) {
2904      getUINativeModule().common.resetMonopolizeEvents(node);
2905
2906    } else {
2907      getUINativeModule().common.setMonopolizeEvents(node, this.value);
2908    }
2909  }
2910}
2911
2912class DraggableModifier extends ModifierWithKey<boolean> {
2913  constructor(value: boolean) {
2914    super(value);
2915  }
2916  static identity: Symbol = Symbol('draggable');
2917  applyPeer(node: KNode, reset: boolean): void {
2918    if (reset) {
2919      getUINativeModule().common.resetDraggable(node);
2920    } else {
2921      getUINativeModule().common.setDraggable(node, this.value);
2922    }
2923  }
2924}
2925
2926class AccessibilityGroupModifier extends ModifierWithKey<boolean> {
2927  constructor(value: boolean) {
2928    super(value);
2929  }
2930  static identity: Symbol = Symbol('accessibilityGroup');
2931  applyPeer(node: KNode, reset: boolean): void {
2932    if (reset) {
2933      getUINativeModule().common.resetAccessibilityGroup(node);
2934    } else {
2935      getUINativeModule().common.setAccessibilityGroup(node, this.value);
2936    }
2937  }
2938}
2939
2940class HoverEffectModifier extends ModifierWithKey<HoverEffect> {
2941  constructor(value: HoverEffect) {
2942    super(value);
2943  }
2944  static identity: Symbol = Symbol('hoverEffect');
2945  applyPeer(node: KNode, reset: boolean): void {
2946    if (reset) {
2947      getUINativeModule().common.resetHoverEffect(node);
2948    } else {
2949      getUINativeModule().common.setHoverEffect(node, this.value);
2950    }
2951  }
2952}
2953
2954class ClickEffectModifier extends ModifierWithKey<ClickEffect | null> {
2955  constructor(value: ClickEffect | null) {
2956    super(value);
2957  }
2958  static identity: Symbol = Symbol('clickEffect');
2959  applyPeer(node: KNode, reset: boolean): void {
2960    if (reset || !this.value) {
2961      getUINativeModule().common.resetClickEffect(node);
2962    } else {
2963      getUINativeModule().common.setClickEffect(node, this.value.level, this.value.scale);
2964    }
2965  }
2966  checkObjectDiff(): boolean {
2967    return !((this.value.level === this.stageValue.level) && (this.value.scale === this.stageValue.scale));
2968  }
2969}
2970
2971class KeyBoardShortCutModifier extends ModifierWithKey<ArkKeyBoardShortCut> {
2972  constructor(value: ArkKeyBoardShortCut) {
2973    super(value);
2974  }
2975  static identity: Symbol = Symbol('keyboardShortcut');
2976  applyPeer(node: KNode, reset: boolean): void {
2977    if (reset) {
2978      getUINativeModule().common.resetKeyBoardShortCut(node);
2979    } else {
2980      getUINativeModule().common.setKeyBoardShortCut(node, this.value.value, this.value.keys);
2981    }
2982  }
2983  checkObjectDiff(): boolean {
2984    return !this.value.isEqual(this.stageValue);
2985  }
2986}
2987
2988class CustomPropertyModifier extends ModifierWithKey<ArkCustomProperty> {
2989  constructor(value: ArkCustomProperty) {
2990    super(value);
2991  }
2992  static identity: Symbol = Symbol('customProperty');
2993  applyPeer(node: KNode, reset: boolean): void {
2994    const nodeId = getUINativeModule().frameNode.getIdByNodePtr(node);
2995    if (reset) {
2996      __removeCustomProperty__(nodeId, this.value.key);
2997    } else {
2998      __setValidCustomProperty__(nodeId, this.value.key, this.value.value);
2999    }
3000  }
3001}
3002
3003class TransitionModifier extends ModifierWithKey<object> {
3004  constructor(value: object) {
3005    super(value);
3006  }
3007  static identity: Symbol = Symbol('transition');
3008  applyPeer(node: KNode, reset: boolean): void {
3009    if (reset) {
3010      getUINativeModule().common.resetTransition(node);
3011    } else {
3012      getUINativeModule().common.setTransition(node, this.value);
3013    }
3014  }
3015}
3016
3017class SharedTransitionModifier extends ModifierWithKey<ArkSharedTransition> {
3018  constructor(value: ArkSharedTransition) {
3019    super(value);
3020  }
3021  static identity: Symbol = Symbol('sharedTransition');
3022  applyPeer(node: KNode, reset: boolean): void {
3023    if (reset) {
3024      getUINativeModule().common.resetSharedTransition(node);
3025    } else {
3026      getUINativeModule().common.setSharedTransition(node, this.value.id, this.value.options);
3027    }
3028  }
3029}
3030
3031class SystemBarEffectModifier extends ModifierWithKey<null> {
3032  constructor(value: null) {
3033    super(value);
3034  }
3035  static identity: Symbol = Symbol('systemBarEffect');
3036  applyPeer(node: KNode, reset: boolean): void {
3037    getUINativeModule().common.setSystemBarEffect(node, true);
3038  }
3039}
3040class PixelRoundModifier extends ModifierWithKey<PixelRoundPolicy> {
3041  constructor(value: PixelRoundPolicy) {
3042    super(value);
3043  }
3044  static identity: Symbol = Symbol('pixelRound');
3045  applyPeer(node: KNode, reset: boolean): void {
3046    if (reset) {
3047      getUINativeModule().common.resetPixelRound(node);
3048    } else {
3049      let start: PixelRoundCalcPolicy;
3050      let top: PixelRoundCalcPolicy;
3051      let end: PixelRoundCalcPolicy;
3052      let bottom: PixelRoundCalcPolicy;
3053      if (isObject(this.value)) {
3054        start = (this.value as PixelRoundCalcPolicy)?.start;
3055        top = (this.value as PixelRoundCalcPolicy)?.top;
3056        end = (this.value as PixelRoundCalcPolicy)?.end;
3057        bottom = (this.value as PixelRoundCalcPolicy)?.bottom;
3058      }
3059      getUINativeModule().common.setPixelRound(node, start, top, end, bottom);
3060    }
3061  }
3062  checkObjectDiff(): boolean {
3063    return !(this.stageValue.start === this.value.start &&
3064      this.stageValue.end === this.value.end &&
3065      this.stageValue.top === this.value.top &&
3066      this.stageValue.bottom === this.value.bottom);
3067  }
3068}
3069
3070class FocusScopeIdModifier extends ModifierWithKey<ArkFocusScopeId> {
3071  constructor(value: ArkFocusScopeId) {
3072    super(value);
3073  }
3074  static identity: Symbol = Symbol('focusScopeId');
3075  applyPeer(node: KNode, reset: boolean): void {
3076    if (reset) {
3077      getUINativeModule().common.resetFocusScopeId(node);
3078    } else {
3079      getUINativeModule().common.setFocusScopeId(node, this.value.id, this.value.isGroup);
3080    }
3081  }
3082}
3083
3084class FocusScopePriorityModifier extends ModifierWithKey<ArkFocusScopePriority> {
3085  constructor(value: ArkFocusScopePriority) {
3086    super(value);
3087  }
3088  static identity: Symbol = Symbol('focusScopePriority');
3089  applyPeer(node: KNode, reset: boolean): void {
3090    if (reset) {
3091      getUINativeModule().common.resetFocusScopePriority(node);
3092    } else {
3093      getUINativeModule().common.setFocusScopePriority(node, this.value.scopeId, this.value.priority);
3094    }
3095  }
3096}
3097
3098class FocusBoxModifier extends ModifierWithKey<FocusBoxStyle> {
3099  constructor(value: FocusBoxStyle) {
3100    super(value);
3101  }
3102  static identity: Symbol = Symbol('focusBox');
3103  applyPeer(node: KNode, reset: boolean): void {
3104    if (reset) {
3105      getUINativeModule().common.resetFocusBox(node);
3106    } else {
3107      getUINativeModule().common.setFocusBox(node, this.value?.margin,
3108        this.value?.strokeWidth, this.value?.strokeColor);
3109    }
3110  }
3111}
3112
3113const JSCallbackInfoType = { STRING: 0, NUMBER: 1, OBJECT: 2, BOOLEAN: 3, FUNCTION: 4 };
3114type basicType = string | number | bigint | boolean | symbol | undefined | object | null;
3115const isString = (val: basicType): boolean => typeof val === 'string';
3116const isNumber = (val: basicType): boolean => typeof val === 'number';
3117const isBigint = (val: basicType): boolean => typeof val === 'bigint';
3118const isBoolean = (val: basicType): boolean => typeof val === 'boolean';
3119const isSymbol = (val: basicType): boolean => typeof val === 'symbol';
3120const isUndefined = (val: basicType): boolean => typeof val === 'undefined';
3121const isObject = (val: basicType): boolean => typeof val === 'object';
3122const isFunction = (val: basicType): boolean => typeof val === 'function';
3123const isLengthType = (val: any): boolean => typeof val === 'string' || typeof val === 'number';
3124function parseWithDefaultNumber(val, defaultValue) {
3125  if (isNumber(val)) {
3126    return val;
3127  }
3128  else { return defaultValue; }
3129}
3130function modifierWithKey<T extends number | string | boolean | object, M extends ModifierWithKey<T>>(
3131  modifiers: Map<Symbol, AttributeModifierWithKey>,
3132  identity: Symbol,
3133  modifierClass: new (value: T) => M,
3134  value: T
3135) {
3136  if (typeof (modifiers as ObservedMap).isFrameNode === 'function' && (modifiers as ObservedMap).isFrameNode()) {
3137    if (!(modifierClass as any).instance) {
3138      (modifierClass as any).instance = new modifierClass(value);
3139    } else {
3140      (modifierClass as any).instance.stageValue = value;
3141    }
3142    modifiers.set(identity, (modifierClass as any).instance);
3143    return;
3144  }
3145  const item = modifiers.get(identity);
3146  if (item) {
3147    item.stageValue = value;
3148    modifiers.set(identity, item);
3149  } else {
3150    modifiers.set(identity, new modifierClass(value));
3151  }
3152}
3153
3154declare class __JSScopeUtil__ {
3155  static syncInstanceId(instanceId: number): void;
3156  static restoreInstanceId(): void;
3157}
3158
3159class ArkComponent implements CommonMethod<CommonAttribute> {
3160  _modifiersWithKeys: Map<Symbol, AttributeModifierWithKey>;
3161  _changed: boolean;
3162  nativePtr: KNode;
3163  _weakPtr: JsPointerClass;
3164  _classType: ModifierType | undefined;
3165  _nativePtrChanged: boolean;
3166  _gestureEvent: UIGestureEvent;
3167  _instanceId: number;
3168
3169  constructor(nativePtr: KNode, classType?: ModifierType) {
3170    this._modifiersWithKeys = new Map();
3171    this.nativePtr = nativePtr;
3172    this._changed = false;
3173    this._classType = classType;
3174    if (classType === ModifierType.FRAME_NODE) {
3175      this._instanceId = -1;
3176      this._modifiersWithKeys = new ObservedMap();
3177      (this._modifiersWithKeys as ObservedMap).setOnChange((key, value) => {
3178        if (this.nativePtr === undefined) {
3179          return;
3180        }
3181        if (this._instanceId !== -1) {
3182          __JSScopeUtil__.syncInstanceId(this._instanceId);
3183        }
3184        value.applyStageImmediately(this.nativePtr, this);
3185        getUINativeModule().frameNode.propertyUpdate(this.nativePtr);
3186        if (this._instanceId !== -1) {
3187          __JSScopeUtil__.restoreInstanceId();
3188        }
3189      });
3190      (this._modifiersWithKeys as ObservedMap).setFrameNode(true);
3191    } else if (classType === ModifierType.EXPOSE_MODIFIER || classType === ModifierType.STATE) {
3192      this._modifiersWithKeys = new ObservedMap();
3193      this._weakPtr = getUINativeModule().nativeUtils.createNativeWeakRef(nativePtr);
3194    } else {
3195      this._modifiersWithKeys = new Map();
3196      this._weakPtr = getUINativeModule().nativeUtils.createNativeWeakRef(nativePtr);
3197    }
3198    this._nativePtrChanged = false;
3199  }
3200
3201  setNodePtr(nodePtr: KNode) {
3202    this.nativePtr = nodePtr;
3203  }
3204
3205  setInstanceId(instanceId: number): void {
3206    this._instanceId = instanceId;
3207  }
3208
3209  getOrCreateGestureEvent() {
3210    if (this._gestureEvent !== null) {
3211      this._gestureEvent = new UIGestureEvent();
3212      this._gestureEvent.setNodePtr(this.nativePtr);
3213      this._gestureEvent.setWeakNodePtr(this._weakPtr);
3214    }
3215    return this._gestureEvent;
3216  }
3217
3218  cleanStageValue(): void {
3219    if (!this._modifiersWithKeys) {
3220      return;
3221    }
3222    this._modifiersWithKeys.forEach((value, key) => {
3223        value.stageValue = undefined;
3224    });
3225  }
3226
3227  applyStateUpdatePtr(instance: ArkComponent): void {
3228    if (this.nativePtr !== instance.nativePtr) {
3229      this.nativePtr = instance.nativePtr;
3230      this._nativePtrChanged = true;
3231      if (instance._weakPtr) {
3232        this._weakPtr = instance._weakPtr;
3233      } else {
3234        this._weakPtr = getUINativeModule().nativeUtils.createNativeWeakRef(this.nativePtr);
3235      }
3236    }
3237  }
3238
3239  applyModifierPatch(): void {
3240    let expiringItemsWithKeys = [];
3241    this._modifiersWithKeys.forEach((value, key) => {
3242      if (value.applyStage(this.nativePtr, this)) {
3243        expiringItemsWithKeys.push(key);
3244      }
3245    });
3246    expiringItemsWithKeys.forEach(key => {
3247      this._modifiersWithKeys.delete(key);
3248    });
3249  }
3250  onGestureJudgeBegin(callback: (gestureInfo: GestureInfo, event: BaseGestureEvent) => GestureJudgeResult): this {
3251    modifierWithKey(this._modifiersWithKeys, OnGestureJudgeBeginModifier.identity, OnGestureJudgeBeginModifier, callback);
3252    return this;
3253  }
3254  onGestureRecognizerJudgeBegin(callback: (event: BaseGestureEvent, current: GestureRecognizer, recognizers: Array<GestureRecognizer>) => GestureJudgeResult): this {
3255    modifierWithKey(this._modifiersWithKeys, OnGestureRecognizerJudgeBeginModifier.identity, OnGestureRecognizerJudgeBeginModifier, callback);
3256    return this;
3257  }
3258  shouldBuiltInRecognizerParallelWith(callback: (current: GestureRecognizer, others: Array<GestureRecognizer>) => GestureRecognizer): this {
3259    modifierWithKey(this._modifiersWithKeys, ShouldBuiltInRecognizerParallelWithModifier.identity, ShouldBuiltInRecognizerParallelWithModifier, callback);
3260    return this;
3261  }
3262  onSizeChange(callback: (oldValue: SizeOptions, newValue: SizeOptions) => void): this {
3263    modifierWithKey(this._modifiersWithKeys, OnSizeChangeModifier.identity, OnSizeChangeModifier, callback);
3264    return this;
3265  }
3266  outline(value: OutlineOptions): this {
3267    modifierWithKey(this._modifiersWithKeys, OutlineModifier.identity, OutlineModifier, value);
3268    return this;
3269  }
3270  outlineColor(value: ResourceColor | EdgeColors): this {
3271    modifierWithKey(this._modifiersWithKeys, OutlineColorModifier.identity, OutlineColorModifier, value);
3272    return this;
3273  }
3274  outlineRadius(value: Dimension | OutlineRadiuses): this {
3275    modifierWithKey(this._modifiersWithKeys, OutlineRadiusModifier.identity, OutlineRadiusModifier, value);
3276    return this;
3277  }
3278  outlineStyle(value: OutlineStyle | EdgeOutlineStyles): this {
3279    modifierWithKey(this._modifiersWithKeys, OutlineStyleModifier.identity, OutlineStyleModifier, value);
3280    return this;
3281  }
3282  outlineWidth(value: Dimension | EdgeOutlineWidths): this {
3283    modifierWithKey(this._modifiersWithKeys, OutlineWidthModifier.identity, OutlineWidthModifier, value);
3284    return this;
3285  }
3286  width(value: Length): this {
3287    modifierWithKey(this._modifiersWithKeys, WidthModifier.identity, WidthModifier, value);
3288    return this;
3289  }
3290
3291  height(value: Length): this {
3292    modifierWithKey(this._modifiersWithKeys, HeightModifier.identity, HeightModifier, value);
3293    return this;
3294  }
3295
3296  expandSafeArea(types?: Array<SafeAreaType>, edges?: Array<SafeAreaEdge>): this {
3297    let opts = new ArkSafeAreaExpandOpts();
3298    if (types && types.length > 0) {
3299      let safeAreaType: string | number = '';
3300      for (let param of types) {
3301        if (!isNumber(param) || param >= SAFE_AREA_TYPE_LIMIT) {
3302          safeAreaType = undefined;
3303          break;
3304        }
3305        if (safeAreaType) {
3306          safeAreaType += '|';
3307          safeAreaType += param.toString();
3308        } else {
3309          safeAreaType += param.toString();
3310        }
3311      }
3312      opts.type = safeAreaType;
3313    }
3314    if (edges && edges.length > 0) {
3315      let safeAreaEdge: string | number = '';
3316      for (let param of edges) {
3317        if (!isNumber(param) || param >= SAFE_AREA_EDGE_LIMIT) {
3318          safeAreaEdge = undefined;
3319          break;
3320        }
3321        if (safeAreaEdge) {
3322          safeAreaEdge += '|';
3323          safeAreaEdge += param.toString();
3324        } else {
3325          safeAreaEdge += param.toString();
3326        }
3327      }
3328      opts.edges = safeAreaEdge;
3329    }
3330    if (opts.type === undefined && opts.edges === undefined) {
3331      modifierWithKey(this._modifiersWithKeys, ExpandSafeAreaModifier.identity, ExpandSafeAreaModifier, undefined);
3332    } else {
3333      modifierWithKey(this._modifiersWithKeys, ExpandSafeAreaModifier.identity, ExpandSafeAreaModifier, opts);
3334    }
3335    return this;
3336  }
3337
3338  backgroundEffect(options: BackgroundEffectOptions): this {
3339    modifierWithKey(this._modifiersWithKeys, BackgroundEffectModifier.identity,
3340      BackgroundEffectModifier, options);
3341    return this;
3342  }
3343
3344  backgroundBrightness(params: BackgroundBrightnessOptions): this {
3345    modifierWithKey(this._modifiersWithKeys, BackgroundBrightnessModifier.identity,
3346      BackgroundBrightnessModifier, params);
3347    return this;
3348  }
3349
3350  backgroundBrightnessInternal(params: BrightnessOptions): this {
3351    modifierWithKey(this._modifiersWithKeys, BackgroundBrightnessInternalModifier.identity,
3352      BackgroundBrightnessInternalModifier, params);
3353    return this;
3354  }
3355
3356  foregroundBrightness(params: BrightnessOptions): this {
3357    modifierWithKey(this._modifiersWithKeys, ForegroundBrightnessModifier.identity,
3358      ForegroundBrightnessModifier, params);
3359    return this;
3360  }
3361
3362  dragPreviewOptions(value: DragPreviewOptions, options?: DragInteractionOptions): this {
3363    if (isUndefined(value)) {
3364      modifierWithKey(this._modifiersWithKeys, DragPreviewOptionsModifier.identity,
3365        DragPreviewOptionsModifier, undefined);
3366      return this;
3367    }
3368    let arkDragPreviewOptions = new ArkDragPreviewOptions();
3369    if (typeof value === 'object') {
3370      arkDragPreviewOptions.mode = value.mode;
3371      arkDragPreviewOptions.numberBadge = value.numberBadge;
3372    }
3373    if (typeof options === 'object') {
3374      arkDragPreviewOptions.isMultiSelectionEnabled = options.isMultiSelectionEnabled;
3375      arkDragPreviewOptions.defaultAnimationBeforeLifting = options.defaultAnimationBeforeLifting;
3376    }
3377    modifierWithKey(this._modifiersWithKeys, DragPreviewOptionsModifier.identity,
3378      DragPreviewOptionsModifier, arkDragPreviewOptions);
3379    return this;
3380  }
3381
3382  responseRegion(value: Array<Rectangle> | Rectangle): this {
3383    modifierWithKey(this._modifiersWithKeys, ResponseRegionModifier.identity,
3384      ResponseRegionModifier, value);
3385    return this;
3386  }
3387
3388  mouseResponseRegion(value: Array<Rectangle> | Rectangle): this {
3389    modifierWithKey(this._modifiersWithKeys, MouseResponseRegionModifier.identity,
3390      MouseResponseRegionModifier, value);
3391    return this;
3392  }
3393
3394  size(value: SizeOptions): this {
3395    modifierWithKey(this._modifiersWithKeys, SizeModifier.identity, SizeModifier, value);
3396    return this;
3397  }
3398
3399  constraintSize(value: ConstraintSizeOptions): this {
3400    modifierWithKey(this._modifiersWithKeys, ConstraintSizeModifier.identity,
3401      ConstraintSizeModifier, value);
3402    return this;
3403  }
3404
3405  touchable(value: boolean): this {
3406    if (typeof value === 'boolean') {
3407      modifierWithKey(this._modifiersWithKeys, TouchableModifier.identity, TouchableModifier, value);
3408    } else {
3409      modifierWithKey(this._modifiersWithKeys, TouchableModifier.identity, TouchableModifier, undefined);
3410    }
3411    return this;
3412  }
3413
3414  hitTestBehavior(value: HitTestMode): this {
3415    if (value) {
3416      modifierWithKey(this._modifiersWithKeys, HitTestBehaviorModifier.identity, HitTestBehaviorModifier, value);
3417    } else {
3418      modifierWithKey(this._modifiersWithKeys, HitTestBehaviorModifier.identity, HitTestBehaviorModifier, undefined);
3419    }
3420    return this;
3421  }
3422
3423  layoutWeight(value: number | string): this {
3424    if (isNumber(value)) {
3425      modifierWithKey(this._modifiersWithKeys, LayoutWeightModifier.identity, LayoutWeightModifier, value);
3426    } else if (isString(value) && !isNaN(Number(value))) {
3427      modifierWithKey(this._modifiersWithKeys, LayoutWeightModifier.identity, LayoutWeightModifier, parseInt(value.toString()));
3428    } else {
3429      modifierWithKey(this._modifiersWithKeys, LayoutWeightModifier.identity, LayoutWeightModifier, undefined);
3430    }
3431    return this;
3432  }
3433
3434  padding(value: Padding | Length | LocalizedPadding): this {
3435    let arkValue = new ArkPadding();
3436    if (value !== null && value !== undefined) {
3437      if (isLengthType(value) || isResource(value)) {
3438        arkValue.top = <Length>value;
3439        arkValue.right = <Length>value;
3440        arkValue.bottom = <Length>value;
3441        arkValue.left = <Length>value;
3442      } else {
3443        arkValue.top = value.top;
3444        arkValue.bottom = value.bottom;
3445        if (Object.keys(value).indexOf('right') >= 0) {
3446          arkValue.right = value.right;
3447        }
3448        if (Object.keys(value).indexOf('end') >= 0) {
3449          arkValue.right = value.end;
3450        }
3451        if (Object.keys(value).indexOf('left') >= 0) {
3452          arkValue.left = value.left;
3453        }
3454        if (Object.keys(value).indexOf('start') >= 0) {
3455          arkValue.left = value.start;
3456        }
3457      }
3458      modifierWithKey(this._modifiersWithKeys, PaddingModifier.identity, PaddingModifier, arkValue);
3459    } else {
3460      modifierWithKey(this._modifiersWithKeys, PaddingModifier.identity, PaddingModifier, undefined);
3461    }
3462    return this;
3463  }
3464
3465  margin(value: Margin | Length | LocalizedMargin): this {
3466    let arkValue = new ArkPadding();
3467    if (value !== null && value !== undefined) {
3468      if (isLengthType(value) || isResource(value)) {
3469        arkValue.top = <Length>value;
3470        arkValue.right = <Length>value;
3471        arkValue.bottom = <Length>value;
3472        arkValue.left = <Length>value;
3473      } else {
3474        arkValue.top = value.top;
3475        arkValue.bottom = value.bottom;
3476        if (Object.keys(value).indexOf('right') >= 0) {
3477          arkValue.right = value.right;
3478        }
3479        if (Object.keys(value).indexOf('end') >= 0) {
3480          arkValue.right = value.end;
3481        }
3482        if (Object.keys(value).indexOf('left') >= 0) {
3483          arkValue.left = value.left;
3484        }
3485        if (Object.keys(value).indexOf('start') >= 0) {
3486          arkValue.left = value.start;
3487        }
3488      }
3489      modifierWithKey(this._modifiersWithKeys, MarginModifier.identity, MarginModifier, arkValue);
3490    } else {
3491      modifierWithKey(this._modifiersWithKeys, MarginModifier.identity, MarginModifier, undefined);
3492    }
3493    return this;
3494  }
3495
3496  background(builder: CustomBuilder, options?: { align?: Alignment }): this {
3497    throw new Error('Method not implemented.');
3498  }
3499
3500  backgroundColor(value: ResourceColor): this {
3501    modifierWithKey(this._modifiersWithKeys, BackgroundColorModifier.identity, BackgroundColorModifier, value);
3502    return this;
3503  }
3504
3505  backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat): this {
3506    let arkBackgroundImage = new ArkBackgroundImage();
3507    arkBackgroundImage.src = src;
3508    arkBackgroundImage.repeat = repeat;
3509    modifierWithKey(this._modifiersWithKeys, BackgroundImageModifier.identity, BackgroundImageModifier, arkBackgroundImage);
3510    return this;
3511  }
3512
3513  backgroundImageSize(value: SizeOptions | ImageSize): this {
3514    modifierWithKey(this._modifiersWithKeys, BackgroundImageSizeModifier.identity, BackgroundImageSizeModifier, value);
3515    return this;
3516  }
3517
3518  backgroundImagePosition(value: Position | Alignment): this {
3519    modifierWithKey(this._modifiersWithKeys, BackgroundImagePositionModifier.identity, BackgroundImagePositionModifier, value);
3520    return this;
3521  }
3522
3523  backgroundImageResizable(value: ResizableOptions): this {
3524    modifierWithKey(this._modifiersWithKeys, BackgroundImageResizableModifier.identity, BackgroundImageResizableModifier, value);
3525    return this;
3526  }
3527
3528  backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions): this {
3529    if (isUndefined(value)) {
3530      modifierWithKey(this._modifiersWithKeys, BackgroundBlurStyleModifier.identity,
3531        BackgroundBlurStyleModifier, undefined);
3532      return this;
3533    }
3534    let arkBackgroundBlurStyle = new ArkBackgroundBlurStyle();
3535    arkBackgroundBlurStyle.blurStyle = value;
3536    if (typeof options === 'object') {
3537      arkBackgroundBlurStyle.colorMode = options.colorMode;
3538      arkBackgroundBlurStyle.adaptiveColor = options.adaptiveColor;
3539      arkBackgroundBlurStyle.scale = options.scale;
3540      arkBackgroundBlurStyle.blurOptions = options.blurOptions;
3541    }
3542    modifierWithKey(this._modifiersWithKeys, BackgroundBlurStyleModifier.identity,
3543      BackgroundBlurStyleModifier, arkBackgroundBlurStyle);
3544    return this;
3545  }
3546
3547  foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions): this {
3548    if (isUndefined(value)) {
3549      modifierWithKey(this._modifiersWithKeys, ForegroundBlurStyleModifier.identity,
3550        ForegroundBlurStyleModifier, undefined);
3551      return this;
3552    }
3553    let arkForegroundBlurStyle = new ArkForegroundBlurStyle();
3554    arkForegroundBlurStyle.blurStyle = value;
3555    if (typeof options === 'object') {
3556      arkForegroundBlurStyle.colorMode = options.colorMode;
3557      arkForegroundBlurStyle.adaptiveColor = options.adaptiveColor;
3558      arkForegroundBlurStyle.scale = options.scale;
3559      arkForegroundBlurStyle.blurOptions = options.blurOptions;
3560    }
3561    modifierWithKey(this._modifiersWithKeys, ForegroundBlurStyleModifier.identity,
3562      ForegroundBlurStyleModifier, arkForegroundBlurStyle);
3563    return this;
3564  }
3565
3566  opacity(value: number | Resource): this {
3567    modifierWithKey(this._modifiersWithKeys, OpacityModifier.identity, OpacityModifier, value);
3568    return this;
3569  }
3570
3571  border(value: BorderOptions): this {
3572    let arkBorder = new ArkBorder();
3573    if (isUndefined(value)) {
3574      arkBorder = undefined;
3575    }
3576
3577    if (!isUndefined(value?.width) && value?.width !== null) {
3578      if (isNumber(value.width) || isString(value.width) || isResource(value.width)) {
3579        arkBorder.arkWidth.left = value.width;
3580        arkBorder.arkWidth.right = value.width;
3581        arkBorder.arkWidth.top = value.width;
3582        arkBorder.arkWidth.bottom = value.width;
3583      } else {
3584        if ((Object.keys(value.width).indexOf('start') >= 0) ||
3585        (Object.keys(value.width).indexOf('end') >= 0)) {
3586          arkBorder.arkWidth.start = (value.width as LocalizedEdgeWidths).start;
3587          arkBorder.arkWidth.end = (value.width as LocalizedEdgeWidths).end;
3588          arkBorder.arkWidth.top = (value.width as LocalizedEdgeWidths).top;
3589          arkBorder.arkWidth.bottom = (value.width as LocalizedEdgeWidths).bottom;
3590        } else {
3591          arkBorder.arkWidth.left = (value.width as EdgeWidths).left;
3592          arkBorder.arkWidth.right = (value.width as EdgeWidths).right;
3593          arkBorder.arkWidth.top = (value.width as EdgeWidths).top;
3594          arkBorder.arkWidth.bottom = (value.width as EdgeWidths).bottom;
3595        }
3596    }
3597    if (!isUndefined(value?.color) && value?.color !== null) {
3598      if (isNumber(value.color) || isString(value.color) || isResource(value.color)) {
3599        arkBorder.arkColor.leftColor = value.color;
3600        arkBorder.arkColor.rightColor = value.color;
3601        arkBorder.arkColor.topColor = value.color;
3602        arkBorder.arkColor.bottomColor = value.color;
3603      } else {
3604        if ((Object.keys(value.color).indexOf('start') >= 0) ||
3605          (Object.keys(value.color).indexOf('end') >= 0)) {
3606            arkBorder.arkColor.startColor = (value.color as LocalizedEdgeColors).start;
3607            arkBorder.arkColor.endColor = (value.color as LocalizedEdgeColors).end;
3608            arkBorder.arkColor.topColor = (value.color as LocalizedEdgeColors).top;
3609            arkBorder.arkColor.bottomColor = (value.color as LocalizedEdgeColors).bottom;
3610          } else {
3611            arkBorder.arkColor.leftColor = (value.color as EdgeColors).left;
3612            arkBorder.arkColor.rightColor = (value.color as EdgeColors).right;
3613            arkBorder.arkColor.topColor = (value.color as EdgeColors).top;
3614            arkBorder.arkColor.bottomColor = (value.color as EdgeColors).bottom;
3615          }
3616      }
3617    }
3618    if (!isUndefined(value?.radius) && value?.radius !== null) {
3619      if (isNumber(value.radius) || isString(value.radius) || isResource(value.radius)) {
3620        arkBorder.arkRadius.topLeft = value.radius;
3621        arkBorder.arkRadius.topRight = value.radius;
3622        arkBorder.arkRadius.bottomLeft = value.radius;
3623        arkBorder.arkRadius.bottomRight = value.radius;
3624      } else {
3625        if ((Object.keys(this.value).indexOf('topStart') >= 0) ||
3626          (Object.keys(this.value).indexOf('topEnd') >= 0) ||
3627          (Object.keys(this.value).indexOf('bottomStart') >= 0) ||
3628          (Object.keys(this.value).indexOf('bottomEnd') >= 0)) {
3629          arkBorder.arkRadius.topStart = (value.radius as LocalizedBorderRadius)?.topStart;
3630          arkBorder.arkRadius.topEnd = (value.radius as LocalizedBorderRadius)?.topEnd;
3631          arkBorder.arkRadius.bottomStart = (value.radius as LocalizedBorderRadius)?.bottomStart;
3632          arkBorder.arkRadius.bottomEnd = (value.radius as LocalizedBorderRadius)?.bottomEnd;
3633        } else {
3634          arkBorder.arkRadius.topLeft = (value.radius as BorderRadiuses)?.topLeft;
3635          arkBorder.arkRadius.topRight = (value.radius as BorderRadiuses)?.topRight;
3636          arkBorder.arkRadius.bottomLeft = (value.radius as BorderRadiuses)?.bottomLeft;
3637          arkBorder.arkRadius.bottomRight = (value.radius as BorderRadiuses)?.bottomRight;
3638        }
3639    }
3640    if (!isUndefined(value?.style) && value?.style !== null) {
3641      let arkBorderStyle = new ArkBorderStyle();
3642      if (arkBorderStyle.parseBorderStyle(value.style)) {
3643        if (!isUndefined(arkBorderStyle.style)) {
3644          arkBorder.arkStyle.top = arkBorderStyle.style;
3645          arkBorder.arkStyle.left = arkBorderStyle.style;
3646          arkBorder.arkStyle.bottom = arkBorderStyle.style;
3647          arkBorder.arkStyle.right = arkBorderStyle.style;
3648        } else {
3649          arkBorder.arkStyle.top = arkBorderStyle.top;
3650          arkBorder.arkStyle.left = arkBorderStyle.left;
3651          arkBorder.arkStyle.bottom = arkBorderStyle.bottom;
3652          arkBorder.arkStyle.right = arkBorderStyle.right;
3653        }
3654      }
3655    }
3656    if (!isUndefined(value?.dashGap) && value?.dashGap !== null) {
3657      if (isNumber(value.dashGap) || isString(value.dashGap) || isResource(value.dashGap) ||
3658        isObject(value.dashGap) && isNumber(value.dashGap.value)) {
3659        arkBorder.arkDashGap.left = value.dashGap;
3660        arkBorder.arkDashGap.right = value.dashGap;
3661        arkBorder.arkDashGap.top = value.dashGap;
3662        arkBorder.arkDashGap.bottom = value.dashGap;
3663      } else {
3664        arkBorder.arkDashGap.left = (value.dashGap as EdgeWidths).left;
3665        arkBorder.arkDashGap.right = (value.dashGap as EdgeWidths).right;
3666        arkBorder.arkDashGap.top = (value.dashGap as EdgeWidths).top;
3667        arkBorder.arkDashGap.bottom = (value.dashGap as EdgeWidths).bottom;
3668      }
3669    }
3670    if (!isUndefined(value?.dashWidth) && value?.dashWidth !== null) {
3671      if (isNumber(value.dashWidth) || isString(value.dashWidth) || isResource(value.dashWidth) ||
3672        isObject(value.dashWidth) && isNumber(value.dashWidth.value)) {
3673        arkBorder.arkDashWidth.left = value.dashWidth;
3674        arkBorder.arkDashWidth.right = value.dashWidth;
3675        arkBorder.arkDashWidth.top = value.dashWidth;
3676        arkBorder.arkDashWidth.bottom = value.dashWidth;
3677      } else {
3678        arkBorder.arkDashWidth.left = (value.dashWidth as EdgeWidths).left;
3679        arkBorder.arkDashWidth.right = (value.dashWidth as EdgeWidths).right;
3680        arkBorder.arkDashWidth.top = (value.dashWidth as EdgeWidths).top;
3681        arkBorder.arkDashWidth.bottom = (value.dashWidth as EdgeWidths).bottom;
3682      }
3683    }
3684    modifierWithKey(this._modifiersWithKeys, BorderModifier.identity, BorderModifier, arkBorder);
3685    return this;
3686  }
3687
3688  borderStyle(value: BorderStyle | EdgeStyles): this {
3689    modifierWithKey(this._modifiersWithKeys, BorderStyleModifier.identity, BorderStyleModifier, value);
3690    return this;
3691  }
3692
3693  borderWidth(value: Length | EdgeWidths): this {
3694    modifierWithKey(this._modifiersWithKeys, BorderWidthModifier.identity, BorderWidthModifier, value);
3695    return this;
3696  }
3697
3698  borderColor(value: ResourceColor | EdgeColors): this {
3699    modifierWithKey(this._modifiersWithKeys, BorderColorModifier.identity, BorderColorModifier, value);
3700    return this;
3701  }
3702
3703  borderRadius(value: Length | BorderRadiuses): this {
3704    modifierWithKey(this._modifiersWithKeys, BorderRadiusModifier.identity, BorderRadiusModifier, value);
3705    return this;
3706  }
3707
3708
3709  borderImage(value: BorderImageOption): this {
3710    modifierWithKey(this._modifiersWithKeys, BorderImageModifier.identity, BorderImageModifier, value);
3711    return this;
3712  }
3713
3714  foregroundColor(value: ResourceColor | ColoringStrategy): this {
3715    modifierWithKey(this._modifiersWithKeys, ForegroundColorModifier.identity, ForegroundColorModifier, value);
3716    return this;
3717  }
3718
3719  onClick(event: (event?: ClickEvent) => void): this {
3720    modifierWithKey(this._modifiersWithKeys, OnClickModifier.identity, OnClickModifier, event);
3721    return this;
3722  }
3723
3724  onHover(event: (isHover?: boolean, event?: HoverEvent) => void): this {
3725    modifierWithKey(this._modifiersWithKeys, OnHoverModifier.identity, OnHoverModifier, event);
3726    return this;
3727  }
3728
3729  hoverEffect(value: HoverEffect): this {
3730    modifierWithKey(this._modifiersWithKeys, HoverEffectModifier.identity, HoverEffectModifier, value);
3731    return this;
3732  }
3733
3734  onMouse(event: (event?: MouseEvent) => void): this {
3735    modifierWithKey(this._modifiersWithKeys, OnMouseModifier.identity, OnMouseModifier, event);
3736    return this;
3737  }
3738
3739  onTouch(event: (event?: TouchEvent) => void): this {
3740    modifierWithKey(this._modifiersWithKeys, OnTouchModifier.identity, OnTouchModifier, event);
3741    return this;
3742  }
3743
3744  onKeyEvent(event: (event?: KeyEvent) => void): this {
3745    modifierWithKey(this._modifiersWithKeys, OnKeyEventModifier.identity, OnKeyEventModifier, event);
3746    return this;
3747  }
3748
3749  onKeyPreIme(event: Callback<KeyEvent, boolean>): this {
3750    modifierWithKey(this._modifiersWithKeys, OnKeyPreImeModifier.identity, OnKeyPreImeModifier, event);
3751    return this;
3752  }
3753
3754  focusable(value: boolean): this {
3755    if (typeof value === 'boolean') {
3756      modifierWithKey(this._modifiersWithKeys, FocusableModifier.identity, FocusableModifier, value);
3757    } else {
3758      modifierWithKey(this._modifiersWithKeys, FocusableModifier.identity, FocusableModifier, undefined);
3759    }
3760    return this;
3761  }
3762
3763  onFocus(event: () => void): this {
3764    modifierWithKey(this._modifiersWithKeys, OnFocusModifier.identity, OnFocusModifier, event);
3765    return this;
3766  }
3767
3768  onBlur(event: () => void): this {
3769    modifierWithKey(this._modifiersWithKeys, OnBlurModifier.identity, OnBlurModifier, event);
3770    return this;
3771  }
3772
3773  tabIndex(index: number): this {
3774    if (typeof index !== 'number') {
3775      modifierWithKey(this._modifiersWithKeys, TabIndexModifier.identity, TabIndexModifier, undefined);
3776    } else {
3777      modifierWithKey(this._modifiersWithKeys, TabIndexModifier.identity, TabIndexModifier, index);
3778    }
3779    return this;
3780  }
3781
3782  defaultFocus(value: boolean): this {
3783    if (typeof value === 'boolean') {
3784      modifierWithKey(this._modifiersWithKeys, DefaultFocusModifier.identity, DefaultFocusModifier, value);
3785    } else {
3786      modifierWithKey(this._modifiersWithKeys, DefaultFocusModifier.identity, DefaultFocusModifier, undefined);
3787    }
3788    return this;
3789  }
3790
3791  groupDefaultFocus(value: boolean): this {
3792    if (typeof value === 'boolean') {
3793      modifierWithKey(this._modifiersWithKeys, GroupDefaultFocusModifier.identity, GroupDefaultFocusModifier, value);
3794    } else {
3795      modifierWithKey(this._modifiersWithKeys, GroupDefaultFocusModifier.identity, GroupDefaultFocusModifier, undefined);
3796    }
3797    return this;
3798  }
3799
3800  focusOnTouch(value: boolean): this {
3801    if (typeof value === 'boolean') {
3802      modifierWithKey(this._modifiersWithKeys, FocusOnTouchModifier.identity, FocusOnTouchModifier, value);
3803    } else {
3804      modifierWithKey(this._modifiersWithKeys, FocusOnTouchModifier.identity, FocusOnTouchModifier, undefined);
3805    }
3806    return this;
3807  }
3808
3809  animation(value: AnimateParam): this {
3810    throw new Error('Method not implemented.');
3811  }
3812
3813  transition(value: TransitionOptions | TransitionEffect): this {
3814    modifierWithKey(this._modifiersWithKeys, TransitionModifier.identity, TransitionModifier, value);
3815    return this;
3816  }
3817
3818  gesture(gesture: GestureType, mask?: GestureMask): this {
3819    throw new Error('Method not implemented.');
3820  }
3821
3822  priorityGesture(gesture: GestureType, mask?: GestureMask): this {
3823    throw new Error('Method not implemented.');
3824  }
3825
3826  parallelGesture(gesture: GestureType, mask?: GestureMask): this {
3827    throw new Error('Method not implemented.');
3828  }
3829
3830  blur(value: number, options?: BlurOptions): this {
3831    let blur: ArkBlurOptions = new ArkBlurOptions();
3832    blur.value = value;
3833    blur.options = options;
3834    modifierWithKey(this._modifiersWithKeys, BlurModifier.identity, BlurModifier, blur);
3835    return this;
3836  }
3837
3838  linearGradientBlur(value: number, options: LinearGradientBlurOptions): this {
3839    if (isUndefined(value) || isNull(value) || isUndefined(options) || isNull(options)) {
3840      modifierWithKey(this._modifiersWithKeys, LinearGradientBlurModifier.identity, LinearGradientBlurModifier,
3841        undefined);
3842      return this;
3843    }
3844    let arkLinearGradientBlur = new ArkLinearGradientBlur();
3845    arkLinearGradientBlur.blurRadius = value;
3846    arkLinearGradientBlur.fractionStops = options.fractionStops;
3847    arkLinearGradientBlur.direction = options.direction;
3848    modifierWithKey(this._modifiersWithKeys, LinearGradientBlurModifier.identity, LinearGradientBlurModifier,
3849      arkLinearGradientBlur);
3850    return this;
3851  }
3852
3853  brightness(value: number): this {
3854    if (!isNumber(value)) {
3855      modifierWithKey(this._modifiersWithKeys, BrightnessModifier.identity, BrightnessModifier, undefined);
3856    } else {
3857      modifierWithKey(this._modifiersWithKeys, BrightnessModifier.identity, BrightnessModifier, value);
3858    }
3859    return this;
3860  }
3861
3862  contrast(value: number): this {
3863    if (!isNumber(value)) {
3864      modifierWithKey(this._modifiersWithKeys, ContrastModifier.identity, ContrastModifier, undefined);
3865    } else {
3866      modifierWithKey(this._modifiersWithKeys, ContrastModifier.identity, ContrastModifier, value);
3867    }
3868    return this;
3869  }
3870
3871  grayscale(value: number): this {
3872    if (!isNumber(value)) {
3873      modifierWithKey(this._modifiersWithKeys, GrayscaleModifier.identity, GrayscaleModifier, undefined);
3874    } else {
3875      modifierWithKey(this._modifiersWithKeys, GrayscaleModifier.identity, GrayscaleModifier, value);
3876    }
3877    return this;
3878  }
3879
3880  colorBlend(value: Color | string | Resource): this {
3881    modifierWithKey(this._modifiersWithKeys, ColorBlendModifier.identity, ColorBlendModifier, value);
3882    return this;
3883  }
3884
3885  saturate(value: number): this {
3886    if (!isNumber(value)) {
3887      modifierWithKey(this._modifiersWithKeys, SaturateModifier.identity, SaturateModifier, undefined);
3888    } else {
3889      modifierWithKey(this._modifiersWithKeys, SaturateModifier.identity, SaturateModifier, value);
3890    }
3891    return this;
3892  }
3893
3894  sepia(value: number): this {
3895    if (!isNumber(value)) {
3896      modifierWithKey(this._modifiersWithKeys, SepiaModifier.identity, SepiaModifier, undefined);
3897    } else {
3898      modifierWithKey(this._modifiersWithKeys, SepiaModifier.identity, SepiaModifier, value);
3899    }
3900    return this;
3901  }
3902
3903  invert(value: number | InvertOptions): this {
3904    if (!isUndefined(value)) {
3905      modifierWithKey(this._modifiersWithKeys, InvertModifier.identity, InvertModifier, value);
3906    } else {
3907      modifierWithKey(this._modifiersWithKeys, InvertModifier.identity, InvertModifier, undefined);
3908    }
3909    return this;
3910  }
3911
3912  hueRotate(value: number | string): this {
3913    if (!isNumber(value) && !isString(value)) {
3914      modifierWithKey(this._modifiersWithKeys, HueRotateModifier.identity, HueRotateModifier, undefined);
3915    } else {
3916      modifierWithKey(this._modifiersWithKeys, HueRotateModifier.identity, HueRotateModifier, value);
3917    }
3918    return this;
3919  }
3920
3921  useEffect(value: boolean): this {
3922    modifierWithKey(this._modifiersWithKeys, UseEffectModifier.identity, UseEffectModifier, value);
3923    return this;
3924  }
3925
3926  backdropBlur(value: number, options?: BlurOptions): this {
3927    let blur: ArkBlurOptions = new ArkBlurOptions();
3928    blur.value = value;
3929    blur.options = options;
3930    modifierWithKey(this._modifiersWithKeys, BackdropBlurModifier.identity, BackdropBlurModifier, blur);
3931    return this;
3932  }
3933
3934  renderGroup(value: boolean): this {
3935    modifierWithKey(this._modifiersWithKeys, RenderGroupModifier.identity, RenderGroupModifier, value);
3936    return this;
3937  }
3938
3939  translate(value: TranslateOptions): this {
3940    modifierWithKey(this._modifiersWithKeys, TranslateModifier.identity, TranslateModifier, value);
3941    return this;
3942  }
3943
3944  scale(value: ScaleOptions): this {
3945    modifierWithKey(this._modifiersWithKeys, ScaleModifier.identity, ScaleModifier, value);
3946    return this;
3947  }
3948  gridSpan(value: number): this {
3949    if (isNumber(value)) {
3950      modifierWithKey(this._modifiersWithKeys, GridSpanModifier.identity, GridSpanModifier, value);
3951    } else {
3952      modifierWithKey(this._modifiersWithKeys, GridSpanModifier.identity, GridSpanModifier, undefined);
3953    }
3954    return this;
3955  }
3956
3957  gridOffset(value: number): this {
3958    if (isNumber(value)) {
3959      modifierWithKey(this._modifiersWithKeys, GridOffsetModifier.identity, GridOffsetModifier, value);
3960    } else {
3961      modifierWithKey(this._modifiersWithKeys, GridOffsetModifier.identity, GridOffsetModifier, undefined);
3962    }
3963    return this;
3964  }
3965
3966  rotate(value: RotateOptions): this {
3967    modifierWithKey(this._modifiersWithKeys, RotateModifier.identity, RotateModifier, value);
3968    return this;
3969  }
3970
3971  transform(value: object): this {
3972    modifierWithKey(this._modifiersWithKeys, TransformModifier.identity, TransformModifier, value);
3973    return this;
3974  }
3975
3976  onAppear(event: () => void): this {
3977    modifierWithKey(this._modifiersWithKeys, OnAppearModifier.identity, OnAppearModifier, event);
3978    return this;
3979  }
3980
3981  onDisAppear(event: () => void): this {
3982    modifierWithKey(this._modifiersWithKeys, OnDisappearModifier.identity, OnDisappearModifier, event);
3983    return this;
3984  }
3985
3986  onAttach(event: () => void): this {
3987    modifierWithKey(this._modifiersWithKeys, OnAttachModifier.identity, OnAttachModifier, event);
3988    return this;
3989  }
3990
3991  onDetach(event: () => void): this {
3992    modifierWithKey(this._modifiersWithKeys, OnDetachModifier.identity, OnDetachModifier, event);
3993    return this;
3994  }
3995  onAreaChange(event: (oldValue: Area, newValue: Area) => void): this {
3996    modifierWithKey(this._modifiersWithKeys, OnAreaChangeModifier.identity, OnAreaChangeModifier, event);
3997    return this;
3998  }
3999
4000  visibility(value: Visibility): this {
4001    modifierWithKey(this._modifiersWithKeys, VisibilityModifier.identity, VisibilityModifier, value);
4002    return this;
4003  }
4004
4005  flexGrow(value: number): this {
4006    modifierWithKey(this._modifiersWithKeys, FlexGrowModifier.identity, FlexGrowModifier, value);
4007    return this;
4008  }
4009
4010  flexShrink(value: number): this {
4011    modifierWithKey(this._modifiersWithKeys, FlexShrinkModifier.identity, FlexShrinkModifier, value);
4012    return this;
4013  }
4014
4015  flexBasis(value: number | string): this {
4016    modifierWithKey(this._modifiersWithKeys, FlexBasisModifier.identity, FlexBasisModifier, value);
4017    return this;
4018  }
4019
4020  alignSelf(value: ItemAlign): this {
4021    modifierWithKey(this._modifiersWithKeys, AlignSelfModifier.identity, AlignSelfModifier, value);
4022    return this;
4023  }
4024
4025  displayPriority(value: number): this {
4026    modifierWithKey(this._modifiersWithKeys, DisplayPriorityModifier.identity, DisplayPriorityModifier, value);
4027    return this;
4028  }
4029
4030  zIndex(value: number): this {
4031    if (value !== null) {
4032      let zIndex = 0;
4033      if (typeof (value) === 'number') {
4034        zIndex = value;
4035      }
4036      modifierWithKey(this._modifiersWithKeys, ZIndexModifier.identity, ZIndexModifier, zIndex);
4037    }
4038    return this;
4039  }
4040
4041  sharedTransition(id: string, options?: sharedTransitionOptions): this {
4042    let arkSharedTransition = new ArkSharedTransition();
4043    if (isString(id)) {
4044      arkSharedTransition.id = id;
4045    }
4046    if (typeof options === 'object') {
4047      arkSharedTransition.options = options;
4048    }
4049    modifierWithKey(
4050      this._modifiersWithKeys, SharedTransitionModifier.identity, SharedTransitionModifier, arkSharedTransition);
4051    return this;
4052  }
4053
4054  direction(value: Direction): this {
4055    modifierWithKey(this._modifiersWithKeys, DirectionModifier.identity, DirectionModifier, value);
4056    return this;
4057  }
4058
4059  align(value: Alignment): this {
4060    if (isNumber(value)) {
4061      modifierWithKey(this._modifiersWithKeys, AlignModifier.identity, AlignModifier, value);
4062    } else {
4063      modifierWithKey(this._modifiersWithKeys, AlignModifier.identity, AlignModifier, undefined);
4064    }
4065    return this;
4066  }
4067
4068  position(value: Position | Edges): this {
4069    if (isObject(value)) {
4070      modifierWithKey(this._modifiersWithKeys, PositionModifier.identity, PositionModifier, value);
4071    } else {
4072      modifierWithKey(this._modifiersWithKeys, PositionModifier.identity, PositionModifier, undefined);
4073    }
4074    return this;
4075  }
4076
4077  markAnchor(value: Position): this {
4078    modifierWithKey(this._modifiersWithKeys, MarkAnchorModifier.identity, MarkAnchorModifier, value);
4079    return this;
4080  }
4081
4082  offset(value: Position | Edges): this {
4083    if (isObject(value)) {
4084      modifierWithKey(this._modifiersWithKeys, OffsetModifier.identity, OffsetModifier, value);
4085    } else {
4086      modifierWithKey(this._modifiersWithKeys, OffsetModifier.identity, OffsetModifier, undefined);
4087    }
4088    return this;
4089  }
4090
4091  enabled(value: boolean): this {
4092    if (typeof value === 'boolean') {
4093      modifierWithKey(this._modifiersWithKeys, EnabledModifier.identity, EnabledModifier, value);
4094    } else {
4095      modifierWithKey(this._modifiersWithKeys, EnabledModifier.identity, EnabledModifier, undefined);
4096    }
4097    return this;
4098  }
4099
4100  useShadowBatching(value: boolean): this {
4101    modifierWithKey(this._modifiersWithKeys, UseShadowBatchingModifier.identity, UseShadowBatchingModifier, value);
4102    return this;
4103  }
4104
4105  monopolizeEvents(value: boolean): this {
4106    modifierWithKey(this._modifiersWithKeys, MonopolizeEventsModifier.identity, MonopolizeEventsModifier, value);
4107    return this;
4108  }
4109
4110  useSizeType(value: {
4111    xs?: number | { span: number; offset: number };
4112    sm?: number | { span: number; offset: number };
4113    md?: number | { span: number; offset: number };
4114    lg?: number | { span: number; offset: number };
4115  }): this {
4116    throw new Error('Method not implemented.');
4117  }
4118
4119  alignRules(value: AlignRuleOption): this {
4120    if (!isObject(value) || JSON.stringify(value) === '{}') {
4121      modifierWithKey(this._modifiersWithKeys, AlignRulesModifier.identity, AlignRulesModifier, undefined);
4122      return this;
4123    }
4124    let keys: string[] = ['left', 'middle', 'right', 'top', 'center', 'bottom'];
4125    let arkValue = new ArkAlignRules();
4126    for (let i = 0; i < keys.length; i++) {
4127      let rule = value[keys[i]];
4128      let alignRule: string = '';
4129      if (isObject(rule)) {
4130        let alignSign = false;
4131        let anchorSign = false;
4132        let align = rule.align;
4133        let anchor = rule.anchor;
4134        if (isString(anchor)) {
4135          anchorSign = true;
4136        }
4137        if (i < DIRECTION_RANGE) {
4138          if (align in HorizontalAlign) {
4139            alignSign = true;
4140          }
4141        } else {
4142          if (align in VerticalAlign) {
4143            alignSign = true;
4144          }
4145        }
4146        if (!alignSign && !anchorSign) {
4147          alignRule += '';
4148        } else if (!anchorSign) {
4149          alignRule += align.toString();
4150          alignRule += '|';
4151          alignRule += '__container__';
4152        } else if (!alignSign) {
4153          alignRule += '2';
4154          alignRule += '|';
4155          alignRule += anchor;
4156        } else {
4157          alignRule += align.toString();
4158          alignRule += '|';
4159          alignRule += anchor;
4160        }
4161      } else {
4162        alignRule += '';
4163      }
4164      switch (keys[i]) {
4165        case 'left':
4166          arkValue.left = alignRule;
4167          break;
4168        case 'middle':
4169          arkValue.middle = alignRule;
4170          break;
4171        case 'right':
4172          arkValue.right = alignRule;
4173          break;
4174        case 'top':
4175          arkValue.top = alignRule;
4176          break;
4177        case 'center':
4178          arkValue.center = alignRule;
4179          break;
4180        case 'bottom':
4181          arkValue.bottom = alignRule;
4182          break;
4183      }
4184    }
4185    modifierWithKey(this._modifiersWithKeys, AlignRulesModifier.identity, AlignRulesModifier, arkValue);
4186    return this;
4187  }
4188
4189  aspectRatio(value: number): this {
4190    modifierWithKey(this._modifiersWithKeys, AspectRatioModifier.identity, AspectRatioModifier, value);
4191    return this;
4192  }
4193
4194  clickEffect(value: ClickEffect | null): this {
4195    modifierWithKey(this._modifiersWithKeys, ClickEffectModifier.identity, ClickEffectModifier, value);
4196    return this;
4197  }
4198
4199  onDragStart(event: (event?: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo): this {
4200    throw new Error('Method not implemented.');
4201  }
4202
4203  onDragEnter(event: (event?: DragEvent, extraParams?: string) => void): this {
4204    throw new Error('Method not implemented.');
4205  }
4206
4207  onDragMove(event: (event?: DragEvent, extraParams?: string) => void): this {
4208    throw new Error('Method not implemented.');
4209  }
4210
4211  onDragLeave(event: (event?: DragEvent, extraParams?: string) => void): this {
4212    throw new Error('Method not implemented.');
4213  }
4214
4215  onDrop(event: (event?: DragEvent, extraParams?: string) => void): this {
4216    throw new Error('Method not implemented.');
4217  }
4218
4219  onDragEnd(event: (event: DragEvent, extraParams?: string) => void): this {
4220    throw new Error('Method not implemented.');
4221  }
4222
4223  onPreDrag(event: (preDragStatus: PreDragStatus) => void): this {
4224    throw new Error('Method not implemented.');
4225  }
4226
4227  allowDrop(value: Array<UniformDataType>): this {
4228    modifierWithKey(this._modifiersWithKeys, AllowDropModifier.identity, AllowDropModifier, value);
4229    return this;
4230  }
4231
4232  draggable(value: boolean): this {
4233    if (typeof value === 'boolean') {
4234      modifierWithKey(this._modifiersWithKeys, DraggableModifier.identity, DraggableModifier, value);
4235    } else {
4236      modifierWithKey(this._modifiersWithKeys, DraggableModifier.identity, DraggableModifier, undefined);
4237
4238    }
4239    return this;
4240  }
4241
4242  dragPreview(value: CustomBuilder | DragItemInfo | string): this {
4243    if (typeof value === 'string') {
4244      let arkDragPreview = new ArkDragPreview();
4245      arkDragPreview.inspetorId = value;
4246      modifierWithKey(this._modifiersWithKeys, DragPreviewModifier.identity, DragPreviewModifier, arkDragPreview);
4247      return this;
4248    }
4249    throw new Error('Method not implemented.');
4250  }
4251
4252  overlay(value: string | CustomBuilder, options?: { align?: Alignment; offset?: { x?: number; y?: number } }): this {
4253    if (typeof value === 'undefined') {
4254      modifierWithKey(this._modifiersWithKeys, OverlayModifier.identity, OverlayModifier, undefined);
4255      return this;
4256    }
4257    let arkOverlay = new ArkOverlay();
4258    if (arkOverlay.splitOverlayValue(value, options)) {
4259      modifierWithKey(this._modifiersWithKeys, OverlayModifier.identity, OverlayModifier, arkOverlay);
4260    } else {
4261      modifierWithKey(this._modifiersWithKeys, OverlayModifier.identity, OverlayModifier, undefined);
4262    }
4263    return this;
4264  }
4265
4266  linearGradient(value: {
4267    angle?: number | string;
4268    direction?: GradientDirection;
4269    colors: Array<any>;
4270    repeating?: boolean;
4271  }): this {
4272    modifierWithKey(this._modifiersWithKeys, LinearGradientModifier.identity, LinearGradientModifier, value);
4273    return this;
4274  }
4275
4276  sweepGradient(value: {
4277    center: Array<any>;
4278    start?: number | string;
4279    end?: number | string;
4280    rotation?: number | string;
4281    colors: Array<any>;
4282    repeating?: boolean;
4283  }): this {
4284    modifierWithKey(this._modifiersWithKeys, SweepGradientModifier.identity, SweepGradientModifier, value);
4285    return this;
4286  }
4287
4288  radialGradient(value: { center: Array<any>; radius: number | string; colors: Array<any>; repeating?: boolean }): this {
4289    modifierWithKey(this._modifiersWithKeys, RadialGradientModifier.identity, RadialGradientModifier, value);
4290    return this;
4291  }
4292
4293  motionPath(value: MotionPathOptions): this {
4294    modifierWithKey(this._modifiersWithKeys, MotionPathModifier.identity, MotionPathModifier, value);
4295    return this;
4296  }
4297
4298  motionBlur(value: MotionBlurOptions): this {
4299    modifierWithKey(this._modifiersWithKeys, MotionBlurModifier.identity, MotionBlurModifier, value);
4300    return this;
4301  }
4302
4303  shadow(value: ShadowOptions | ShadowStyle): this {
4304    modifierWithKey(this._modifiersWithKeys, ShadowModifier.identity, ShadowModifier, value);
4305    return this;
4306  }
4307
4308  mask(value: CircleAttribute | EllipseAttribute | PathAttribute | RectAttribute | ProgressMask): this {
4309    modifierWithKey(this._modifiersWithKeys, MaskModifier.identity, MaskModifier, value);
4310    return this;
4311  }
4312
4313  chainMode(direction: Axis, style: ChainStyle): this {
4314    let arkChainMode = new ArkChainMode();
4315    arkChainMode.direction = direction;
4316    arkChainMode.style = style;
4317    modifierWithKey(this._modifiersWithKeys, ChainModeifier.identity, ChainModeifier, arkChainMode);
4318    return this;
4319  }
4320
4321  key(value: string): this {
4322    if (typeof value === 'string') {
4323      modifierWithKey(this._modifiersWithKeys, KeyModifier.identity, KeyModifier, value);
4324    } else {
4325      modifierWithKey(this._modifiersWithKeys, KeyModifier.identity, KeyModifier, undefined);
4326    }
4327    return this;
4328  }
4329
4330  id(value: string): this {
4331    if (typeof value === 'string') {
4332      modifierWithKey(this._modifiersWithKeys, IdModifier.identity, IdModifier, value);
4333    } else {
4334      modifierWithKey(this._modifiersWithKeys, IdModifier.identity, IdModifier, undefined);
4335    }
4336    return this;
4337  }
4338
4339  geometryTransition(id: string, options?: GeometryTransitionOptions): this {
4340    let arkGeometryTransition = new ArkGeometryTransition();
4341    arkGeometryTransition.id = id;
4342    arkGeometryTransition.options = options;
4343    modifierWithKey(this._modifiersWithKeys, GeometryTransitionModifier.identity, GeometryTransitionModifier, arkGeometryTransition);
4344    return this;
4345  }
4346
4347  bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions): this {
4348    throw new Error('Method not implemented.');
4349  }
4350
4351  bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions): this {
4352    throw new Error('Method not implemented.');
4353  }
4354
4355  bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions): this {
4356    throw new Error('Method not implemented.');
4357  }
4358
4359  bindContentCover(isShow: boolean, builder: CustomBuilder, type?: ModalTransition | ContentCoverOptions): this {
4360    throw new Error('Method not implemented.');
4361  }
4362
4363  blendMode(blendMode: BlendMode, blendApplyType?: BlendApplyType): this {
4364    let arkBlendMode = new ArkBlendMode();
4365    arkBlendMode.blendMode = blendMode;
4366    arkBlendMode.blendApplyType = blendApplyType;
4367    modifierWithKey(this._modifiersWithKeys, BlendModeModifier.identity, BlendModeModifier, arkBlendMode);
4368    return this;
4369  }
4370
4371  advancedBlendMode(blendMode: BlendMode, blendApplyType?: BlendApplyType): this {
4372    let arkBlendMode = new ArkBlendMode();
4373    arkBlendMode.blendMode = blendMode;
4374    arkBlendMode.blendApplyType = blendApplyType;
4375    modifierWithKey(this._modifiersWithKeys, AdvancedBlendModeModifier.identity,
4376      AdvancedBlendModeModifier, arkBlendMode);
4377    return this;
4378  }
4379
4380  clip(value: boolean | CircleAttribute | EllipseAttribute | PathAttribute | RectAttribute): this {
4381    modifierWithKey(this._modifiersWithKeys, ClipModifier.identity, ClipModifier, value);
4382    return this;
4383  }
4384
4385  bindSheet(isShow: boolean, builder: CustomBuilder, options?: SheetOptions): this {
4386    throw new Error('Method not implemented.');
4387  }
4388
4389  stateStyles(value: StateStyles): this {
4390    throw new Error('Method not implemented.');
4391  }
4392
4393  restoreId(value: number): this {
4394    if (typeof value !== 'number') {
4395      modifierWithKey(this._modifiersWithKeys, RestoreIdModifier.identity, RestoreIdModifier, undefined);
4396    } else {
4397      modifierWithKey(this._modifiersWithKeys, RestoreIdModifier.identity, RestoreIdModifier, value);
4398    }
4399    return this;
4400  }
4401
4402  onVisibleAreaChange(ratios: Array<number>, event: (isVisible: boolean, currentRatio: number) => void): this {
4403    throw new Error('Method not implemented.');
4404  }
4405
4406  sphericalEffect(value: number): this {
4407    modifierWithKey(this._modifiersWithKeys, SphericalEffectModifier.identity, SphericalEffectModifier, value);
4408    return this;
4409  }
4410
4411  lightUpEffect(value: number): this {
4412    modifierWithKey(this._modifiersWithKeys, LightUpEffectModifier.identity, LightUpEffectModifier, value);
4413    return this;
4414  }
4415
4416  pixelStretchEffect(options: PixelStretchEffectOptions): this {
4417    modifierWithKey(this._modifiersWithKeys, PixelStretchEffectModifier.identity, PixelStretchEffectModifier, options);
4418    return this;
4419  }
4420
4421  keyboardShortcut(value: string | FunctionKey, keys: Array<ModifierKey>, action?: () => void): this {
4422    let keyboardShortCut = new ArkKeyBoardShortCut();
4423    keyboardShortCut.value = value;
4424    keyboardShortCut.keys = keys;
4425    modifierWithKey(this._modifiersWithKeys, KeyBoardShortCutModifier.identity, KeyBoardShortCutModifier, keyboardShortCut);
4426    return this;
4427  }
4428
4429  accessibilityGroup(value: boolean): this {
4430    if (typeof value === 'boolean') {
4431      modifierWithKey(this._modifiersWithKeys, AccessibilityGroupModifier.identity, AccessibilityGroupModifier, value);
4432    } else {
4433      modifierWithKey(this._modifiersWithKeys, AccessibilityGroupModifier.identity, AccessibilityGroupModifier, undefined);
4434
4435    }
4436    return this;
4437  }
4438
4439  accessibilityText(value: string): this {
4440    if (typeof value === 'string') {
4441      modifierWithKey(this._modifiersWithKeys, AccessibilityTextModifier.identity, AccessibilityTextModifier, value);
4442    } else {
4443      modifierWithKey(this._modifiersWithKeys, AccessibilityTextModifier.identity, AccessibilityTextModifier, undefined);
4444    }
4445    return this;
4446  }
4447
4448  accessibilityDescription(value: string): this {
4449    if (typeof value !== 'string') {
4450      modifierWithKey(this._modifiersWithKeys, AccessibilityDescriptionModifier.identity, AccessibilityDescriptionModifier, undefined);
4451    } else {
4452      modifierWithKey(this._modifiersWithKeys, AccessibilityDescriptionModifier.identity, AccessibilityDescriptionModifier, value);
4453    }
4454    return this;
4455  }
4456
4457  accessibilityLevel(value: string): this {
4458    if (typeof value !== 'string') {
4459      modifierWithKey(this._modifiersWithKeys, AccessibilityLevelModifier.identity, AccessibilityLevelModifier, undefined);
4460    } else {
4461      modifierWithKey(this._modifiersWithKeys, AccessibilityLevelModifier.identity, AccessibilityLevelModifier, value);
4462    }
4463    return this;
4464  }
4465
4466  obscured(reasons: Array<ObscuredReasons>): this {
4467    modifierWithKey(this._modifiersWithKeys, ObscuredModifier.identity, ObscuredModifier, reasons);
4468    return this;
4469  }
4470
4471  reuseId(id: string): this {
4472    throw new Error('Method not implemented.');
4473  }
4474
4475  renderFit(fitMode: RenderFit): this {
4476    modifierWithKey(this._modifiersWithKeys, RenderFitModifier.identity, RenderFitModifier, fitMode);
4477    return this;
4478  }
4479
4480  attributeModifier(modifier: AttributeModifier<CommonAttribute>): this {
4481    return this;
4482  }
4483
4484  customProperty(key: string, value: object): this {
4485    let returnBool = getUINativeModule().frameNode.setCustomPropertyModiferByKey(this.nativePtr, key, value);
4486    if (!returnBool) {
4487      const property = new ArkCustomProperty();
4488      property.key = key;
4489      property.value = value;
4490      modifierWithKey(this._modifiersWithKeys, CustomPropertyModifier.identity, CustomPropertyModifier, property);
4491    }
4492    return this;
4493  }
4494
4495  systemBarEffect(): this {
4496    modifierWithKey(this._modifiersWithKeys, SystemBarEffectModifier.identity, SystemBarEffectModifier, null);
4497    return this;
4498  }
4499
4500  focusScopeId(id: string, isGroup?: boolean): this {
4501    let arkFocusScopeId = new ArkFocusScopeId();
4502    if (isString(id)) {
4503      arkFocusScopeId.id = id;
4504    }
4505    if (typeof isGroup === 'boolean') {
4506      arkFocusScopeId.isGroup = isGroup;
4507    }
4508    modifierWithKey(
4509      this._modifiersWithKeys, FocusScopeIdModifier.identity, FocusScopeIdModifier, arkFocusScopeId);
4510    return this;
4511  }
4512
4513  focusScopePriority(scopeId: string, priority?: number): this {
4514    let arkFocusScopePriority = new ArkFocusScopePriority();
4515    if (isString(scopeId)) {
4516      arkFocusScopePriority.scopeId = scopeId;
4517    }
4518    if (typeof priority === 'number') {
4519      arkFocusScopePriority.priority = priority;
4520    }
4521    modifierWithKey(
4522      this._modifiersWithKeys, FocusScopePriorityModifier.identity, FocusScopePriorityModifier, arkFocusScopePriority);
4523    return this;
4524  }
4525
4526  pixelRound(value:PixelRoundPolicy): this {
4527    modifierWithKey(this._modifiersWithKeys, PixelRoundModifier.identity, PixelRoundModifier, value);
4528  }
4529  focusBox(value:FocusBoxStyle):this {
4530    modifierWithKey(this._modifiersWithKeys, FocusBoxModifier.identity, FocusBoxModifier, value);
4531  }
4532}
4533
4534const isNull = (val: any) => typeof val === 'object' && val === null;
4535const isArray = (val: any) => Array.isArray(val);
4536const isDate = (val: any) => val instanceof Date;
4537const isRegExp = (val: any) => val instanceof RegExp;
4538const isError = (val: any) => val instanceof Error;
4539const isFloat = (val: any) => Number.isFinite(val) && !Number.isInteger(val);
4540const isInteger = (val: any) => Number.isInteger(val);
4541const isNonEmptyMap = (val: any) => val instanceof Map && val.size > 0;
4542const isTruthyString = (val: any) => typeof val === 'string' && val.trim() !== '';
4543
4544class UICommonEvent {
4545  private _nodePtr: Object | null;
4546  private _instanceId: number;
4547  private _onAttachEvent?: () => void;
4548  private _onDetachEvent?: () => void;
4549  private _clickEvent?: (event: ClickEvent) => void;
4550  private _touchEvent?: (event: TouchEvent) => void;
4551  private _onAppearEvent?: () => void;
4552  private _onDisappearEvent?: () => void;
4553  private _onKeyEvent?: (event: KeyEvent) => void;
4554  private _onFocusEvent?: () => void;
4555  private _onBlur?: () => void;
4556  private _onHoverEvent?: (isHover: boolean, event: HoverEvent) => void;
4557  private _onMouseEvent?: (event: MouseEvent) => void;
4558  private _onSizeChangeEvent?: SizeChangeCallback;
4559  private _onVisibleAreaApproximateChange?: VisibleAreaChangeCallback;
4560
4561  setInstanceId(instanceId: number): void {
4562    this._instanceId = instanceId;
4563  }
4564  setNodePtr(nodePtr: Object | null): void {
4565    this._nodePtr = nodePtr;
4566  }
4567  // the first param is used to indicate frameNode
4568  // the second param is used to indicate the callback
4569  // the third param is used to indicate the instanceid
4570  // other options will be indicated after them
4571  setOnClick(callback: (event: ClickEvent) => void): void {
4572    this._clickEvent = callback;
4573    getUINativeModule().frameNode.setOnClick(this._nodePtr, callback, this._instanceId);
4574  }
4575  setOnTouch(callback: (event: TouchEvent) => void): void {
4576    this._touchEvent = callback;
4577    getUINativeModule().frameNode.setOnTouch(this._nodePtr, callback, this._instanceId);
4578  }
4579  setOnAppear(callback: () => void): void {
4580    this._onAppearEvent = callback;
4581    getUINativeModule().frameNode.setOnAppear(this._nodePtr, callback, this._instanceId);
4582  }
4583  setOnDisappear(callback: () => void): void {
4584    this._onDisappearEvent = callback;
4585    getUINativeModule().frameNode.setOnDisappear(this._nodePtr, callback, this._instanceId);
4586  }
4587  setOnAttach(callback: () => void): void {
4588    this._onAttachEvent = callback;
4589    getUINativeModule().frameNode.setOnAttach(this._nodePtr, callback, this._instanceId);
4590  }
4591  setOnDetach(callback: () => void): void {
4592    this._onDetachEvent = callback;
4593    getUINativeModule().frameNode.setOnDetach(this._nodePtr, callback, this._instanceId);
4594  }
4595  setOnKeyEvent(callback: (event: KeyEvent) => void): void {
4596    this._onKeyEvent = callback;
4597    getUINativeModule().frameNode.setOnKeyEvent(this._nodePtr, callback, this._instanceId);
4598  }
4599  setOnFocus(callback: () => void): void {
4600    this._onFocusEvent = callback;
4601    getUINativeModule().frameNode.setOnFocus(this._nodePtr, callback, this._instanceId);
4602  }
4603  setOnBlur(callback: () => void): void {
4604    this._onBlur = callback;
4605    getUINativeModule().frameNode.setOnBlur(this._nodePtr, callback, this._instanceId);
4606  }
4607  setOnHover(callback: (isHover: boolean, event: HoverEvent) => void): void {
4608    this._onHoverEvent = callback;
4609    getUINativeModule().frameNode.setOnHover(this._nodePtr, callback, this._instanceId);
4610  }
4611  setOnMouse(callback: (event: MouseEvent) => void): void {
4612    this._onMouseEvent = callback;
4613    getUINativeModule().frameNode.setOnMouse(this._nodePtr, callback, this._instanceId);
4614  }
4615  setOnSizeChange(callback: SizeChangeCallback): void {
4616    this._onSizeChangeEvent = callback;
4617    getUINativeModule().frameNode.setOnSizeChange(this._nodePtr, callback, this._instanceId);
4618  }
4619  setOnVisibleAreaApproximateChange(options: VisibleAreaEventOptions, callback: VisibleAreaChangeCallback): void {
4620    this._onVisibleAreaApproximateChange = callback;
4621    getUINativeModule().frameNode.setOnVisibleAreaApproximateChange(this._nodePtr, callback, this._instanceId, options.ratios, options.expectedUpdateInterval ? options.expectedUpdateInterval : 1000);
4622  }
4623}
4624
4625function attributeModifierFunc<T>(modifier: AttributeModifier<T>,
4626  componentBuilder: (nativePtr: KNode) => ArkComponent,
4627  modifierBuilder: (nativePtr: KNode, classType: ModifierType, modifierJS: ModifierJS) => ArkComponent)
4628{
4629  if (modifier === undefined || modifier === null) {
4630    return;
4631  }
4632  const elmtId = ViewStackProcessor.GetElmtIdToAccountFor();
4633  let nativeNode = getUINativeModule().getFrameNodeById(elmtId);
4634  let component = this.createOrGetNode(elmtId, () => {
4635    return componentBuilder(nativeNode);
4636  });
4637  if (modifier.isAttributeUpdater === true) {
4638    let modifierJS = globalThis.requireNapi('arkui.modifier');
4639    if (modifier.modifierState === modifierJS.AttributeUpdater.StateEnum.INIT) {
4640      modifier.modifierState = modifierJS.AttributeUpdater.StateEnum.UPDATE;
4641      modifier.attribute = modifierBuilder(nativeNode, ModifierType.STATE, modifierJS);
4642      modifierJS.ModifierUtils.applySetOnChange(modifier.attribute);
4643      modifier.initializeModifier(modifier.attribute);
4644      applyUIAttributesInit(modifier, nativeNode, component);
4645      component.applyModifierPatch();
4646    } else {
4647      modifier.attribute.applyStateUpdatePtr(component);
4648      if (modifier.attribute._nativePtrChanged) {
4649        modifier.onComponentChanged(modifier.attribute);
4650      }
4651      modifier.attribute.applyNormalAttribute(component);
4652      applyUIAttributes(modifier, nativeNode, component);
4653      component.applyModifierPatch();
4654    }
4655  } else {
4656    applyUIAttributes(modifier, nativeNode, component);
4657    component.applyModifierPatch();
4658  }
4659}
4660
4661function attributeModifierFuncWithoutStateStyles<T>(modifier: AttributeModifier<T>,
4662  componentBuilder: (nativePtr: KNode) => ArkComponent,
4663  modifierBuilder: (nativePtr: KNode, classType: ModifierType, modifierJS: ModifierJS) => ArkComponent)
4664{
4665  const elmtId = ViewStackProcessor.GetElmtIdToAccountFor();
4666  let nativeNode = getUINativeModule().getFrameNodeById(elmtId);
4667  let component = this.createOrGetNode(elmtId, () => {
4668    return componentBuilder(nativeNode);
4669  });
4670  if (modifier.isAttributeUpdater === true) {
4671    let modifierJS = globalThis.requireNapi('arkui.modifier');
4672    if (modifier.modifierState === modifierJS.AttributeUpdater.StateEnum.INIT) {
4673      modifier.modifierState = modifierJS.AttributeUpdater.StateEnum.UPDATE;
4674      modifier.attribute = modifierBuilder(nativeNode, ModifierType.STATE, modifierJS);
4675      modifierJS.ModifierUtils.applySetOnChange(modifier.attribute);
4676      modifier.initializeModifier(modifier.attribute);
4677      component.applyModifierPatch();
4678    } else {
4679      modifier.attribute.applyStateUpdatePtr(component);
4680      modifier.attribute.applyNormalAttribute(component);
4681      if (modifier.applyNormalAttribute) {
4682        modifier.applyNormalAttribute(component);
4683      }
4684      component.applyModifierPatch();
4685    }
4686  } else {
4687    if (modifier.applyNormalAttribute) {
4688      modifier.applyNormalAttribute(component);
4689    }
4690    component.applyModifierPatch();
4691  }
4692}
4693
4694class UIGestureEvent {
4695  private _nodePtr: Object | null;
4696  private _weakNodePtr: JsPointerClass;
4697  setNodePtr(nodePtr: Object | null): void {
4698    this._nodePtr = nodePtr;
4699  }
4700  setWeakNodePtr(weakNodePtr: JsPointerClass): void {
4701    this._weakNodePtr = weakNodePtr;
4702  }
4703  addGesture(gesture: GestureHandler, priority?: GesturePriority, mask?: GestureMask): void {
4704    if (this._weakNodePtr.invalid()) {
4705      return;
4706    }
4707    switch (gesture.gestureType) {
4708      case CommonGestureType.TAP_GESTURE: {
4709        let tapGesture: TapGestureHandler = gesture as TapGestureHandler;
4710        getUINativeModule().common.addTapGesture(this._nodePtr, priority, mask, tapGesture.gestureTag,
4711          tapGesture.fingers, tapGesture.count, tapGesture.onActionCallback);
4712        break;
4713      }
4714      case CommonGestureType.LONG_PRESS_GESTURE: {
4715        let longPressGesture: LongPressGestureHandler = gesture as LongPressGestureHandler;
4716        getUINativeModule().common.addLongPressGesture(this._nodePtr, priority, mask, longPressGesture.gestureTag,
4717          longPressGesture.fingers, longPressGesture.repeat, longPressGesture.duration,
4718          longPressGesture.onActionCallback, longPressGesture.onActionEndCallback, longPressGesture.onActionCancelCallback);
4719        break;
4720      }
4721      case CommonGestureType.PAN_GESTURE: {
4722        let panGesture: PanGestureHandler = gesture as PanGestureHandler;
4723        getUINativeModule().common.addPanGesture(this._nodePtr, priority, mask, panGesture.gestureTag,
4724          panGesture.fingers, panGesture.direction, panGesture.distance, panGesture.onActionStartCallback,
4725          panGesture.onActionUpdateCallback, panGesture.onActionEndCallback, panGesture.onActionCancelCallback);
4726        break;
4727      }
4728      case CommonGestureType.SWIPE_GESTURE: {
4729        let swipeGesture: SwipeGestureHandler = gesture as SwipeGestureHandler;
4730        getUINativeModule().common.addSwipeGesture(this._nodePtr, priority, mask, swipeGesture.gestureTag,
4731          swipeGesture.fingers, swipeGesture.direction, swipeGesture.speed, swipeGesture.onActionCallback);
4732        break;
4733      }
4734      case CommonGestureType.PINCH_GESTURE: {
4735        let pinchGesture: PinchGestureHandler = gesture as PinchGestureHandler;
4736        getUINativeModule().common.addPinchGesture(this._nodePtr, priority, mask, pinchGesture.gestureTag,
4737          pinchGesture.fingers, pinchGesture.distance, pinchGesture.onActionStartCallback,
4738          pinchGesture.onActionUpdateCallback, pinchGesture.onActionEndCallback, pinchGesture.onActionCancelCallback);
4739        break;
4740      }
4741      case CommonGestureType.ROTATION_GESTURE: {
4742        let rotationGesture: RotationGestureHandler = gesture as RotationGestureHandler;
4743        getUINativeModule().common.addRotationGesture(this._nodePtr, priority, mask, rotationGesture.gestureTag,
4744          rotationGesture.fingers, rotationGesture.angle, rotationGesture.onActionStartCallback,
4745          rotationGesture.onActionUpdateCallback, rotationGesture.onActionEndCallback,
4746          rotationGesture.onActionCancelCallback);
4747        break;
4748      }
4749      case CommonGestureType.GESTURE_GROUP: {
4750        let gestureGroup: GestureGroupHandler = gesture as GestureGroupHandler;
4751        let groupPtr = getUINativeModule().common.addGestureGroup(
4752          gestureGroup.gestureTag, gestureGroup.onCancelCallback, gestureGroup.mode);
4753        gestureGroup.gestures.forEach((item) => {
4754          addGestureToGroup(item, groupPtr);
4755        });
4756        getUINativeModule().common.attachGestureGroup(this._nodePtr, priority, mask, groupPtr);
4757        break;
4758      }
4759      default:
4760        break;
4761    }
4762  }
4763  addParallelGesture(gesture: GestureHandler, mask?: GestureMask): void {
4764    this.addGesture(gesture, GesturePriority.PARALLEL, mask);
4765  }
4766  removeGestureByTag(tag: string): void {
4767    if (this._weakNodePtr.invalid()) {
4768      return;
4769    }
4770    getUINativeModule().common.removeGestureByTag(this._nodePtr, tag);
4771  }
4772  clearGestures(): void {
4773    if (this._weakNodePtr.invalid()) {
4774      return;
4775    }
4776    getUINativeModule().common.clearGestures(this._nodePtr);
4777  }
4778}
4779
4780function addGestureToGroup(gesture: any, gestureGroupPtr: any) {
4781  switch (gesture.gestureType) {
4782    case CommonGestureType.TAP_GESTURE: {
4783      let tapGesture: TapGestureHandler = gesture as TapGestureHandler;
4784      getUINativeModule().common.addTapGestureToGroup(tapGesture.gestureTag,
4785        tapGesture.fingers, tapGesture.count, tapGesture.onActionCallback, gestureGroupPtr);
4786      break;
4787    }
4788    case CommonGestureType.LONG_PRESS_GESTURE: {
4789      let longPressGesture: LongPressGestureHandler = gesture as LongPressGestureHandler;
4790      getUINativeModule().common.addLongPressGestureToGroup(longPressGesture.gestureTag,
4791        longPressGesture.fingers, longPressGesture.repeat, longPressGesture.duration,
4792        longPressGesture.onActionCallback, longPressGesture.onActionEndCallback, longPressGesture.onActionCancelCallback, gestureGroupPtr);
4793      break;
4794    }
4795    case CommonGestureType.PAN_GESTURE: {
4796      let panGesture: PanGestureHandler = gesture as PanGestureHandler;
4797      getUINativeModule().common.addPanGestureToGroup(panGesture.gestureTag,
4798        panGesture.fingers, panGesture.direction, panGesture.distance, panGesture.onActionStartCallback,
4799        panGesture.onActionUpdateCallback, panGesture.onActionEndCallback, panGesture.onActionCancelCallback, gestureGroupPtr);
4800      break;
4801    }
4802    case CommonGestureType.SWIPE_GESTURE: {
4803      let swipeGesture: SwipeGestureHandler = gesture as SwipeGestureHandler;
4804      getUINativeModule().common.addSwipeGestureToGroup(swipeGesture.gestureTag,
4805        swipeGesture.fingers, swipeGesture.direction, swipeGesture.speed, swipeGesture.onActionCallback, gestureGroupPtr);
4806      break;
4807    }
4808    case CommonGestureType.PINCH_GESTURE: {
4809      let pinchGesture: PinchGestureHandler = gesture as PinchGestureHandler;
4810      getUINativeModule().common.addPinchGestureToGroup(pinchGesture.gestureTag,
4811        pinchGesture.fingers, pinchGesture.distance, pinchGesture.onActionStartCallback,
4812        pinchGesture.onActionUpdateCallback, pinchGesture.onActionEndCallback, pinchGesture.onActionCancelCallback, gestureGroupPtr);
4813      break;
4814    }
4815    case CommonGestureType.ROTATION_GESTURE: {
4816      let rotationGesture: RotationGestureHandler = gesture as RotationGestureHandler;
4817      getUINativeModule().common.addRotationGestureToGroup(rotationGesture.gestureTag,
4818        rotationGesture.fingers, rotationGesture.angle, rotationGesture.onActionStartCallback,
4819        rotationGesture.onActionUpdateCallback, rotationGesture.onActionEndCallback,
4820        rotationGesture.onActionCancelCallback, gestureGroupPtr);
4821      break;
4822    }
4823    case CommonGestureType.GESTURE_GROUP: {
4824      let gestureGroup: GestureGroupHandler = gesture as GestureGroupHandler;
4825      let groupPtr = getUINativeModule().common.addGestureGroupToGroup(gestureGroup.gestureTag,
4826        gestureGroup.onCancelCallback, gestureGroup.mode, gestureGroupPtr);
4827      gestureGroup.gestures.forEach((item) => {
4828        addGestureToGroup(item, groupPtr);
4829      });
4830      break;
4831    }
4832    default:
4833      break;
4834  }
4835}
4836
4837function applyGesture(modifier: GestureModifier, component: ArkComponent): void {
4838
4839  if (modifier.applyGesture !== undefined) {
4840    let gestureEvent: UIGestureEvent = component.getOrCreateGestureEvent();
4841    gestureEvent.clearGestures();
4842    modifier.applyGesture(gestureEvent);
4843  }
4844}
4845
4846globalThis.__mapOfModifier__ = new Map();
4847function __gestureModifier__(modifier) {
4848  if (globalThis.__mapOfModifier__.size === 0) {
4849    __modifierElmtDeleteCallback__();
4850  }
4851  const elmtId = ViewStackProcessor.GetElmtIdToAccountFor();
4852  let nativeNode = getUINativeModule().getFrameNodeById(elmtId);
4853  if (globalThis.__mapOfModifier__.get(elmtId)) {
4854    let component = globalThis.__mapOfModifier__.get(elmtId);
4855    applyGesture(modifier, component);
4856  } else {
4857    let component = new ArkComponent(nativeNode);
4858    globalThis.__mapOfModifier__.set(elmtId, component);
4859    applyGesture(modifier, component);
4860  }
4861}
4862
4863declare class UINodeRegisterProxy {
4864  public static registerModifierElmtDeleteCallback(): void;
4865}
4866
4867function __modifierElmtDeleteCallback__() {
4868  UINodeRegisterProxy.registerModifierElmtDeleteCallback((elmtId) => {
4869    globalThis.__mapOfModifier__.delete(elmtId);
4870  });
4871}
4872
4873const __elementIdToCustomProperties__ = new Map();
4874
4875function __setValidCustomProperty__(nodeId: number, key: string, value: Object): void {
4876  if (!__elementIdToCustomProperties__.has(nodeId)) {
4877    __elementIdToCustomProperties__.set(nodeId, new Map());
4878  }
4879
4880  const customProperties = __elementIdToCustomProperties__.get(nodeId);
4881
4882  if (customProperties) {
4883    customProperties.set(key, value);
4884  }
4885}
4886
4887function __removeCustomProperty__(nodeId: number, key: string): boolean {
4888  if (__elementIdToCustomProperties__.has(nodeId)) {
4889    const customProperties = __elementIdToCustomProperties__.get(nodeId);
4890
4891    if (customProperties) {
4892      customProperties.delete(key);
4893      return customProperties.size > 0;
4894    }
4895  }
4896
4897  return false;
4898}
4899
4900function __removeCustomProperties__(nodeId: number): void {
4901  __elementIdToCustomProperties__.delete(nodeId);
4902}
4903
4904function __getCustomProperty__(nodeId: number, key: string): Object | undefined {
4905  if (__elementIdToCustomProperties__.has(nodeId)) {
4906    const customProperties = __elementIdToCustomProperties__.get(nodeId);
4907
4908    if (customProperties) {
4909      return customProperties.get(key);
4910    }
4911  }
4912
4913  return undefined;
4914}
4915
4916function __getCustomPropertyString__(nodeId: number, key: string): string | undefined {
4917  if (__elementIdToCustomProperties__.has(nodeId)) {
4918    const customProperties = __elementIdToCustomProperties__.get(nodeId);
4919
4920    if (customProperties) {
4921      return JSON.stringify(customProperties.get(key));
4922    }
4923  }
4924
4925  return undefined;
4926}
4927
4928function __setCustomProperty__(nodeId: number, key: string, value: Object): boolean {
4929  if (value !== undefined) {
4930    __setValidCustomProperty__(nodeId, key, value);
4931    return true;
4932  } else {
4933    return __removeCustomProperty__(nodeId, key);
4934  }
4935}
4936