custom menu events click and down up

Author: wassfila

src/layout/sampling.js

@@ -174,7 +174,7 @@ function neighbors_walls_cost(sample,seeds,w,h,walls){
 }
 
 function select_vertex_position(v,placed,width,height,debug=false){
-    console.time("select_pos")
+    //console.time("select_pos")
     g_debug = debug
     let best_index = -1
     let best_cost = Number.MAX_VALUE;
@@ -203,7 +203,7 @@ function select_vertex_position(v,placed,width,height,debug=false){
     let best_sample = samples[best_index]
     v.viewBox.x = best_sample.x
     v.viewBox.y = best_sample.y
-    console.timeEnd("select_pos")
+    //console.timeEnd("select_pos")
     return [best_sample.x,best_sample.y]
 
 }

src/menu.js

@@ -1,4 +1,4 @@
-import {html,html_tag,add_sheet,remove_sheet,send} from "../libs/web-js-utils.js"
+import {html,html_tag,add_sheet,remove_sheet} from "../libs/web-js-utils.js"
 import {event} from "./utils.js"
 import {Svg} from "../libs/svg_utils.js"
 
@@ -51,34 +51,43 @@ function onContext(e){
 
 class Menu{
     call(Params){
+        const circle_radius = 80
+        const pie_radius_start = 20
+        const pie_radius_end = 90
+
         vertex = Params.v
         svg = Params.svg
         let [x,y] = [Params.x,Params.y]
         menu_svg = html(svg,/*html*/`<g id="g_menu"/>`)
         html_tag(menu_svg,"circle",/*html*/`
         <circle class="svg_menu" cx="${x}" cy="${y}" r="10" fill="rgba(120,160,200,0.5)" >
-            <animate attributeName="r" begin="0s" values="10;80" keyTimes="0;1" calcMode="spline" keySplines="0 .75 .25 1" dur="300ms" repeatCount="1" fill="freeze"/>
+            <animate attributeName="r" begin="0s" values="10;${circle_radius}" keyTimes="0;1" calcMode="spline" keySplines="0 .75 .25 1" dur="300ms" repeatCount="1" fill="freeze"/>
         </circle>`)
         menu_svg.getElementsByTagName("animate")[0].beginElement()
         state.active = true
         menu_svg.addEventListener( 'mouseleave', onMouseLeave, false );
         menu_svg.addEventListener( 'mousedown', onMouseDown, false );
         menu_svg.addEventListener( 'contextmenu', onContext, false );
 
-        const pie_radius_start = 20
-        const pie_radius_end = 70
         const len = Params.actions.length
+        let buttons = {}
+        let texts = {}
         Params.actions.forEach((a,i)=>{
             const start = i / len
             const stop = (i+1) / len
             const margin = 0.01
+            let pie = utl.pie(menu_svg,x,y,pie_radius_start,pie_radius_end,start,stop,margin)
+            buttons[a] = pie
+            pie.setAttribute("data-name",a)
+            pie.setAttribute("visibility","hidden")
+            pie.classList.add("pie_element")
+            let [tx,ty] = angle_pos((start+stop)/2,(pie_radius_start+pie_radius_end)/2)
+            texts[a] = html(menu_svg,/*html*/`<text x="${x+tx}" y="${y+ty}" class="m_text" dominant-baseline="middle" text-anchor="middle" style="pointer-events:none" visibility="hidden">${a}</text>`)
+        })
+        Params.actions.forEach((action,i)=>{
             setTimeout(()=>{
-                let pie = utl.pie(menu_svg,x,y,pie_radius_start,pie_radius_end,start,stop,margin)
-                pie.setAttribute("data-name",a)
-                pie.classList.add("pie_element")
-                pie.addEventListener( 'click', (e)=>{send("menu_action",{type:e.target.getAttribute("data-name")} )}, false );
-                let [tx,ty] = angle_pos((start+stop)/2,(pie_radius_start+pie_radius_end)/2)
-                html(menu_svg,/*html*/`<text x="${x+tx}" y="${y+ty}" class="m_text" dominant-baseline="middle" text-anchor="middle" style="pointer-events:none">${a}</text>`)
+                buttons[action].setAttribute("visibility","visible")
+                texts[action].setAttribute("visibility","visible")
             },200+i*50)
         })
         sheet = new CSSStyleSheet()
@@ -100,7 +109,8 @@ class Menu{
             color:hsl(240, 80%, 65%)
         }`)
         add_sheet(sheet)
-}
+        return buttons
+    }
 }
 
 export{Menu};

src/render.js

@@ -1,4 +1,4 @@
-import {html,clear} from "../libs/web-js-utils.js"
+import {html,clear,send} from "../libs/web-js-utils.js"
 import {Svg} from "../libs/svg_utils.js"
 import {Menu} from "./menu.js"
 
@@ -9,16 +9,35 @@ let g = null;
 let svg = null;
 let config = null;
 let menu_v = null;
+let attraction = false;
 
 function onMenuAction(e){
-    console.log(`menu action => ${e.detail.type} on ${menu_v.label}`)
+    console.log(`${e.detail.v.label} => ${e.detail.action}:${e.detail.type}`)
 }
 
 function onVertexMenu(e){
     if(e.detail.type == "start"){
         menu_v = g.vertices[e.detail.id]
         let vb = menu_v.viewBox
-        menu.call({svg:svg,x:vb.x,y:vb.y,actions:["attract","layout","expand"]})
+        let buttons = menu.call({svg:svg,x:vb.x,y:vb.y,actions:["attract","layout","pin"]})
+        buttons["pin"].addEventListener(    'click', (e)=>{send("menu_action",{type:"click",action:e.target.getAttribute("data-name"),v:menu_v} )}, false );
+        buttons["layout"].addEventListener( 'click', (e)=>{send("menu_action",{type:"click",action:e.target.getAttribute("data-name"),v:menu_v} )}, false );
+        buttons["attract"].addEventListener('mousedown', (e)=>{
+            send("menu_action",{type:"start",action:e.target.getAttribute("data-name"),v:menu_v} )
+            attraction = true
+        }, false );
+        buttons["attract"].addEventListener('mouseup', (e)=>{
+            send("menu_action",{type:"end",action:e.target.getAttribute("data-name"),v:menu_v} )
+            attraction = false
+        }, false );
+        buttons["attract"].addEventListener('mouseleave', (e)=>{
+            send("menu_action",{type:"end",action:e.target.getAttribute("data-name"),v:menu_v} )
+            attraction = false
+        }, false );
+    }else if(e.detail.type == "end"){
+        if(attraction){
+            send("menu_action",{type:"end",action:"attract",v:menu_v} )
+        }
     }
 }