diff --git a/ace/ace_standard/src/main/config.json b/ace/ace_standard/src/main/config.json index 52b8b520a131e8d62859945d7bf3b010d8a6c95b..3ab8612d9ecb82cd2ff6ce2a478edfbb424c3009 100755 --- a/ace/ace_standard/src/main/config.json +++ b/ace/ace_standard/src/main/config.json @@ -53,21 +53,21 @@ "pages/index/index", "pages/routerPush/index", "pages/routerReplace/index", - "pages/button/index", - "pages/chart/index", + "pages/button/router/index", + "pages/chart/router/index", "pages/input/index", "pages/slider/index", "pages/text/index", - "pages/divider/index", - "pages/image/index", + "pages/divider/router/index", + "pages/image/router/index", "pages/label/index", "pages/rating/index", "pages/search/index", "pages/toolbar/index", "pages/textarea/index", - "pages/menu/index", - "pages/span/index", - "pages/switch/index", + "pages/menu/router/index", + "pages/span/router/index", + "pages/switch/router/index", "pages/toggle/index", "pages/option/index", "pages/picker/index", @@ -76,7 +76,7 @@ "pages/progress/index", "pages/qrcode/index", "pages/select/index", - "pages/div/index", + "pages/div/router/index", "pages/badge/index", "pages/dialog/index", "pages/form/index", @@ -93,7 +93,43 @@ "pages/swiper/index", "pages/tabs/index", "pages/tab-bar/index", - "pages/tab-content/index" + "pages/tab-content/index", + "pages/svg_text/index", + "pages/video/index", + "pages/gridContainer/index", + "pages/gridRow/index", + "pages/gridCol/index", + "pages/canvas/index", + "pages/obj_CanvasRenderingContext2D/index", + "pages/obj_Image/index", + "pages/obj_CanvasGradient/index", + "pages/obj_ImageData/index", + "pages/obj_Path2D/index", + "pages/obj_ImageBitmap/index", + "pages/obj_OffscreenCanvas/index", + "pages/obj_OffscreenCanvasRenderingContext2D/index", + "pages/svg/index", + "pages/rect/index", + "pages/circle/index", + "pages/ellipse/index", + "pages/path/index", + "pages/line/index", + "pages/polyline/index", + "pages/polygon/index", + "pages/animate/index", + "pages/animateMotion/index", + "pages/animateTransform/index", + "pages/textPath/index", + "pages/tspan/index", + "pages/div/prop/index", + "pages/div/style/index", + "pages/divider/prop/index", + "pages/button/prop/index", + "pages/chart/prop/index", + "pages/image/prop/index", + "pages/span/prop/index", + "pages/menu/prop/index", + "pages/switch/prop/index" ], "name": "default", "window": { diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.css b/ace/ace_standard/src/main/js/default/pages/animate/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ffdc1d5b9cb8ad5ed3bdb3d44e57389b07de6cf0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/index.css @@ -0,0 +1,17 @@ +.container { + width: 100%; + flex-direction: column; + align-items: center; +} +.title{ + font-size: 18px; + color: grey; + padding: 5px; + text-align: center; +} +.svg-style{ + border: 1px solid #000000; +} +.outerBox{ + flex-direction: column; +} diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.hml b/ace/ace_standard/src/main/js/default/pages/animate/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..590a28a1fc50a39bfc1f57783e659cc53741542d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/index.hml @@ -0,0 +1,27 @@ + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/image/index.js b/ace/ace_standard/src/main/js/default/pages/animate/index.js similarity index 99% rename from ace/ace_standard/src/main/js/default/pages/image/index.js rename to ace/ace_standard/src/main/js/default/pages/animate/index.js index 340173be1a6ec22fa90abccfc38e7ed7e99fc317..5f7728fdfc32729af96180ba1c3abab0e0894f94 100644 --- a/ace/ace_standard/src/main/js/default/pages/image/index.js +++ b/ace/ace_standard/src/main/js/default/pages/animate/index.js @@ -14,5 +14,4 @@ */ export default { - -} \ No newline at end of file +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..0d9ddc7fbcbc4e2e9f390b69ca08429d4745505e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml @@ -0,0 +1,19 @@ + +
+ + + + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/switch/index.js b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js similarity index 70% rename from ace/ace_standard/src/main/js/default/pages/switch/index.js rename to ace/ace_standard/src/main/js/default/pages/animateMotion/index.js index 560c0796dd6c6cb2f23a3506668c4c8bd51b1a76..7326f4bafb3dc62a81b1d676ec84535353ee8f29 100644 --- a/ace/ace_standard/src/main/js/default/pages/switch/index.js +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js @@ -13,20 +13,8 @@ * limitations under the License. */ -import prompt from '@system.prompt'; export default { data: { title: 'World' - }, - switchChange(e){ - if(e.checked){ - prompt.showToast({ - message: "打开开关" - }); - }else{ - prompt.showToast({ - message: "关闭开关" - }); - } } -} \ No newline at end of file +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css new file mode 100644 index 0000000000000000000000000000000000000000..c559fb041924e682782f7d7afbc9e0591dbda708 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css @@ -0,0 +1,14 @@ +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: #f8f8ff; +} +.back_container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..3c27430c1df4d393d65c31c26509e504a6df8199 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml @@ -0,0 +1,31 @@ + +
+
+ + + + + + + + + + + + + + + + + + +
+
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js new file mode 100644 index 0000000000000000000000000000000000000000..7326f4bafb3dc62a81b1d676ec84535353ee8f29 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js @@ -0,0 +1,20 @@ +/** + * 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. + */ + +export default { + data: { + title: 'World' + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.css b/ace/ace_standard/src/main/js/default/pages/button/index.css deleted file mode 100644 index a5e022f0593895148202bf9957530e113dae86c2..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/button/index.css +++ /dev/null @@ -1,78 +0,0 @@ -.div-button { - flex-direction: column; - width: 100%; -} -.circleall{ - width: 90%; - flex-direction: row; - justify-content: space-around; - margin-left: 4%; -} -.circlealls{ - flex-direction: row; -} -.buttons { - margin-top: 15px; - width: 45%; - height: 45px; - text-align: center; - font-size: 14px; - border-radius: 10px; - background-color: #317aff; -} -.title{ - font-size: 13px; - margin-top: 60px; - margin-left: 20px; - color: grey; -} -.all{ - flex-direction: column; - align-items: center; - margin-bottom: 20px; -} -.oriage{ - background-color: #ee8443; -} -.white{ - opacity: 0.4; -} -.icon{ - icon-height: 30px; - icon-width: 30px; -} -.warn{ - background-color: #f55a42; -} -.circle { - radius: 30px; - icon-width: 30px; - icon-height: 30px; - margin-left: 20px; - margin-top: 20px; - background-color: #317aff; -} -.cir{ - background-color: #f55a42; -} -.text { - text-color: #0a59f7; - font-size: 17px; - font-weight: 600; - font-family: sans-serif; - font-style: normal; -} -.text1{ - text-color: #969696; -} -.text2{ - text-color: #e84026; -} -.download { - margin-top: 15px; - width: 88%; - height: 45px; - border-radius: 50px; - text-color: white; - background-color: #007dff; -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.hml b/ace/ace_standard/src/main/js/default/pages/button/index.hml deleted file mode 100644 index ba8548a1acccca9334e0a80674faf141b095985d..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/button/index.hml +++ /dev/null @@ -1,46 +0,0 @@ -
- 普通按钮 -
- - -
-
- - -
-
- - -
- 胶囊按钮 -
- - -
-
- - -
-
- - -
- 圆形按钮 -
- - -
- 文本按钮 -
- - - -
- 长胶囊按钮 -
- - - -
-
diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.js b/ace/ace_standard/src/main/js/default/pages/button/index.js deleted file mode 100644 index f093e003d376a12f448ec78359c591680d0dd7be..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/button/index.js +++ /dev/null @@ -1,34 +0,0 @@ -/* - * 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. - */ - -export default { - data: { - progress: 10, - downloadText: "进度条按钮" - }, - setProgress(e) { - var i=0 - var set= setInterval(()=>{ - i+=10 - this.progress=i - this.downloadText = this.progress + "%"; - this.$element('download-btn').setProgress({ progress: this.progress }); - if(this.progress>=100){ - clearInterval(set) - this.downloadText="完成" - } - },1000) - }, -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.css b/ace/ace_standard/src/main/js/default/pages/button/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..43c222fb8a0a6e7c686a7a50c8e49b271fb6d4b1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.css @@ -0,0 +1,519 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#typeArc{ + height: 30px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + +#typeCapsule{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeCircle{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeText{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeDownload{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#value{ + height: 15px; + font-size: 10px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#valueNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#icon{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#iconNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementStart{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementEnd{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementTop{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementBottom{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#waitingTrue{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#waitingFalse{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#waitingNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..48343c8de1956769b71813a89260035cecc8bf21 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml @@ -0,0 +1,238 @@ + + +
+
+ + button通用属性 + + + + 通用属性 -- id + + + + + 通用属性 -- class + + + + + + 通用属性 -- style + + + + + 通用属性 -- ref + + + + + + 通用属性 -- disabled + + + + + + + 通用属性 -- focusable + + + + + + + 通用属性 -- data-* + + + + + + 通用属性 -- click-effect + + + + + + + + 通用属性 -- dir + + + + + + + + 渲染属性 -- for + + + + + + + 渲染属性 -- if + + + + + 渲染属性 -- show + + + + +
+ +
+
+
+ + button特有属性 + + + + 特有属性 -- type + + + + + + + + + + 特有属性 -- value + + + + + + 特有属性 -- icon + + + + + + 特有属性 -- placement + + + + + + + + + 特有属性 -- waiting + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.js b/ace/ace_standard/src/main/js/default/pages/button/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..a9f6c506ff0c62f0634a8ffbbc34f053c21b4c98 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.js @@ -0,0 +1,149 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + + typeArc : null, + typeCapsule : null, + typeCircle : null, + typeText : null, + typeDownload : null, + typeNone : null, + value : null, + valueNone : null, + icon : null, + iconNone : null, + placementStart : null, + placementEnd : null, + placementTop : null, + placementBottom : null, + placementNone : null, + waitingTrue : null, + waitingFalse : null, + waitingNone : null + }, + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone, + styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, + forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone, + + typeArc : this.typeArc, typeCapsule : this.typeCapsule, typeCircle : this.typeCircle, + typeText : this.typeText, typeDownload : this.typeDownload, typeNone : this.typeNone, + value : this.value, valueNone : this.valueNone, icon : this.icon, iconNone : this.iconNone, + placementStart : this.placementStart, placementEnd : this.placementEnd, placementTop : this.placementTop, + placementBottom : this.placementBottom, placementNone : this.placementNone, + waitingTrue : this.waitingTrue, waitingFalse : this.waitingFalse, waitingNone : this.waitingNone + } + }, + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + getSpecificPropValues(){ + this.typeArc = this.$element("typeArc").getInspector() + this.typeCapsule = this.$element("typeCapsule").getInspector() + this.typeCircle = this.$element("typeCircle").getInspector() + this.typeText = this.$element("typeText").getInspector() + this.typeDownload = this.$element("typeDownload").getInspector() + this.typeNone = this.$element("typeNone").getInspector() + this.value = this.$element("value").getInspector() + this.valueNone = this.$element("valueNone").getInspector() + this.icon = this.$element("icon").getInspector() + this.iconNone = this.$element("iconNone").getInspector() + this.placementStart = this.$element("placementStart").getInspector() + this.placementEnd = this.$element("placementEnd").getInspector() + this.placementTop = this.$element("placementTop").getInspector() + this.placementBottom = this.$element("placementBottom").getInspector() + this.placementNone = this.$element("placementNone").getInspector() + this.waitingTrue = this.$element("waitingTrue").getInspector() + this.waitingFalse = this.$element("waitingFalse").getInspector() + this.waitingNone = this.$element("waitingNone").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.css b/ace/ace_standard/src/main/js/default/pages/button/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..9ddb2a97656b072b75aa2d8d787cb7896a46d0e8 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.css @@ -0,0 +1,440 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +button{ + width: 60%; + height: 20px; +} +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 60%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 20%; +} + +.function-container{ + flex-direction: column; + height: 20%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +.style1{ + width: 100%; + mask-color:red; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 20px; + padding-left: 10px; + padding-top: 1px; + padding-right: 15px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 0px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 70%; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + height: 20px; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + height: 20px; + width: 60%; + padding: 1px; + margin: 5px; + border: 2px solid #000000; +} + +.style5{ + width: 50%; + height: 20px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 20px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + height: 20px; + text-color:salmon; + font-size:15px; + allow-scale:false; + font-style:normal; + font-weight:100; + font-family:sans-serif; + icon-width:60px; + icon-height:15px; + radius:10px; +} + +.style8 { + height: 20px; + margin-bottom: 5px; + margin-top: 5px; + background-color: sandybrown; +} +.event1{ + width: 100%; + height: 20px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 20px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 20px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 20px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 20px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 20px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 20px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 20px; + margin: 2px; + text-color:skyblue; + font-size:15px; + allow-scale:true; + font-style:italic; + font-weight:200; + font-family:sans-serif; +} + +.prop5 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + +.prop6 { + background-color: gold; + height: 30px; + width: 100%; + margin: 2px; +} + +.prop7 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + +.prop8 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + +.prop9 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 100%; + height: 55px; + margin: 5px; +} + +.gradient1{ + margin: 5px; + height: 20px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + height: 20px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + height: 20px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + margin: 5px; + height: 20px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access1{ + color: #321124; + height: 20px; + margin: 5px; + background-color: chartreuse; +} + +.atom1{ + background-color: saddlebrown; + width: 40px; + height: 40px; +} +.atom2{ + background-color: blueviolet; + width: 40px; + height: 40px; +} +.atom3{ + background-color: aquamarine; + width: 40px; + height: 40px; +} + +.multimode1{ + background-color: firebrick; + height: 20px; + width: 100%; + margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 60px; + overflow: scroll; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.hml b/ace/ace_standard/src/main/js/default/pages/button/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..25e2ec4635f26d42e86d7ecef2ecbc8cd1fcadc1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.hml @@ -0,0 +1,353 @@ + + +
+
+ +
+ + 通用样式 + + + + button通用样式1 + + + + + button通用样式2 + + + + + button通用样式3 + + + + + button通用样式4 + + + + + button通用样式5 + +
+ + +
+ + + button特有样式 + + +
+ + + + +
+ + 动画样式 + + + + button动画样式1 + + + + + button动画样式2 + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + button通用属性1 + + + + + button通用属性2 + + + + + button通用属性3 + + + + + arc按钮 + + + + + capsule按钮 + + + + + circle按钮 + + + + + text按钮 + + + + + download按钮 + + + + + 普通按钮 + + + +
+
+
+ +
+ + 通用事件 + + + button通用事件1 + + + + + button通用事件2 + + + + + button通用事件3 + + +
+
+
+ +
+ + 通用方法 + + + button通用方法1 + + + + + button通用方法2 + + + + + button通用方法3 + + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + button渐变样式1 + + + + + button渐变样式2 + + + + + button渐变样式3 + + + + + button渐变样式4 + + +
+
+
+ +
+ + 无障碍 + + + button无障碍1 + + +
+
+
+ +
+ + 原子布局 + + + button原子布局1 + +
+ + + +
+ + button原子布局2 + +
+ + + +
+ + button原子布局3 + +
+ + + +
+
+
+
+ + 多模输入 + + + button多模输入1 + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.js b/ace/ace_standard/src/main/js/default/pages/button/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..038ade7844e7cea21a954ea2e4f320b65493fdb5 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.js @@ -0,0 +1,507 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + data: { + progress: 10, + downloadText: "进度条按钮" + }, + setProgress(e) { + var i=0 + var set= setInterval(()=>{ + i+=10 + this.progress=i + this.downloadText = this.progress + "%"; + this.$element('download-btn').setProgress({ progress: this.progress }); + if(this.progress>=100){ + clearInterval(set) + this.downloadText="完成" + } + },1000) + }, + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.css b/ace/ace_standard/src/main/js/default/pages/button/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.hml b/ace/ace_standard/src/main/js/default/pages/button/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.js b/ace/ace_standard/src/main/js/default/pages/button/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/style/index.js @@ -0,0 +1,14 @@ +/** + * 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. + */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.css b/ace/ace_standard/src/main/js/default/pages/canvas/index.css new file mode 100644 index 0000000000000000000000000000000000000000..49d51183a908826b56cf3de17f619898256bb397 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.css @@ -0,0 +1,440 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + flex-direction: column; + flex-wrap:wrap; + justify-content:flex-start; + align-items: flex-end; + align-content:space-around; + display: flex; + height: 40px; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight: 1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + background-color: #321124; + margin: 5px; + width: 90%; + height: 30px; +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.hml b/ace/ace_standard/src/main/js/default/pages/canvas/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..929efb068cf14d6c85dfc92f72a8f0ac5467fa3a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.hml @@ -0,0 +1,280 @@ + + +
+
+
+ + 通用样式 + + + canvas通用样式1 + + + + + canvas通用样式2 + + + + + canvas通用样式3 + + + + + canvas通用样式4 + + + + + canvas通用样式5 + +
+ + + + +
+
+ + + + +
+ + 通用事件 + + + canvas通用事件1 + + + + + canvas通用事件2 + + + + + canvas通用事件3 + + + +
+
+ + + + +
+
+ + 通用属性 + + + canvas通用属性1 + + + + + canvas通用属性2 + + + + + canvas通用属性3 + + + +
+ + + +
+ + 通用方法 + + + canvas通用方法1 + + + + canvas通用方法2 + + + + canvas通用方法3 + + + + canvas特有方法4 + + + + canvas特有方法5 + + +
+ + + +
+ + 动画样式 + + + canvas动画样式1 + + + + + canvas动画样式2 + + + +
+
+ + + + +
+
+ + 渐变样式 + + + canvas渐变样式1 + + + + + canvas渐变样式2 + + + + + canvas渐变样式3 + + + + + canvas渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + canvas无障碍1 + + + +
+
+
+
+ + 原子布局 + + + canvas原子布局1 + +
+ + + + + + + + + + + + +
+ + canvas原子布局2 + +
+ + + + + + + + + + + + +
+ + canvas原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+
+ + 多模输入 + + + canvas多模输入1 + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.js b/ace/ace_standard/src/main/js/default/pages/canvas/index.js new file mode 100644 index 0000000000000000000000000000000000000000..41cf7b9b6582d34b29ac471bb39b772b24128514 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.js @@ -0,0 +1,465 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$refs.function1; + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$refs.function2; + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$refs.function3; + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$refs.function4; + let ctx = function4.getContext('2d', { antialias: true }); + ctx.beginPath(); + ctx.arc(50, 15, 15, 0, 6.28); + ctx.stroke(); + }, + functionTest5(event){ + var function5 = this.$refs.function5; + let dataURL = function5.toDataURL({type: 'image/png'}, {quality: 0.92}); + prompt.showToast({ + message: 'function5 dataURL:' + dataURL + }); + }, +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/chart/index.css b/ace/ace_standard/src/main/js/default/pages/chart/index.css deleted file mode 100644 index 13b25306c535b95aa9db3773f1e82bfc76a88418..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/chart/index.css +++ /dev/null @@ -1,22 +0,0 @@ -.container { - flex-direction: column; - justify-content: center; - align-items: center; -} -.chart-region { - height: 400px; - width: 700px; -} -.chart-background { - object-fit: fill; -} -.chart-data { - width: 700px; - height: 600px; -} -button { - width: 100%; - height: 50px; - background-color: #F4F2F1; - text-color: #0C81F3; -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/chart/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/index.hml deleted file mode 100644 index 4455b4537471d7dd1fe34052c85bed1b943e1788..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/chart/index.hml +++ /dev/null @@ -1,7 +0,0 @@ -
- - - - - -
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/chart/index.js b/ace/ace_standard/src/main/js/default/pages/chart/index.js deleted file mode 100644 index 608abe82e1d84362dc0390f8e102b4c005076a62..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/chart/index.js +++ /dev/null @@ -1,64 +0,0 @@ -/* - * 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. - */ - -export default { - data: { - lineData: [ - { - strokeColor: '#0081ff', - fillColor: '#cce5ff', - data: [763, 550, 551, 554, 731, 654, 525, 696, - 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], - gradient: true, - } - ], - lineOps: { - xAxis: { - min: 0, - max: 20, - display: false, - }, - yAxis: { - min: 0, - max: 1000, - display: false, - }, - series: { - lineStyle: { - width: "5px", - smooth: true, - }, - headPoint: { - shape: "circle", - size: 20, - strokeWidth: 5, - fillColor: '#ffffff', - strokeColor: '#007aff', - display: true, - }, - loop: { - margin: 2, - gradient: true, - } - } - }, - }, - addData() { - this.$refs.linechart.append({ - serial: 0, - data: [Math.floor(Math.random() * 400) + 400] - }) - } -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/chart/prop/index.css b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a07fbad739e4876d9dfac1abdf7c0acff2c2253c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.css @@ -0,0 +1,557 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + height: 15px; + margin-bottom: 2px; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + height: 15px; + margin-bottom: 2px; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + height: 15px; + margin-bottom: 2px; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + height: 15px; + margin-bottom: 2px; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + margin-bottom: 2px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + margin-bottom: 2px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + margin-bottom: 2px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + margin-bottom: 2px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + height: 15px; + margin-bottom: 2px; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + height: 15px; + margin-bottom: 2px; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + height: 15px; + margin-bottom: 2px; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + height: 15px; + margin-bottom: 2px; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + height: 15px; + margin-bottom: 2px; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + height: 15px; + margin-bottom: 2px; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#typeBar{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + +#typeLine{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeGauge{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeProgress{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeLoading{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeRainbow{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeNone{ + height: 15px; + font-size: 10px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#options{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#optionsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#datasets{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#datasetsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#segmentsSeg{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#segmentsRain{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#segmentsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#effectsTrue{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#effectsFalse{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#effectsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#animationduration{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#animationdurationNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/chart/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7f143b9c310fd8a6c091bd72c1b6d52ad10bee85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.hml @@ -0,0 +1,245 @@ + + +
+
+ + chart通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + chart特有属性 + + + + 特有属性 -- type + + + + + + + + + + + + + + + + + + 特有属性 -- options + + + + + + + + 特有属性 -- datasets + + + + + + + + 特有属性 -- segments + + + + + + + + + + 特有属性 -- waiting + + + + + + + + + + 特有属性 -- animationduration + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/prop/index.js b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..73383d2bf3bb4b6bcf877ec680754d9a94f462ea --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.js @@ -0,0 +1,211 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + data:{ + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, + 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + lineSeg:{ + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + lineRain:[ + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'水果' + } + ], + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + + typeBar : null, + typeLine : null, + typeGauge : null, + typeProgress : null, + typeLoading : null, + typeRainbow : null, + typeNone : null, + options : null, + optionsNone : null, + datasets : null, + datasetsNone : null, + segmentsSeg : null, + segmentsRain : null, + segmentsNone : null, + effectsTrue : null, + effectsFalse : null, + effectsNone : null, + animationduration : null, + animationdurationNone : null, + }, + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone, + styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, + forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone, + + typeBar : this.typeBar, typeLine : this.typeLine, typeGauge : this.typeGauge, + typeProgress : this.typeProgress, typeLoading : this.typeLoading, typeRainbow : this.typeRainbow, + typeNone : this.typeNone, options : this.options, + optionsNone : this.optionsNone, datasets : this.datasets, datasetsNone : this.datasetsNone, + segmentsSeg : this.segmentsSeg, segmentsRain : this.segmentsRain, segmentsNone : this.segmentsNone, + effectsTrue : this.effectsTrue, effectsFalse : this.effectsFalse, effectsNone : this.effectsNone, + animationduration : this.animationduration, animationdurationNone : this.animationdurationNone + } + }, + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + getSpecificPropValues(){ + this.typeBar = this.$element("typeBar").getInspector() + this.typeLine = this.$element("typeLine").getInspector() + this.typeGauge = this.$element("typeGauge").getInspector() + this.typeProgress = this.$element("typeProgress").getInspector() + this.typeLoading = this.$element("typeLoading").getInspector() + this.typeRainbow = this.$element("typeRainbow").getInspector() + this.typeNone = this.$element("typeNone").getInspector() + this.options = this.$element("options").getInspector() + this.optionsNone = this.$element("optionsNone").getInspector() + this.datasets = this.$element("datasets").getInspector() + this.datasetsNone = this.$element("datasetsNone").getInspector() + this.segmentsSeg = this.$element("segmentsSeg").getInspector() + this.segmentsRain = this.$element("segmentsRain").getInspector() + this.segmentsNone = this.$element("segmentsNone").getInspector() + this.effectsTrue = this.$element("effectsTrue").getInspector() + this.effectsFalse = this.$element("effectsFalse").getInspector() + this.effectsNone = this.$element("effectsNone").getInspector() + this.animationduration = this.$element("animationduration").getInspector() + this.animationdurationNone = this.$element("animationdurationNone").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/chart/router/index.css b/ace/ace_standard/src/main/js/default/pages/chart/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..daaa1f4c27a4483e4ef9c17b8403652a983a8017 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/chart/router/index.css @@ -0,0 +1,437 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 80%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 35%; +} + +.function-container{ + flex-direction: column; + height: 30%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +.style1{ + width: 100%; + mask-color:red; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 1px; + padding-right: 15px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 0px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 70%; + height: 12%; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 100%; + height: 8%; + padding: 1px; + margin: 5px; + border: 2px solid #000000; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + height: 40px; + margin-bottom: 5px; + margin-top: 5px; + background-color: navajowhite; +} + +.style8 { + height: 40px; + margin-bottom: 5px; + margin-top: 5px; + background-color: sandybrown; +} + +.event1{ + width: 100%; + height: 30px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 30px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 30px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 30px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 20px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 20px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 20px; + margin: 2px; +} + +.prop5 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; + stroke-width:10px; + start-angle:90; + total-angle:180; + font-family:sans-serif; + font-size:25px; + center-x:10px; + center-y:10px; + radius:5px; + colors:salmon,sandybrown,gold,black; + weights:2,2,2; +} +.prop6 { + background-color: gold; + height: 30px; + width: 100%; + margin: 2px; +} + +.prop7 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + +.prop8 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + +.prop9 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; + stroke-width:10px; + start-angle:90; + total-angle:180; + font-family:sans-serif; + font-size:25px; +} + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 100%; + height: 55px; + margin: 5px; +} + +.gradient1{ + margin: 5px; + height: 40px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + height: 40px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + height: 40px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + margin: 5px; + height: 40px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access1{ + color: #321124; + height: 40px; + margin: 5px; + background-color: chartreuse; +} + +.atom1{ + background-color: saddlebrown; + width: 40px; + height: 40px; +} +.atom2{ + background-color: blueviolet; + width: 40px; + height: 40px; +} +.atom3{ + background-color: aquamarine; + width: 40px; + height: 40px; +} + +.multimode1{ + background-color: firebrick; + height: 40px; + width: 100%; + margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 10px; + overflow: scroll; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/chart/router/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..746242cd12301b5c83bb3b5a071b181b6b3f5137 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/chart/router/index.hml @@ -0,0 +1,361 @@ + + +
+
+ +
+ + 通用样式 + + + + chart通用样式1 + + + + + + chart通用样式2 + + + + + + chart通用样式3 + + + + + + chart通用样式4 + + + + + + chart通用样式5 + +
+ + + + +
+ + + chart特有样式 + + + +
+ + + + +
+ + 动画样式 + + + + chart动画样式1 + + + + + + chart动画样式2 + + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + chart通用属性1 + + + + + + chart通用属性2 + + + + + + chart通用属性3 + + + + + + chart特有属性4 + + + + + + chart特有属性5 + + + + + + chart特有属性6 + + + + + + chart特有属性7 + + + + + + chart特有属性8 + + + + + + chart特有属性9 + + + +
+
+
+ +
+ + 通用事件 + + + chart通用事件1 + + + + + + chart通用事件2 + + + + + + chart通用事件3 + + + +
+
+
+ +
+ + 通用方法 + + + chart通用方法1 + + + + + + chart通用方法2 + + + + + + chart通用方法3 + + + + + + chart特有事件1 + + + + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + chart渐变样式1 + + + + + + chart渐变样式2 + + + + + + chart渐变样式3 + + + + + + chart渐变样式4 + + + +
+
+
+ +
+ + 无障碍 + + + chart无障碍1 + + + +
+
+
+ +
+ + 原子布局 + + + chart原子布局1 + +
+ + + + + + +
+ + chart原子布局2 + +
+ + + + + + +
+ + chart原子布局3 + +
+ + + + + + +
+
+
+
+ + 多模输入 + + + chart多模输入1 + + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/chart/router/index.js b/ace/ace_standard/src/main/js/default/pages/chart/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..a392bff72e9b75d8060c4f63d0a0a240420f226b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/chart/router/index.js @@ -0,0 +1,557 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + data: { + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, + 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + lineSeg:{ + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + lineRain:[ + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'水果' + } + ] + }, + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 400] + }) + }, + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/chart/style/index.css b/ace/ace_standard/src/main/js/default/pages/chart/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/chart/style/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/chart/style/index.js b/ace/ace_standard/src/main/js/default/pages/chart/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/chart/style/index.js @@ -0,0 +1,14 @@ +/** + * 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. + */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.css b/ace/ace_standard/src/main/js/default/pages/circle/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e81f688df1b735e0a559604c5471e2344ea321f9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/circle/index.css @@ -0,0 +1,366 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 100px; + height:50px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ +/* width: 100%;*/ +/* height:100px;*/ + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 10%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 60%; + height: 70px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 70px; + position: absolute; + left: 10px; + top: 80px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + margin-bottom: 50px; + margin-top: 10px; + color: green; + stroke-width: 30px; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.prop7 { + background-color: crimson; + width: 100%; + margin: 3px 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 0.8; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + stroke-width: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + height:100px; + stroke-width:4px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + height:100px; + stroke-width: 4px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + height:100px; + stroke-width: 4px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + height:100px; + stroke-width: 4px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + height:100px; + color: #321124; + stroke-width: 4px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + height:100px; + color: #978666; + stroke-width: 4px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.hml b/ace/ace_standard/src/main/js/default/pages/circle/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..3259148faa1a33a109f7a2daef0d68acac00f4f8 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/circle/index.hml @@ -0,0 +1,189 @@ +
+
+ + 通用样式 + + + circle通用样式1 + + + + + circle通用样式2 + + + + + circle通用样式3 + + + + + + + circle通用样式4 + + + + circle通用样式5 + +
+ + +
+
+ + +
+
+ + 通用属性 + + + circle通用属性1 + + + + + + + circle通用属性2 + + + + + + + circle通用属性3 + + + + + + + circle通用属性4 + + + + + + + circle通用属性5 + + + + + + + circle通用属性6 + + + + + + + circle通用属性7 + + + + +
+ + +
+ + 动画样式 + + + circle动画样式1 + + + + + + + + + + + + + + + circle动画样式2 + + + + + + + + + + + + + + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + circle渐变样式1 + + + + circle渐变样式2 + + + + circle渐变样式3 + + + + circle渐变样式4 + + +
+ + +
+ + 无障碍 + + + circle无障碍1 + + +
+ + + +
+ + 多模输入 + + + circle多模输入1 + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.js b/ace/ace_standard/src/main/js/default/pages/circle/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/circle/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/div/prop/index.css b/ace/ace_standard/src/main/js/default/pages/div/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e815b366974cb2a04e98ed2dd5b2ba57913ff8c2 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/div/prop/index.css @@ -0,0 +1,347 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropFalse { + flex-weight: 1; + background-color:#00ffff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropNone { + flex-weight: 1; + background-color:#00000d; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/div/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/div/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..d53736f4d28fc1842085d1707883e9b42766a0a2 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/div/prop/index.hml @@ -0,0 +1,165 @@ + + +
+
+ + div通用属性 + + + + 通用属性 -- id + +
+
+ + + 通用属性 -- class + +
+
+
+
+ + + + 通用属性 -- style + +
+
+ + + 通用属性 -- ref + +
+
+
+
+ + + 通用属性 -- disabled + +
+
+
+
+
+
+ + + 通用属性 -- focusable + +
+
+
+
+
+
+ + + 通用属性 -- data-* + +
+
+
+
+ + + 通用属性 -- click-effect + +
+
+
+
+
+
+
+
+ + + 通用属性 -- dir + +
+
+
+
+
+
+
+
+ + + 渲染属性 -- for + +
+
+
+
+
+
+ + + 渲染属性 -- if + +
+
+ + + 渲染属性 -- show + +
+
+
+
+
+
+
+ +
+
+
+ + div特有属性 + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/div/prop/index.js b/ace/ace_standard/src/main/js/default/pages/div/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..5625ecb4562dc3d76b761fc475d00851748b3bf1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/div/prop/index.js @@ -0,0 +1,121 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + ifPropFalse : null, + ifPropNone : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null + }, + + onShow(){ + this.getCommonPropValues(); + globalThis.value = { + idProp : this.idProp, + classProp : this.classProp, + classPropNone : this.classPropNone, + styleProp : this.styleProp, + refProp : this.refProp, + refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, + disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, + focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, + focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, + dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, + dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, + dirPropNone : this.dirPropNone, + forPropNull : this.forPropNull, + forPropOne : this.forPropOne, + forPropThree : this.forPropThree, + ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, +} diff --git a/ace/ace_standard/src/main/js/default/pages/div/index.css b/ace/ace_standard/src/main/js/default/pages/div/router/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/div/index.css rename to ace/ace_standard/src/main/js/default/pages/div/router/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/div/index.hml b/ace/ace_standard/src/main/js/default/pages/div/router/index.hml similarity index 96% rename from ace/ace_standard/src/main/js/default/pages/div/index.hml rename to ace/ace_standard/src/main/js/default/pages/div/router/index.hml index 44c740e3ff11f7f1a8f12ec8cf07f04b6a07afb5..edfb36f1774ceded6d1e5a5b28bc665b225920f2 100644 --- a/ace/ace_standard/src/main/js/default/pages/div/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/div/router/index.hml @@ -1,5 +1,5 @@ + +
+
+ + div通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 通用样式9-20 \n display flex z-index position + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 通用样式21-23 box-shadow + +
+
+
+
+
+
+
+
+ + + 通用样式23-25 visibility clip-path + +
+
+
+
+ + + 通用样式26-31 background + +
+
+
+
+
+
+
+
+
+
+ + + 通用样式32 clip-path image-fill mask-image + +
+
+
+
+
+
+ + div特有样式 + + + + 特有样式 flex-direction flex-wrap justify-content align-items align-content + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + 文本 + +
+
+
+
+ + + + + 特有样式 overflow scrollbar-color scrollbar-width overscroll-effect + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 特有样式 grid + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.js b/ace/ace_standard/src/main/js/default/pages/div/style/index.js similarity index 65% rename from ace/ace_standard/src/main/js/default/pages/divider/index.js rename to ace/ace_standard/src/main/js/default/pages/div/style/index.js index 65b64b6e48b2dc6b6be4862d921115d432980a03..8179ff70cbe9fa27c38c5386a6f497949bf60f3a 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/index.js +++ b/ace/ace_standard/src/main/js/default/pages/div/style/index.js @@ -13,20 +13,7 @@ * limitations under the License. */ -import prompt from '@system.prompt'; - export default { - data: { - title: 'World' - }, - onShow(){ - // 通用属性 - var prop1 = this.$element("prop1"); - var name1 = prop1.dataSet.name - var prop2 = this.$refs.prop2; - var name2 = prop2.dataSet.name - prompt.showToast({ - message: 'prop1--' + name1 + '\nprop2--' + name2 - }); - } -} \ No newline at end of file + + +} diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/index.hml deleted file mode 100644 index 318aa797b0e75160f57b7484617a078b5066fc41..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/divider/index.hml +++ /dev/null @@ -1,235 +0,0 @@ - - -
-
- - 通用样式 - - - divider通用样式1 - - - - - divider通用样式2 - - - - - divider通用样式3 - - - - - divider通用样式4 - - - - - divider通用样式5 - -
- - - - -
- - divider特有样式 - - - -
- - - - -
-
- - 通用属性 - - - divider通用属性1 - - - - - divider通用属性2 - - - - - divider通用属性3 - - - - - divider特有属性4 - - - - - divider特有属性5 - - - - - - -
- - -
- - 动画样式 - - - divider动画样式1 - - - - - divider动画样式2 - - - -
-
- - - - -
-
- - 渐变样式 - - - divider渐变样式1 - - - - - divider渐变样式2 - - - - - divider渐变样式3 - - - - - divider渐变样式4 - - - -
- - -
- - 无障碍 - - - divider无障碍1 - - - -
- - -
- - 原子布局 - - - divider原子布局1 - -
- - - - - - - - - - - - -
- - divider原子布局2 - -
- - - - - - - - - - - - -
- - divider原子布局3 - -
- - - - - - - - - - - - -
-
- - -
- - 多模输入 - - - divider多模输入1 - - - -
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..6ffcda0b1aa1040a90903ce3644a53b1b8d634d9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css @@ -0,0 +1,367 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} +divider { + color: #0d0000; +} +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropFalse { + flex-weight: 1; + background-color:#00ffff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropNone { + flex-weight: 1; + background-color:#00000d; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} +#verticalTrue { + height: 10px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#verticalFalse { + height: 10px; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..76473a8fae3bb6f1fb595aa1db670cee821580ba --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml @@ -0,0 +1,169 @@ + + +
+
+ + divider通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + divider特有属性 + + + divider特有属性 -- vertical + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e3d1971b98e6d11e37ad32760fd0646bef47a554 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js @@ -0,0 +1,128 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + verticalTrue: null, + verticalFalse: null + }, + + onCreate(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, + classProp : this.classProp, + classPropNone : this.classPropNone, + styleProp : this.styleProp, + refProp : this.refProp, + refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, + disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, + focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, + focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, + dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, + dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, + dirPropNone : this.dirPropNone, + forPropNull : this.forPropNull, + forPropOne : this.forPropOne, + forPropThree : this.forPropThree, + ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone, + verticalTrue: this.verticalTrue, + verticalFalse: this.verticalFalse + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + getSpecificPropValues () { + this.verticalTrue = this.$element("verticalTrue").getInspector() + this.verticalFalse = this.$element("verticalFalse").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.css b/ace/ace_standard/src/main/js/default/pages/divider/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..fe52f6baae7dc334d720a1177293b64ac31ef7f3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.css @@ -0,0 +1,313 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 45%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 40%; +} + +.function-container{ + flex-direction: column; + height: 25%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +divider { + color: darkblue; +} +.style1{ + width: 100%; + mask-color:red; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 1px; + padding-right: 15px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 0px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2 { + height: 200px; + margin: 10px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 1; +} +.event1{ + width: 100%; + height: 40px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 40px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 40px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 40px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 40px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 40px; + margin: 2px; +} + +.prop5 { + background-color: gold; + height: 40px; + width: 100%; + margin: 2px; +} + + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 100%; + height: 55px; + margin: 5px; +} + +.gradient1{ + margin: 5px; + height: 40px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + height: 40px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + height: 40px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + margin: 5px; + height: 40px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access1{ + color: #321124; + height: 40px; + margin: 5px; +} + +.multimode1{ + background-color: firebrick; + height: 40px; + margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 60px; + overflow: scroll; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..bc74802387843a3114152b1ccc408990533044f1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml @@ -0,0 +1,259 @@ + + +
+
+ +
+ + 通用样式 + + + 仅支持如下样式 + + +
+ + + + +
+ + 动画样式 + + + + divider动画样式1 + + + + + + divider动画样式2 + + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + divider通用属性1 + + + + + + divider通用属性2 + + + + + + divider通用属性3 + + + + + + divider特有属性4 + + + + + + divider特有属性5 + + + +
+
+
+ +
+ + 通用事件 + + + divider不支持通用事件 + +
+
+
+ +
+ + 通用方法 + + + divider不支持通用方法 + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + divider渐变样式1 + + + + + + divider渐变样式2 + + + + + + divider渐变样式3 + + + + + + divider渐变样式4 + + + +
+
+
+ +
+ + 无障碍 + + + divider无障碍1 + + + +
+
+
+
+ + 原子布局 + + + divider原子布局1 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + divider原子布局2 + +
+ + + + + + + + + + + + +
+ + divider原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + divider多模输入1 + + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.js b/ace/ace_standard/src/main/js/default/pages/divider/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4988a2eb69e2c8a36a209d0ac6fb600e3b0b3907 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.js @@ -0,0 +1,104 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + onMenuSelected(e) { + prompt.showToast({ + message: e.value + }) + }, + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, +} diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.css b/ace/ace_standard/src/main/js/default/pages/ellipse/index.css new file mode 100644 index 0000000000000000000000000000000000000000..bbf4883fa2cdebf3405bf634b69a1db7aa3cd69d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.css @@ -0,0 +1,359 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 100px; + height: 50px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ +/* width: 100%;*/ + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 85%; + height: 7%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 80%; + height: 50px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 100px; + height: 50px; + position: absolute; + left: 10px; + top: 50px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + margin-bottom: 50px; + margin-top: 10px; + color: green; + stroke-width: 30px; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.prop7 { + background-color: crimson; + width: 100%; + margin: 3px 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + stroke-width: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml b/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..544f4580c2fcb73c0c21bb36db35c1089a111332 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml @@ -0,0 +1,188 @@ +
+
+ + 通用样式 + + + ellipse通用样式1 + + + + ellipse通用样式2 + + + + ellipse通用样式3 + + + + + + ellipse通用样式4 + + + + ellipse通用样式5 + +
+ + +
+
+ + +
+
+ + 通用属性 + + + circle通用属性1 + + + + + + + circle通用属性2 + + + + + + + circle通用属性3 + + + + + + + circle通用属性4 + + + + + + + circle通用属性5 + + + + + + + circle通用属性6 + + + + + + + circle通用属性7 + + + + +
+ + +
+ + 动画样式 + + + ellipse动画样式1 + + + + + + ellipse动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + ellipse渐变样式1 + + + + + + ellipse渐变样式2 + + + + + + ellipse渐变样式3 + + + + + + ellipse渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + ellipse无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + ellipse多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.js b/ace/ace_standard/src/main/js/default/pages/ellipse/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.css b/ace/ace_standard/src/main/js/default/pages/gridCol/index.css new file mode 100644 index 0000000000000000000000000000000000000000..95505ebff50cf267881ac97c8291266c53e578eb --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.css @@ -0,0 +1,483 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + flex-direction: column; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; + display: flex; + height: 40px; + background-color: blue; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 20px; + overflow:scroll; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; +} + +.style9{ + display: grid; + height: 20px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight: 1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + background-color: #321124; + margin: 5px; + width: 90%; + height: 30px; +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 60%; + height: 20px; + overflow:scroll; +} +.container-style { + width: 100%; + height: 50px; + background-color: #b8b8bf; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml b/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..c65fde1f68d21191d951da72a8e1ac4a1488f559 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml @@ -0,0 +1,311 @@ + + +
+
+
+ + 通用样式 + + + grid-col通用样式1 + + + + + + + grid-col通用样式2 + + + + + + + grid-col通用样式3 + + + + + + + grid-col通用样式4 + + + + + + + grid-col通用样式5 + + + + + + + + + grid-col特有样式 + + + + + + + + + + + + +
+ + +
+ + 动画样式 + + + grid-col动画样式1 + + + + + + + grid-col动画样式2 + + + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + grid-col通用属性1 + + + + + + + grid-col通用属性2 + + + + + + + grid-col通用属性3 + + + + + +
+
+
+
+ + 通用事件 + + + grid-col通用事件1 + + + + + + + grid-col通用事件2 + + + + + + + grid-col通用事件3 + + + + + +
+
+
+
+ + 通用方法 + + + grid-col通用方法1 + + +
+
+ + grid-col通用方法2 + + + + + grid-col通用方法3 + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + grid-col渐变样式1 + + + + + grid-col渐变样式2 + + + + + grid-col渐变样式3 + + + + + grid-col渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + grid-col无障碍1 + + + +
+
+
+
+ + 原子布局 + + + grid-col原子布局1 + +
+ + + + + + + + + + + + +
+ + grid-col原子布局2 + +
+ + + + + + + + + + + + +
+ + grid-col原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + grid-col多模输入1 + grid-col多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.js b/ace/ace_standard/src/main/js/default/pages/gridCol/index.js new file mode 100644 index 0000000000000000000000000000000000000000..95a4f132a25d4baef5b5b2e42dcf64f20438caed --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.js @@ -0,0 +1,489 @@ +/** + * 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 prompt from '@system.prompt'; +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css new file mode 100644 index 0000000000000000000000000000000000000000..5d1b535a41a5d05437693238ae8cdebd1d8258bd --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css @@ -0,0 +1,483 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + height: 50px; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 3px; + padding-top: 3px; + padding-right: 3px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 60px; + height: 30px; + padding-start: 2px; + padding-end: 2px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + + +.style3{ + width: 100%; + height:10%; + padding: 0px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis:50px; + flex-shrink: 1; +} +.style4{ + width: 60%; + height: 6%; + padding: 2px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 150px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + width: 100%; + height:60px; + margin-top: 10px; + flex-direction: row; + justify-content: space-around; + align-items: center; + align-content: flex-start; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 40px; + overflow:scroll; +} + +.style9{ + display: grid; + height: 40px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight:1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + width: 100%; + height: 30px; +} + + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +#prop1 { + width: 80%; + height:20px; + background-color: #ad4e2a; + margin: 2px; +} + +.prop2 { + width: 80%; + height:20px; + background-color: #343524; + margin: 2px; +} +.prop3{ + width: 80%; + height: 20px; +} +.prop4 { + width: 80%; + height:20px; + background-color: #456345; + margin: 2px; +} + + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + height:20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + height:20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + height:20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + height:20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + height:20px; + background-color: #321124; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + margin: 5px; +} +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 80%; + height: 40px; + background-color: #c4c4f8; + flex-direction: row; + justify-content: space-around; + align-items: center; + align-content: flex-start; +} +.flex-class{ + margin-top: 5px; + width: 100%; + height: 30px; + display: flex; +/* background-color: #ee6363;*/ + justify-content: center; + align-items: center; +} +.row-style{ + width:40px; + height: 10px; + background-color: blue; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..f9befa686d6cb41dcc7259fa802ed6332494d6e8 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml @@ -0,0 +1,324 @@ + + +
+
+
+ + 通用样式 + + + container通用样式1 + + + + + + + container通用样式2 + + + + + + + container通用样式3 + + + + + + + container通用样式4 + + + + + + + container通用样式5 + +
+ + + + + + + + +
+ + container特有样式 + + + + + + + + + +
+ + +
+ + 动画样式 + + + container动画样式1 + + + + + + + container动画样式2 + + + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + container通用属性1 + + + + + + + container通用属性2 + + + + + + + container通用属性3 + + + + + + + container特有属性4 + + + +
+
+
+
+ + 通用事件 + + + container通用事件1 + + + + + container通用事件2 + + + + + container通用事件3 + + + + +
+
+
+
+ + 通用方法 + + + div通用方法1 + +
+
+ + div通用方法2 + + + + + div通用方法3 + + + + + div特有方法 + + + + + + + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + div渐变样式1 + + + + + div渐变样式2 + + + + + div渐变样式3 + + + + + div渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + div无障碍1 + + + +
+
+
+
+ + 原子布局 + + + div原子布局1 + +
+ + + + + + + + + + + + +
+ + div原子布局2 + +
+ + + + + + + + + + + + +
+ + div原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + div多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js new file mode 100644 index 0000000000000000000000000000000000000000..660daee86528605d4cf6f00054abd60b1580cb90 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js @@ -0,0 +1,495 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; +export default { + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + this.get() + + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + get(){ + console.info("getColumns:"+this.$element('function4').getColumns()) + console.info("getGutterWidth:"+this.$element('function4').getGutterWidth()) + console.info("getColumnWidth:"+this.$element('function4').getColumnWidth()) + console.info("getSizeType:"+this.$element('function4').getSizeType()) + }, + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.css b/ace/ace_standard/src/main/js/default/pages/gridRow/index.css new file mode 100644 index 0000000000000000000000000000000000000000..95505ebff50cf267881ac97c8291266c53e578eb --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.css @@ -0,0 +1,483 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + flex-direction: column; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; + display: flex; + height: 40px; + background-color: blue; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 20px; + overflow:scroll; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; +} + +.style9{ + display: grid; + height: 20px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight: 1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + background-color: #321124; + margin: 5px; + width: 90%; + height: 30px; +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 60%; + height: 20px; + overflow:scroll; +} +.container-style { + width: 100%; + height: 50px; + background-color: #b8b8bf; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml b/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..001fc440fce71bbf317c3816bcb966acef91d158 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml @@ -0,0 +1,310 @@ + + +
+
+
+ + 通用样式 + + + div通用样式1 + + + + + + + div通用样式2 + + + + + + + div通用样式3 + + + + + + + div通用样式4 + + + + + + + div通用样式5 + + + + + + + + + div特有样式 + + + + + + + + + + + + +
+ + +
+ + 动画样式 + + + div动画样式1 + + + + + + + div动画样式2 + + + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + div通用属性1 + + + + + + + div通用属性2 + + + + + + + div通用属性3 + + + + + +
+
+
+
+ + 通用事件 + + + div通用事件1 + + + + + + + div通用事件2 + + + + + + + div通用事件3 + + + + + +
+
+
+
+ + 通用方法 + + + div通用方法1 + + +
+
+ + div通用方法2 + + + + + div通用方法3 + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + div渐变样式1 + + + + + div渐变样式2 + + + + + div渐变样式3 + + + + + div渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + div无障碍1 + + + +
+
+
+
+ + 原子布局 + + + div原子布局1 + +
+ + + + + + + + + + + + +
+ + div原子布局2 + +
+ + + + + + + + + + + + +
+ + div原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + div多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.js b/ace/ace_standard/src/main/js/default/pages/gridRow/index.js new file mode 100644 index 0000000000000000000000000000000000000000..a0cfa7abbdd9b767b5186bcf9aa99a3d0f807a67 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.js @@ -0,0 +1,489 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/image/index.css b/ace/ace_standard/src/main/js/default/pages/image/index.css deleted file mode 100644 index bf19d9de6096e135a15cf4fd91a4a4cd241c9c8d..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/image/index.css +++ /dev/null @@ -1,146 +0,0 @@ -/** - * 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. - */ - -.container { - flex-direction: column; /* 设置容器内的项目纵向排列 */ - justify-content: center; /* 设置项目位于容器主轴的中心 */ - align-items: center; /* 项目在交叉轴居中 */ - width:100%; - height:100%; -} - - -#one { - width: 100%; - height: 100%; - min-width: 25px; - min-height: 10px; - max-width: 300px; - max-height: 50px; - padding-left: 10px; - padding-top: 20px; - padding-right: 15px; - padding-bottom: 5px; - margin-left: 10px; - margin-top: 20px; - margin-right: 15px; - margin-bottom: 5px; - border-left-style: solid; - border-right-style: dashed; - border-top-style: dashed; - border-bottom-style: dotted; - border-left-width: 5px; - border-right-width: 10px; - border-top-width: 15px; - border-bottom-width: 20px; - border-left-color: #ff0000; - border-right-color: #00ff00; - border-top-color: #0000ff; - border-bottom-color: #fff000; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 15px; - border-top-left-radius: 8px; - border-top-right-radius: 12px; - background: linear-gradient(pink,#fff000); - box-shadow: 2px 4px 6px 8px #888888; - opacity: 0.5; - display: flex; - visibility: visible; - align-self: center; - image-fill: #000fff; - clip-path: margin-box; -} - -#two{ - width: 100px; - height: 150px; - padding-start: 10px; - padding-end: 15px; - margin-start: 5px; - margin-end: 10px; - border-style: dotted; - border-width: 2px; - border-color:#000000; - border-radius:5px; - background-color:#ffaa00; - mask-image: url('common/images/icon.png'); - mask-size: cover; - mask-position: center; - flex:1; - flex-grow: 2; - flex-basis: 10px; - flex-shrink: 1; -} - -#three{ - width: 100px; - height: 50px; - padding: 10px; - margin: 5px; - border-left: 1px solid #000000; - border-right: 2px dashed #00ff00; - border-top: 1.5px dotted #0000ff; - border-bottom: 2.5px dotted #fff000; - background-image:url('common/images/image.png'); - background-size:contain; - background-repeat: repeat-x; - background-position: center; -} - -#four{ - width: 150px; - height: 50px; - padding: 10px; - margin: 5px; - border: 1px solid #000000; -} - -.contain1{ - width: 150px; - height: 70px; - flex-direction: column; -} - -#five { - width: 120px; - height: 30px; - background-color: yellow; - border-image-source: url('/common/images/image.png'); - border-image-slice: 1px 2px 3px 4px; - border-image-width: 2px 3px 4px 5px; - border-image-outset: 3px 4px 5px 6px; - border-image-repeat: repeat; -} - -#six{ - width: 120px; - height: 30px; - position: absolute; - left: 10px; - top: 35px; - bottom: 5px; - right: 10px; - background-color: pink; - border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; -} - -#seven{ - object-fit:cover; - match-text-direction:true; - fit-original-size:true; - object-position:left; - margin-top: 15px; - margin-bottom: 15px; -} diff --git a/ace/ace_standard/src/main/js/default/pages/image/index.hml b/ace/ace_standard/src/main/js/default/pages/image/index.hml deleted file mode 100644 index 7d944da0c37a32f5c1c852e0dc00900a4ec6d3c2..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/image/index.hml +++ /dev/null @@ -1,83 +0,0 @@ - - -
- - common/images/image.png - - - common/images/image.png - - - common/images/image.png - - - common/images/image.png - - -
- common/images/image.png - - common/images/image.png - -
- - common/images/image.png - -
diff --git a/ace/ace_standard/src/main/js/default/pages/image/prop/index.css b/ace/ace_standard/src/main/js/default/pages/image/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..3adaa47226b63e0f2c3c9c2092ecd198f1724946 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/image/prop/index.css @@ -0,0 +1,398 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + height: 15px; + margin-bottom: 2px; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + height: 15px; + margin-bottom: 2px; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + height: 15px; + margin-bottom: 2px; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + height: 15px; + margin-bottom: 2px; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + margin-bottom: 2px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + margin-bottom: 2px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + margin-bottom: 2px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + margin-bottom: 2px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + height: 15px; + margin-bottom: 2px; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + height: 15px; + margin-bottom: 2px; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + height: 15px; + margin-bottom: 2px; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + height: 15px; + margin-bottom: 2px; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + height: 15px; + margin-bottom: 2px; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + height: 15px; + margin-bottom: 2px; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#imageSrc{ + height: 100px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + +#imageSrcNone{ + height: 100px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#imageAlt{ + height: 100px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#imageAltNone{ + height: 100px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + diff --git a/ace/ace_standard/src/main/js/default/pages/image/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/image/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7def27e7307a0c1a6b026dce3a22c30ef60aba6e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/image/prop/index.hml @@ -0,0 +1,184 @@ + + +
+
+ + image通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + image特有属性 + + + + 特有属性 -- src + + + + + + + + 特有属性 -- alt + + common/images/image.png + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/image/prop/index.js b/ace/ace_standard/src/main/js/default/pages/image/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..622fb16fc7f4219c5e69c1959ece5a8a64c81b3b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/image/prop/index.js @@ -0,0 +1,117 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + + imageSrc : null, + imageSrcNone : null, + imageAlt : null, + imageAltNone : null + }, + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone, + styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, + forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone, + + imageSrc : this.imageSrc, imageSrcNone : this.imageSrcNone, imageAlt : this.imageAlt, + imageAltNone : this.imageAltNone, + } + }, + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + getSpecificPropValues(){ + this.imageSrc = this.$element("imageSrc").getInspector() + this.imageSrcNone = this.$element("imageSrcNone").getInspector() + this.imageAlt = this.$element("imageAlt").getInspector() + this.imageAltNone = this.$element("imageAltNone").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/image/router/index.css b/ace/ace_standard/src/main/js/default/pages/image/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ea57fcb2110a1acbf4cbdb00bfcabd97d2eca15a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/image/router/index.css @@ -0,0 +1,373 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 45%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 40%; +} + +.function-container{ + flex-direction: column; + height: 25%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +.style1{ + width: 100%; + mask-color:red; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 1px; + padding-right: 15px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 0px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 70%; + height: 12%; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 1px; + margin: 5px; + border: 2px solid #000000; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + height: 40px; + margin-bottom: 5px; + margin-top: 5px; + color: green; + mask-color:lightblue; + line-cap: round; +} + +.event1{ + width: 100%; + height: 40px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 40px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 40px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 40px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 40px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 40px; + margin: 2px; +} + +.prop5 { + background-color: gold; + height: 40px; + width: 100%; + margin: 2px; +} + + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 100%; + height: 55px; + margin: 5px; +} + +.gradient1{ + margin: 5px; + height: 40px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + height: 40px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + height: 40px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + margin: 5px; + height: 40px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access1{ + color: #321124; + height: 40px; + margin: 5px; +} + +.multimode1{ + background-color: firebrick; + height: 40px; + margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 60px; + overflow: scroll; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/image/router/index.hml b/ace/ace_standard/src/main/js/default/pages/image/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..bc74a55af7704e7f7784657a0b404aa08e435570 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/image/router/index.hml @@ -0,0 +1,332 @@ + + +
+
+ +
+ + 通用样式 + + + + image通用样式1 + + + + + + image通用样式2 + + + + + + image通用样式3 + + + + + + image通用样式4 + + + + + + image通用样式5 + +
+ + + + +
+ + + image特有样式 + + + +
+ + + + +
+ + 动画样式 + + + + image动画样式1 + + + + + + image动画样式2 + + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + image通用属性1 + + + + + + image通用属性2 + + + + + + image通用属性3 + + + + + + image特有属性4 + + + + + + image特有属性5 + + + + +
+
+
+ +
+ + 通用事件 + + + image通用事件1 + + + + + + image通用事件2 + + + + + + image通用事件3 + + + + + + image特有事件1 + + + + + + image特有事件2 + + + +
+
+
+ +
+ + 通用方法 + + + image通用方法1 + + + + + + image通用方法2 + + + + + + image通用方法3 + + + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + image渐变样式1 + + + + + + image渐变样式2 + + + + + + image渐变样式3 + + + + + + image渐变样式4 + + + +
+
+
+ +
+ + 无障碍 + + + image无障碍1 + + + +
+
+
+ +
+ + 原子布局 + + + image原子布局1 + +
+ + + + + + +
+ + image原子布局2 + +
+ + + + + + +
+ + image原子布局3 + +
+ + + + + + +
+
+
+
+ + 多模输入 + + + image多模输入1 + + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/image/router/index.js b/ace/ace_standard/src/main/js/default/pages/image/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e0f4eb3c6ac35f5a12cd0fcec52b5da74601f311 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/image/router/index.js @@ -0,0 +1,489 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/image/style/index.css b/ace/ace_standard/src/main/js/default/pages/image/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/image/style/index.hml b/ace/ace_standard/src/main/js/default/pages/image/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/image/style/index.js b/ace/ace_standard/src/main/js/default/pages/image/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/image/style/index.js @@ -0,0 +1,14 @@ +/** + * 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. + */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.css b/ace/ace_standard/src/main/js/default/pages/line/index.css new file mode 100644 index 0000000000000000000000000000000000000000..883af7d1fd94729b28b41201b94a9e758a0f82bc --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/line/index.css @@ -0,0 +1,369 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; + +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 100px; + height: 50px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ +/* width: 100%;*/ + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 85%; + height: 7%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 80%; + height: 50px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 100px; + height: 50px; + position: absolute; + left: 10px; + top: 50px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; + align-items: center; +} + +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.prop7 { + background-color: tomato; + width: 100%; + margin: 3px 5px; +} + +.prop8 { + background-color: darkblue; + width: 100%; + margin: 3px 5px; +} + +.prop9 { + background-color: blueviolet; + width: 100%; + margin: 3px 5px; +} + + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 0.8; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + stroke-width: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; + flex-weight: 1; +} + +.gradient1{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.hml b/ace/ace_standard/src/main/js/default/pages/line/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..f3f5410cb16f4c632103779c4ffab3bb8fcd2908 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/line/index.hml @@ -0,0 +1,207 @@ +
+
+ + 通用样式 + + + line通用样式1 + + + + + + line通用样式2 + + + + + + line通用样式3 + + + + + + line通用样式4 + + + + + + line通用样式5 + +
+ + + + + + +
+
+ + + +
+
+ + 通用属性 + + + line通用属性1 + + + + + + + line通用属性2 + + + + + + + line通用属性3 + + + + + + line通用属性4 + + + + + + line通用属性5 + + + + + + + line通用属性6 + + + + + + + line通用属性7 + + + + + + + line通用属性8 + + + + + + + line通用属性9 + + + + + +
+ + +
+ + 动画样式 + + + line动画样式1 + + + + + + path动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + line渐变样式1 + + + + + + line渐变样式2 + + + + + + line渐变样式3 + + + + + + line渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + line无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + line多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.js b/ace/ace_standard/src/main/js/default/pages/line/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/line/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/menu/index.css b/ace/ace_standard/src/main/js/default/pages/menu/index.css deleted file mode 100644 index f004e9fc3a55431049fec7b2617d8b6e41eafee1..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/menu/index.css +++ /dev/null @@ -1,114 +0,0 @@ -/** - * 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. - */ - -.container { - flex-direction: column; - align-items: flex-start; - justify-content: center; -} - -.menu1{ - text-color:red; - font-size:20px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:200; - font-family:sans-serif; - min-width: 25px; - min-height: 10px; - max-width: 300px; - max-height: 50px; - padding-left: 10px; - padding-top: 20px; - padding-right: 15px; - padding-bottom: 5px; - margin-left: 10px; - margin-top: 20px; - margin-right: 15px; - margin-bottom: 5px; -} - -.menu2{ - text-color:yellow; - font-size:20px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:300; - font-family:sans-serif; - margin: 20px; -} - -.menu3{ - text-color:beige; - font-size:20px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:200; - font-family:sans-serif; - margin: 20px; -} - -.menu4{ - text-color:aqua; - font-size:20px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:200; - font-family:sans-serif; - margin: 20px; -} - -.contain1{ - width: 150px; - height: 150px; - flex-direction: column; -} - -.menu5{ - text-color:saddlebrown; - font-size:30px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:300; - font-family:sans-serif; - margin: 20px; -} - -.menu6{ - text-color:darkcyan; - font-size:40px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:200; - font-family:sans-serif; - margin: 20px; -} - -.menu7 { - text-color:navajowhite; - font-size:60px; - allow-scale:true; - letter-spacing:10px; - font-style:normal; - font-weight:500; - font-family:sans-serif; - margin: 20px; -} diff --git a/ace/ace_standard/src/main/js/default/pages/menu/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/index.hml deleted file mode 100644 index 32c0ffb92cbd56eaac4b1ab45ef83a32240eb2ea..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/menu/index.hml +++ /dev/null @@ -1,70 +0,0 @@ - - -
- - menu1 - - - - - - - menu2 - - - - - - - menu3 - - - - - - - menu4 - - - - - - -
- menu5 - - - - - - - menu6 - - - - - -
- - menu7 - - - - - - -
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/menu/prop/index.css b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..10c0164f72a6f2b2a247013cc44cd49a4b5d0e52 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.css @@ -0,0 +1,419 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + height: 15px; + margin-bottom: 2px; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + height: 15px; + margin-bottom: 2px; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + height: 15px; + margin-bottom: 2px; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + height: 15px; + margin-bottom: 2px; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + margin-bottom: 2px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + margin-bottom: 2px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + margin-bottom: 2px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + margin-bottom: 2px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + height: 15px; + margin-bottom: 2px; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + height: 15px; + margin-bottom: 2px; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + height: 15px; + margin-bottom: 2px; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + height: 15px; + margin-bottom: 2px; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + height: 15px; + margin-bottom: 2px; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + height: 15px; + margin-bottom: 2px; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#menuTarget{ + height: 40px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + +#menuTargetNone{ + height: 40px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeLongPress{ + height: 40px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeNone{ + height: 40px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#menuTitle{ + height: 40px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#menuTitleNone{ + height: 40px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + diff --git a/ace/ace_standard/src/main/js/default/pages/menu/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..eff1af21d35f5e98fe20767676478a8c918f2035 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.hml @@ -0,0 +1,199 @@ + + +
+
+ + menu通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + menu特有属性 + + + + 特有属性 -- target + + + + + + + + + + 特有属性 -- type + + + + + + + + + + 特有属性 -- title + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/prop/index.js b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..96e4838418e48e799857dc46bdff683e1d16a4a4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.js @@ -0,0 +1,112 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + onTextClick() { + this.$element("menuTarget").show({x:280,y:120}); + }, + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + + menuTarget : null, + menuTargetNone : null, + typeClick : null, + typeLongPress : null, + typeNone : null, + menuTitle : null, + menuTitleNone : null, + }, + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone, + styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone, + dataProp : this.dataProp, dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, + forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone, + + menuTarget : this.menuTarget, menuTargetNone : this.menuTargetNone, typeClick : this.typeClick, + typeLongPress : this.typeLongPress, typeNone : this.typeNone, + menuTitle : this.menuTitle, menuTitleNone : this.menuTitleNone, + } + }, + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + getSpecificPropValues(){ + this.menuTarget = this.$element("menuTarget").getInspector() + this.menuTargetNone = this.$element("menuTargetNone").getInspector() + this.typeClick = this.$element("typeClick").getInspector() + this.typeLongPress = this.$element("typeLongPress").getInspector() + this.typeNone = this.$element("typeNone").getInspector() + this.menuTitle = this.$element("menuTitle").getInspector() + this.menuTitleNone = this.$element("menuTitleNone").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/menu/router/index.css b/ace/ace_standard/src/main/js/default/pages/menu/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..8da8b58cd43ff1a247295c8477a4a26548c2f83d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/menu/router/index.css @@ -0,0 +1,400 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 45%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 40%; +} + +.function-container{ + flex-direction: column; + height: 25%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +.style1{ + width: 100%; + mask-color:red; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 1px; + padding-right: 15px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 0px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 70%; + height: 12%; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 1px; + margin: 5px; + border: 2px solid #000000; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + height: 40px; + margin-bottom: 5px; + margin-top: 5px; + letter-spacing:5px; + allow-scale:true; + background-color: navajowhite; +} + +.style8 { + height: 40px; + margin-bottom: 5px; + margin-top: 5px; + letter-spacing:5px; + allow-scale:false; + background-color: sandybrown; +} + +.event1{ + width: 100%; + height: 40px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 40px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 40px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 40px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 40px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 40px; + margin: 2px; +} + +.prop5 { + background-color: gold; + height: 40px; + width: 100%; + margin: 2px; +} + + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 100%; + height: 55px; + margin: 5px; +} + +.gradient1{ + margin: 5px; + height: 40px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + height: 40px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + height: 40px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + margin: 5px; + height: 40px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access1{ + color: #321124; + height: 40px; + margin: 5px; + background-color: chartreuse; +} + +.atom1{ + background-color: saddlebrown; + width: 40px; + height: 40px; +} +.atom2{ + background-color: blueviolet; + width: 40px; + height: 40px; +} +.atom3{ + background-color: aquamarine; + width: 40px; + height: 40px; +} + +.multimode1{ + background-color: firebrick; + height: 40px; + width: 100%; + margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 60px; + overflow: scroll; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/menu/router/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..faf28025a386fd9c672f357f6eb73e8e9043acaf --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/menu/router/index.hml @@ -0,0 +1,306 @@ + + +
+
+ +
+ + 通用样式 + + + + menu通用样式1 + + + + + + menu通用样式2 + + + + + + menu通用样式3 + + + + + + menu通用样式4 + + + + + + menu通用样式5 + +
+ + + + +
+ + + menu特有样式 + + + + + + menu特有样式 + + + + +
+ + + + +
+ + 动画样式 + + + + menu动画样式1 + + + + + + menu动画样式2 + + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + menu通用属性1 + + + + + + menu通用属性2 + + + + + + menu通用属性3 + + + + + + menu特有属性4 + + + + + + menu特有属性5 + + + +
+
+
+ +
+ + 通用事件 + + + menu特有事件1 + + + + + + + + menu特有事件2 + + + + + +
+
+
+ +
+ + 通用方法 + + + menu特有方法1 + + + + + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + menu渐变样式1 + + + + + + menu渐变样式2 + + + + + + menu渐变样式3 + + + + + + menu渐变样式4 + + + +
+
+
+ +
+ + 无障碍 + + + menu无障碍1 + + + +
+
+
+ +
+ + 原子布局 + + + menu原子布局1 + +
+ + + + + + +
+ + menu原子布局2 + +
+ + + + + + +
+ + menu原子布局3 + +
+ + + + + + +
+
+
+
+ + 多模输入 + + + menu多模输入1 + + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/menu/router/index.js b/ace/ace_standard/src/main/js/default/pages/menu/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..9484f61da180f05acc6611204b77b48f0656a0b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/menu/router/index.js @@ -0,0 +1,504 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + onMenuSelected(e) { + prompt.showToast({ + message: e.value + }) + }, + onTextClick1() { + this.$element('event1').show({x:100,y:200}); + }, + onTextClick2() { + this.$element('event2').show({x:100,y:300}); + }, + onTextClick3() { + this.$element('function1').show({x:100,y:500}); + }, + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/menu/style/index.css b/ace/ace_standard/src/main/js/default/pages/menu/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/menu/style/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/menu/style/index.js b/ace/ace_standard/src/main/js/default/pages/menu/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/menu/style/index.js @@ -0,0 +1,14 @@ +/** + * 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. + */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..8d90041679bef595eb507f3af40136ae8f165eb4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml @@ -0,0 +1,29 @@ + + +
+
+
+ + CanvasGradient对象的方法 + + + 方法1 + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js new file mode 100644 index 0000000000000000000000000000000000000000..6c28adff32a1ee4f784d89624268279743e81def --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js @@ -0,0 +1,35 @@ +/** + * 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 prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow() { + this.functionTest() + }, + functionTest() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + const gradient = ctx.createLinearGradient(0,0,200,0); + gradient.addColorStop(0,'#00ffff'); + gradient.addColorStop(1,'#ffff00'); + ctx.fillStyle=gradient; + ctx.fillRect(20,20,300,100); + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..cd3f2d9be7915c9ece4c1478945ae7c8df4a702f --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml @@ -0,0 +1,171 @@ + + +
+
+
+ + 对象的属性 + + + 属性1 + + + + + 属性2 + + + + + 属性3 + + + + + 属性4 + + + + + 属性5 + + + + + 属性6 + + + + + 属性7 + + + + + 属性8 + + + + + 属性9 + + + +
+
+ + + + +
+
+ + 属性10 + + + + + 属性11 + + + + + 属性12 + + + + + + + + + 对象的方法 + + + 方法1 + + + + + 方法2 + + + + + 方法3 + + + + + 方法4 + + + + 方法5 + + +
+
+ + + + +
+
+ + 方法6 + + + + 方法7 + + + + 方法8 + + + + 方法9 + + + + 方法10 + + + + 方法11 + + + + 方法12 + + + + 方法13 + + + + 方法14 + + + + 方法15 + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js new file mode 100644 index 0000000000000000000000000000000000000000..cae268cf0b1d5212bf23e5b67f48872fa01479bf --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js @@ -0,0 +1,287 @@ +/** + * 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 prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + this.props2() + this.props3() + this.props4() + this.props5() + this.props6() + this.props7() + this.props8() + this.props9() + this.props10() + this.props11() + this.props12() + + // 方法 + this.functionTouch1() + this.functionTouch2() + this.functionTouch3() + this.functionTouch4() + this.functionTouch5() + this.functionTouch6() + this.functionTouch7() + this.functionTouch8() + this.functionTouch9() + this.functionTouch10() + this.functionTouch11() + this.functionTouch12() + this.functionTouch13() + this.functionTouch14() + this.functionTouch15() + }, + props1() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.fillStyle = '#0000ff'; + ctx.fillRect(0, 0, 100, 30); + }, + props2() { + const el = this.$refs.canvas2; + const ctx = el.getContext('2d'); + ctx.lineWidth = 10; + ctx.strokeStyle = '#0000ff'; + ctx.lineCap = 'round'; + ctx.strokeRect(0, 0, 100, 30); + }, + props3() { + const el = this.$refs.canvas3; + const ctx = el.getContext('2d'); + ctx.lineWidth = 8; + ctx.beginPath(); + ctx.lineCap = 'round'; + ctx.moveTo(10, 10); + ctx.lineTo(100, 10); + ctx.stroke(); + }, + props4() { + const el = this.$refs.canvas4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.moveTo(10, 10); + ctx.lineTo(80, 30); + ctx.lineTo(10, 50); + ctx.stroke(); + }, + props5() { + const el =this.$refs.canvas5; + const ctx = el.getContext('2d'); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 3; + ctx.moveTo(10, 10); + ctx.lineTo(60, 15); + ctx.lineTo(10, 40); + ctx.stroke(); + }, + props6() { + const el =this.$refs.canvas6; + const ctx = el.getContext('2d'); + ctx.font = '20px sans-serif'; + ctx.fillText("Hello World", 10, 20); + }, + props7() { + const el =this.$refs.canvas7; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 40, 40); + ctx.globalAlpha = 0.4; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(40, 40, 40, 40); + + }, + props8() { + const el =this.$refs.canvas8; + const ctx = el.getContext('2d'); + ctx.arc(50, 40, 30, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.lineDashOffset = 10.0; + ctx.stroke(); + }, + props9() { + const el =this.$refs.canvas9; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 30, 30); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(25, 25, 30, 30); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(70, 10, 30, 30); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(85, 25, 30, 30); + }, + props10() { + const el =this.$refs.canvas10; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 30; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 70, 50); + }, + props11() { + const el =this.$refs.canvas11; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetX = 20; + ctx.shadowOffsetY = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 50); + }, + props12() { + const el =this.$refs.canvas12; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 10, 0, 100, 60); + }; + }, + + functionTouch1() { + const el =this.$refs.function1; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 40); + ctx.clearRect(20, 10, 60, 20); + }, + functionTouch2() { + const el =this.$refs.function2; + const ctx = el.getContext('2d'); + ctx.font = '18px sans-serif'; + ctx.strokeText("Hello World!", 0, 20); + }, + functionTouch3() { + const el =this.$refs.function3; + const ctx = el.getContext('2d'); + ctx.font = '16px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10); + ctx.fillText(txt, 0, 25); + }, + functionTouch4() { + const el =this.$refs.function4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(5, 5); + ctx.lineTo(70, 5); + ctx.lineTo(40, 60); + ctx.closePath(); + ctx.stroke(); + }, + functionTouch5() { + const el =this.$refs.function5; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/sun.png'; + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(20, 0, 60, 50); + }, + functionTouch6() { + const el =this.$refs.function6; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 40, 80, 40, 100, 10); + ctx.stroke(); + }, + functionTouch7() { + const el =this.$refs.function7; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.quadraticCurveTo(50, 50, 100, 10); + ctx.stroke(); + }, + functionTouch8() { + const el =this.$refs.function8; + const ctx = el.getContext('2d'); + ctx.moveTo(30, 20); + ctx.arcTo(70, 10, 70, 20, 30); // Create an arc + ctx.stroke(); + }, + functionTouch9() { + const el =this.$refs.function9; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); + }, + functionTouch10() { + const el =this.$refs.function10; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20) + ctx.fill(); // Draw it in default setting + }, + functionTouch11() { + const el =this.$refs.function11; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 50, 50); + ctx.stroke(); + ctx.clip(); + // Draw red rectangle after clip + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 40, 40); + }, + functionTouch12() { + const el =this.$refs.function12; + const ctx = el.getContext('2d'); + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees + ctx.fillRect(20, 0, 20, 20); + }, + functionTouch13() { + const el =this.$refs.function13; + const ctx = el.getContext('2d'); + ctx.strokeRect(10, 10, 25, 25); + ctx.scale(1.5, 1.5);// Scale to 200% + ctx.strokeRect(10, 10, 20, 20); + }, + functionTouch14() { + const el =this.$refs.function14; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0, 0, 30, 30) + ctx.transform(1, 0.5, -0.5, 1, 3, 3); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 30, 30); + ctx.transform(1, 0.5, -0.5, 1, 3, 3); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 30, 30); + }, + functionTouch15() { + const el =this.$refs.function15; + const ctx = el.getContext('2d'); + ctx.fillRect(10, 10, 30, 30); + ctx.translate(50, 10); + ctx.fillRect(10, 10, 30, 30); + } + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..d6f936112de5c5f37ea2ee96b67d62d96c95820e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml @@ -0,0 +1,30 @@ + + +
+
+
+ + Image对象的属性 + + + 属性1 + + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.js similarity index 51% rename from ace/ace_standard/src/main/js/default/pages/menu/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_Image/index.js index c80df9b1c13894820780dba65519f294ede44d31..520fbf4f756d304cd3cb3f0ec99d9f95950c6fea 100644 --- a/ace/ace_standard/src/main/js/default/pages/menu/index.js +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.js @@ -15,30 +15,29 @@ import prompt from '@system.prompt'; export default { - onMenuSelected(e) { - prompt.showToast({ - message: e.value - }) - }, - onTextClick1() { - this.$element('apiMenu1').show({x:120,y:10}); - }, - onTextClick2() { - this.$element('apiMenu2').show({x:120,y:80}); - }, - onTextClick3() { - this.$element('apiMenu3').show({x:120,y:150}); - }, - onTextClick4() { - this.$element('apiMenu4').show({x:120,y:220}); - }, - onTextClick5() { - this.$element('apiMenu5').show({x:120,y:290}); - }, - onTextClick6() { - this.$element('apiMenu6').show({x:120,y:360}); - }, - onTextClick7() { - this.$element('apiMenu7').show({x:120,y:650}); - } + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + }, + props1() { + const el =this.$refs.canvas1 + var ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 300, 250); + prompt.showToast({ + message: 'Image load success: width=' + img.width + ',height=' + img.height + }); + }; + img.onerror = function() { + console.log('Image load fail'); + }; + }, + } \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..72c83c2f5afc57939321fcfa033d2b71c60bbac6 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml @@ -0,0 +1,30 @@ + + +
+
+
+ + ImageBitmap对象的属性 + + + 属性1 + + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js new file mode 100644 index 0000000000000000000000000000000000000000..f6ab3d8c7190ef95c185ec47059af6eaf4f47a4b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js @@ -0,0 +1,46 @@ +/** + * 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 prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + }, + props1() { + const canvas =this.$refs.canvas1 + var ctx = canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(200,120); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.stroke(); + this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10); + + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + + prompt.showToast({ + message: 'function1 ImageBitmap:\n' + JSON.stringify(bitmap), + duration: 3000 + }); + console.log(JSON.stringify(bitmap)) + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..2cea2845cdeb32005511542ee732cb4b5f23f1ae --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml @@ -0,0 +1,30 @@ + + +
+
+
+ + ImageData对象的属性 + + + 属性1 + + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js new file mode 100644 index 0000000000000000000000000000000000000000..bb9c25909ff6b9a55cafe3fa9fafcbd51ac5567f --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js @@ -0,0 +1,38 @@ +/** + * 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 prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + }, + props1() { + const el =this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.fillRect(0,0,200,200) + var imageData = ctx.createImageData(1,1) + prompt.showToast({ + message:JSON.stringify(imageData), + duration:5000 + }) + console.log(JSON.stringify(imageData)) + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..a6f52d62c6f116faa456b3574b56449d848584e4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml @@ -0,0 +1,46 @@ + + +
+
+
+ + OffscreenCanvas对象的属性 + + + 属性1 + + + +
+
+ + + + +
+
+ + OffscreenCanvas对象的方法 + + + 方法1 + + +
+
+ + +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js new file mode 100644 index 0000000000000000000000000000000000000000..720a1dfa3c8eb7a6f84d3ba09f1b6e34070e7fc9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js @@ -0,0 +1,62 @@ +/** + * 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 prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 属性 + this.props1() + // 方法 + this.functionTouch1() + }, + props1() { + const el =this.$refs.canvas1 + const ctx = el.getContext('2d'); + var offscreen = new OffscreenCanvas(200,100); + var offscreenCanvasCtx = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/image.png'; + offscreenCanvasCtx.drawImage(img, 0, 0, 100, 100); + prompt.showToast({ + message: 'OffscreenCanvas width='+offscreen.width+',OffscreenCanvas height='+offscreen.height + }); + console.log('OffscreenCanvas width='+offscreen.width+',OffscreenCanvas height='+offscreen.height) + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + }, + + functionTouch1() { + const el =this.$refs.function1 + const ctx = el.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/image.png'; + offscreenCanvasCtx.drawImage(img, 0, 0, 100, 100); + var dataURL = offscreen.toDataURL(); + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + prompt.showToast({ + message: 'offscreenCanvasCtx='+offscreenCanvasCtx+',dataURL='+dataURL+',bitmap='+JSON.stringify(bitmap) + }); + console.log('offscreenCanvasCtx='+offscreenCanvasCtx+',dataURL='+dataURL+',bitmap='+JSON.stringify(bitmap)); + + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..ad9128ce22167dc289a0476fbf78e262e5845db3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml @@ -0,0 +1,171 @@ + + +
+
+
+ + 对象的属性 + + + 属性1 + + + + + 属性2 + + + + + 属性3 + + + + + 属性4 + + + + + 属性5 + + + + + 属性6 + + + + + 属性7 + + + + + 属性8 + + + + + 属性9 + + + +
+
+ + + + +
+
+ + 属性10 + + + + + 属性11 + + + + + 属性12 + + + + + + + + + 对象的方法 + + + 方法1 + + + + + 方法2 + + + + + 方法3 + + + + + 方法4 + + + + 方法5 + + +
+
+ + + + +
+
+ + 方法6 + + + + 方法7 + + + + 方法8 + + + + 方法9 + + + + 方法10 + + + + 方法11 + + + + 方法12 + + + + 方法13 + + + + 方法14 + + + + 方法15 + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js new file mode 100644 index 0000000000000000000000000000000000000000..dd5f1ac9dcf258b09e25a0f8e0982f6418a53b13 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js @@ -0,0 +1,342 @@ +/** + * 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 prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + textValue: 0, + textValue2: 0 + }, + onShow(){ + // 屬性 + this.props1() + this.props2() + this.props3() + this.props4() + this.props5() + this.props6() + this.props7() + this.props8() + this.props9() + this.props10() + this.props11() + this.props12() + + // 方法 + this.functionTouch1() + this.functionTouch2() + this.functionTouch3() + this.functionTouch4() + this.functionTouch5() + this.functionTouch6() + this.functionTouch7() + this.functionTouch8() + this.functionTouch9() + this.functionTouch10() + this.functionTouch11() + this.functionTouch12() + this.functionTouch13() + this.functionTouch14() + this.functionTouch15() + }, + props1() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.fillStyle = '#0000ff'; + ctx.fillRect(0, 0, 100, 30); + }, + props2() { + const el = this.$refs.canvas2; + const ctx = el.getContext('2d'); + ctx.lineWidth = 10; + ctx.strokeStyle = '#0000ff'; + ctx.lineCap = 'round'; + ctx.strokeRect(0, 0, 100, 30); + }, + props3() { + const el = this.$refs.canvas3; + const ctx = el.getContext('2d'); + ctx.lineWidth = 8; + ctx.beginPath(); + ctx.lineCap = 'round'; + ctx.moveTo(10, 10); + ctx.lineTo(100, 10); + ctx.stroke(); + }, + props4() { + const el = this.$refs.canvas4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.moveTo(10, 10); + ctx.lineTo(80, 30); + ctx.lineTo(10, 50); + ctx.stroke(); + }, + props5() { + const el =this.$refs.canvas5; + const ctx = el.getContext('2d'); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 3; + ctx.moveTo(10, 10); + ctx.lineTo(60, 15); + ctx.lineTo(10, 40); + ctx.stroke(); + }, + props6() { + const el =this.$refs.canvas6; + const ctx = el.getContext('2d'); + ctx.font = '20px sans-serif'; + ctx.fillText("Hello World", 10, 20); + }, + props7() { + const el =this.$refs.canvas7; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 40, 40); + ctx.globalAlpha = 0.4; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(40, 40, 40, 40); + + }, + props8() { + const el =this.$refs.canvas8; + const ctx = el.getContext('2d'); + ctx.arc(50, 40, 30, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.lineDashOffset = 10.0; + ctx.stroke(); + }, + props9() { + const el =this.$refs.canvas9; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 30, 30); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(25, 25, 30, 30); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(70, 10, 30, 30); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(85, 25, 30, 30); + }, + props10() { + const el =this.$refs.canvas10; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 30; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 70, 50); + }, + props11() { + const el =this.$refs.canvas11; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetX = 20; + ctx.shadowOffsetY = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 50); + }, + props12() { + var ctx = this.$refs.canvas12.getContext('2d'); + var offscreen = new OffscreenCanvas(100, 300); + var offCanvas2 = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/image.png'; + offCanvas2.drawImage(img, 0, 0, 33, 33); + offCanvas2.filter = 'blur(5px)'; + offCanvas2.drawImage(img, 33, 0, 33, 33); + + offCanvas2.filter = 'grayscale(50%)'; + offCanvas2.drawImage(img, 66, 0, 33, 33); + + offCanvas2.filter = 'hue-rotate(90deg)'; + offCanvas2.drawImage(img, 0, 33, 33, 33); + + offCanvas2.filter = 'invert(100%)'; + offCanvas2.drawImage(img, 33, 33, 33, 33); + + offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; + offCanvas2.drawImage(img, 66, 33, 33, 33); + + offCanvas2.filter = 'brightness(0.4)'; + offCanvas2.drawImage(img, 0, 66, 33, 33); + + offCanvas2.filter = 'opacity(25%)'; + offCanvas2.drawImage(img, 33, 66, 33, 33); + + offCanvas2.filter = 'saturate(30%)'; + offCanvas2.drawImage(img, 66, 66, 33, 33); + + offCanvas2.filter = 'sepia(60%)'; + offCanvas2.drawImage(img, 0, 99, 33, 33); + + offCanvas2.filter = 'contrast(200%)'; + offCanvas2.drawImage(img, 33, 99, 33, 33); + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + }, + + functionTouch1() { + const el =this.$refs.function1; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 40); + ctx.clearRect(20, 10, 60, 20); + }, + functionTouch2() { + const el =this.$refs.function2; + const ctx = el.getContext('2d'); + ctx.font = '18px sans-serif'; + ctx.strokeText("Hello World!", 0, 20); + }, + functionTouch3() { + const el =this.$refs.function3; + const ctx = el.getContext('2d'); + ctx.font = '14px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10); + ctx.fillText(txt, 0, 25); + }, + functionTouch4() { + const el =this.$refs.function4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(5, 5); + ctx.lineTo(70, 5); + ctx.lineTo(40, 60); + ctx.closePath(); + ctx.stroke(); + }, + functionTouch5() { + const el =this.$refs.function5; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/sun.png'; + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(20, 0, 60, 50); + }, + functionTouch6() { + const el =this.$refs.function6; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 40, 80, 40, 100, 10); + ctx.stroke(); + }, + functionTouch7() { + const el =this.$refs.function7; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.quadraticCurveTo(50, 50, 100, 10); + ctx.stroke(); + }, + functionTouch8() { + const el =this.$refs.function8; + const ctx = el.getContext('2d'); + ctx.moveTo(30, 20); + ctx.arcTo(70, 10, 70, 20, 30); // Create an arc + ctx.stroke(); + }, + functionTouch9() { + const el =this.$refs.function9; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); + }, + functionTouch10() { + const el =this.$refs.function10; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20) + ctx.fill(); // Draw it in default setting + }, + functionTouch11() { + const el =this.$refs.function11; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 50, 50); + ctx.stroke(); + ctx.clip(); + // Draw red rectangle after clip + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 40, 40); + }, + functionTouch12() { + const el =this.$refs.function12; + const ctx = el.getContext('2d'); + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees + ctx.fillRect(20, 0, 20, 20); + }, + functionTouch13() { + var canvas = this.$refs.function13.getContext('2d'); + var offscreen = new OffscreenCanvas(100,40); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 40, 40); + offscreenCanvasCtx.fill(); + this.textValue = offscreenCanvasCtx.isPointInPath(30, 20); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + + prompt.showToast({ + message: 'function success: textValue=' + this.textValue + }); + }, + functionTouch14() { + var canvas = this.$refs.function14.getContext('2d'); + var offscreen = new OffscreenCanvas(100,40); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 30, 30); + offscreenCanvasCtx.stroke(); + this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + prompt.showToast({ + message: 'function success: textValue2=' + this.textValue2 + }); + }, + functionTouch15() { + var canvas = this.$refs.function15.getContext('2d'); + var offscreen = new OffscreenCanvas(100,50); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); + offscreenCanvasCtx.fillStyle = 'gray'; + offscreenCanvasCtx.fillRect(15, 10, 20, 10); + offscreenCanvasCtx.fillRect(15, 30, 20, 10); + + // Non-skewed rectangles + offscreenCanvasCtx.resetTransform(); + offscreenCanvasCtx.fillStyle = 'red'; + offscreenCanvasCtx.fillRect(10, 10, 20, 10); + offscreenCanvasCtx.fillRect(10, 30, 20, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css @@ -0,0 +1,471 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..667e7728fd2adde262bed883737b0ef0555ba641 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml @@ -0,0 +1,72 @@ + + +
+
+
+ + Path2D对象的方法 + + + 方法1 + + + + + 方法2 + + + + + 方法3 + + + + + 方法4 + + + + 方法5 + + +
+
+ + + + +
+
+ + 方法6 + + + + 方法7 + + + + 方法8 + + + + 方法9 + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js new file mode 100644 index 0000000000000000000000000000000000000000..6a50fdfd3a0e57555fd308cd3843748b80899d09 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js @@ -0,0 +1,106 @@ +/** + * 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 prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 方法 + this.functionTouch1() + this.functionTouch2() + this.functionTouch3() + this.functionTouch4() + this.functionTouch5() + this.functionTouch6() + this.functionTouch7() + this.functionTouch8() + this.functionTouch9() + }, + + functionTouch1() { + const el =this.$refs.function1; + const ctx = el.getContext('2d'); + var path1 = ctx.createPath2D("M80 20 L40 100 L120 100 Z"); + var path2 = ctx.createPath2D(); + path2.addPath(path1); + ctx.stroke(path2); + }, + functionTouch2() { + const el =this.$refs.function2; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D("M80 20 L40 100 L120 100 Z"); + path.setTransform(0.8, 0, 0, 0.4, 0, 0); + ctx.stroke(path); + + }, + functionTouch3() { + const el =this.$refs.function3; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(80, 40); + path.lineTo(120, 40); + path.lineTo(80, 80); + path.closePath(); + ctx.stroke(path); + }, + functionTouch4() { + const el =this.$refs.function4; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.bezierCurveTo(10, 50, 100, 50, 100, 10); + ctx.stroke(path); + }, + functionTouch5() { + const el =this.$refs.function5; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.quadraticCurveTo(50, 50, 100, 10); + ctx.stroke(path); + }, + functionTouch6() { + const el =this.$refs.function6; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arc(80, 50, 40, 0, 6.28); + ctx.stroke(path); + }, + functionTouch7() { + const el =this.$refs.function7; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arcTo(75, 10, 75, 35, 25); + ctx.stroke(path); + }, + functionTouch8() { + const el =this.$refs.function8; + const ctx =el.getContext('2d'); + var path = ctx.createPath2D(); + path.ellipse(50, 50, 25, 50, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(path); + }, + functionTouch9() { + const el =this.$refs.function9; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.rect(20, 20, 100, 100); + ctx.stroke(path); + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.css b/ace/ace_standard/src/main/js/default/pages/path/index.css new file mode 100644 index 0000000000000000000000000000000000000000..be4d509ad814395e2cb838d477b1cf9329f9d391 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/path/index.css @@ -0,0 +1,184 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.access-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +#prop1 { + color: #ad4e2a; + stroke-width: 10px; + margin: 5px; +} + +.prop2 { + color: #343524; + stroke-width: 15px; + margin: 5px; +} + +.prop4 { + color: #456345; + stroke-width: 25px; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.hml b/ace/ace_standard/src/main/js/default/pages/path/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..d407389d0c8de322f45e964edf891d29b7d84ab7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/path/index.hml @@ -0,0 +1,161 @@ +
+
+ + 通用属性 + + + path通用属性1 + + + + + + + path通用属性2 + + + + + + + path通用属性3 + + + + + + + + + + + + + + + + + + + path动画属性 + + + + + + + + + + + + +
+ + +
+
+ + 无障碍 + + + path无障碍1 + + + + + + +
+ + +
+ + 多模输入 + + + path多模输入1 + + + + + + +
+ + +
+ + 动画样式 + + + path动画样式1 + + + + + + + path动画样式2 + + + + + +
+
+ + +
+
+ + 渐变样式 + + + path渐变样式1 + + + + + + + path渐变样式2 + + + + + + + path渐变样式3 + + + + + + + path渐变样式4 + + + + + +
+ + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.js b/ace/ace_standard/src/main/js/default/pages/path/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/path/index.js @@ -0,0 +1,27 @@ +/** + * 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. + */ + +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.css b/ace/ace_standard/src/main/js/default/pages/polygon/index.css similarity index 84% rename from ace/ace_standard/src/main/js/default/pages/divider/index.css rename to ace/ace_standard/src/main/js/default/pages/polygon/index.css index 48d62f709ffaa11ce2642f05819314ac7f1e8586..46087d10479e4235877947cf136a67a4ac5736e2 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/index.css +++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.css @@ -13,6 +13,7 @@ * limitations under the License. */ +/* xxx.css */ .container { flex-direction:row; width:100%; @@ -50,12 +51,10 @@ } .style1{ - width: 100%; - height: 100%; min-width: 25px; min-height: 10px; max-width: 300px; - max-height: 50px; + max-height: 100px; padding-left: 10px; padding-top: 20px; padding-right: 15px; @@ -91,8 +90,6 @@ } .style2{ - width: 50px; - height: 20px; padding-start: 10px; padding-end: 15px; margin-start: 5px; @@ -109,7 +106,6 @@ } .style3{ - width: 100%; padding: 10px; margin: 5px; border-left: 1px solid #000000; @@ -127,8 +123,6 @@ } .style4{ - width: 60%; - height: 5%; padding: 10px; margin: 5px; border: 2px solid #000000; @@ -141,8 +135,6 @@ } .style5{ - width: 50%; - height: 30px; background-color: yellow; border-image-source: url('/common/images/image.png'); border-image-slice: 1px 2px 3px 4px; @@ -152,11 +144,11 @@ } .style6{ - width: 70px; - height: 30px; +/* width: 70px;*/ +/* height: 30px;*/ position: absolute; left: 10px; - top: 35px; + top: 80px; bottom: 5px; right: 10px; background-color: pink; @@ -168,54 +160,58 @@ margin-top: 10px; color: green; stroke-width: 30px; - line-cap: round; } .prop-container{ flex-direction: column; height: 100%; - flex-weight: 1; + flex-weight: 2; } - #prop1 { - color: #ad4e2a; - stroke-width: 10px; - line-cap: square; - margin: 5px; + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; } - .prop2 { - color: #343524; - stroke-width: 15px; - line-cap: round; - margin: 5px; + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; } .prop4 { - color: #456345; - stroke-width: 25px; - line-cap: round; - margin: 5px; + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; } .prop5 { - color: #831834; - stroke-width: 40px; - line-cap: square; - margin: 5px; - height: 70px; + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; } .ani-container{ flex-direction: column; height: 100%; - flex-weight: 1; + flex-weight: 0.5; } .ani1{ - color: #72ac33; - stroke-width: 55px; - line-cap: square; + background-color: #72ac33; + width: 55px; + height: 55px; margin: 5px; transform-origin: 0% 0%; animation: ani1Go 3s infinite; @@ -228,7 +224,7 @@ opacity:0.3; width:50px; height: 50px; - transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + transform:translate(20px) rotate(10deg) scale(0.2); background-position:10% 10% } 30% { @@ -237,7 +233,7 @@ width:70px; height: 70px; background-position:12% 12%; - transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) } to { background-color: #6160f7; @@ -250,40 +246,35 @@ } .ani2{ - color: #ad4e2a; - stroke-width: 55px; - line-cap: square; + background-color: #ad4e2a; + width: 55px; + height: 55px; margin: 5px; } - .gradient-container{ flex-direction: column; } .gradient1{ stroke-width: 30px; - line-cap: square; margin: 5px; background: linear-gradient(red, #00ff00); } .gradient2{ stroke-width: 30px; - line-cap: square; margin: 5px; background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); } .gradient3{ stroke-width: 30px; - line-cap: square; margin: 5px; background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); } .gradient4{ stroke-width: 30px; - line-cap: square; margin: 5px; background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); } @@ -295,7 +286,6 @@ .access1{ color: #321124; stroke-width: 30px; - line-cap: square; margin: 5px; } @@ -310,6 +300,5 @@ .multimode1{ color: #978666; stroke-width: 30px; - line-cap: square; margin: 5px; } \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.hml b/ace/ace_standard/src/main/js/default/pages/polygon/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..08ba4262b679371ab573818db94ae17249677a5c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.hml @@ -0,0 +1,222 @@ +
+
+ + 通用样式 + + + polygon通用样式1 + + + + + + polygon通用样式2 + + + + + + + polygon通用样式3 + + + + + + polygon通用样式4 + + + + + + polygon通用样式5 + +
+ + + + + + +
+
+ + +
+
+ + 通用属性 + + + polyline通用属性1 + + + + + + polyline通用属性2 + + + + + + polyline通用属性3 + + + + + + + polyline通用属性4 + + + + + + + polyline通用属性5 + + + + + + + polyline通用属性6 + + + + +
+ + +
+ + 动画样式 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + polygon渐变样式1 + + + + + + polygon渐变样式2 + + + + + + polygon渐变样式3 + + + + + + polygon渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + polygon无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + polygon多模输入1 + + + + + + + + + +
+
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.js b/ace/ace_standard/src/main/js/default/pages/polygon/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.js @@ -0,0 +1,27 @@ +/** + * 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. + */ + +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.css b/ace/ace_standard/src/main/js/default/pages/polyline/index.css new file mode 100644 index 0000000000000000000000000000000000000000..7513f1d3e275db2ffc366464b6606e134c0c1db9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.css @@ -0,0 +1,305 @@ +/** + * 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1.2; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 100px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + position: absolute; + left: 10px; + top: 80px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + margin-bottom: 50px; + margin-top: 10px; + color: green; + stroke-width: 30px; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2.6; +} + +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.hml b/ace/ace_standard/src/main/js/default/pages/polyline/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7142c70769d49b03d90e224f1a58837d648c35a1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.hml @@ -0,0 +1,199 @@ +
+
+ + 通用样式 + + + polyline通用样式1 + + + + + + polyline通用样式2 + + + + + + + polyline通用样式3 + + + + + + polyline通用样式4 + + + + + + polyline通用样式5 + +
+ + + + + + +
+
+ + +
+
+ + 通用属性 + + + polyline通用属性1 + + + + + + polyline通用属性2 + + + + + + polyline通用属性3 + + + + + + + polyline通用属性4 + + + + + + + polyline通用属性5 + + + + + + + polyline通用属性6 + + + + +
+ + +
+ + 动画样式 + + + polyline动画样式1 + + + + + + path动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + polyline渐变样式1 + + + + + + polyline渐变样式2 + + + + + + polyline渐变样式3 + + + + + + polyline渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + polyline无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + polyline多模输入1 + + + + + +
+
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.js b/ace/ace_standard/src/main/js/default/pages/polyline/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.js @@ -0,0 +1,27 @@ +/** + * 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. + */ + +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.css b/ace/ace_standard/src/main/js/default/pages/rect/index.css new file mode 100644 index 0000000000000000000000000000000000000000..97964431d19581c78616a1da910f808fb881a38f --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/rect/index.css @@ -0,0 +1,287 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + + + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1.5; +} + +/*#prop1 {*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop2 {*/ +/* color: #343524;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ +/*.prop3{*/ +/* color: #679855;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop4 {*/ +/* color: #456345;*/ +/* stroke-width: 25px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop5 {*/ +/* color: #831834;*/ +/* stroke-width: 40px;*/ +/* margin: 5px;*/ +/* height: 70px;*/ +/*}*/ + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ +/* color: #978666;*/ +/* stroke-width: 30px;*/ + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.hml b/ace/ace_standard/src/main/js/default/pages/rect/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..1ddc05a604a411435c5fb9bc7c1190b5aab6fd6c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/rect/index.hml @@ -0,0 +1,173 @@ +
+
+ + 通用样式 + + + rect通用样式1 + + + + rect通用样式2 + + + + + + rect通用样式3 + + + + + + rect通用样式4 + + + + + + rect通用样式5 + +
+ + + + + + +
+
+ + +
+
+ + 通用属性 + + + rect通用属性1 + + + + + + + + rect通用属性2 + + + + + + + + rect通用属性3 + + + + + + + + + rect特有属性4 + + + + + + +
+ + +
+ + 动画样式 + + + rect动画样式1 + + + + + + + + rect动画样式2 + + + + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + rect渐变样式1 + + + + + + rect渐变样式2 + + + + + + rect渐变样式3 + + + + + + rect渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + rect无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + rect多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.js b/ace/ace_standard/src/main/js/default/pages/rect/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/rect/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/span/index.css b/ace/ace_standard/src/main/js/default/pages/span/index.css deleted file mode 100644 index 398440bb8b62ebb0a67e685e77a66a8dee0fa9ff..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/span/index.css +++ /dev/null @@ -1,110 +0,0 @@ -.container { - flex-direction: column; - align-items: flex-start; - justify-content: center; -} - -.title { - font-size: 30px; - text-align: center; - width: 100%; - height: 10%; -} - -.spanTxt1{ - text-color:red; - font-size:30px; - allow-scale:true; - text-decoration:underline; - letter-spacing:5px; - font-style:normal; - font-weight:200; - font-family:sans-serif; - min-width: 25px; - min-height: 10px; - max-width: 300px; - max-height: 50px; - padding-left: 10px; - padding-top: 20px; - padding-right: 15px; - padding-bottom: 5px; - margin-left: 10px; - margin-top: 20px; - margin-right: 15px; - margin-bottom: 5px; -} - -.spanTxt2{ - text-color:yellow; - font-size:30px; - allow-scale:false; - text-decoration:line-through; - text-decoration:none; - letter-spacing:5px; - font-style:italic; - font-weight:300; - font-family:sans-serif; - margin: 5px; -} - -.spanTxt3{ - text-color:beige; - font-size:30px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:200; - font-family:sans-serif; - margin: 5px; -} - -.spanTxt4{ - text-color:aqua; - font-size:30px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:200; - font-family:sans-serif; - margin: 5px; -} - -.contain1{ - width: 100%; - height: 100px; - margin-left: 28%; - flex-direction: column; -} - -.spanTxt5{ - text-color:saddlebrown; - font-size:30px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:300; - font-family:sans-serif; - margin: 5px; -} - -.spanTxt6{ - text-color:darkcyan; - font-size:30px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:200; - font-family:sans-serif; - margin: 10px; -} - -.spanTxt7 { - text-color:navajowhite; - font-size:30px; - allow-scale:true; - letter-spacing:10px; - font-style:normal; - font-weight:500; - font-family:sans-serif; - margin: 5px; -} diff --git a/ace/ace_standard/src/main/js/default/pages/span/index.hml b/ace/ace_standard/src/main/js/default/pages/span/index.hml deleted file mode 100644 index 89f9f2de77a0b6defbf1b580e52d5ffc5cc29a7a..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/span/index.hml +++ /dev/null @@ -1,30 +0,0 @@ - -
- - - span1 - - - - span2 - - - - span3 - - - - span4 - - - - - span5 - - span6 - - - - span7 - -
\ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/span/prop/index.css b/ace/ace_standard/src/main/js/default/pages/span/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..83c4a11e434fac5f11ffcc8ed865ac2381583452 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/span/prop/index.css @@ -0,0 +1,54 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +.spanTextTitle { + height: 15px; + font-size: 10px; + margin-bottom: 2px; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} diff --git a/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..d961d71b2b4dc9963bf99197d388dbd53f15990a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml @@ -0,0 +1,211 @@ + + +
+
+ + span通用属性 + + + + 通用属性 -- id + + + + span + + + + + + 通用属性 -- class + + + + span + + + + + span + + + + + + + 通用属性 -- style + + + + span + + + + + + 通用属性 -- ref + + + + span + + + + + span + + + + + 通用属性 -- data-* + + + + span + + + + + span + + + + + 通用属性 -- click-effect + + + + span + + + + + span + + + + + span + + + + + span + + + + + 通用属性 -- dir + + + + span + + + + + span + + + + + span + + + + + span + + + + + 渲染属性 -- for + + + + span + + + + + span + + + + + span + + + + + 渲染属性 -- if + + + + span + + + + + + 渲染属性 -- show + + + + span + + + + + span + + + + + span + + +
+ +
+
+ +
+ +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/span/prop/index.js b/ace/ace_standard/src/main/js/default/pages/span/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..c8cbac48b78382d08788f256dac0243e0852f9f9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/span/prop/index.js @@ -0,0 +1,89 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + }, + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone, + styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone, + dataProp : this.dataProp, dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, + forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone, + } + }, + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, +} diff --git a/ace/ace_standard/src/main/js/default/pages/span/router/index.css b/ace/ace_standard/src/main/js/default/pages/span/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..4de666365e97be615f37f42083740c82c20a6cad --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/span/router/index.css @@ -0,0 +1,406 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 45%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 40%; +} + +.function-container{ + flex-direction: column; + height: 25%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 65%; +} + +.multimode-container{ + flex-direction: column; + height: 20%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +.style1{ + width: 100%; + mask-color:red; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 1px; + padding-right: 15px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 0px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 70%; + height: 12%; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 1px; + margin: 5px; + border: 2px solid #000000; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + color:salmon; + font-size:25px; + font-style:normal; + font-weight:100; + allow-scale:true; + text-decoration:underline; + font-family:sans-serif; +} + +.style8 { + color:chartreuse; + font-size:25px; + font-style:normal; + font-weight:200; + allow-scale:false; + text-decoration:line-through; + font-family:sans-serif; +} +.style9{ + color:black; + font-size:30px; + font-style:italic; + font-weight:300; + allow-scale:false; + text-decoration:none; + font-family:sans-serif; +} + +.event1{ + width: 100%; + height: 40px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 40px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 40px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 40px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 40px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 40px; + margin: 2px; +} + +.prop5 { + background-color: gold; + height: 40px; + width: 100%; + margin: 2px; +} + + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 100%; + height: 55px; + margin: 5px; +} + +.gradient1{ + margin: 5px; + height: 40px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + height: 40px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + height: 40px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + margin: 5px; + height: 40px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access1{ + color: #321124; + height: 40px; + margin: 5px; + background-color: chartreuse; +} + +.atom1{ + background-color: saddlebrown; + width: 40px; + height: 40px; +} +.atom2{ + background-color: blueviolet; + width: 40px; + height: 40px; +} +.atom3{ + background-color: aquamarine; + width: 40px; + height: 40px; +} + +.multimode1{ + background-color: firebrick; + height: 40px; + width: 100%; + margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 60px; + overflow: scroll; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/span/router/index.hml b/ace/ace_standard/src/main/js/default/pages/span/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e45664fc94aafea3f7a7a7727139a7133ff8fba6 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/span/router/index.hml @@ -0,0 +1,291 @@ + + +
+
+ +
+ + 通用样式 + + + + span通用样式1 + + + + + span + + + + + span通用样式2 + + + + + span + + + + + span通用样式3 + + + + span + + + + + span通用样式4 + + + + span + + + + + span通用样式5 + + +
+ + + span + + + + + span + + +
+ + + span特有样式1 + + + + span + + + + + span特有样式2 + + + + span + + + + + span特有样式3 + + + + span + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + span通用属性1 + + + + + + + span通用属性2 + + + + + + + span通用属性3 + + + + + +
+
+
+ +
+ + 通用事件 + + + + span通用事件1 + + + + + +
+
+ +
+
+ +
+ +
+ + 无障碍 + + + span无障碍1 + + + + span + + + +
+
+
+ +
+ + 原子布局 + + + span原子布局1 + +
+ + + span + + + + + span + + + + + span + + +
+ + span原子布局2 + +
+ + + span + + + + + span + + + + + span + + +
+ + span原子布局3 + +
+ + + span + + + + + span + + + + + span + + +
+
+
+
+ + 多模输入 + + + span多模输入1 + + + + span + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/span/router/index.js b/ace/ace_standard/src/main/js/default/pages/span/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e0f4eb3c6ac35f5a12cd0fcec52b5da74601f311 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/span/router/index.js @@ -0,0 +1,489 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/span/style/index.css b/ace/ace_standard/src/main/js/default/pages/span/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/span/style/index.hml b/ace/ace_standard/src/main/js/default/pages/span/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/span/style/index.js b/ace/ace_standard/src/main/js/default/pages/span/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/span/style/index.js @@ -0,0 +1,14 @@ +/** + * 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. + */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.css b/ace/ace_standard/src/main/js/default/pages/svg/index.css new file mode 100644 index 0000000000000000000000000000000000000000..4584483607248aa5c847867c0ee6983ee662bcd0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg/index.css @@ -0,0 +1,288 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ +/* width: 100%;*/ +/* height: 100%;*/ + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ +/* width: 100%;*/ + height:150px; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ +/* width: 60%;*/ +/* height: 5%;*/ + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ +/* width: 50%;*/ +/* height: 30px;*/ + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ +/* width: 70px;*/ +/* height: 30px;*/ + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + + + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1.5; +} + +/*#prop1 {*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop2 {*/ +/* color: #343524;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ +/*.prop3{*/ +/* color: #679855;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop4 {*/ +/* color: #456345;*/ +/* stroke-width: 25px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop5 {*/ +/* color: #831834;*/ +/* stroke-width: 40px;*/ +/* margin: 5px;*/ +/* height: 70px;*/ +/*}*/ + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ +/* color: #978666;*/ +/* stroke-width: 30px;*/ + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.hml b/ace/ace_standard/src/main/js/default/pages/svg/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e6409e5b3288ab92c7ee0f7250ac9a4d8b9df6ea --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg/index.hml @@ -0,0 +1,228 @@ +
+
+ + 通用样式 + + + svg通用样式1 + + + + + + + svg通用样式2 + + + + + + + svg通用样式3 + + + + + + svg通用样式4 + + + + + + svg通用样式5 + +
+ + + + + + +
+
+ + + +
+
+ + 通用属性 + + + svg通用属性1 + + + + + + + + svg通用属性2 + + + + + + + + svg通用属性3 + + + + + + + + + svg特有属性4 + + + + +
+ + +
+ + 动画样式 + + + svg动画样式1 + + + + + + svg动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + svg渐变样式1 + + + + + + svg渐变样式2 + + + + + + svg渐变样式3 + + + + + + svg渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + svg无障碍1 + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + 多模输入 + + + svg多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.js b/ace/ace_standard/src/main/js/default/pages/svg/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.css b/ace/ace_standard/src/main/js/default/pages/svg_text/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a9d3a5a86a6c73d9d0f5bfd0b2edc0cba112e107 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.css @@ -0,0 +1,136 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + background-color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + background-color: #978666; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml b/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7449be8798ab22c943089ebe9804a73aa7293be1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml @@ -0,0 +1,130 @@ +
+
+
+ + 通用属性 + + + svg_text通用属性1 + + + x: 5% ; y: 20 + dx: 10% ; dy: 10 + + + svg_text通用属性2 + + + rotate: 30 + rotate: -30 + + + svg_text通用属性3 + + + font-size: 22px + fill: #00ff00 + + + svg_text通用属性4 + + + fill-opacity: 0.5 + opacity: 0.7 + + + svg_text通用属性5 + + + stroke: black + stroke-width: 2 + stroke-opacity: 0.5 + +
+ + +
+ + 动画样式 + + + svg_text动画样式1 + + + svg_text + + + svg_text动画样式2 + + + svg_text + +
+
+ + +
+
+ + 渐变样式 + + + svg_text渐变样式1 + + + svg_text + + + svg_text渐变样式2 + + + svg_text + + + svg_text渐变样式3 + + + svg_text + + + svg_text渐变样式4 + + + svg_text + +
+ + + +
+ + 无障碍 + + + svg_text无障碍1 + + + svg_text + +
+ + + +
+ + 多模输入 + + + svg_text多模输入1 + + + svg_text + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.js b/ace/ace_standard/src/main/js/default/pages/svg_text/index.js new file mode 100644 index 0000000000000000000000000000000000000000..87eb2e4aa01893ea2e7816dc2c71ff94460b3415 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.js @@ -0,0 +1,24 @@ +/** + * 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. + */ + +export default { + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/switch/index.css b/ace/ace_standard/src/main/js/default/pages/switch/index.css deleted file mode 100644 index 5bd7bb73ed2c153f39ce8de150c97b46a794535f..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/switch/index.css +++ /dev/null @@ -1,111 +0,0 @@ -.container { - flex-direction: column; - align-items: flex-start; - justify-content: center; -} - -switch{ - texton-color:#002aff; - textoff-color:silver; - text-padding:5px; -} - -.switch1{ - text-color:red; - font-size:20px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:200; - font-family:sans-serif; - min-width: 25px; - min-height: 10px; - max-width: 600px; - max-height: 50px; - padding-left: 10px; - padding-top: 5px; - padding-right: 15px; - padding-bottom: 5px; - margin-left: 10px; - margin-top: 3%; - margin-right: 15px; - margin-bottom: 3%; - texton-color:red; - textoff-color:blue; -} - -.switch2{ - text-color:yellow; - max-height: 50px; - font-size:20px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:300; - font-family:sans-serif; - margin: 3%; - texton-color:yellow; - textoff-color:aqua; -} - -.switch3{ - text-color:beige; - max-height: 50px; - font-size:20px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:200; - font-family:sans-serif; - margin: 3%; -} - -.switch4{ - text-color:aqua; - max-height: 50px; - font-size:20px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:200; - font-family:sans-serif; - margin: 3%; -} - -.container1{ - height: 24%; - flex-direction: column; -} - -.switch5{ - text-color:saddlebrown; - font-size:22px; - allow-scale:true; - letter-spacing:5px; - font-style:normal; - font-weight:300; - font-family:sans-serif; - margin: 3%; -} - -.switch6{ - text-color:darkcyan; - font-size:25px; - allow-scale:false; - letter-spacing:5px; - font-style:italic; - font-weight:200; - font-family:sans-serif; - margin-left: 8%; -} - -.switch7 { - text-color:navajowhite; - font-size:30px; - allow-scale:true; - letter-spacing:10px; - font-style:normal; - font-weight:500; - font-family:sans-serif; - margin: 3%; -} diff --git a/ace/ace_standard/src/main/js/default/pages/switch/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/index.hml deleted file mode 100644 index e497f0cd529f8a309c0ead29e741a26c015d9b20..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/switch/index.hml +++ /dev/null @@ -1,24 +0,0 @@ - -
- - - - - - - - -
- - - - -
- - -
- - - - - diff --git a/ace/ace_standard/src/main/js/default/pages/switch/prop/index.css b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..b171d07a169edc8142e94c987205622372b9528a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.css @@ -0,0 +1,428 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + height: 15px; + margin-bottom: 2px; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + height: 15px; + margin-bottom: 2px; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + height: 15px; + margin-bottom: 2px; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + height: 15px; + margin-bottom: 2px; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + margin-bottom: 2px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + margin-bottom: 2px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + margin-bottom: 2px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + margin-bottom: 2px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + height: 15px; + margin-bottom: 2px; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + height: 15px; + margin-bottom: 2px; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + height: 15px; + margin-bottom: 2px; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + height: 15px; + margin-bottom: 2px; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + height: 15px; + margin-bottom: 2px; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + height: 15px; + margin-bottom: 2px; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#checkedTrue{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#checkedFalse{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#checkedNone{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#showTextTrue{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#showTextFalse{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#showTextNone{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#textOn{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#textOnNone{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#textOff{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} +#textOffNone{ + height: 40px; + margin-bottom: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + + diff --git a/ace/ace_standard/src/main/js/default/pages/switch/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..29d5277145c8ab2f3f7f644f0e5f48f23f40c180 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.hml @@ -0,0 +1,210 @@ + + +
+
+ + switch通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + switch特有属性 + + + + 特有属性 -- checked + + + + + + + + + + 特有属性 -- showtext + + + + + + + + + + 特有属性 -- texton + + + + + + + + 特有属性 -- textoff + + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/prop/index.js b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..20fd2de35b59f3be25ad974c7a98dfd456ba592e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.js @@ -0,0 +1,132 @@ +/** + * 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 prompt from '@system.prompt'; + +export default { + + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + + checkedTrue : null, + checkedFalse : null, + checkedNone : null, + showTextTrue : null, + showTextFalse : null, + showTextNone : null, + textOn : null, + textOnNone : null, + textOff : null, + textOffNone : null + }, + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone, + styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, + forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone, + + checkedTrue : this.checkedTrue, checkedFalse : this.checkedFalse, checkedNone : this.checkedNone, + showTextTrue : this.showTextTrue, showTextFalse : this.showTextFalse, showTextNone : this.showTextNone, + textOn : this.textOn, textOnNone : this.textOnNone, textOff : this.textOff, textOffNone : this.textOffNone, + } + }, + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + getSpecificPropValues(){ + this.checkedTrue = this.$element("checkedTrue").getInspector() + this.checkedFalse = this.$element("checkedFalse").getInspector() + this.checkedNone = this.$element("checkedNone").getInspector() + this.showTextTrue = this.$element("showTextTrue").getInspector() + this.showTextFalse = this.$element("showTextFalse").getInspector() + this.showTextNone = this.$element("showTextNone").getInspector() + this.textOn = this.$element("textOn").getInspector() + this.textOnNone = this.$element("textOnNone").getInspector() + this.textOff = this.$element("textOff").getInspector() + this.textOffNone = this.$element("textOffNone").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/switch/router/index.css b/ace/ace_standard/src/main/js/default/pages/switch/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..45c2216e7955972c6f21318aedde0680716456a1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/switch/router/index.css @@ -0,0 +1,408 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 45%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 40%; +} + +.function-container{ + flex-direction: column; + height: 25%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +.style1{ + width: 100%; + mask-color:red; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 1px; + padding-right: 15px; + padding-bottom: 1px; + margin-left: 10px; + margin-top: 0px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 70%; + height: 12%; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 1px; + margin: 5px; + border: 2px solid #000000; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + height: 40px; + texton-color:sandybrown; + textoff-color:salmon; + text-padding:10px; + allow-scale:true; + font-style:normal; + font-family:sans-serif; + margin-bottom: 5px; + margin-top: 5px; + background-color: navajowhite; +} + +.style8 { + height: 40px; + margin-bottom: 5px; + margin-top: 5px; + texton-color:salmon; + textoff-color:sandybrown; + text-padding:5px; + allow-scale:false; + font-style:italic; + font-family:sans-serif; + background-color: sandybrown; +} + +.event1{ + width: 100%; + height: 40px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 40px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 40px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 40px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 40px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 40px; + margin: 2px; +} + +.prop5 { + background-color: gold; + height: 40px; + width: 100%; + margin: 2px; +} + + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 100%; + height: 55px; + margin: 5px; +} + +.gradient1{ + margin: 5px; + height: 40px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + height: 40px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + height: 40px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + margin: 5px; + height: 40px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access1{ + color: #321124; + height: 40px; + margin: 5px; + background-color: chartreuse; +} + +.atom1{ + background-color: saddlebrown; + width: 40px; + height: 40px; +} +.atom2{ + background-color: blueviolet; + width: 40px; + height: 40px; +} +.atom3{ + background-color: aquamarine; + width: 40px; + height: 40px; +} + +.multimode1{ + background-color: firebrick; + height: 40px; + width: 100%; + margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 60px; + overflow: scroll; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/switch/router/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..c8962bd30019d60185ec5775d4ec58171a518a64 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/switch/router/index.hml @@ -0,0 +1,358 @@ + + +
+
+ +
+ + 通用样式 + + + + switch通用样式1 + + + + + + switch通用样式2 + + + + + + switch通用样式3 + + + + + + switch通用样式4 + + + + + + switch通用样式5 + +
+ + + + +
+ + + switch特有样式 + + + + + + switch特有样式 + + + + +
+ + + + +
+ + 动画样式 + + + + switch动画样式1 + + + + + + switch动画样式2 + + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + switch通用属性1 + + + + + + switch通用属性2 + + + + + + switch通用属性3 + + + + + + switch特有属性4 + + + + + + switch特有属性5 + + + +
+
+
+ +
+ + 通用事件 + + + + switch通用事件1 + + + + + + switch通用事件2 + + + + + + switch通用事件3 + + + + + + switch特有事件1 + + + + + + switch特有事件2 + + + +
+
+
+ +
+ + 通用方法 + + + + switch通用方法1 + + + + + + switch通用方法2 + + + + + + switch通用方法3 + + + + + + switch特有方法1 + + + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + switch渐变样式1 + + + + + + switch渐变样式2 + + + + + + switch渐变样式3 + + + + + + switch渐变样式4 + + + +
+
+
+ +
+ + 无障碍 + + + switch无障碍1 + + + +
+
+
+ +
+ + 原子布局 + + + switch原子布局1 + +
+ + + + + + +
+ + switch原子布局2 + +
+ + + + + + +
+ + switch原子布局3 + +
+ + + + + + +
+
+
+
+ + 多模输入 + + + switch多模输入1 + + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/switch/router/index.js b/ace/ace_standard/src/main/js/default/pages/switch/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..ec5a73f60a119b9fd6f5af1db6f86749a1223bf6 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/switch/router/index.js @@ -0,0 +1,505 @@ +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + data: { + title: 'World' + }, + switchChange(e){ + console.log(e.checked); + if(e.checked){ + prompt.showToast({ + message: "打开开关" + }); + }else{ + prompt.showToast({ + message: "关闭开关" + }); + } + }, + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/switch/style/index.css b/ace/ace_standard/src/main/js/default/pages/switch/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/switch/style/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/switch/style/index.js b/ace/ace_standard/src/main/js/default/pages/switch/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/switch/style/index.js @@ -0,0 +1,14 @@ +/** + * 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. + */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/textPath/index.css b/ace/ace_standard/src/main/js/default/pages/textPath/index.css new file mode 100644 index 0000000000000000000000000000000000000000..6d86e3f7a430ef7e493b53488bfc7e1334e30bb0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.css @@ -0,0 +1,173 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + stroke-width: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + background-color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + background-color: #978666; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/textPath/index.hml b/ace/ace_standard/src/main/js/default/pages/textPath/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..1ad329f55ecb794e6aabf57ffdde1cc49e91b5b0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.hml @@ -0,0 +1,199 @@ +
+
+
+ + 通用属性 + + + textPath通用属性1 + + + + + + textPath + + + textPath + + + + + textPath通用属性2 + + + + + + textPath + + + textPath + + + textPath + + + + + + textPath通用属性3 + + + + + + textPath + + + textPath + + + +
+ + +
+ + 动画样式 + + + textPath动画样式1 + + + + + textPath + + + textPath + + + + + textPath动画样式2 + + + + + textPath + + + textPath + + + +
+
+ + + + +
+
+ + 渐变样式 + + + textPath渐变样式1 + + + + + textPath + + + + + textPath渐变样式2 + + + + + textPath + + + + + textPath渐变样式3 + + + + + textPath + + + + + textPath渐变样式4 + + + + + textPath + + + +
+ + +
+ + 无障碍 + + + textPath无障碍1 + + + + + textPath + + + +
+ + + +
+ + 多模输入 + + + textPath多模输入1 + + + + + textPath + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/span/index.js b/ace/ace_standard/src/main/js/default/pages/textPath/index.js similarity index 99% rename from ace/ace_standard/src/main/js/default/pages/span/index.js rename to ace/ace_standard/src/main/js/default/pages/textPath/index.js index 340173be1a6ec22fa90abccfc38e7ed7e99fc317..bb29005fc5c93670676d6debec44b80f964e4116 100644 --- a/ace/ace_standard/src/main/js/default/pages/span/index.js +++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.js @@ -15,4 +15,4 @@ export default { -} \ No newline at end of file +} diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.css b/ace/ace_standard/src/main/js/default/pages/tspan/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ae4e406c73985e52b6ce575b41a00eb3e68e1311 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.css @@ -0,0 +1,133 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} +.access1{ + background-color: #321124; + margin: 5px; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + margin: 5px; + background-color: #978666; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.hml b/ace/ace_standard/src/main/js/default/pages/tspan/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..9b6c3fa6747321b1e34bf5101de4278f6f59aee9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.hml @@ -0,0 +1,185 @@ +
+
+
+ + 通用属性 + + + tspan通用属性1 + + + + + X: 0; Y: 60 + + + dx: 10; dy: 40 + + + font-size: 25px + + + + + tspan通用属性2 + + + + + rotate: 30 + + + rotate: -30 + + + fill: red + + + fill: #ff00ff + + + + + + tspan通用属性3 + + + + + opacity: 0.5 + + + fill-opacity: 0.8 + + + stroke: red + + + stroke-width: 2 + + + stroke-opacity: 0.5 + + + +
+ + +
+ + 动画样式 + + + tspan动画样式1 + + + + + tspan + + + + + tspan动画样式2 + + + + + tspan + + + +
+
+ + + + +
+
+ + 渐变样式 + + + tspan渐变样式1 + + + + + tspan + + + + + tspan渐变样式2 + + + + + tspan + + + + + tspan渐变样式3 + + + + + tspan + + + + + tspan渐变样式4 + + + + + tspan + + + +
+ + +
+ + 无障碍 + + + tspan无障碍1 + + + + + tspan + + + +
+ + + +
+ + 多模输入 + + + tspan多模输入1 + + + + + tspan + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.js b/ace/ace_standard/src/main/js/default/pages/tspan/index.js new file mode 100644 index 0000000000000000000000000000000000000000..bb29005fc5c93670676d6debec44b80f964e4116 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.js @@ -0,0 +1,18 @@ +/** + * 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. + */ + +export default { + +} diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.css b/ace/ace_standard/src/main/js/default/pages/video/index.css new file mode 100644 index 0000000000000000000000000000000000000000..19cd84b30f2d2547b5cdc95259fd1884e3bd30c3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/index.css @@ -0,0 +1,376 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + height: 50px; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} +.title-style-2{ + height: 30px; +} + +.sub-title{ + width: 100%; + height: 50px; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} +.sub-title-2{ + height: 20px; +} +.sub-title-3{ + font-size: 12px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 100px; + padding-left: 5px; + padding-top: 5px; + padding-right: 5px; + padding-bottom: 5px; + margin-left: 5px; + margin-top: 5px; + margin-right: 5px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 300px; + height: 100px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.style3{ + width: 100%; + height: 100px; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-shrink: 1; +} + +.style4{ + width: 100%; + height: 15%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; +} + +.style5{ + width: 90%; + height: 60px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 100px; + height: 70px; + position: absolute; + left: 10px; + top: 70px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + width: 100px; + height: 100px; + border: 1px solid #000000; + object-fit: fill; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight: 1; +} + +.event1{ + width: 90%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 90%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 90%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + height: 20px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + height: 20px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + height: 20px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop4 { + height: 50px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + height: 50px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 90%; + height: 45px; +} + +.function2{ + background-color: #00ff00; + width: 90%; + height: 45px; +} + +.function3{ + background-color: #0000ff; + width: 90%; + height: 45px; +} + +.function4{ + flex-direction: row; + width: 90%; + height: 45px; +} + +.function5{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function6{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function7{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function8{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function9{ + flex-direction: row; + width: 90%; + height: 45px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.hml b/ace/ace_standard/src/main/js/default/pages/video/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7a3b0aa7df79d565ca2ed791c12128e0478f63b0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/index.hml @@ -0,0 +1,183 @@ +
+
+ + 通用样式 + + + video通用样式1 + + + + video通用样式2 + + + + video通用样式3 + + + + video通用样式4 + + + + div通用样式5 + +
+ + +
+ + video特有样式 + + +
+
+
+
+
+ + 通用属性 + + + video通用属性1 + + + + video通用属性2 + + + + video通用属性3 + + + + video特有属性 + + + +
+
+
+
+ + 通用事件 + + + video通用事件1 + + + + video通用事件2 + + + + video通用事件3 + + + + video特有事件1 + + +
+
+ +
+
+ +
+
+ + 特有方法 + + + video特有方法1 + + + + video特有方法2 + + + + video特有方法3 + + + + video特有方法4 + + + + video特有方法5 + + + + video特有方法6 + + +
+ +
+
+
+ + 通用方法 + + + video通用方法1 + + + + div通用方法2 + + + + div通用方法3 + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.js b/ace/ace_standard/src/main/js/default/pages/video/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e8a9bb9ebed3e961064ffe44f3410e5cb231b0af --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/index.js @@ -0,0 +1,610 @@ +// @ts-nocheck +/** + * 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 prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + + var styleValues = this.getStyleValues(); + var propsValues = this.getPropValues(); + + globalThis.value = { + styleValues:styleValues, + propsValues:propsValues + } + }, + + getStyleValues(){ + var styleValue1 = this.$element("style1").getInspector() + var styleValue2 = this.$element("style2").getInspector() + var styleValue3 = this.$element("style3").getInspector() + var styleValue4 = this.$element("style4").getInspector() + var styleValue5 = this.$element("style5").getInspector() + var styleValue6 = this.$element("style6").getInspector() + var styleValue7 = this.$element("style7").getInspector() + + return { + style1:styleValue1, + style2:styleValue2, + style3:styleValue3, + style4:styleValue4, + style5:styleValue5, + style6:styleValue6, + style7:styleValue7 + } + }, + + getPropValues(){ + var propValue1 = this.$element("prop1").getInspector() + var propValue2 = this.$element("prop2").getInspector() + var propValue3 = this.$element("prop3").getInspector() + + return { + prop1:propValue1, + prop2:propValue2, + prop3:propValue3 + } + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(){ + var function4 = this.$element('function4'); + function4.start(); + prompt.showToast({ + message: 'function4 video start.' + }); + }, + functionTest5(){ + var function5 = this.$element('function5'); + function5.pause(); + prompt.showToast({ + message: 'function5 video pause.' + }) + }, + functionTest6(){ + var function6 = this.$element('function6'); + function6.setCurrentTime({ + currenttime: 2 + }); + prompt.showToast({ + message: 'function6 video setCurrentTime.' + }) + }, + functionTest7(){ + var function7 = this.$element('function7'); + function7.requestFullscreen({ + screenOrientation : "default" + }); + prompt.showToast({ + message: 'function7 video requestFullscreen.' + }) + + }, + functionTest8(){ + var function8 = this.$element('function8'); + function8.exitFullscreen(); + prompt.showToast({ + message: 'function8 video exitFullscreen.' + }) + }, + functionTest9(){ + var function9 = this.$element('function9'); + function9.stop(); + prompt.showToast({ + message: 'function9 video stop.' + }) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + }, + prepared() { + prompt.showToast({ + message: 'prepared' + }); + }, + start() { + prompt.showToast({ + message: 'start' + }); + }, + pause() { + prompt.showToast({ + message: 'pause' + }); + }, + finish() { + prompt.showToast({ + message: 'finish' + }); + }, + error() { + prompt.showToast({ + message: 'error' + }); + }, + seeking() { + prompt.showToast({ + message: 'seeking' + }); + }, + seeked() { + prompt.showToast({ + message: 'seeked' + }); + }, + timeupdate() { + prompt.showToast({ + message: 'timeupdate' + }); + }, + fullscreenchange() { + prompt.showToast({ + message: 'fullscreenchange' + }); + }, + stop() { + prompt.showToast({ + message: 'stop' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/test/List.test.js b/ace/ace_standard/src/main/js/default/test/List.test.js index b5203caf24c71cea4a41685282145f3900f2319a..25e919a152fc105c09786a93d6cbb8bf5ac6ba65 100755 --- a/ace/ace_standard/src/main/js/default/test/List.test.js +++ b/ace/ace_standard/src/main/js/default/test/List.test.js @@ -16,3 +16,11 @@ require('./basicabilityapi.test.js') require('./mediaquery.test.js') require('./commonComponentJsApi.test.js') +require('./divProps.test.js') +require('./buttonProps.test.js') +require('./chartProps.test.js') +require('./imageProps.test.js') +require('./spanProps.test.js') +require('./menuProps.test.js') +require('./switchProps.test.js') + diff --git a/ace/ace_standard/src/main/js/default/test/buttonProps.test.js b/ace/ace_standard/src/main/js/default/test/buttonProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..2af88600eac0946acafdf608240451da0a6efab2 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/buttonProps.test.js @@ -0,0 +1,986 @@ +/** + * 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 {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('buttonPropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + } + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/index/index' + }); + resolve(); + }, 500); + }); + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear(); + resolve(); + }, 500); + }); + await backToIndexPromise.then(() => { + return clearPromise; + }); + } + + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[buttonPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/button/prop/index' + } + try { + result = router.push(options) + console.info("push buttonProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push buttonProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }); + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[buttonPropsJsTest] after each called') + await backToIndex(); + await sleep(1000) + }); + + // 通用属性 + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIdProp + * @tc.desc ACE + */ + it('testButtonIdProp', 0, async function (done) { + console.info('testButtonIdProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClassProp + * @tc.desc ACE + */ + it('testButtonClassProp', 0, async function (done) { + console.info('testButtonClassProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClassPropNone + * @tc.desc ACE + */ + it('testButtonClassPropNone', 0, async function (done) { + console.info('testButtonClassPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[buttonProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonRefProp + * @tc.desc ACE + */ + it('testButtonRefProp', 0, async function (done) { + console.info('testButtonRefProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonRefPropNone + * @tc.desc ACE + */ + it('testButtonRefPropNone', 0, async function (done) { + console.info('testButtonRefPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[buttonProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDisabledPropTrue + * @tc.desc ACE + */ + it('testButtonDisabledPropTrue', 0, async function (done) { + console.info('testButtonDisabledPropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDisabledPropFalse + * @tc.desc ACE + */ + it('testButtonDisabledPropFalse', 0, async function (done) { + console.info('testButtonDisabledPropFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDisabledPropNone + * @tc.desc ACE + */ + it('testButtonDisabledPropNone', 0, async function (done) { + console.info('testButtonDisabledPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonFocusablePropTrue + * @tc.desc ACE + */ + it('testButtonFocusablePropTrue', 0, async function (done) { + console.info('testButtonFocusablePropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonFocusablePropFalse + * @tc.desc ACE + */ + it('testButtonFocusablePropFalse', 0, async function (done) { + console.info('testButtonFocusablePropFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonFocusablePropNone + * @tc.desc ACE + */ + it('testButtonFocusablePropNone', 0, async function (done) { + console.info('testButtonFocusablePropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDataProp + * @tc.desc ACE + */ + it('testButtonDataProp', 0, async function (done) { + console.info('testButtonDataProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataButton).assertEqual(undefined); + console.info("[buttonProps] get dataButton value is: " + JSON.stringify(obj.$attrs.dataButton)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDataPropNone + * @tc.desc ACE + */ + it('testButtonDataPropNone', 0, async function (done) { + console.info('testButtonDataPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataButton).assertEqual(undefined) + console.info("[buttonProps] get dataButton value is: " + JSON.stringify(obj.$attrs.dataButton)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropSmall + * @tc.desc ACE + */ + it('testButtonClickEffectPropSmall', 0, async function (done) { + console.info('testButtonClickEffectPropSmall START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropMedium + * @tc.desc ACE + */ + it('testButtonClickEffectPropMedium', 0, async function (done) { + console.info('testButtonClickEffectPropMedium START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropLarge + * @tc.desc ACE + */ + it('testButtonClickEffectPropLarge', 0, async function (done) { + console.info('testButtonClickEffectPropLarge START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropNone + * @tc.desc ACE + */ + it('testButtonClickEffectPropNone', 0, async function (done) { + console.info('testButtonClickEffectPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[buttonProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropRtl + * @tc.desc ACE + */ + it('testButtonDirPropRtl', 0, async function (done) { + console.info('testButtonDirPropRtl START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropLtr + * @tc.desc ACE + */ + it('testButtonDirPropLtr', 0, async function (done) { + console.info('testButtonDirPropLtr START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropAuto + * @tc.desc ACE + */ + it('testButtonDirPropAuto', 0, async function (done) { + console.info('testButtonDirPropAuto START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropNone + * @tc.desc ACE + */ + it('testButtonDirPropNone', 0, async function (done) { + console.info('testButtonDirPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonForPropNull + * @tc.desc ACE + */ + it('testButtonForPropNull', 0, async function (done) { + console.info('testButtonForPropNull START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonForPropOne + * @tc.desc ACE + */ + it('testButtonForPropOne', 0, async function (done) { + console.info('testButtonForPropOne START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonForPropThree + * @tc.desc ACE + */ + it('testButtonForPropThree', 0, async function (done) { + console.info('testButtonForPropThree START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIfPropTrue + * @tc.desc ACE + */ + it('testButtonIfPropTrue', 0, async function (done) { + console.info('testButtonIfPropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonShowPropTrue + * @tc.desc ACE + */ + it('testButtonShowPropTrue', 0, async function (done) { + console.info('testButtonShowPropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonShowPropFalse + * @tc.desc ACE + */ + it('testButtonShowPropFalse', 0, async function (done) { + console.info('testButtonShowPropFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonShowPropNone + * @tc.desc ACE + */ + it('testButtonShowPropNone', 0, async function (done) { + console.info('testButtonShowPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('true') + console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + // 特有属性 + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeArc + * @tc.desc ACE + */ + it('testButtonTypeArc', 0, async function (done) { + console.info('testButtonTypeArc START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeArc); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeArc') + expect(obj.$attrs.type).assertEqual('arc') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeCapsule + * @tc.desc ACE + */ + it('testButtonTypeCapsule', 0, async function (done) { + console.info('testButtonTypeCapsule START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeCapsule); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeCapsule') + expect(obj.$attrs.type).assertEqual('capsule') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeCircle + * @tc.desc ACE + */ + it('testButtonTypeCircle', 0, async function (done) { + console.info('testButtonTypeCircle START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeCircle); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeCircle') + expect(obj.$attrs.type).assertEqual('circle') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeText + * @tc.desc ACE + */ + it('testButtonTypeText', 0, async function (done) { + console.info('testButtonTypeText START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeText); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeText') + expect(obj.$attrs.type).assertEqual('text') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeDownload + * @tc.desc ACE + */ + it('testButtonTypeDownload', 0, async function (done) { + console.info('testButtonTypeDownload START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeDownload); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeDownload') + expect(obj.$attrs.type).assertEqual('download') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeNone + * @tc.desc ACE + */ + it('testButtonTypeNone', 0, async function (done) { + console.info('testButtonTypeNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeNone') + expect(obj.$attrs.type).assertEqual('capsule') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonValue + * @tc.desc ACE + */ + it('testButtonValue', 0, async function (done) { + console.info('testButtonValue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.value); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('value') + expect(obj.$attrs.value).assertEqual('按钮') + console.info("[buttonProps] get value value is: " + JSON.stringify(obj.$attrs.value)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonValueNone + * @tc.desc ACE + */ + it('testButtonValueNone', 0, async function (done) { + console.info('testButtonValueNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.valueNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('valueNone') + expect(obj.$attrs.value).assertEqual(undefined) + console.info("[buttonProps] get value value is: " + JSON.stringify(obj.$attrs.value)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIcon + * @tc.desc ACE + */ + it('testButtonIcon', 0, async function (done) { + console.info('testButtonIcon START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.icon); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('icon') + expect(obj.$attrs.icon).assertEqual('common/images/image.png') + console.info("[buttonProps] get icon value is: " + JSON.stringify(obj.$attrs.icon)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIconNone + * @tc.desc ACE + */ + it('testButtonIconNone', 0, async function (done) { + console.info('testButtonIconNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.iconNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('iconNone') + expect(obj.$attrs.icon).assertEqual(undefined) + console.info("[buttonProps] get icon value is: " + JSON.stringify(obj.$attrs.icon)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementStart + * @tc.desc ACE + */ + it('testButtonPlacementStart', 0, async function (done) { + console.info('testButtonPlacementStart START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementStart); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementStart') + expect(obj.$attrs.placement).assertEqual('start') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementEnd + * @tc.desc ACE + */ + it('testButtonPlacementEnd', 0, async function (done) { + console.info('testButtonPlacementEnd START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementEnd); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementEnd') + expect(obj.$attrs.placement).assertEqual('end') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementTop + * @tc.desc ACE + */ + it('testButtonPlacementTop', 0, async function (done) { + console.info('testButtonPlacementTop START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementTop); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementTop') + expect(obj.$attrs.placement).assertEqual('top') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementBottom + * @tc.desc ACE + */ + it('testButtonPlacementBottom', 0, async function (done) { + console.info('testButtonPlacementBottom START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementBottom); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementBottom') + expect(obj.$attrs.placement).assertEqual('bottom') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementNone + * @tc.desc ACE + */ + it('testButtonPlacementNone', 0, async function (done) { + console.info('testButtonPlacementNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementNone') + expect(obj.$attrs.placement).assertEqual('end') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonWaitingTrue + * @tc.desc ACE + */ + it('testButtonWaitingTrue', 0, async function (done) { + console.info('testButtonWaitingTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.waitingTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('waitingTrue') + expect(obj.$attrs.waiting).assertEqual('true') + console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonWaitingFalse + * @tc.desc ACE + */ + it('testButtonWaitingFalse', 0, async function (done) { + console.info('testButtonWaitingFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.waitingFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('waitingFalse') + expect(obj.$attrs.waiting).assertEqual('false') + console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonWaitingNone + * @tc.desc ACE + */ + it('testButtonWaitingNone', 0, async function (done) { + console.info('testButtonWaitingNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.waitingNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('waitingNone') + expect(obj.$attrs.waiting).assertEqual('false') + console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting)); + done(); + }); +}); diff --git a/ace/ace_standard/src/main/js/default/test/chartProps.test.js b/ace/ace_standard/src/main/js/default/test/chartProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..0e74c4ecd659fa6319324a5f7e8be7c62cd45d56 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/chartProps.test.js @@ -0,0 +1,999 @@ +/** + * 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 {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('chartPropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + }; + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/index/index' + }); + resolve(); + }, 500); + }); + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear(); + resolve(); + }, 500); + }); + await backToIndexPromise.then(() => { + return clearPromise; + }); + } + + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[chartPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/chart/prop/index' + } + try { + result = router.push(options) + console.info("push chartProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push chartProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }); + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[chartPropsJsTest] after each called') + await backToIndex(); + await sleep(1000) + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartIdProp + * @tc.desc ACE + */ + it('testChartIdProp', 0, async function (done) { + console.info('testChartIdProp START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + it('testChartClassProp', 0, async function (done) { + console.info('testChartClassProp START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartClassPropNone + * @tc.desc ACE + */ + it('testChartClassPropNone', 0, async function (done) { + console.info('testChartClassPropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[chartProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartRefProp + * @tc.desc ACE + */ + it('testChartRefProp', 0, async function (done) { + console.info('testChartRefProp START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartRefPropNone + * @tc.desc ACE + */ + it('testChartRefPropNone', 0, async function (done) { + console.info('testChartRefPropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[chartProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDisabledPropTrue + * @tc.desc ACE + */ + it('testChartDisabledPropTrue', 0, async function (done) { + console.info('testChartDisabledPropTrue START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDisabledPropFalse + * @tc.desc ACE + */ + it('testChartDisabledPropFalse', 0, async function (done) { + console.info('testChartDisabledPropFalse START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDisabledPropNone + * @tc.desc ACE + */ + it('testChartDisabledPropNone', 0, async function (done) { + console.info('testChartDisabledPropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartFocusablePropTrue + * @tc.desc ACE + */ + it('testChartFocusablePropTrue', 0, async function (done) { + console.info('testChartFocusablePropTrue START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartFocusablePropFalse + * @tc.desc ACE + */ + it('testChartFocusablePropFalse', 0, async function (done) { + console.info('testChartFocusablePropFalse START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartFocusablePropNone + * @tc.desc ACE + */ + it('testChartFocusablePropNone', 0, async function (done) { + console.info('testChartFocusablePropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDataProp + * @tc.desc ACE + */ + it('testChartDataProp', 0, async function (done) { + console.info('testChartDataProp START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataChart).assertEqual(undefined); + console.info("[chartProps] get dataChart value is: " + JSON.stringify(obj.$attrs.dataChart)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDataPropNone + * @tc.desc ACE + */ + it('testChartDataPropNone', 0, async function (done) { + console.info('testChartDataPropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataChart).assertEqual(undefined) + console.info("[chartProps] get dataChart value is: " + JSON.stringify(obj.$attrs.dataChart)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartClickEffectPropSmall + * @tc.desc ACE + */ + it('testChartClickEffectPropSmall', 0, async function (done) { + console.info('testChartClickEffectPropSmall START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartClickEffectPropMedium + * @tc.desc ACE + */ + it('testChartClickEffectPropMedium', 0, async function (done) { + console.info('testChartClickEffectPropMedium START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartClickEffectPropLarge + * @tc.desc ACE + */ + it('testChartClickEffectPropLarge', 0, async function (done) { + console.info('testChartClickEffectPropLarge START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartClickEffectPropNone + * @tc.desc ACE + */ + it('testChartClickEffectPropNone', 0, async function (done) { + console.info('testChartClickEffectPropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[chartProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDirPropRtl + * @tc.desc ACE + */ + it('testChartDirPropRtl', 0, async function (done) { + console.info('testChartDirPropRtl START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDirPropLtr + * @tc.desc ACE + */ + it('testChartDirPropLtr', 0, async function (done) { + console.info('testChartDirPropLtr START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDirPropAuto + * @tc.desc ACE + */ + it('testChartDirPropAuto', 0, async function (done) { + console.info('testChartDirPropAuto START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDirPropNone + * @tc.desc ACE + */ + it('testChartDirPropNone', 0, async function (done) { + console.info('testChartDirPropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartForPropNull + * @tc.desc ACE + */ + it('testChartForPropNull', 0, async function (done) { + console.info('testChartForPropNull START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartForPropOne + * @tc.desc ACE + */ + it('testChartForPropOne', 0, async function (done) { + console.info('testChartForPropOne START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartForPropThree + * @tc.desc ACE + */ + it('testChartForPropThree', 0, async function (done) { + console.info('testChartForPropThree START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartIfPropTrue + * @tc.desc ACE + */ + it('testChartIfPropTrue', 0, async function (done) { + console.info('testChartIfPropTrue START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartShowPropTrue + * @tc.desc ACE + */ + it('testChartShowPropTrue', 0, async function (done) { + console.info('testChartShowPropTrue START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[chartProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartShowPropFalse + * @tc.desc ACE + */ + it('testChartShowPropFalse', 0, async function (done) { + console.info('testChartShowPropFalse START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[chartProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartShowPropNone + * @tc.desc ACE + */ + it('testChartShowPropNone', 0, async function (done) { + console.info('testChartShowPropNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('true') + console.info("[chartProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + // 特有属性 + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartTypeBar + * @tc.desc ACE + */ + it('testChartTypeBar', 0, async function (done) { + console.info('testChartTypeBar START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeBar); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('typeBar') + expect(obj.$attrs.type).assertEqual('bar') + console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartTypeLine + * @tc.desc ACE + */ + it('testChartTypeLine', 0, async function (done) { + console.info('testChartTypeLine START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeLine); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('typeLine') + expect(obj.$attrs.type).assertEqual('line') + console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartTypeGauge + * @tc.desc ACE + */ + it('testChartTypeGauge', 0, async function (done) { + console.info('testChartTypeGauge START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeGauge); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('typeGauge') + expect(obj.$attrs.type).assertEqual('gauge') + console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartTypeProgress + * @tc.desc ACE + */ + it('testChartTypeProgress', 0, async function (done) { + console.info('testChartTypeProgress START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeProgress); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('typeProgress') + expect(obj.$attrs.type).assertEqual('progress') + console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartTypeLoading + * @tc.desc ACE + */ + it('testChartTypeLoading', 0, async function (done) { + console.info('testChartTypeLoading START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeLoading); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('typeLoading') + expect(obj.$attrs.type).assertEqual('loading') + console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartTypeRainbow + * @tc.desc ACE + */ + it('testChartTypeRainbow', 0, async function (done) { + console.info('testChartTypeRainbow START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeRainbow); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('typeRainbow') + expect(obj.$attrs.type).assertEqual('rainbow') + console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartTypeNone + * @tc.desc ACE + */ + it('testChartTypeNone', 0, async function (done) { + console.info('testChartTypeNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('typeNone') + expect(obj.$attrs.type).assertEqual('line') + console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartOptions + * @tc.desc ACE + */ + it('testChartOptions', 0, async function (done) { + console.info('testChartOptions START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.options); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('options') + expect(obj.$attrs.options).assertEqual(undefined) + console.info("[chartProps] get options value is: " + JSON.stringify(obj.$attrs.options)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartOptionsNone + * @tc.desc ACE + */ + it('testChartOptionsNone', 0, async function (done) { + console.info('testChartOptionsNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.optionsNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('optionsNone') + expect(obj.$attrs.options).assertEqual(undefined) + console.info("[chartProps] get options value is: " + JSON.stringify(obj.$attrs.options)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDatasets + * @tc.desc ACE + */ + it('testChartDatasets', 0, async function (done) { + console.info('testChartDatasets START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.datasets); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('datasets') + expect(obj.$attrs.datasets).assertEqual(undefined) + console.info("[chartProps] get datasets value is: " + JSON.stringify(obj.$attrs.datasets)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartDatasetsNone + * @tc.desc ACE + */ + it('testChartDatasetsNone', 0, async function (done) { + console.info('testChartDatasetsNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.datasetsNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('datasetsNone') + expect(obj.$attrs.datasets).assertEqual(undefined) + console.info("[chartProps] get datasets value is: " + JSON.stringify(obj.$attrs.datasets)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartSegmentsSeg + * @tc.desc ACE + */ + it('testChartSegmentsSeg', 0, async function (done) { + console.info('testChartSegmentsSeg START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.segmentsSeg); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('segmentsSeg') + expect(obj.$attrs.segments).assertEqual(undefined) + console.info("[chartProps] get segments value is: " + JSON.stringify(obj.$attrs.segments)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartSegmentsRain + * @tc.desc ACE + */ + it('testChartSegmentsRain', 0, async function (done) { + console.info('testChartSegmentsRain START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.segmentsRain); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('segmentsRain') + expect(obj.$attrs.segments).assertEqual(undefined) + console.info("[chartProps] get segments value is: " + JSON.stringify(obj.$attrs.segments)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartSegmentsNone + * @tc.desc ACE + */ + it('testChartSegmentsNone', 0, async function (done) { + console.info('testChartSegmentsNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.segmentsNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('segmentsNone') + expect(obj.$attrs.segments).assertEqual(undefined) + console.info("[chartProps] get segments value is: " + JSON.stringify(obj.$attrs.segments)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartEffectsTrue + * @tc.desc ACE + */ + it('testChartEffectsTrue', 0, async function (done) { + console.info('testChartEffectsTrue START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.effectsTrue); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('effectsTrue') + expect(obj.$attrs.effects).assertEqual('true') + console.info("[chartProps] get effects value is: " + JSON.stringify(obj.$attrs.effects)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartEffectsFalse + * @tc.desc ACE + */ + it('testChartEffectsFalse', 0, async function (done) { + console.info('testChartEffectsFalse START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.effectsFalse); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('effectsFalse') + expect(obj.$attrs.effects).assertEqual('false') + console.info("[chartProps] get effects value is: " + JSON.stringify(obj.$attrs.effects)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartEffectsNone + * @tc.desc ACE + */ + it('testChartEffectsNone', 0, async function (done) { + console.info('testChartEffectsNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.effectsNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('effectsNone') + expect(obj.$attrs.effects).assertEqual('true') + console.info("[chartProps] get effects value is: " + JSON.stringify(obj.$attrs.effects)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartAnimationduration + * @tc.desc ACE + */ + it('testChartAnimationduration', 0, async function (done) { + console.info('testChartAnimationduration START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.animationduration); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('animationduration') + expect(obj.$attrs.animationduration).assertEqual('3000') + console.info("[chartProps] get animationduration value is: " + JSON.stringify(obj.$attrs.animationduration)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testChartAnimationdurationNone + * @tc.desc ACE + */ + it('testChartAnimationdurationNone', 0, async function (done) { + console.info('testChartAnimationdurationNone START'); + console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.animationdurationNone); + console.info("[chartProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('chart') + expect(obj.$attrs.id).assertEqual('animationdurationNone') + expect(obj.$attrs.animationduration).assertEqual('3000') + console.info("[chartProps] get animationduration value is: " + JSON.stringify(obj.$attrs.animationduration)); + done(); + }); +}); diff --git a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js index be854384b4866cdf0f59a643796fa881e7e0e014..635d6d61915833fed5963a9bee0db266457ab844 100644 --- a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js +++ b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js @@ -89,7 +89,7 @@ describe('aceJsTest', function () { console.info('testButtonComponent START'); let result; let options = { - uri: 'pages/button/index' + uri: 'pages/button/router/index' } try { result = router.push(options) @@ -100,7 +100,7 @@ describe('aceJsTest', function () { await sleep(1000) let pages = router.getState(); console.info("[router.button] getState" + JSON.stringify(pages)); - expect("pages/button/").assertEqual(pages.path); + expect("pages/button/router/").assertEqual(pages.path); done(); }); @@ -110,21 +110,21 @@ describe('aceJsTest', function () { * @tc.desc ACE */ it('testChartComponent', 0, async function (done) { - console.info('testButtonComponent START'); + console.info('testChartComponent START'); let result; let options = { - uri: 'pages/chart/index' + uri: 'pages/chart/router/index' } try { result = router.push(options) - console.info("push button page success " + JSON.stringify(result)); + console.info("push chart page success " + JSON.stringify(result)); } catch (err) { - console.error("push button page error " + JSON.stringify(result)); + console.error("push chart page error " + JSON.stringify(result)); } await sleep(1000) let pages = router.getState(); console.info("[router.chart] getState" + JSON.stringify(pages)); - expect("pages/chart/").assertEqual(pages.path); + expect("pages/chart/router/").assertEqual(pages.path); done(); }); @@ -227,7 +227,7 @@ describe('aceJsTest', function () { it('testDividerComponent', 0, async function (done) { let result; let options = { - uri: 'pages/divider/index' + uri: 'pages/divider/router/index' } try { result = router.push(options) @@ -236,7 +236,7 @@ describe('aceJsTest', function () { } await sleep(1000) let pages = router.getState(); - expect("pages/divider/").assertEqual(pages.path); + expect("pages/divider/router/").assertEqual(pages.path); done(); }); @@ -248,7 +248,7 @@ describe('aceJsTest', function () { it('testGetImageComponent', 0, async function (done) { let result; let options = { - uri: 'pages/image/index' + uri: 'pages/image/router/index' } try { result = router.push(options) @@ -257,7 +257,7 @@ describe('aceJsTest', function () { } await sleep(1000) let pages = router.getState(); - expect("pages/image/").assertEqual(pages.path); + expect("pages/image/router/").assertEqual(pages.path); done(); }); @@ -269,7 +269,7 @@ describe('aceJsTest', function () { it('testGetMenuComponent', 0, async function (done) { let result; let options = { - uri: 'pages/menu/index' + uri: 'pages/menu/router/index' } try { result = router.push(options) @@ -278,7 +278,7 @@ describe('aceJsTest', function () { } await sleep(1000) let pages = router.getState(); - expect("pages/menu/").assertEqual(pages.path); + expect("pages/menu/router/").assertEqual(pages.path); done(); }); @@ -374,7 +374,7 @@ describe('aceJsTest', function () { it('testSpanComponent', 0, async function (done) { let result; let options = { - uri: 'pages/span/index' + uri: 'pages/span/router/index' } try { result = router.push(options) @@ -383,7 +383,7 @@ describe('aceJsTest', function () { } await sleep(1000) let pages = router.getState(); - expect("pages/span/").assertEqual(pages.path); + expect("pages/span/router/").assertEqual(pages.path); done(); }); @@ -395,7 +395,7 @@ describe('aceJsTest', function () { it('testSwitchComponent', 0, async function (done) { let result; let options = { - uri: 'pages/switch/index' + uri: 'pages/switch/router/index' } try { result = router.push(options) @@ -404,7 +404,7 @@ describe('aceJsTest', function () { } await sleep(1000) let pages = router.getState(); - expect("pages/switch/").assertEqual(pages.path); + expect("pages/switch/router/").assertEqual(pages.path); done(); }); @@ -630,7 +630,7 @@ describe('aceJsTest', function () { it('testDivComponent', 0, async function (done) { let result; let options = { - uri: 'pages/div/index' + uri: 'pages/div/router/index' } try { result = router.push(options) @@ -641,7 +641,7 @@ describe('aceJsTest', function () { await sleep(5000) let pages = router.getState(); console.info("[router.div] getState" + JSON.stringify(pages)); - expect("pages/div/").assertEqual(pages.path); + expect("pages/div/router/").assertEqual(pages.path); done(); }); @@ -966,4 +966,625 @@ describe('aceJsTest', function () { expect("pages/tab-content/").assertEqual(pages.path); done(); }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testVideoComponent + * @tc.desc ACE + */ + it('testVideoComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/video/index' + } + try { + result = router.push(options) + console.info("push video page success " + JSON.stringify(result)); + } catch (err) { + console.error("push video page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.video] getState" + JSON.stringify(pages)); + expect("pages/video/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSvgTextComponent + * @tc.desc ACE + */ + it('testSvgTextComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/svg_text/index' + } + try { + result = router.push(options) + console.info("push svg_text page success " + JSON.stringify(result)); + } catch (err) { + console.error("push svg_text page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.svg_text] getState" + JSON.stringify(pages)); + expect("pages/svg_text/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testGridContainerComponent + * @tc.desc ACE + */ + it('testGridContainerComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/gridContainer/index' + } + try { + result = router.push(options) + console.info("push gridContainer page success " + JSON.stringify(result)); + } catch (err) { + console.error("push gridContainer page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.gridContainer] getState" + JSON.stringify(pages)); + expect("pages/gridContainer/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testGridRowComponent + * @tc.desc ACE + */ + it('testGridRowComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/gridRow/index' + } + try { + result = router.push(options) + console.info("push gridRow page success " + JSON.stringify(result)); + } catch (err) { + console.error("push gridRow page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.gridRow] getState" + JSON.stringify(pages)); + expect("pages/gridRow/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testGridColComponent + * @tc.desc ACE + */ + it('testGridColComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/gridCol/index' + } + try { + result = router.push(options) + console.info("push gridCol page success " + JSON.stringify(result)); + } catch (err) { + console.error("push gridCol page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.gridCol] getState" + JSON.stringify(pages)); + expect("pages/gridCol/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCanvasComponent + * @tc.desc ACE + */ + it('testCanvasComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/canvas/index' + } + try { + result = router.push(options) + console.info("push canvas page success " + JSON.stringify(result)); + } catch (err) { + console.error("push canvas page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.canvas] getState" + JSON.stringify(pages)); + expect("pages/canvas/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCanvasRenderingContext2DComponent + * @tc.desc ACE + */ + it('testCanvasRenderingContext2DComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_CanvasRenderingContext2D/index' + } + try { + result = router.push(options) + console.info("push obj_CanvasRenderingContext2D page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_CanvasRenderingContext2D page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_CanvasRenderingContext2D] getState" + JSON.stringify(pages)); + expect("pages/obj_CanvasRenderingContext2D/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testObjImageComponent + * @tc.desc ACE + */ + it('testObjImageComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_Image/index' + } + try { + result = router.push(options) + console.info("push obj_Image page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_Image page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_Image] getState" + JSON.stringify(pages)); + expect("pages/obj_Image/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCanvasGradientComponent + * @tc.desc ACE + */ + it('testCanvasGradientComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_CanvasGradient/index' + } + try { + result = router.push(options) + console.info("push obj_CanvasGradient page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_CanvasGradient page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_CanvasGradient] getState" + JSON.stringify(pages)); + expect("pages/obj_CanvasGradient/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDataComponent + * @tc.desc ACE + */ + it('testImageDataComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_ImageData/index' + } + try { + result = router.push(options) + console.info("push obj_ImageData page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_ImageData page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_ImageData] getState" + JSON.stringify(pages)); + expect("pages/obj_ImageData/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testPath2DComponent + * @tc.desc ACE + */ + it('testPath2DComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_Path2D/index' + } + try { + result = router.push(options) + console.info("push obj_Path2D page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_Path2D page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_Path2D] getState" + JSON.stringify(pages)); + expect("pages/obj_Path2D/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testOffCanvasRC2DComponent + * @tc.desc ACE + */ + it('testOffCanvasRC2DComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_OffscreenCanvasRenderingContext2D/index' + } + try { + result = router.push(options) + console.info("push obj_OffscreenCanvasRenderingContext2D page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_OffscreenCanvasRenderingContext2D page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_OffscreenCanvasRenderingContext2D] getState" + JSON.stringify(pages)); + expect("pages/obj_OffscreenCanvasRenderingContext2D/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageBitmapComponent + * @tc.desc ACE + */ + it('testImageBitmapComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_ImageBitmap/index' + } + try { + result = router.push(options) + console.info("push obj_ImageBitmap page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_ImageBitmap page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_ImageBitmap] getState" + JSON.stringify(pages)); + expect("pages/obj_ImageBitmap/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testOffScreenCanvasComponent + * @tc.desc ACE + */ + it('testOffScreenCanvasComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/obj_OffscreenCanvas/index' + } + try { + result = router.push(options) + console.info("push obj_OffscreenCanvas page success " + JSON.stringify(result)); + } catch (err) { + console.error("push obj_OffscreenCanvas page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.obj_OffscreenCanvas] getState" + JSON.stringify(pages)); + expect("pages/obj_OffscreenCanvas/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSvgComponent + * @tc.desc ACE + */ + it('testSvgComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/svg/index' + } + try { + result = router.push(options) + console.info("push svg page success " + JSON.stringify(result)); + } catch (err) { + console.error("push svg page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.svg] getState" + JSON.stringify(pages)); + expect("pages/svg/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testRectComponent + * @tc.desc ACE + */ + it('testRectComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/rect/index' + } + try { + result = router.push(options) + console.info("push rect page success " + JSON.stringify(result)); + } catch (err) { + console.error("push rect page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.rect] getState" + JSON.stringify(pages)); + expect("pages/rect/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCircleComponent + * @tc.desc ACE + */ + it('testCircleComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/circle/index' + } + try { + result = router.push(options) + console.info("push circle page success " + JSON.stringify(result)); + } catch (err) { + console.error("push circle page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.circle] getState" + JSON.stringify(pages)); + expect("pages/circle/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testEllipseComponent + * @tc.desc ACE + */ + it('testEllipseComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/ellipse/index' + } + try { + result = router.push(options) + console.info("push ellipse page success " + JSON.stringify(result)); + } catch (err) { + console.error("push ellipse page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.ellipse] getState" + JSON.stringify(pages)); + expect("pages/ellipse/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testPathComponent + * @tc.desc ACE + */ + it('testPathComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/path/index' + } + try { + result = router.push(options) + console.info("push path page success " + JSON.stringify(result)); + } catch (err) { + console.error("push path page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.path] getState" + JSON.stringify(pages)); + expect("pages/path/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testLineComponent + * @tc.desc ACE + */ + it('testLineComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/line/index' + } + try { + result = router.push(options) + console.info("push line page success " + JSON.stringify(result)); + } catch (err) { + console.error("push line page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.line] getState" + JSON.stringify(pages)); + expect("pages/line/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testPolyLineComponent + * @tc.desc ACE + */ + it('testPolyLineComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/polyline/index' + } + try { + result = router.push(options) + console.info("push polyline page success " + JSON.stringify(result)); + } catch (err) { + console.error("push polyline page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.polyline] getState" + JSON.stringify(pages)); + expect("pages/polyline/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testPolygonComponent + * @tc.desc ACE + */ + it('testPolygonComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/polygon/index' + } + try { + result = router.push(options) + console.info("push polygon page success " + JSON.stringify(result)); + } catch (err) { + console.error("push polygon page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.polygon] getState" + JSON.stringify(pages)); + expect("pages/polygon/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testAnimateComponent + * @tc.desc ACE + */ + it('testAnimateComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/animate/index' + } + try { + result = router.push(options) + console.info("push animate page success " + JSON.stringify(result)); + } catch (err) { + console.error("push animate page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.animate] getState" + JSON.stringify(pages)); + expect("pages/animate/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testAnimateMotionComponent + * @tc.desc ACE + */ + it('testAnimateMotionComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/animateMotion/index' + } + try { + result = router.push(options) + console.info("push animateMotion page success " + JSON.stringify(result)); + } catch (err) { + console.error("push animateMotion page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.animateMotion] getState" + JSON.stringify(pages)); + expect("pages/animateMotion/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testAnimateTransformComponent + * @tc.desc ACE + */ + it('testAnimateTransformComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/animateTransform/index' + } + try { + result = router.push(options) + console.info("push animateTransform page success " + JSON.stringify(result)); + } catch (err) { + console.error("push animateTransform page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.animateTransform] getState" + JSON.stringify(pages)); + expect("pages/animateTransform/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testTextPathComponent + * @tc.desc ACE + */ + it('testTextPathComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/textPath/index' + } + try { + result = router.push(options) + console.info("push textPath page success " + JSON.stringify(result)); + } catch (err) { + console.error("push textPath page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.textPath] getState" + JSON.stringify(pages)); + expect("pages/textPath/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testTspanComponent + * @tc.desc ACE + */ + it('testTspanComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/tspan/index' + } + try { + result = router.push(options) + console.info("push tspan page success " + JSON.stringify(result)); + } catch (err) { + console.error("push tspan page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.tspan] getState" + JSON.stringify(pages)); + expect("pages/tspan/").assertEqual(pages.path); + done(); + }); }); diff --git a/ace/ace_standard/src/main/js/default/test/divProps.test.js b/ace/ace_standard/src/main/js/default/test/divProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..2c9a720e087e45fc85f4bb8d23adfb436b234f0b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/divProps.test.js @@ -0,0 +1,687 @@ +/* + * 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 router from '@system.router'; +import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('divPropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + } + + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/index/index' + }); + resolve(); + }, 500); + }); + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear(); + resolve(); + }, 500); + }); + await backToIndexPromise.then(() => { + return clearPromise; + }); + } + + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[divPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/div/prop/index' + } + try { + result = router.push(options) + console.info("push divProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push divProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }); + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[divPropsJsTest] after each called') + await backToIndex() + await sleep(1000) + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivIdProp + * @tc.desc ACE + */ + it('testDivIdProp', 0, async function (done) { + console.info('testDivIdProp START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClassProp + * @tc.desc ACE + */ + it('testDivClassProp', 0, async function (done) { + console.info('testDivClassProp START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClassPropNone + * @tc.desc ACE + */ + it('testDivClassPropNone', 0, async function (done) { + console.info('testDivClassPropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[divProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivStyleProp + * @tc.desc ACEs + */ +// it('testDivStyleProp', 0, async function (done) { +// console.info('testDivStyleProp START'); +// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); +// +// let obj = JSON.parse(globalThis.value.styleProp); +// console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); +// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); +// +// expect(obj.$type).assertEqual('div') +// expect(obj.$attrs.id).assertEqual('styleProp') +// expect(obj.$attrs.style).assertEqual(undefined) +// console.info("[divProps] get style value is: " + JSON.stringify(obj.$attrs.style)); +// +// expect(obj.$styles.width).assertEqual(undefined); +// console.info("[divProps] get style width value is: " + JSON.stringify(obj.$styles.width)); +// expect(obj.$styles.height).assertEqual(undefined); +// console.info("[divProps] get style height value is: " + JSON.stringify(obj.$styles.height)); +// expect(obj.$styles.get('background-color')).assertEqual(undefined); +// done(); +// }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivRefProp + * @tc.desc ACE + */ + it('testDivRefProp', 0, async function (done) { + console.info('testDivRefProp START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivRefPropNone + * @tc.desc ACE + */ + it('testDivRefPropNone', 0, async function (done) { + console.info('testDivRefPropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[divProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDisabledPropTrue + * @tc.desc ACE + */ + it('testDivDisabledPropTrue', 0, async function (done) { + console.info('testDivDisabledPropTrue START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDisabledPropFalse + * @tc.desc ACE + */ + it('testDivDisabledPropFalse', 0, async function (done) { + console.info('testDivDisabledPropFalse START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDisabledPropNone + * @tc.desc ACE + */ + it('testDivDisabledPropNone', 0, async function (done) { + console.info('testDivDisabledPropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivFocusablePropTrue + * @tc.desc ACE + */ + it('testDivFocusablePropTrue', 0, async function (done) { + console.info('testDivFocusablePropTrue START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivFocusablePropFalse + * @tc.desc ACE + */ + it('testDivFocusablePropFalse', 0, async function (done) { + console.info('testDivFocusablePropFalse START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivFocusablePropNone + * @tc.desc ACE + */ + it('testDivFocusablePropNone', 0, async function (done) { + console.info('testDivFocusablePropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDataProp + * @tc.desc ACE + */ + it('testDivDataProp', 0, async function (done) { + console.info('testDivDataProp START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataDiv).assertEqual(undefined); + console.info("[divProps] get dataDiv value is: " + JSON.stringify(obj.$attrs.dataDiv)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDataPropNone + * @tc.desc ACE + */ + it('testDivDataPropNone', 0, async function (done) { + console.info('testDivDataPropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataDiv).assertEqual(undefined) + console.info("[divProps] get dataDiv value is: " + JSON.stringify(obj.$attrs.dataDiv)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropSmall + * @tc.desc ACE + */ + it('testDivClickEffectPropSmall', 0, async function (done) { + console.info('testDivClickEffectPropSmall START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropMedium + * @tc.desc ACE + */ + it('testDivClickEffectPropMedium', 0, async function (done) { + console.info('testDivClickEffectPropMedium START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropLarge + * @tc.desc ACE + */ + it('testDivClickEffectPropLarge', 0, async function (done) { + console.info('testDivClickEffectPropLarge START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivClickEffectPropNone + * @tc.desc ACE + */ + it('testDivClickEffectPropNone', 0, async function (done) { + console.info('testDivClickEffectPropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[divProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropRtl + * @tc.desc ACE + */ + it('testDivDirPropRtl', 0, async function (done) { + console.info('testDivDirPropRtl START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropLtr + * @tc.desc ACE + */ + it('testDivDirPropLtr', 0, async function (done) { + console.info('testDivDirPropLtr START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropAuto + * @tc.desc ACE + */ + it('testDivDirPropAuto', 0, async function (done) { + console.info('testDivDirPropAuto START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivDirPropNone + * @tc.desc ACE + */ + it('testDivDirPropNone', 0, async function (done) { + console.info('testDivDirPropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivForPropNull + * @tc.desc ACE + */ + it('testDivForPropNull', 0, async function (done) { + console.info('testDivForPropNull START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivForPropOne + * @tc.desc ACE + */ + it('testDivForPropOne', 0, async function (done) { + console.info('testDivForPropOne START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivForPropThree + * @tc.desc ACE + */ + it('testDivForPropThree', 0, async function (done) { + console.info('testDivForPropThree START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivIfPropTrue + * @tc.desc ACE + */ + it('testDivIfPropTrue', 0, async function (done) { + console.info('testDivIfPropTrue START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivIfPropFalse + * @tc.desc ACE + */ + // it('testDivIfPropFalse', 0, async function (done) { + // console.info('testDivIfPropFalse START'); + // console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + // + // let obj = JSON.parse(globalThis.value.ifPropFalse); + // console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + // console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + // + // expect(obj.$type).assertEqual('div') + // expect(obj.$attrs.id).assertEqual('ifPropFalse') + // expect(obj.$attrs.if).assertEqual(false) + // done(); + // }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivIfPropNone + * @tc.desc ACE + */ + // it('testDivIfPropNone', 0, async function (done) { + // console.info('testDivIfPropNone START'); + // console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + // + // let obj = JSON.parse(globalThis.value.ifPropNone); + // console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + // console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + // + // expect(obj.$type).assertEqual('div') + // expect(obj.$attrs.id).assertEqual('ifPropNone') + // expect(obj.$attrs.if).assertEqual(false) + // done(); + // }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivShowPropTrue + * @tc.desc ACE + */ + it('testDivShowPropTrue', 0, async function (done) { + console.info('testDivShowPropTrue START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[divProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivShowPropFalse + * @tc.desc ACE + */ + it('testDivShowPropFalse', 0, async function (done) { + console.info('testDivShowPropFalse START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[divProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testDivShowPropNone + * @tc.desc ACE + */ + it('testDivShowPropNone', 0, async function (done) { + console.info('testDivShowPropNone START'); + console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[divProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('div') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('false') + console.info("[divProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); +}); diff --git a/ace/ace_standard/src/main/js/default/test/imageProps.test.js b/ace/ace_standard/src/main/js/default/test/imageProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..9eca22460fdafce64eda8e91d45767b92f60a88b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/imageProps.test.js @@ -0,0 +1,698 @@ +/** + * 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 {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('imagePropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + } + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/index/index' + }); + resolve() + }, 500) + }) + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear() + resolve() + }, 500) + }) + await backToIndexPromise.then(() => { + return clearPromise; + }) + } + + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[imagePropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/image/prop/index' + } + try { + result = router.push(options) + console.info("push imageProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push imageProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }) + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[imagePropsJsTest] after each called') + await backToIndex() + await sleep(1000) + }) + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageIdProp + * @tc.desc ACE + */ + it('testImageIdProp', 0, async function (done) { + console.info('testImageIdProp START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + it('testImageClassProp', 0, async function (done) { + console.info('testImageClassProp START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageClassPropNone + * @tc.desc ACE + */ + it('testImageClassPropNone', 0, async function (done) { + console.info('testImageClassPropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[imageProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageRefProp + * @tc.desc ACE + */ + it('testImageRefProp', 0, async function (done) { + console.info('testImageRefProp START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageRefPropNone + * @tc.desc ACE + */ + it('testImageRefPropNone', 0, async function (done) { + console.info('testImageRefPropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[imageProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDisabledPropTrue + * @tc.desc ACE + */ + it('testImageDisabledPropTrue', 0, async function (done) { + console.info('testImageDisabledPropTrue START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDisabledPropFalse + * @tc.desc ACE + */ + it('testImageDisabledPropFalse', 0, async function (done) { + console.info('testImageDisabledPropFalse START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDisabledPropNone + * @tc.desc ACE + */ + it('testImageDisabledPropNone', 0, async function (done) { + console.info('testImageDisabledPropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageFocusablePropTrue + * @tc.desc ACE + */ + it('testImageFocusablePropTrue', 0, async function (done) { + console.info('testImageFocusablePropTrue START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageFocusablePropFalse + * @tc.desc ACE + */ + it('testImageFocusablePropFalse', 0, async function (done) { + console.info('testImageFocusablePropFalse START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageFocusablePropNone + * @tc.desc ACE + */ + it('testImageFocusablePropNone', 0, async function (done) { + console.info('testImageFocusablePropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDataProp + * @tc.desc ACE + */ + it('testImageDataProp', 0, async function (done) { + console.info('testImageDataProp START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataImage).assertEqual(undefined); + console.info("[imageProps] get dataImage value is: " + JSON.stringify(obj.$attrs.dataImage)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDataPropNone + * @tc.desc ACE + */ + it('testImageDataPropNone', 0, async function (done) { + console.info('testImageDataPropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataImage).assertEqual(undefined) + console.info("[imageProps] get dataImage value is: " + JSON.stringify(obj.$attrs.dataImage)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageClickEffectPropSmall + * @tc.desc ACE + */ + it('testImageClickEffectPropSmall', 0, async function (done) { + console.info('testImageClickEffectPropSmall START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageClickEffectPropMedium + * @tc.desc ACE + */ + it('testImageClickEffectPropMedium', 0, async function (done) { + console.info('testImageClickEffectPropMedium START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageClickEffectPropLarge + * @tc.desc ACE + */ + it('testImageClickEffectPropLarge', 0, async function (done) { + console.info('testImageClickEffectPropLarge START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageClickEffectPropNone + * @tc.desc ACE + */ + it('testImageClickEffectPropNone', 0, async function (done) { + console.info('testImageClickEffectPropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[imageProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDirPropRtl + * @tc.desc ACE + */ + it('testImageDirPropRtl', 0, async function (done) { + console.info('testImageDirPropRtl START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDirPropLtr + * @tc.desc ACE + */ + it('testImageDirPropLtr', 0, async function (done) { + console.info('testImageDirPropLtr START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDirPropAuto + * @tc.desc ACE + */ + it('testImageDirPropAuto', 0, async function (done) { + console.info('testImageDirPropAuto START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageDirPropNone + * @tc.desc ACE + */ + it('testImageDirPropNone', 0, async function (done) { + console.info('testImageDirPropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageForPropNull + * @tc.desc ACE + */ + it('testImageForPropNull', 0, async function (done) { + console.info('testImageForPropNull START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageForPropOne + * @tc.desc ACE + */ + it('testImageForPropOne', 0, async function (done) { + console.info('testImageForPropOne START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageForPropThree + * @tc.desc ACE + */ + it('testImageForPropThree', 0, async function (done) { + console.info('testImageForPropThree START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageIfPropTrue + * @tc.desc ACE + */ + it('testImageIfPropTrue', 0, async function (done) { + console.info('testImageIfPropTrue START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageShowPropTrue + * @tc.desc ACE + */ + it('testImageShowPropTrue', 0, async function (done) { + console.info('testImageShowPropTrue START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[imageProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageShowPropFalse + * @tc.desc ACE + */ + it('testImageShowPropFalse', 0, async function (done) { + console.info('testImageShowPropFalse START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[imageProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageShowPropNone + * @tc.desc ACE + */ + it('testImageShowPropNone', 0, async function (done) { + console.info('testImageShowPropNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('true') + console.info("[imageProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + // 特有属性 + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageImageSrc + * @tc.desc ACE + */ + it('testImageImageSrc', 0, async function (done) { + console.info('testImageImageSrc START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.imageSrc); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('imageSrc') + expect(obj.$attrs.src).assertEqual('common/images/image.png') + console.info("[imageProps] get src value is: " + JSON.stringify(obj.$attrs.src)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageImageSrcNone + * @tc.desc ACE + */ + it('testImageImageSrcNone', 0, async function (done) { + console.info('testImageImageSrcNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.imageSrcNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('imageSrcNone') + expect(obj.$attrs.src).assertEqual(undefined) + console.info("[imageProps] get src value is: " + JSON.stringify(obj.$attrs.src)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageImageAlt + * @tc.desc ACE + */ + it('testImageImageAlt', 0, async function (done) { + console.info('testImageImageAlt START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.imageAlt); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('imageAlt') + expect(obj.$attrs.alt).assertEqual('common/images/image.png') + console.info("[imageProps] get alt value is: " + JSON.stringify(obj.$attrs.alt)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testImageImageAltNone + * @tc.desc ACE + */ + it('testImageImageAltNone', 0, async function (done) { + console.info('testImageImageAltNone START'); + console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.imageAltNone); + console.info("[imageProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('image') + expect(obj.$attrs.id).assertEqual('imageAltNone') + expect(obj.$attrs.alt).assertEqual(undefined) + console.info("[imageProps] get alt value is: " + JSON.stringify(obj.$attrs.alt)); + done(); + }); +}); diff --git a/ace/ace_standard/src/main/js/default/test/menuProps.test.js b/ace/ace_standard/src/main/js/default/test/menuProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..36b7cda8fdb100be40212f99f15326206e1b97fe --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/menuProps.test.js @@ -0,0 +1,645 @@ +/** + * 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 {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('menuPropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + } + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/index/index' + }) + resolve() + }, 500) + }) + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear() + resolve() + }, 500) + }) + await backToIndexPromise.then(() => { + return clearPromise + }) + } + + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[menuPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/menu/prop/index' + } + try { + result = router.push(options) + console.info("push menuProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push menuProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }) + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[menuPropsJsTest] after each called') + await backToIndex() + await sleep(1000) + }) + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuIdProp + * @tc.desc ACE + */ + it('testMenuIdProp', 0, async function (done) { + console.info('testMenuIdProp START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + it('testMenuClassProp', 0, async function (done) { + console.info('testMenuClassProp START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuClassPropNone + * @tc.desc ACE + */ + it('testMenuClassPropNone', 0, async function (done) { + console.info('testMenuClassPropNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[menuProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuRefProp + * @tc.desc ACE + */ + it('testMenuRefProp', 0, async function (done) { + console.info('testMenuRefProp START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuRefPropNone + * @tc.desc ACE + */ + it('testMenuRefPropNone', 0, async function (done) { + console.info('testMenuRefPropNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[menuProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuDataProp + * @tc.desc ACE + */ + it('testMenuDataProp', 0, async function (done) { + console.info('testMenuDataProp START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataMenu).assertEqual(undefined); + console.info("[menuProps] get dataMenu value is: " + JSON.stringify(obj.$attrs.dataMenu)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuDataPropNone + * @tc.desc ACE + */ + it('testMenuDataPropNone', 0, async function (done) { + console.info('testMenuDataPropNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataMenu).assertEqual(undefined) + console.info("[menuProps] get dataMenu value is: " + JSON.stringify(obj.$attrs.dataMenu)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuClickEffectPropSmall + * @tc.desc ACE + */ + it('testMenuClickEffectPropSmall', 0, async function (done) { + console.info('testMenuClickEffectPropSmall START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuClickEffectPropMedium + * @tc.desc ACE + */ + it('testMenuClickEffectPropMedium', 0, async function (done) { + console.info('testMenuClickEffectPropMedium START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuClickEffectPropLarge + * @tc.desc ACE + */ + it('testMenuClickEffectPropLarge', 0, async function (done) { + console.info('testMenuClickEffectPropLarge START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuClickEffectPropNone + * @tc.desc ACE + */ + it('testMenuClickEffectPropNone', 0, async function (done) { + console.info('testMenuClickEffectPropNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[menuProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuDirPropRtl + * @tc.desc ACE + */ + it('testMenuDirPropRtl', 0, async function (done) { + console.info('testMenuDirPropRtl START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuDirPropLtr + * @tc.desc ACE + */ + it('testMenuDirPropLtr', 0, async function (done) { + console.info('testMenuDirPropLtr START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuDirPropAuto + * @tc.desc ACE + */ + it('testMenuDirPropAuto', 0, async function (done) { + console.info('testMenuDirPropAuto START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuDirPropNone + * @tc.desc ACE + */ + it('testMenuDirPropNone', 0, async function (done) { + console.info('testMenuDirPropNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuForPropNull + * @tc.desc ACE + */ + it('testMenuForPropNull', 0, async function (done) { + console.info('testMenuForPropNull START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuForPropOne + * @tc.desc ACE + */ + it('testMenuForPropOne', 0, async function (done) { + console.info('testMenuForPropOne START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuForPropThree + * @tc.desc ACE + */ + it('testMenuForPropThree', 0, async function (done) { + console.info('testMenuForPropThree START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuIfPropTrue + * @tc.desc ACE + */ + it('testMenuIfPropTrue', 0, async function (done) { + console.info('testMenuIfPropTrue START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuShowPropTrue + * @tc.desc ACE + */ + it('testMenuShowPropTrue', 0, async function (done) { + console.info('testMenuShowPropTrue START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[menuProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuShowPropFalse + * @tc.desc ACE + */ + it('testMenuShowPropFalse', 0, async function (done) { + console.info('testMenuShowPropFalse START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[menuProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuShowPropNone + * @tc.desc ACE + */ + it('testMenuShowPropNone', 0, async function (done) { + console.info('testMenuShowPropNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('true') + console.info("[menuProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + // 特有属性 + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuMenuTarget + * @tc.desc ACE + */ + it('testMenuMenuTarget', 0, async function (done) { + console.info('testMenuMenuTarget START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.menuTarget); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('menuTarget') + expect(obj.$attrs.target).assertEqual('testTarget') + console.info("[menuProps] get target value is: " + JSON.stringify(obj.$attrs.target)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuMenuTargetNone + * @tc.desc ACE + */ + it('testMenuMenuTargetNone', 0, async function (done) { + console.info('testMenuMenuTargetNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.menuTargetNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('menuTargetNone') + expect(obj.$attrs.target).assertEqual(undefined) + console.info("[menuProps] get target value is: " + JSON.stringify(obj.$attrs.target)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuTypeClick + * @tc.desc ACE + */ + it('testMenuTypeClick', 0, async function (done) { + console.info('testMenuTypeClick START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeClick); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('typeClick') + expect(obj.$attrs.type).assertEqual('click') + console.info("[menuProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuTypeLongPress + * @tc.desc ACE + */ + it('testMenuTypeLongPress', 0, async function (done) { + console.info('testMenuTypeLongPress START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeLongPress); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('typeLongPress') + expect(obj.$attrs.type).assertEqual('longpress') + console.info("[menuProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuTypeNone + * @tc.desc ACE + */ + it('testMenuTypeNone', 0, async function (done) { + console.info('testMenuTypeNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('typeNone') + expect(obj.$attrs.type).assertEqual('click') + console.info("[menuProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuMenuTitle + * @tc.desc ACE + */ + it('testMenuMenuTitle', 0, async function (done) { + console.info('testMenuMenuTitle START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.menuTitle); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('menuTitle') + expect(obj.$attrs.title).assertEqual('menu') + console.info("[menuProps] get title value is: " + JSON.stringify(obj.$attrs.title)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testMenuMenuTitleNone + * @tc.desc ACE + */ + it('testMenuMenuTitleNone', 0, async function (done) { + console.info('testMenuMenuTitleNone START'); + console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.menuTitleNone); + console.info("[menuProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('menu') + expect(obj.$attrs.id).assertEqual('menuTitleNone') + expect(obj.$attrs.title).assertEqual(undefined) + console.info("[menuProps] get title value is: " + JSON.stringify(obj.$attrs.title)); + done(); + }); +}); diff --git a/ace/ace_standard/src/main/js/default/test/spanProps.test.js b/ace/ace_standard/src/main/js/default/test/spanProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..384730a77c2581824f9d71851cf90b388429005d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/spanProps.test.js @@ -0,0 +1,503 @@ +/** + * 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 {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('spanPropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + } + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/index/index' + }) + resolve() + }, 500) + }) + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear() + resolve() + }, 500) + }) + await backToIndexPromise.then(() => { + return clearPromise + }) + } + + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[spanPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/span/prop/index' + } + try { + result = router.push(options) + console.info("push spanProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push spanProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }) + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[spanPropsJsTest] after each called') + await backToIndex(); + await sleep(1000) + }) + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanIdProp + * @tc.desc ACE + */ + it('testSpanIdProp', 0, async function (done) { + console.info('testSpanIdProp START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + it('testSpanClassProp', 0, async function (done) { + console.info('testSpanClassProp START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanClassPropNone + * @tc.desc ACE + */ + it('testSpanClassPropNone', 0, async function (done) { + console.info('testSpanClassPropNone START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[spanProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanRefProp + * @tc.desc ACE + */ + it('testSpanRefProp', 0, async function (done) { + console.info('testSpanRefProp START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanRefPropNone + * @tc.desc ACE + */ + it('testSpanRefPropNone', 0, async function (done) { + console.info('testSpanRefPropNone START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[spanProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanDataProp + * @tc.desc ACE + */ + it('testSpanDataProp', 0, async function (done) { + console.info('testSpanDataProp START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataSpan).assertEqual(undefined); + console.info("[spanProps] get dataSpan value is: " + JSON.stringify(obj.$attrs.dataSpan)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanDataPropNone + * @tc.desc ACE + */ + it('testSpanDataPropNone', 0, async function (done) { + console.info('testSpanDataPropNone START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataSpan).assertEqual(undefined) + console.info("[spanProps] get dataSpan value is: " + JSON.stringify(obj.$attrs.dataSpan)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanClickEffectPropSmall + * @tc.desc ACE + */ + it('testSpanClickEffectPropSmall', 0, async function (done) { + console.info('testSpanClickEffectPropSmall START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanClickEffectPropMedium + * @tc.desc ACE + */ + it('testSpanClickEffectPropMedium', 0, async function (done) { + console.info('testSpanClickEffectPropMedium START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanClickEffectPropLarge + * @tc.desc ACE + */ + it('testSpanClickEffectPropLarge', 0, async function (done) { + console.info('testSpanClickEffectPropLarge START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanClickEffectPropNone + * @tc.desc ACE + */ + it('testSpanClickEffectPropNone', 0, async function (done) { + console.info('testSpanClickEffectPropNone START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[spanProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanDirPropRtl + * @tc.desc ACE + */ + it('testSpanDirPropRtl', 0, async function (done) { + console.info('testSpanDirPropRtl START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanDirPropLtr + * @tc.desc ACE + */ + it('testSpanDirPropLtr', 0, async function (done) { + console.info('testSpanDirPropLtr START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanDirPropAuto + * @tc.desc ACE + */ + it('testSpanDirPropAuto', 0, async function (done) { + console.info('testSpanDirPropAuto START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanDirPropNone + * @tc.desc ACE + */ + it('testSpanDirPropNone', 0, async function (done) { + console.info('testSpanDirPropNone START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanForPropNull + * @tc.desc ACE + */ + it('testSpanForPropNull', 0, async function (done) { + console.info('testSpanForPropNull START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanForPropOne + * @tc.desc ACE + */ + it('testSpanForPropOne', 0, async function (done) { + console.info('testSpanForPropOne START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanForPropThree + * @tc.desc ACE + */ + it('testSpanForPropThree', 0, async function (done) { + console.info('testSpanForPropThree START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanIfPropTrue + * @tc.desc ACE + */ + it('testSpanIfPropTrue', 0, async function (done) { + console.info('testSpanIfPropTrue START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanShowPropTrue + * @tc.desc ACE + */ + it('testSpanShowPropTrue', 0, async function (done) { + console.info('testSpanShowPropTrue START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[spanProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanShowPropFalse + * @tc.desc ACE + */ + it('testSpanShowPropFalse', 0, async function (done) { + console.info('testSpanShowPropFalse START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[spanProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSpanShowPropNone + * @tc.desc ACE + */ + it('testSpanShowPropNone', 0, async function (done) { + console.info('testSpanShowPropNone START'); + console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[spanProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('span') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('true') + console.info("[spanProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); +}); diff --git a/ace/ace_standard/src/main/js/default/test/switchProps.test.js b/ace/ace_standard/src/main/js/default/test/switchProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..8d4c10089013a883ca801788cd2c0aacfd1f54b4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/switchProps.test.js @@ -0,0 +1,819 @@ +/** + * 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 {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('switchPropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + } + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/index/index' + }); + resolve() + }, 500) + }) + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear() + resolve() + }, 500) + }) + await backToIndexPromise.then(() => { + return clearPromise + }) + } + + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[switchPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/switch/prop/index' + } + try { + result = router.push(options) + console.info("push switchProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push switchProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }) + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[switchPropsJsTest] after each called') + await backToIndex() + await sleep(1000) + }) + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchIdProp + * @tc.desc ACE + */ + it('testSwitchIdProp', 0, async function (done) { + console.info('testSwitchIdProp START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + it('testSwitchClassProp', 0, async function (done) { + console.info('testSwitchClassProp START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchClassPropNone + * @tc.desc ACE + */ + it('testSwitchClassPropNone', 0, async function (done) { + console.info('testSwitchClassPropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[switchProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchRefProp + * @tc.desc ACE + */ + it('testSwitchRefProp', 0, async function (done) { + console.info('testSwitchRefProp START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchRefPropNone + * @tc.desc ACE + */ + it('testSwitchRefPropNone', 0, async function (done) { + console.info('testSwitchRefPropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[switchProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDisabledPropTrue + * @tc.desc ACE + */ + it('testSwitchDisabledPropTrue', 0, async function (done) { + console.info('testSwitchDisabledPropTrue START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDisabledPropFalse + * @tc.desc ACE + */ + it('testSwitchDisabledPropFalse', 0, async function (done) { + console.info('testSwitchDisabledPropFalse START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDisabledPropNone + * @tc.desc ACE + */ + it('testSwitchDisabledPropNone', 0, async function (done) { + console.info('testSwitchDisabledPropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchFocusablePropTrue + * @tc.desc ACE + */ + it('testSwitchFocusablePropTrue', 0, async function (done) { + console.info('testSwitchFocusablePropTrue START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchFocusablePropFalse + * @tc.desc ACE + */ + it('testSwitchFocusablePropFalse', 0, async function (done) { + console.info('testSwitchFocusablePropFalse START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchFocusablePropNone + * @tc.desc ACE + */ + it('testSwitchFocusablePropNone', 0, async function (done) { + console.info('testSwitchFocusablePropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDataProp + * @tc.desc ACE + */ + it('testSwitchDataProp', 0, async function (done) { + console.info('testSwitchDataProp START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataSwitch).assertEqual(undefined); + console.info("[switchProps] get dataSwitch value is: " + JSON.stringify(obj.$attrs.dataSwitch)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDataPropNone + * @tc.desc ACE + */ + it('testSwitchDataPropNone', 0, async function (done) { + console.info('testSwitchDataPropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataSwitch).assertEqual(undefined) + console.info("[switchProps] get dataSwitch value is: " + JSON.stringify(obj.$attrs.dataSwitch)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchClickEffectPropSmall + * @tc.desc ACE + */ + it('testSwitchClickEffectPropSmall', 0, async function (done) { + console.info('testSwitchClickEffectPropSmall START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchClickEffectPropMedium + * @tc.desc ACE + */ + it('testSwitchClickEffectPropMedium', 0, async function (done) { + console.info('testSwitchClickEffectPropMedium START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchClickEffectPropLarge + * @tc.desc ACE + */ + it('testSwitchClickEffectPropLarge', 0, async function (done) { + console.info('testSwitchClickEffectPropLarge START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchClickEffectPropNone + * @tc.desc ACE + */ + it('testSwitchClickEffectPropNone', 0, async function (done) { + console.info('testSwitchClickEffectPropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[switchProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDirPropRtl + * @tc.desc ACE + */ + it('testSwitchDirPropRtl', 0, async function (done) { + console.info('testSwitchDirPropRtl START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDirPropLtr + * @tc.desc ACE + */ + it('testSwitchDirPropLtr', 0, async function (done) { + console.info('testSwitchDirPropLtr START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDirPropAuto + * @tc.desc ACE + */ + it('testSwitchDirPropAuto', 0, async function (done) { + console.info('testSwitchDirPropAuto START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchDirPropNone + * @tc.desc ACE + */ + it('testSwitchDirPropNone', 0, async function (done) { + console.info('testSwitchDirPropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchForPropNull + * @tc.desc ACE + */ + it('testSwitchForPropNull', 0, async function (done) { + console.info('testSwitchForPropNull START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchForPropOne + * @tc.desc ACE + */ + it('testSwitchForPropOne', 0, async function (done) { + console.info('testSwitchForPropOne START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchForPropThree + * @tc.desc ACE + */ + it('testSwitchForPropThree', 0, async function (done) { + console.info('testSwitchForPropThree START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchIfPropTrue + * @tc.desc ACE + */ + it('testSwitchIfPropTrue', 0, async function (done) { + console.info('testSwitchIfPropTrue START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchShowPropTrue + * @tc.desc ACE + */ + it('testSwitchShowPropTrue', 0, async function (done) { + console.info('testSwitchShowPropTrue START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[switchProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchShowPropFalse + * @tc.desc ACE + */ + it('testSwitchShowPropFalse', 0, async function (done) { + console.info('testSwitchShowPropFalse START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[switchProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchShowPropNone + * @tc.desc ACE + */ + it('testSwitchShowPropNone', 0, async function (done) { + console.info('testSwitchShowPropNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('true') + console.info("[switchProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + // 特有属性 + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchCheckedTrue + * @tc.desc ACE + */ + it('testSwitchCheckedTrue', 0, async function (done) { + console.info('testSwitchCheckedTrue START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.checkedTrue); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('checkedTrue') + expect(obj.$attrs.checked).assertEqual('true') + console.info("[switchProps] get checked value is: " + JSON.stringify(obj.$attrs.checked)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchCheckedFalse + * @tc.desc ACE + */ + it('testSwitchCheckedFalse', 0, async function (done) { + console.info('testSwitchCheckedFalse START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.checkedFalse); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('checkedFalse') + expect(obj.$attrs.checked).assertEqual('false') + console.info("[switchProps] get checked value is: " + JSON.stringify(obj.$attrs.checked)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchCheckedNone + * @tc.desc ACE + */ + it('testSwitchCheckedNone', 0, async function (done) { + console.info('testSwitchCheckedNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.checkedNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('checkedNone') + expect(obj.$attrs.checked).assertEqual('false') + console.info("[switchProps] get checked value is: " + JSON.stringify(obj.$attrs.checked)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchShowTextTrue + * @tc.desc ACE + */ + it('testSwitchShowTextTrue', 0, async function (done) { + console.info('testSwitchShowTextTrue START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showTextTrue); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('showTextTrue') + expect(obj.$attrs.showtext).assertEqual("true") + console.info("[switchProps] get showtext value is: " + JSON.stringify(obj.$attrs.showtext)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchShowTextFalse + * @tc.desc ACE + */ + it('testSwitchShowTextFalse', 0, async function (done) { + console.info('testSwitchShowTextFalse START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showTextFalse); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('showTextFalse') + expect(obj.$attrs.showtext).assertEqual("false") + console.info("[switchProps] get showtext value is: " + JSON.stringify(obj.$attrs.showtext)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchShowTextNone + * @tc.desc ACE + */ + it('testSwitchShowTextNone', 0, async function (done) { + console.info('testSwitchShowTextNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showTextNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('showTextNone') + expect(obj.$attrs.showtext).assertEqual('false') + console.info("[switchProps] get showtext value is: " + JSON.stringify(obj.$attrs.showtext)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchTextOn + * @tc.desc ACE + */ + it('testSwitchTextOn', 0, async function (done) { + console.info('testSwitchTextOn START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.textOn); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('textOn') + expect(obj.$attrs.texton).assertEqual("开") + console.info("[switchProps] get texton value is: " + JSON.stringify(obj.$attrs.texton)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchTextOnNone + * @tc.desc ACE + */ + it('testSwitchTextOnNone', 0, async function (done) { + console.info('testSwitchTextOnNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.textOnNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('textOnNone') + expect(obj.$attrs.texton).assertEqual('On') + console.info("[switchProps] get texton value is: " + JSON.stringify(obj.$attrs.texton)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchTextOff + * @tc.desc ACE + */ + it('testSwitchTextOff', 0, async function (done) { + console.info('testSwitchTextOff START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.textOff); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('textOff') + expect(obj.$attrs.textoff).assertEqual("关") + console.info("[switchProps] get textoff value is: " + JSON.stringify(obj.$attrs.textoff)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testSwitchTextOffNone + * @tc.desc ACE + */ + it('testSwitchTextOffNone', 0, async function (done) { + console.info('testSwitchTextOffNone START'); + console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.textOffNone); + console.info("[switchProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('switch') + expect(obj.$attrs.id).assertEqual('textOffNone') + expect(obj.$attrs.textoff).assertEqual('Off') + console.info("[switchProps] get textoff value is: " + JSON.stringify(obj.$attrs.textoff)); + done(); + }); +});