diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.css b/ace/ace_standard/src/main/js/default/pages/polygon/index.css deleted file mode 100644 index 46087d10479e4235877947cf136a67a4ac5736e2..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/polygon/index.css +++ /dev/null @@ -1,304 +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{ - 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{ -/* width: 70px;*/ -/* height: 30px;*/ - 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; -} - -.ani-container{ - flex-direction: column; - height: 100%; - flex-weight: 0.5; -} - -.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/polygon/index.hml b/ace/ace_standard/src/main/js/default/pages/polygon/index.hml deleted file mode 100644 index 08ba4262b679371ab573818db94ae17249677a5c..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/polygon/index.hml +++ /dev/null @@ -1,222 +0,0 @@ -
-
- - 通用样式 - - - 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/prop/index.css b/ace/ace_standard/src/main/js/default/pages/polygon/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..94545257262fb2750a3dce2d03edd031d8fcbbcf --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/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/polygon/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/polygon/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..6dc951fe83d415fe4b851b00f5746e51ad3f603e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/prop/index.hml @@ -0,0 +1,205 @@ +
+
+ + polygon通用属性 + + + + 通用属性 -- fill + + + + + + + 通用属性 -- fill-opacity + +
+ + + + + + + + + +
+ + + 通用属性 -- fill-rule + +
+ + + + + + +
+ + + 通用属性 -- opacity + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke + + + + + + + 通用属性 -- stroke-dasharray + + + + + + + 通用属性 -- stroke-dashoffset + + + + + + + 通用属性 -- stroke-linejoin + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke-linecap + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke-miterlimit + + + + + + + 通用属性 -- stroke-opacity + +
+ + + + + + + + + +
+ + + 通用属性 -- stroke-width + + + + + + + 通用属性 -- transform + + + + +
+ + + + +
+ + polygon特有属性 + + + + 特有属性-id + + + + + + + 特有属性- point + + + + + + + 特有属性-if + + + + + + + 特有属性-show + + + + + + + + + 特有属性-elif + + + + + + +
+ + +
diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/prop/index.js b/ace/ace_standard/src/main/js/default/pages/polygon/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..21b36c2b058f929954625039c3b412fadca6c80d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/prop/index.js @@ -0,0 +1,119 @@ +/** + * 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, + pointProp : 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, + pointProp : this.pointProp, + 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.pointProp = this.$element("pointProp").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/polygon/router/index.css b/ace/ace_standard/src/main/js/default/pages/polygon/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..2f029a7843865075518d15047fbe1172bc5b878b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/router/index.css @@ -0,0 +1,119 @@ +/** + * 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; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 0.7; + align-items: center; +} + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/router/index.hml b/ace/ace_standard/src/main/js/default/pages/polygon/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..054997feef98162c973bc441fc2d354d753c5e93 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/router/index.hml @@ -0,0 +1,79 @@ +
+
+
+ + 通用属性 + + + polygon通用属性1 + + + > + + + polygon通用属性2 + + + + + + polygon通用属性3 + + + + + + + polygon通用属性4 + + + + + + + polygon通用属性5 + + + + + + + polygon通用属性6 + + + + + + + polygon通用属性7 + + + + + + + polygon通用属性8 + + + + + + + polygon通用属性9 + + + + +
+
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.js b/ace/ace_standard/src/main/js/default/pages/polygon/router/index.js similarity index 77% rename from ace/ace_standard/src/main/js/default/pages/polygon/index.js rename to ace/ace_standard/src/main/js/default/pages/polygon/router/index.js index d2db94ec51fc888feecf2835afdfa2b417ef24a4..cc901d44c8c14b3cbe4c1482de7f19808fb34c09 100644 --- a/ace/ace_standard/src/main/js/default/pages/polygon/index.js +++ b/ace/ace_standard/src/main/js/default/pages/polygon/router/index.js @@ -12,16 +12,9 @@ * 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