init

src/Obj/Base/PolyhedronObject2/_element.js

@@ -0,0 +1,62 @@
+import { attributeElm, labelStyleElm1, labelStyleElm2 } from '../../Element/elm_html'
+
+function html(that) {
+    return `
+    <span class="custom-divider"></span>
+    <div class="div-item">
+        <div class="row">
+            <div class="col">
+                <span class="label">名称</span>
+                <input class="input" maxlength="40" type="text" @model="name">
+            </div>
+            <div class="col">
+                <div class="row">
+                    <div class="col">
+                        <span class="label" style="margin-right: 0px;">投影面积:</span>
+                        <input class="input input-text" readonly="readonly" type="text" @model="area">
+                        <div class="input-select-unit"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="div-item">
+        <div class="row">
+            <DIV-cy-tabs id="polygon-object-edit-tabs">
+                <DIV-cy-tab-pane label="属性信息">
+                    ${attributeElm(that)}
+                </DIV-cy-tab-pane>
+                <DIV-cy-tab-pane label="多面体风格">
+                    <div class="row">
+                        <div class="col">
+                            <span class="label">多面体颜色</span>
+                            <div class="color"></div>
+                        </div>
+                        <div class="col">
+                            <span class="label">多面体高度</span>
+                            <div class="input-number input-number-unit-1" style="width: 80px;">
+                                <input class="input" type="number" title="" min="0" max="9999999" @model="height">
+                                <span class="unit">m</span>
+                                <span class="arrow"></span>
+                            </div>
+                        </div>
+                        <div class="col">
+                        <!-- <span class="label">拉伸高度</span>
+                            <input class="input" type="number" title="" min="0" max="9999999" @model="extrudedHeight"> -->
+                        </div>
+                    </div>
+                </DIV-cy-tab-pane>
+                <DIV-cy-tab-pane label="标注风格">
+                    ${labelStyleElm1()}
+                </DIV-cy-tab-pane>
+                <DIV-cy-tab-pane label="标签风格">
+                    ${labelStyleElm2()}
+                </DIV-cy-tab-pane>
+            </DIV-cy-tabs>
+        </div>
+    </div>
+    <span class="custom-divider"></span>
+    `
+}
+
+export { html }

src/Obj/Base/PolyhedronObject2/eventBinding.js

@@ -0,0 +1,114 @@
+class eventBinding {
+  constructor() {
+    this.element = {}
+  }
+  static event = {}
+
+  getEvent(name) {
+    return eventBinding.event[name]
+  }
+
+  getEventAll() {
+    return eventBinding.event
+  }
+
+  setEvent(name, event) {
+    eventBinding.event[name] = event
+  }
+
+  on(that, elements) {
+    for (let i = 0; i < elements.length; i++) {
+      let Event = []
+      let isEvent = false
+      let removeName = []
+      for (let m of elements[i].attributes) {
+        switch (m.name) {
+          case '@model': {
+            isEvent = true
+            if (elements[i].type == 'checkbox') {
+              Event.push((e) => { that[m.value] = e.target.checked })
+              elements[i].checked = that[m.value]
+            }
+            else {
+              Event.push((e) => {
+                let value = e.target.value
+                if (e.target.type == 'number') {
+                  if (e.data != '.' && (e.data != '-' || e.target.value)) {
+                    value = Number(value)
+                    if((e.target.max) && value>Number(e.target.max)) {
+                      value = Number(e.target.max)
+                    }
+                    if((e.target.min) && value<Number(e.target.min)) {
+                      value = Number(e.target.min)
+                    }
+                    that[m.value] = value
+                  }
+                }
+                else {
+                  that[m.value] = value
+                }
+              })
+              if(elements[i].nodeName=='IMG') {
+                elements[i].src = that[m.value]
+              }
+              else {
+                elements[i].value = that[m.value]
+              }
+            }
+            if(this.element[m.value]) {
+              this.element[m.value].push(elements[i])
+            }
+            else {
+              this.element[m.value] = [elements[i]]
+            }
+            removeName.push(m.name)
+            break;
+          }
+          case '@click': {
+            elements[i].addEventListener('click', (e) => {
+              if (typeof (that[m.value]) === 'function') {
+                that[m.value](e)
+              }
+            });
+            removeName.push(m.name)
+            // elements[i].attributes.removeNamedItem(m.name)
+            break;
+          }
+          case '@change': {
+            isEvent = true
+            Event.push((e) => {
+              let value = e.target.value
+              if(e.target.type == 'number' && value!='') {
+                value = Number(value)
+                e.target.value = value
+              }
+              if (typeof (that[m.value]) === 'function') {
+                that[m.value](e, value)
+              }
+            })
+            break;
+          }
+        }
+        // elements[i].attributes[m] = undefined
+      }
+      for(let n=0;n<removeName.length;n++) {
+        elements[i].attributes.removeNamedItem(removeName[n])
+      }
+
+      if (isEvent) {
+        let ventType = 'input'
+        if (elements[i].tagName != 'INPUT' || elements[i].type == 'checkbox') {
+          ventType = 'change'
+        }
+        elements[i].addEventListener(ventType, (e) => {
+          for (let t = 0; t < Event.length; t++) {
+            Event[t](e)
+          }
+        });
+      }
+    }
+  }
+}
+
+const EventBinding = new eventBinding();
+export default EventBinding;