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 deleted file mode 100644 index bbf4883fa2cdebf3405bf634b69a1db7aa3cd69d..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/ellipse/index.css +++ /dev/null @@ -1,359 +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. - */ - -/* 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 deleted file mode 100644 index 544f4580c2fcb73c0c21bb36db35c1089a111332..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml +++ /dev/null @@ -1,188 +0,0 @@ -
-
- - 通用样式 - - - 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/prop/index.css b/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..94545257262fb2750a3dce2d03edd031d8fcbbcf --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.css @@ -0,0 +1,29 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; + height: 100%; + flex-weight: 1; +} diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..08d566bcef01791f7c8b162efb791ce6ab889f4f --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.hml @@ -0,0 +1,233 @@ +
+
+ + ellipse通用属性 + + + + 通用属性 -- fill + + + + + + + 通用属性 -- fill-opacity + +
+ + + + + + + + + +
+ + + 通用属性 -- fill-rule + +
+ + + + + + +
+ + + 通用属性 -- opacity + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke + + + + + + + 通用属性 -- stroke-dasharray + + + + + + + 通用属性 -- stroke-dashoffset + + + + + + + 通用属性 -- stroke-linejoin + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke-linecap + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke-miterlimit + + + + + + + 通用属性 -- stroke-opacity + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke-width + + + + + + + 通用属性 -- transform + + + + +
+ + + + +
+ + ellipse特有属性 + + + + 特有属性-id + + + + + + + 特有属性-cx + + + + + + + + 特有属性-cy + + + + + + + + + 特有属性-rx + + + + + + + + 特有属性-ry + + + + + + + + 特有属性-if + + + + + + + 特有属性-show + + + + + + + + + 特有属性-elif + + + + + + + +
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.js b/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..0dc95aa6e0c9a67271798975de7e74cc08b218eb --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.js @@ -0,0 +1,143 @@ +/** + * 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: { + fillProp: null, + fillOpacityPropTwo: null, + fillOpacityPropOne: null, + fillOpacityPropThree: null, + fillRulePropTwo: null, + fillRulePropOne: null, + opacityPropOne: null, + opacityPropTwo: null, + opacityPropThree: null, + strokeProp: null, + strokeDashArrayProp: null, + strokeDashOffsetProp: null, + strokeLineJoinPropTwo: null, + strokeLineJoinPropOne: null, + strokeLineJoinPropThree: null, + strokeLineCapPropOne: null, + strokeLineCapPropTwo: null, + strokeLineCapPropThree: null, + strokeMiterLimitProp: null, + strokeOpacityPropOne: null, + strokeOpacityPropTwo: null, + strokeOpacityPropThree: null, + strokeWidthProp: null, + transformProp: null, + idProp: null, + cxPropOne: null, + cxPropTwo: null, + cyPropOne: null, + cyPropTwo: null, + rxPropOne: null, + rxPropTwo: null, + ryPropOne: null, + ryPropTwo: null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null + + }, + + onShow() { + this.getCommonPropValues(); + globalThis.value = { + fillProp: this.fillProp, + fillOpacityPropTwo: this.fillOpacityPropTwo, + fillOpacityPropOne: this.fillOpacityPropOne, + fillOpacityPropThree: this.fillOpacityPropThree, + fillRulePropTwo: this.fillRulePropTwo, + fillRulePropOne: this.fillRulePropOne, + opacityPropOne: this.opacityPropOne, + opacityPropTwo: this.opacityPropTwo, + opacityPropThree: this.opacityPropThree, + strokeProp: this.strokeProp, + strokeDashArrayProp: this.strokeDashArrayProp, + strokeDashOffsetProp: this.strokeDashOffsetProp, + strokeLineJoinPropTwo: this.strokeLineJoinPropTwo, + strokeLineJoinPropOne: this.strokeLineJoinPropOne, + strokeLineJoinPropThree: this.strokeLineJoinPropThree, + strokeLineCapPropOne: this.strokeLineCapPropOne, + strokeLineCapPropTwo: this.strokeLineCapPropTwo, + strokeLineCapPropThree: this.strokeLineCapPropThree, + strokeMiterLimitProp: this.strokeMiterLimitProp, + strokeOpacityPropOne: this.strokeOpacityPropOne, + strokeOpacityPropTwo: this.strokeOpacityPropTwo, + strokeOpacityPropThree: this.strokeOpacityPropThree, + strokeWidthProp: this.strokeWidthProp, + transformProp: this.transformProp, + idProp: this.idProp, + cxPropOne: this.cxPropOne, + cxPropTwo: this.cxPropTwo, + cyPropOne: this.cyPropOne, + cyPropTwo: this.cyPropTwo, + rxPropOne: this.rxPropOne, + rxPropTwo: this.rxPropTwo, + ryPropOne: this.ryPropOne, + ryPropTwo: this.ryPropTwo, + ifPropTrue: this.ifPropTrue, + showPropTrue: this.showPropTrue, + showPropFalse: this.showPropFalse, + showPropNone: this.showPropNone + } + }, + + getCommonPropValues() { + this.fillProp = this.$element("fillProp").getInspector() + this.fillOpacityPropTwo = this.$element("fillOpacityPropTwo").getInspector() + this.fillOpacityPropOne = this.$element("fillOpacityPropOne").getInspector() + this.fillOpacityPropThree = this.$element("fillOpacityPropThree").getInspector() + this.fillRulePropTwo = this.$element("fillRulePropTwo").getInspector() + this.fillRulePropOne = this.$element("fillRulePropOne").getInspector() + this.opacityPropOne = this.$element("opacityPropOne").getInspector() + this.opacityPropTwo = this.$element("opacityPropTwo").getInspector() + this.opacityPropThree = this.$element("opacityPropThree").getInspector() + this.strokeProp = this.$element("strokeProp").getInspector() + this.strokeDashArrayProp = this.$element("strokeDashArrayProp").getInspector() + this.strokeDashOffsetProp = this.$element("strokeDashOffsetProp").getInspector() + this.strokeLineJoinPropTwo = this.$element("strokeLineJoinPropTwo").getInspector() + this.strokeLineJoinPropOne = this.$element("strokeLineJoinPropOne").getInspector() + this.strokeLineJoinPropThree = this.$element("strokeLineJoinPropThree").getInspector() + this.strokeLineCapPropOne = this.$element("strokeLineCapPropOne").getInspector() + this.strokeLineCapPropTwo = this.$element("strokeLineCapPropTwo").getInspector() + this.strokeLineCapPropThree = this.$element("strokeLineCapPropThree").getInspector() + this.strokeMiterLimitProp = this.$element("strokeMiterLimitProp").getInspector() + this.strokeOpacityPropOne = this.$element("strokeOpacityPropOne").getInspector() + this.strokeOpacityPropTwo = this.$element("strokeOpacityPropTwo").getInspector() + this.strokeOpacityPropThree = this.$element("strokeOpacityPropThree").getInspector() + this.strokeWidthProp = this.$element("strokeWidthProp").getInspector() + this.transformProp = this.$element("transformProp").getInspector() + this.idProp = this.$element("idProp").getInspector() + this.cxProp = this.$element("cxProp").getInspector() + this.cyProp = this.$element("cyProp").getInspector() + this.rxProp = this.$element("rxProp").getInspector() + this.ryProp = this.$element("ryProp").getInspector() + this.cxPropOne = this.$element("cxPropOne").getInspector() + this.cxPropTwo = this.$element("cxPropTwo").getInspector() + this.cyPropOne = this.$element("cyPropOne").getInspector() + this.cyPropTwo = this.$element("cyPropTwo").getInspector() + this.rxPropOne = this.$element("rxPropOne").getInspector() + this.rxPropTwo = this.$element("rxPropTwo").getInspector() + this.ryPropOne = this.$element("ryPropOne").getInspector() + this.ryPropTwo = this.$element("ryPropTwo").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() + }, +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.css b/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..cc624e9f3405dc0d9d81fafe41c29e0fadcb3fad --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.css @@ -0,0 +1,114 @@ +/** + * 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; +} + +.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; + text-align: center; +} + + + +.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: crimson; + width: 100%; + margin: 3px 5px; +} + +#prop8{ + background-color: khaki; + width: 100%; + margin: 3px 5px; +} + +#prop9{ + background-color: cornsilk; + width: 100%; + margin: 3px 5px; +} + +#prop10{ + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.hml b/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..39474962df3dcbfbd56fc0b4f90f5046dd84839b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.hml @@ -0,0 +1,86 @@ +
+
+
+ + 通用属性 + + + ellipse通用属性1 + + + + + + + ellipse通用属性2 + + + + + + + ellipse通用属性3 + + + + + + + ellipse通用属性4 + + + + + + + ellipse通用属性5 + + + + + + + ellipse通用属性6 + + + + + + + ellipse通用属性7 + + + + + + + ellipse通用属性8 + + + + + + + ellipse通用属性9 + + + + + + + ellipse通用属性10 + + + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.js b/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.js similarity index 77% rename from ace/ace_standard/src/main/js/default/pages/ellipse/index.js rename to ace/ace_standard/src/main/js/default/pages/ellipse/router/index.js index 260427920b4544e4c535477afa5a313bc1697f85..b7d4981b3b8983a6973975220304e4e52de862b1 100644 --- a/ace/ace_standard/src/main/js/default/pages/ellipse/index.js +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/router/index.js @@ -12,15 +12,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import prompt from '@system.prompt'; + 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