save all

www/swa/cross-nav/index.html

@@ -61,6 +61,18 @@
     <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" data-html="true"
             title="</br><ol><li>点击【添加】画板中会添加一个默认事件</li><li>右键事件可以修改</li><li>将事件修改为空会完全删除事件</li><li>刷新页面会丢失所有数据</li></ol>">帮助</button>
 
+    <div class="dropdown" style="display: inline-block">
+      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+        选色 <div id="color" style="display: inline-block; width: 0.8rem;  height: 0.8rem; background: red">
+      </button>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="#" onclick="setColor(0xFF0000)">红 <div style="display: inline-block; width: 20px;  height: 0.8rem; background: red"></div></a>
+        <a class="dropdown-item" href="#" onclick="setColor(0xFFBB00)">橙 <div style="display: inline-block; width: 20px;  height: 0.8rem; background: orange"></div></a>
+        <a class="dropdown-item" href="#" onclick="setColor(0x009FCC)">蓝 <div style="display: inline-block; width: 20px;  height: 0.8rem; background: blue"></div></a>
+        <a class="dropdown-item" href="#" onclick="setColor(0x00FF00)">绿 <div style="display: inline-block; width: 20px;  height: 0.8rem; background: green"></div></a>
+      </div>
+    </div>
+
     <div class="btn-group" role="group">
       <button onclick="imports()" type="button" class="btn btn-primary"><span class="iconfont">&#xe608;</span>导入
         <input style="display: none" type="file"  accept=".crossnav.png" class="custom-file-input" id="custom-file-input">
@@ -83,10 +95,10 @@
   <script src="./bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
 
   <!-- 动画库 -->
-  <script src="../../js/pixi.min.js"></script>
-  <script src="../../js/PIXI.TextInput.min.js"></script>
+  <script src="./pixi.min.js"></script>
+  <script src="./PIXI.TextInput.min.js"></script>
 
-  <script src="../../js/png.bundle.js"></script>
+  <script src="./png.bundle.js"></script>
 
   <script type="application/javascript">
     document.oncontextmenu = function(e){
@@ -103,6 +115,19 @@
 
   </script>
   <script type="application/javascript">
+
+    function setColor( c ){
+      color = c;
+      var hex = c.toString(16);
+      if( hex.length < 6 ) {
+        hex = "000000" + hex
+        hex = hex.substr( hex.length -6 );
+      }
+      $("#color").css({ background : "#" + hex })
+    }
+
+    var color = 0xFF0000 ;
+
     var border = 20;
     var size = 512 + 2 * border; // 10 的边框
     //Create a Pixi Application
@@ -186,17 +211,19 @@
       bg.addChild(message);
     }
 
-    var objStyle = new PIXI.TextStyle({
-      fontFamily: "Arial",
-      fontSize: 18,
-      fill: 0x9966FF,
 
-    });
 
     var objs = new PIXI.Container();
     app.stage.addChild(objs);
 
-    function newObj(x, y, name){
+    function newObj(x, y, name, c){
+
+      var objStyle = new PIXI.TextStyle({
+        fontFamily: "Arial",
+        fontSize: 18,
+        fill: c || color,
+
+      });
 
       var obj = new PIXI.Container();
       obj.backgroundColor = 0x1099bb;
@@ -206,8 +233,8 @@
 
       // point
       var circle = new PIXI.Graphics();
-      circle.beginFill(0x9966FF);
-      circle.drawCircle(0, 0, 5);
+      circle.beginFill( c || color );
+      circle.drawCircle( 0, 0, 5 );
       circle.endFill();
       circle.position.set(0 , 0 );
       obj.addChild(circle);
@@ -226,7 +253,7 @@
         }
       })
       input.position.set(0 + 8 , 0 - 10);
-      input.placeholder = 'Enter your Text...'
+      input.placeholder = '输入...'
       input.visible = false
       input.maxLength = 20
       input.on('keydown', function (keycode) {
@@ -239,13 +266,15 @@
         console.log( "blur" )
         endEdit()
       })
+
       function endEdit(){
         input.visible = false
         message.visible = true
+
         if ( input.text ) {
           message.text = input.text
         } else {
-          app.stage.removeChild(obj);
+          objs.removeChild(obj);
         }
       }
 
@@ -330,7 +359,7 @@
           var json = meta.crossnav
           json = JSON.parse(  json )
           json.map(function (a){
-            newObj(a.x, a.y, a.text)
+            newObj(a.x, a.y, a.text, a.color)
           })
 
         }catch ( e ) {
@@ -351,10 +380,14 @@
 
     let info = []
     for (let c of objs.children) {
+
+      var t = c.getChildByName('message')
+
       info.push({
         x : c.x,
         y : c.y,
-        text : c.getChildByName('message').text
+        text : t.text,
+        color : t.style.fill
       })
     }