!6022 【ARKUI子系统】修改UN测试套&增加属性用例

Merge pull request !6022 from hekun/master

arkui/ace_ets_component_attrlack/entry/src/main/config.json

@@ -115,7 +115,8 @@
           "pages/responseType",
           "pages/hoverEffect",
           "pages/hitTestMode",
-          "pages/color"
+          "pages/color",
+          "pages/navigation_lack"
         ],
         "name": ".MainAbility",
         "window": {

arkui/ace_ets_component_attrlack/entry/src/main/ets/MainAbility/pages/common.ets

@@ -20,6 +20,13 @@ const TAG = 'ets_apiLack_add';
 @Entry
 @Component
 export default struct CommonColorMode {
+
+  // popup构造器定义弹框内容
+  @Builder popupBuilder() {
+    Row({ space: 2 }) {
+      Text('Custom Popup').fontSize(10)
+    }.width(100).height(50).padding(5)
+  }
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToAppear CommonColorMode start`)
   }
@@ -27,10 +34,44 @@ export default struct CommonColorMode {
   aboutToDisappear() {
     Log.showInfo(TAG, `aboutToDisAppear CommonColorMode end`)
   }
+  onLayout(children, constraint) {
+    Log.showInfo(TAG, `onLayout start` + JSON.stringify(children));
+    children[0].borderInfo = {
+      borderWidth: 20,
+      margin: 30,
+      padding: 20
+    }
+    children[0].constraint = {
+      maxWidth: 200
+    }
+    children[0].layout({
+      position: {
+         x:20,
+         y:20
+      },
+      constraint: {
+        maxWidth: 200
+      }
+    })
+  }
+  onMeasure(children, constraint) {
+    Log.showInfo(TAG, `onMeasurestart`)
+
+
+  }
 
   @Styles normalStyles() {
     .backgroundColor("#0A59F7")
+
   }
+  // add
+  configuration : Configuration = {
+
+    colorMode: "$000",
+
+    fontScale: 23
+  }
+
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -48,6 +89,10 @@ export default struct CommonColorMode {
         .textAlign(TextAlign.Center)
         .textOverflow({ overflow: TextOverflow.None })
         .key("fontScaleText")
+        .bindPopup(true,{
+             message:"23",
+             showInSubWindow:true
+        }).
 
       Text("common-OnFinish")
         .width(320)
@@ -66,7 +111,10 @@ export default struct CommonColorMode {
           onFinish: () => {
             Log.showInfo(TAG, 'animation onFinish success')
           }
-        })
+        }).bindPopup(true,{
+          builder:this.popupBuilder,
+          showInSubWindow:true
+      })
 
       Text("common-MotionPath")
         .width(320)

arkui/ace_ets_component_attrlack/entry/src/main/ets/MainAbility/pages/enums.ets

@@ -36,6 +36,13 @@ struct EnumsCancel {
 
   @State mouseText: string = 'MouseText'
 
+
+  @State fit:RelateType = RelateType.FIT;
+  @State fill:RelateType = RelateType.FILL;
+  @State mainonly:TitleHeight = TitleHeight.MainOnly;
+  @State MainWithSub:TitleHeight = TitleHeight.MainWithSub;
+  @State Block:HitTestMode  = HitTestMode.Block;
+
   @Styles pressedStyles() {
     .backgroundColor('red')
     .opacity(1)

arkui/ace_ets_component_attrlack/entry/src/main/ets/MainAbility/pages/loadingProgress.ets

@@ -21,6 +21,8 @@ const TAG = 'ets_apiLack_add';
 @Component
 export default
 struct LoadingProgressCircular {
+  @State circular:LoadingProgressStyle = LoadingProgressStyle.Circular;
+  @State orbital:LoadingProgressStyle = LoadingProgressStyle.Orbital;
   aboutToAppear() {
     Log.showInfo(TAG, `aboutToAppear LoadingProgressCircular start`)
   }
@@ -63,6 +65,7 @@ struct LoadingProgressCircular {
       Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('100%')
       LoadingProgress()
         .color(Color.Blue)
+
     }.width("100%").height("100%")
   }
 }

arkui/ace_ets_component_attrlack/entry/src/main/ets/MainAbility/pages/navigation_lack.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.events.emitter';
+
+@Entry
+@Component
+struct NavigationExample {
+  private arr: number[] = [0, 1, 2, 3, 4, 5]
+  @State hideBar: boolean = true
+  @State toolBar: boolean = true
+  @State hideToolBar: boolean = false
+  @State hideTitleBar: boolean = false
+  @State hideBackButton: boolean = false
+  @State onActionCalled: boolean = false
+  @State titleMode: NavigationTitleMode = NavigationTitleMode.Free
+  @State navagationmode: NavigationMode = NavigationMode.Stack
+  @State navagationmode2: NavigationMode = NavigationMode.Split
+
+  @state commonTile :NavigationCommonTitle = {
+      main:"main",
+      sub: "sub"
+  }
+  @State navTile:NavDestinationCommonTitle = {
+    main:"main_nav",
+    sub: "sub_nav"
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("tabs page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.vertical != null) {
+        this.titleMode = eventData.data.titleMode;
+      }
+      if (eventData.data.hideToolBar != null) {
+        this.hideToolBar = parseInt(eventData.data.hideToolBar);
+      }
+      if (eventData.data.hideTitleBar != null) {
+        this.hideTitleBar = parseInt(eventData.data.hideTitleBar);
+      }
+      if (eventData.data.hideBackButton != null) {
+        this.hideBackButton = parseInt(eventData.data.hideBackButton);
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('progress page show called');
+    var stateChangeEvent = {
+      eventId: 135,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+
+
+  @Builder NavigationTitle() {
+    Column() {
+      Text('title')
+        .width(80)
+        .height(60)
+        .fontColor(Color.Blue)
+        .fontSize(30)
+    }
+    .onClick(() => {
+      console.log("title")
+    })
+  }
+
+  @Builder NavigationMenus() {
+    Row() {
+      Image('images/add.png')
+        .width(25)
+        .height(25)
+      Image('comment/more.png')
+        .width(25)
+        .height(25)
+        .margin({ left: 30 })
+    }.width(100)
+  }
+
+  build() {
+    Column() {
+      Navigation() {
+        Search({ value: '', placeholder: "" }).width('85%').margin(26)
+        List({ space: 5, initialIndex: 0 }) {
+          ForEach(this.arr, (item) => {
+            ListItem() {
+              Text('' + item)
+                .width('90%')
+                .height(80)
+                .backgroundColor('#3366CC')
+                .borderRadius(15)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+            }.editable(true)
+          }, item => item)
+        }
+        .listDirection(Axis.Vertical)
+        .key('Navigation')
+        .height(300)
+        .margin({ top: 10, left: 18 })
+        .width('100%')
+
+        Button(this.hideBar ? "tool bar" : "hide bar")
+          .backgroundColor(0x2788D9).width(200).height(100).fontSize(20)
+          .key('NavigationContent1')
+          .onClick(() => {
+            this.hideBar = !this.hideBar;
+            console.info('navigationContent1 current action state is: ' + this.hideBar);
+            try {
+              var backData = {
+                data: {
+                  "ACTION": this.hideBar,
+                }
+              }
+              var backEvent = {
+                eventId: 1366,
+                priority: events_emitter.EventPriority.LOW
+              }
+              console.info("navigationContent1 start to emit action state")
+              events_emitter.emit(backEvent, backData)
+            } catch (err) {
+              console.info("navigationContent1 emit action state err: " + JSON.stringify(err.message))
+            }
+          })
+          .margin({ left: 135, top: 60 })
+      }
+      .title(this.NavigationTitle)
+      .subTitle('subtitle')
+      .menus(this.NavigationMenus)
+      .titleMode(NavigationTitleMode.Free)
+      .hideTitleBar(false)
+      .hideBackButton(false)
+      .navBarWidth(30)
+      .navBarPosition(NavBarPosition.start)
+      .backButtonIcon('images/grid.svg')
+      .hideNavBar(true)
+      .onNavBarStateChange((isVisible: boolean) => {
+          console.info("isvisible")
+      })
+      .onTitleModeChange((titleModel: NavigationTitleMode) => {
+        console.log('titleMode')
+      })
+      .toolBar({ items: [
+        { value: 'app', icon: 'images/grid.svg', action: () => {
+          console.log("app")
+        } },
+        { value: 'add', icon: 'images/add.svg', action: () => {
+          console.log("add")
+        } },
+        { value: 'collect', icon: 'images/collect.svg', action: () => {
+          console.log("collect")
+        } }] })
+      .hideToolBar(this.hideBar)
+
+    }
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_attrlack/entry/src/main/ets/MainAbility/pages/slider.ets

@@ -22,7 +22,8 @@ const TAG = 'ets_apiLack_add';
 @Entry
 @Component
 export default struct SliderMoving {
-  @State outSetValue: number = 40
+  @State outSetValue: number = 40;
+  @State move:SliderChangeMode = SliderChangeMode.Moving;
   slide() {
     var rect = Utils.getComponentRect("Slider")
     Utils.drag(rect["left"],rect["top"],rect["right"],rect["bottom"],20)

arkui/ace_ets_component_two/entry/src/main/config.json

@@ -18,7 +18,7 @@
     "name": ".MyApplication",
     "mainAbility": "com.open.harmony.acetesttwo.MainAbility",
     "deviceType": [
-      "default",
+      "default",
       "phone"
     ],
     "distro": {
@@ -100,7 +100,8 @@
           "pages/search",
           "pages/scrollBar",
           "pages/ohosRouterA",
-          "pages/ohosRouterB"
+          "pages/ohosRouterB",
+          "pages/WaterflowDemo"
         ],
         "name": ".MainAbility",
         "window": {

arkui/ace_ets_component_two/entry/src/main/ets/MainAbility/pages/WaterFlowDataSource.ets

+/**
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export class WaterFlowDataSource implements IDataSource {
+
+  private dataArray: number[] = []
+  private listeners: DataChangeListener[] = []
+
+  constructor() {
+    for (let i = 0; i <= 100; i++) {
+      this.dataArray.push(i);
+    }
+  }
+
+  // 获取索引对应的数据
+  public getData(index: number): any {
+    return this.dataArray[index]
+  }
+
+  // 通知控制器数据重新加载
+  notifyDataReload(): void {
+    this.listeners.forEach(listener => {
+      listener.onDataReloaded()
+    })
+  }
+
+  // 通知控制器数据增加
+  notifyDataAdd(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataAdded(index)
+    })
+  }
+
+  // 通知控制器数据变化
+  notifyDataChange(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataChanged(index)
+    })
+  }
+
+  // 通知控制器数据删除
+  notifyDataDelete(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataDeleted(index)
+    })
+  }
+
+  // 通知控制器数据位置变化
+  notifyDataMove(from: number, to: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataMoved(from, to)
+    })
+  }
+
+  // 获取数据总数
+  public totalCount(): number {
+    return this.dataArray.length
+  }
+
+  // 注册改变数据的控制器
+  registerDataChangeListener(listener: DataChangeListener): void {
+    if (this.listeners.indexOf(listener) < 0) {
+      this.listeners.push(listener)
+    }
+  }
+
+  // 注销改变数据的控制器
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+    const pos = this.listeners.indexOf(listener);
+    if (pos >= 0) {
+      this.listeners.splice(pos, 1)
+    }
+  }
+
+  // 增加数据
+  public Add1stItem(): void {
+    this.dataArray.splice(0, 0, this.dataArray.length)
+    this.notifyDataAdd(0)
+  }
+
+  // 在数据尾部增加一个元素
+  public AddLastItem(): void {
+    this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
+    this.notifyDataAdd(this.dataArray.length-1)
+  }
+
+  // 在指定索引位置增加一个元素
+  public AddItem(index: number): void {
+    this.dataArray.splice(index, 0, this.dataArray.length)
+    this.notifyDataAdd(index)
+  }
+
+  // 删除第一个元素
+  public Delete1stItem(): void {
+    this.dataArray.splice(0, 1)
+    this.notifyDataDelete(0)
+  }
+
+  // 删除第二个元素
+  public Delete2ndItem(): void {
+    this.dataArray.splice(1, 1)
+    this.notifyDataDelete(1)
+  }
+
+  // 删除最后一个元素
+  public DeleteLastItem(): void {
+    this.dataArray.splice(-1, 1)
+    this.notifyDataDelete(this.dataArray.length)
+  }
+
+  // 重新加载数据
+  public Reload(): void {
+    this.dataArray.splice(1, 1);
+    this.dataArray.splice(3, 2);
+    this.notifyDataReload();
+  }
+}
\ No newline at end of file

arkui/ace_ets_component_two/entry/src/main/ets/MainAbility/pages/WaterflowDemo.ets

+/**
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { WaterFlowDataSource } from './WaterFlowDataSource'
+
+@Entry
+@Component
+struct WaterflowDemo {
+  @State minSize: number = 50
+  @State maxSize: number = 100
+  @State fontSize: number = 24
+  @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
+  scroller: Scroller = new Scroller();
+  datasource: WaterFlowDataSource = new WaterFlowDataSource();
+
+  // 计算flow item宽/高
+  getSize() {
+    let ret = Math.floor(Math.random() * this.maxSize)
+    return (ret > this.minSize ? ret : this.minSize)
+  }
+
+  @Builder itemFoot() {
+    Column() {
+      Text(`Footer`)
+        .fontSize(10)
+        .backgroundColor(Color.Red)
+        .width(50)
+        .height(50)
+        .align(Alignment.Center)
+        .margin({ top: 2 })
+    }
+  }
+
+  build() {
+    Column({ space: 2 }) {
+      WaterFlow({ footer: this.itemFoot, scroller: this.scroller }) {
+        LazyForEach(this.datasource, (item: number) => {
+          FlowItem() {
+            Column() {
+              Text("N" + item).fontSize(12).height('16')
+              Image('res/waterFlowTest(' + item % 5 + ').jpg')
+                .objectFit(ImageFit.Fill)
+            }
+          }
+          .width(this.getSize())
+          .height(this.getSize())
+          .backgroundColor(this.colors[item % 5])
+
+        }, item => item)
+      }
+      .columnsTemplate("1fr 1fr 1fr 1fr")
+      .itemConstraintSize({
+        minWidth: 0,
+        maxWidth: '100%',
+        minHeight: 0,
+        maxHeight: '100%'
+      })
+      .key('waterFlow')
+      .columnsGap(10)
+      .rowsGap(5)
+      .onReachStart(() => {
+        console.info("onReachStart")
+      })
+      .onReachEnd(() => {
+        console.info("onReachEnd")
+      })
+      .backgroundColor(0xFAEEE0)
+      .width('100%')
+      .height('80%')
+      .layoutDirection(FlexDirection.Column)
+    }
+  }
+}

arkui/ace_ets_component_two/entry/src/main/ets/MainAbility/pages/navigation.ets

@@ -132,7 +132,7 @@ struct NavigationExample {
       .titleMode(NavigationTitleMode.Free)
       .hideTitleBar(false)
       .hideBackButton(false)
-      .onTitleModeChanged((titleModel: NavigationTitleMode) => {
+      .onTitleModeChange((titleModel: NavigationTitleMode) => {
         console.log('titleMode')
       })
       .toolBar({ items: [

arkui/ace_ets_component_two/entry/src/main/ets/test/List.test.ets

@@ -39,6 +39,8 @@ import flexDirectionJsunit from './FlexDirectionJsunit.test.ets';
 import flexWrapJsunit from './FlexWrapJsunit.test.ets';
 import datePickerJsunit from './DatePickerJsunit.test.ets';
 import direction2Jsunit from './Direction2Jsunit.test.ets';
+import waterFlowDemoJsunit from './waterFlowDemo.test.ets';
+
 
 export default function testsuite() {
   navigationJsunit();
@@ -68,4 +70,5 @@ export default function testsuite() {
   rowJsunit();
   systempromptJsunit();
   sourceTypeJsunit();
+  waterFlowDemoJsunit();
 }
\ No newline at end of file

arkui/ace_ets_component_two/entry/src/main/ets/test/waterFlowDemo.test.ets

+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter';
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
+import Utils from './Utils.ets'
+
+
+export default function waterFlowDemoJsunit() {
+  describe('waterFlowDemoTest', function () {
+    beforeAll(async function (done) {
+      console.info("waterFlow beforeEach start");
+      let options = {
+        uri: 'pages/WaterflowDemo',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get waterflowDemo state success " + JSON.stringify(pages));
+        if (!("waterflowDemo" == pages.name)) {
+          console.info("get waterflowDemo state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push waterflowDemo page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push waterflowDemo page error: " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("waterflowDemo after each called");
+    });
+
+    /*
+     * @tc.number       SUB_ACE_BASIC_ETS_API_0001
+     * @tc.name         waterflowTest0001
+     * @tc.desic        'waterflowTest0001
+     */
+    it('waterflowTest0001', 0, async function (done) {
+      console.info('waterflowDemo testalphabetIndexerWidth0001 START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('waterFlow');
+      console.info("[waterflowTest0001] component width strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      expect(obj.$type).assertEqual('WaterFlow');
+      done();
+    });
+
+  })
+}

arkui/ace_js_attribute_api/src/main/js/MainAbility/pages/input/router/index.hml

@@ -35,4 +35,7 @@
     <input id="function6" class="title" onclick="functionTest6">
         set/delete test
     </input>
+    <input id="function7" ref="refname" class="title" onclick="functionTest5">
+        watch test
+    </input>
 </div>

arkui/ace_js_attribute_api/src/main/js/MainAbility/pages/input/router/index.js

@@ -22,6 +22,15 @@ export default {
     onInit() {
         this.$watch("watchVal", "onwatch")
     },
+    onConfigurationUpdated(configuration) {
+        console.info("the configuration is " + JSON.stringify(configuration));
+        let fontScale = configuration.fontScale;
+        let locate = configuration.locate;
+        let objectLocate = locate.unicodeSetting;
+        console.info("the fontScale " + fontScale);
+        console.info("the locate is  " + JSON.stringify(locate));
+        console.info("the objectLocate is  " + JSON.stringify(objectLocate));
+    },
     functionTest1() {
         var function1 = this.$element('function1');
         var result = function1.setStyle("font-size", "50px")
@@ -53,6 +62,15 @@ export default {
         this.$delete('Version');
         // log print:Version = undefined
         console.info("Version = " + this.Version);
+
+        // add new attr test
+        console.info("this app is = " + this.$app);
+        console.info("this def is = " + this.$app.$def);
+    },
+    functionTest7() {
+          let input = this.$refs.refname
+          console.info("this refs is = " + this.$refs);
+          console.info("this refs is = " + input);
     },
     onwatch(newVal, oldVal) {
         console.log("watch newVal = " + newVal + ",oldVal =" + oldVal)

arkui/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.hml

@@ -114,6 +114,16 @@
             <canvas id="textBaselineProp" ref="canvas17" style="width: 100%; height: 80px;margin-bottom: 10px;margin-top: 5px;">
             </canvas>
 
+            <canvas id="getLineDash" ref="canvas18" style="width: 100%; height: 80px;margin-bottom: 10px;margin-top: 5px;">
+            </canvas>
+
+            <canvas id="save" ref="canvas19" style="width: 100%; height: 80px;margin-bottom: 10px;margin-top: 5px;">
+            </canvas>
+            <canvas id="restore" ref="canvas20" style="width: 100%; height: 80px;margin-bottom: 10px;margin-top: 5px;">
+            </canvas>
+
+
+
         </div>
     </div>
 </div>

arkui/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.js

@@ -38,6 +38,10 @@ export default {
         this.props15()
         this.props16()
         this.props17()
+        this.props18()
+        this.props19()
+        this.props20()
+
 
     },
     props1() {
@@ -217,6 +221,22 @@ export default {
         ctx.fillText('Alphabetic', 90, 30);
         ctx.textBaseline = 'hanging';
         ctx.fillText('Hanging', 140, 30);
-    }
+    },
+    props18() {
+        const el =this.$refs.canvas18;
+        const ctx = el.getContext('2d');
+        var info = ctx.getLineDash();
+        console.info("the get LineDash.." + JSON.stringify(info));
+    },
+    props19() {
+        const el =this.$refs.canvas19;
+        const ctx = el.getContext('2d');
+        ctx.restore();
+    },
+    props20() {
+        const el =this.$refs.canvas20;
+        const ctx = el.getContext('2d');
+        ctx.save();
+    },
 
 }
\ No newline at end of file