Html_Svg Editor

link Titleの表示と位置を決めてOKを押して下さい。
　link Title:

anchor Title:

　 id:
　 id:
　　　　defaul表示:
　　　

再描画
Svg文字
group化
group解除
paste
Copy
整形
多重線
多重線reset
要素probe
Animation
path反転
削除
cancel

from Local
from google
cancel

Level: Child_n: fig:
class: tag:

-----------------svg parameters-------------------------

color: fill:
width: 　　　　　　　

animation type:
id:　
anime時間:s begin:s 角度:
timing:
value: position: pare:

　　　　

add anime type:
anime時間:sec begin時間:sec
timing: value:

animation type:
tags: now: 　
anime時間:sec begin時間:sec
timing:
value:

del		n	name	description

表示文字：

font-size: 縁取-size:
font-color: 縁取-color:
font-weight:
rotate: font-family:
anchor: 　　　　　　　 rich
id:　　
　　　

out form:
　　　

Lineの線種、幅とパレットcolorとpaste colorを決めてNext　or End
　　

Tag: Level:fig:
     　
挿入tag: 　
　Sレシピ　　
    　

margin-L:  margin-R: indent:
margin:  padding:
color: float:
width:  height:
border:  border-radius:
others:

name Icon Design Area:

背景: 枠: width:
　　　　

　　　

p1 p2 p3
p4 p5 p6
Trim R
連結
name

件名(subject)　　　　　　　　　w/script
宛先(address)
　　
コメント

address list

Edit　　　　 name: n:

del		n	name	description

auto　　 name: n:

html/dialog 　　　　　　　　　　　

css 　　　　

del		n	name	description

max_width
L margin R margin
　　 hist_undo 　　

---------共通--------　　　　

倍率：x y

font: anchor: line-height: rotate:

id: startOffset: %

norich

------------------------------------------------

追加: 　白

　　　　彩度明度　

//ソース隠蔽部
//for_test,for_sale,for_demo,for_cloud
var for_cloud='no';
//var for_cloud='yes';
var for_demo='no';
//var for_demo='yes';
var for_maint='yes';
//var for_maint='no';

if(for_maint=='yes') {
		var svg_select = document.getElementById('maint_svg');
		svg_select.setAttribute('style', 'width:60px; height:25px;');
		var html_select = document.getElementById('maint_html');
		html_select.setAttribute('style', 'width:60px; height:25px;');
		}

function generate_colors(color_val) {
console.log('Enter to generate_colors=',color_val);
 // 16進数をRGBに変換
  const hex = color_val.substring(1); // #を取り除く
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
console.log('rgb=',hex,r,g,b);
	var hsl_code=rgbToHsl(r, g, b);
console.log('hsl_code=',hsl_code);
	hsl_code[1]=hsl_code[1]*100;
	hsl_code[2]=hsl_code[2]*100;
	hsl_s=Number(document.getElementById("satu_degree").value);
	if(hsl_s) hsl_code[1]=hsl_s;
	hsl_b=Number(document.getElementById("bri_degree").value);
	if(hsl_b) hsl_code[2]=hsl_b;
	var bri_checked=document.getElementById("bri_check").checked;
	for(let k=0;k<8;k++) {
		var hsl=hsl_code[0]+15*k;
		hsl_bri=hsl_code[2];
		if(bri_checked) hsl_bri=hsl_code[2]+5*k;
		if(hsl>=360) hsl=hsl-360;
		var new_rgb = hsl2rgb(hsl,hsl_code[1],hsl_bri);
console.log('bri_check=',bri_checked,hsl_bri);
//console.log('new_rgb=',hsl,new_rgb);
		var new_color=RGB2bgColor(new_rgb.r,new_rgb.g,new_rgb.b);
console.log('new_color=',new_rgb,new_color);
		ad_pal[k][4]=new_color;
		var sel_tag=document.getElementById(ad_pal[k][1]);
		sel_tag.setAttribute('stroke-width', '1');
          	sel_tag.setAttribute('fill',ad_pal[k][4]);
		}
  }

/*
// 色相環の描画 
function drawColorWheel(canvas,ctx) {   
   var radius    = 100; // 半径 
   
   canvas.width  = radius * 2;
   canvas.height = radius * 2;         
    
   // 色相環の作成
   for (var i = 0; i < 360; i++) {
     var rgb = hsl2rgb(i,100,50); 
   
     ctx.beginPath();
     ctx.moveTo(radius,radius)
     // -90はラジアン角がx軸の正方向からはじまる為(時計回り)
     ctx.arc(radius, radius, radius, (-90+i)*Math.PI/180, (-90+i+2)*Math.PI/180, false);
 
     ctx.closePath();
     ctx.fillStyle = RGB2bgColor(rgb.r,rgb.g,rgb.b);
     ctx.fill();     
   }   
}
*/
 
// RGBから#ffffff形式へ変換する
function RGB2bgColor(r,g,b) {
 
  r = r.toString(16);
  if (r.length == 1) r = "0" + r;
 
  g = g.toString(16);
  if (g.length == 1) g = "0" + g;
 
  b = b.toString(16);
  if (b.length == 1) b = "0" + b;
 
  return '#' + r + g + b;  
}

// HSL色空間からRGB色空間へ変換する 
//  h(hue)       : 色相/色合い       0-360度の値
//  s(saturation): 彩度/鮮やかさ     0-100%の値
//  l(lightness) : 明度/明るさ       0-100%の値 
function hsl2rgb(h, s, l){
 var max,min;
 var rgb = {'r':0,'g':0,'b':0};
 
 if (h >= 360){
   h = h-360;
 }
 
 if(l <= 49){
   max = 2.55 * (l + l * (s / 100));
   min = 2.55 * (l - l * (s / 100));
 }else{
   max = 2.55 * (l + (100 - l) * (s / 100));
   min = 2.55 * (l - (100 - l) * (s / 100)); 
 }  
 
 if (h < 60){
   rgb.r = max;
   rgb.g = min + (max - min) * (h / 60) ;
   rgb.b = min;
 }else if (h >= 60 &&  h < 120){
   rgb.r = min + (max - min) * ((120 - h) / 60);
   rgb.g = max ;
   rgb.b = min;    
 }else if (h >= 120 &&  h < 180){
   rgb.r = min;
   rgb.g = max ;
   rgb.b = min + (max - min) * ((h - 120) / 60);        
 }else if (h >= 180 &&  h < 240){
   rgb.r = min;
   rgb.g = min + (max - min) * ((240 - h) / 60);
   rgb.b = max;     
 }else if (h >= 240 &&  h < 300){
   rgb.r = min + (max - min) * ((h - 240) / 60);
   rgb.g = min;
   rgb.b = max;     
 }else if (h >= 300 &&  h < 360){
   rgb.r = max;
   rgb.g = min;
   rgb.b = min + (max - min) * ((360 - h) / 60); 
 } 
 
 rgb.r =  Math.round(rgb.r);
 rgb.g =  Math.round(rgb.g);
 rgb.b =  Math.round(rgb.b);
 return rgb; 
}

function rgbToHsl(r, g, b) {
    r = r / 255;
    g = g / 255;
    b = b / 255;

let v = Math.max(r, g, b);
    let min = Math.min(r, g, b);
    let l = (v + min) / 2;
    let h;
    let s;

if (v === min) {
        h = 0;
        s = 0;
    } else {
        s = (v - min) / v;
        if (v === r) {
            h = (g - b) / (v - min);
        } else if (v === g) {
            h = 2 + (b - r) / (v - min);
        } else if (v === b) {
            h = 4 + (r - g) / (v - min);
        }
        h *= 60;
        if (h < 0) {
            h += 360;
        }
    }

return [h, s, l];
}

function pallet_init() {
//console.log('pallet init');
	cx=-35;
	cy=20;
	for(let k=0; k<3;k++){
	  cx=cx+80;
	  let circ_id='sel_'+("00" + (k+1)).slice( -2 );
	  gm_sel.push([k,circ_id,cx,cy,gm_selpal[k]]);
	}

function set_pallet(sel,pal) {
//console.log('set pallet ',sel,pal);
	var pal_tag=document.getElementById('pallet_svg');
console.log('**********pal_tag and children=',pal_tag,pal_tag.childElementCount);
	while( pal_tag.firstChild ){
  		pal_tag.removeChild( pal_tag.firstChild );
		}
	cx=-35;
	cy=20;
	for(let k=0; k<3;k++){
	  c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	  cx=cx+80;
	  c.setAttributeNS(null, 'cx', cx);
	  c.setAttributeNS(null, 'cy', cy);
	  c.setAttributeNS(null, 'r', 10);
	  c.setAttributeNS(null,'id',sel[k][1]);
	  if(sel[k][4]=="none") c.setAttributeNS(null,'fill','#ffffff');
          else c.setAttributeNS(null,'fill',sel[k][4]);
	  c.setAttributeNS(null,'stroke', 'green');
	  c.setAttributeNS(null, 'stroke-width', '1');
	  pal_tag.append(c);
	}

nn=0;
	cy=40;
	for(let j=0; j<3 ;j++ ){
	  	cx=-10;
		st=10;
		if(j==2) {
				cx=40;
				st=8;
			}
	  	cy=cy+25;
		for(let k=0; k<st; k++){
			nn=nn+1;
	  		c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	  		cx=cx+25;
	  		c.setAttributeNS(null, 'cx', cx);
	  		c.setAttributeNS(null, 'cy', cy);
	  		c.setAttributeNS(null, 'r', 10);
			c.setAttributeNS(null,'id',pal[nn-1][1]);
          		c.setAttributeNS(null,'fill',pal[nn-1][4]);
	  		c.setAttributeNS(null,'stroke', 'green');
	  		c.setAttributeNS(null, 'stroke-width', '1');
			if(nn==1 || nn==21) c.setAttributeNS(null,'opacity', '0.5');
	  		pal_tag.append(c);
			}
		}

console.log('set pallet=',sel,pal);
	  cy=cy+25;
	  cx=40;
	  nn=0;
	　for(let k=0; k<st; k++){
		nn=nn+1;
	  	let circ_id='ad_pal_'+("00" + (nn)).slice( -2 );
	  	c = document.getElementById(circ_id);
		if(!c) {
	  		ad_pal.push([nn-1,circ_id,cx,cy,gm_stand03[nn-1]]);
console.log('ad_pal nn and fill=',nn,ad_pal[nn-1][4]);
	  		c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	  		cx=cx+25;
	  		c.setAttributeNS(null, 'cx', cx);
	  		c.setAttributeNS(null, 'cy', cy);
	  		c.setAttributeNS(null, 'r', 10);
			c.setAttributeNS(null,'id',ad_pal[nn-1][1]);
          		c.setAttributeNS(null,'fill',ad_pal[nn-1][4]);
	  		c.setAttributeNS(null,'stroke', 'green');
	  		c.setAttributeNS(null, 'stroke-width', '1');
	  		pal_tag.append(c);
			}
		else {
			c.setAttributeNS(null,'fill','#ffffff');
	  		c.setAttributeNS(null,'stroke', 'green');
	  		c.setAttributeNS(null, 'stroke-width', '1');
			}
		}
	gm_sel=sel;
	gm_pal=pal;
   }

$(document).on('click', '#pallet', function(){
	if(Editmode=="Edit") {
//console.log('Treat Edit pallet');
//		treat_pallet(html_gm_sel,html_gm_pal);
		treat_pallet(gm_sel,gm_pal);
		set_changed_pallet();
		}
	if(Editmode=="Svg") {
//console.log('Treat Svg pallet');
//		treat_pallet(svg_gm_sel,svg_gm_pal);
		treat_pallet(gm_sel,gm_pal);
		set_changed_pallet();
		}
});

/*
function save_sysparms() {
	var svg_pal=each_charpal(svg_gm_sel,svg_gm_pal);
	svg_pal='svg;'+svg_pal+'|<=>|';

var html_pal=each_charpal(html_gm_sel,html_gm_pal);
	html_pal='html;'+html_pal+'|<=>|';

var pal_data=svg_pal+html_pal;
//console.log('save system_data=',pal_data);
	//変数palletをDB　My_SysにEditor終了時に書き込む
	update_sysparms(1,pal_data);

}
*/

/*
var sys_max_width='1200px';
var sys_marginL='50px';
var sys_marginR='100px';
var sys_set_menu='origin';
var set_menu=0;
var html_design_title;
var style_design_title;
*/
function read_sysparms() {
	//Editor開始時にDB My_Sysからデータを読み込んでSvg用及びHTML用pallet変数にセットする
	var from_sys=get_common(1);
//from_sys='';
//console.log('Enter to read_sysparm from_sys=',from_sys);
	if(from_sys=='') {
//console.log('sysdata initial');
		var {gm_sel,gm_pal}=pallet_init();
		svg_gm_sel=gm_sel;
		svg_gm_pal=gm_pal;
		html_gm_sel=gm_sel;
		html_gm_pal=gm_pal;
		}
	else {

var nxt= from_sys.indexOf('user_menu',0);
var user_value=from_sys.substring(nxt,from_sys.length);
from_sys=from_sys.substring(0,nxt)+'|<=>|'+user_value;
//console.log('user_menu=',user_value);
//console.log('from_sys=',from_sys);

var parms=from_sys.split('|<=>|');
console.log('sys parms=',parms);
		len=parms.length;
		for(let kn=0;kn<len;kn++){
			var sels=parms[kn].split(/;|,/);
		 	switch (sels[0]){
      				case 'svg':
//console.log('enter pallet svg');
					var {sel,pal}=each_numpal(sels);
					svg_gm_sel=sel;
					svg_gm_pal=pal;
					svg_bd_color=svg_gm_sel[0][4];
					svg_bk_color=svg_gm_sel[1][4];
					svg_moji_color=svg_gm_sel[2][4];
//console.log('svg pallet sel=',svg_gm_sel,'pal=',pal);
					break;
      				case 'html':
//console.log('enter pallet html');
					var {sel,pal}=each_numpal(sels);
					html_gm_sel=sel;
					html_gm_pal=pal;
					fw_colval=html_gm_sel[0][4];
					bk_colval=html_gm_sel[1][4];
					bd_colval=html_gm_sel[2][4];
//console.log('html pallet sel=',svg_gm_sel,'pal=',pal);
					break;
				case 'sys_parm':
					var sys_parms_dat=parms[kn];
					var sys_parms=sys_parms_dat.split(/;|,/);
//console.log('sys parm=',parms);
					sys_max_width=sys_parms[1];
					sys_marginL=sys_parms[2];
					sys_marginR=sys_parms[3];
					if(lang_org) sys_set_menu=lang_org;
					else sys_set_menu=sys_parms[4];

$(".Tvis").width(sys_max_width);
					$(".Thtm").width(sys_max_width);
					$(".canv").width(sys_max_width);
					switch(sys_set_menu) {
						case 'origin':
							set_menu=0;
							break;
						case 'english':
							set_menu=1;
							break;
						case 'child':
							set_menu=2;
							break;
						case 'favorit':
							set_menu=3;
							break;
						default:
							break;
						}
					break;
				case 'navi_list':
					var navi_list_dat=parms[kn];
					break;
				case 'title_list':
					var navi_list_dat=parms[kn];
					break;
				case 'navi_edit':
					var sel2=parms[kn].split(';');
console.log('sel2=',sel2);
					terms=[];
					var elem=[sels[0],'','',''];
					terms.push(elem);
					for(let j=1;j<sel2.length;j++) {
						elem=sel2[j].split(',');
						if(elem!='') terms.push(elem);
						}
					if(set_menu>=0) {
   						document.getElementById('fgedit').children[0].innerHTML=terms[1][set_menu];
						document.getElementById('fgedit').children[1].innerHTML=' '+terms[2][set_menu];
						document.getElementById('fgedit').children[2].innerHTML=' '+terms[3][set_menu];
						document.getElementById('fgedit').children[3].innerHTML=terms[4][set_menu];
//console.log('navi_edit set_menu=',terms[1][set_menu],terms[2][set_menu],terms[3][set_menu],terms[4][set_menu]);

document.getElementById('menu00').children[0].innerHTML=' '+terms[5][set_menu];
   						document.getElementById('menu00').children[1].innerHTML=terms[6][set_menu];
						document.getElementById('menu00').children[2].innerHTML=terms[7][set_menu];

document.getElementById('chan_title').children[0].innerHTML=terms[8][set_menu];
						document.getElementById('chan_title').children[1].innerHTML=terms[9][set_menu];
						document.getElementById('chan_title').children[2].innerHTML=terms[10][set_menu];
						document.getElementById('chan_title').children[3].innerHTML=terms[11][set_menu];
//console.log('chan_title=',document.getElementById('chan_title').children[0].innerHTM,document.getElementById('chan_title').children[1].innerHTML);
//console.log('chan_title=',terms[8][set_menu],terms[9][set_menu],terms[10][set_menu],terms[11][set_menu]);
   						document.getElementById('menu01').children[0].innerHTML=' '+terms[12][set_menu];
   						document.getElementById('menu01').children[1].innerHTML=terms[13][set_menu];
						document.getElementById('menu01').children[2].innerHTML=' '+terms[14][set_menu];
   						document.getElementById('menu01').children[3].innerHTML=terms[15][set_menu];
   						document.getElementById('menu01').children[4].innerHTML=terms[21][set_menu];
   						document.getElementById('menu01').children[5].innerHTML=terms[16][set_menu];
   						document.getElementById('menu01').children[6].innerHTML=terms[17][set_menu];
   						document.getElementById('menu01').children[7].innerHTML=terms[18][set_menu];
   						document.getElementById('menu01').children[8].innerHTML=terms[19][set_menu];
   						document.getElementById('menu01').children[9].innerHTML=terms[20][set_menu];

document.getElementById('menu02').children[0].innerHTML=' '+terms[12][set_menu];
   						document.getElementById('menu02').children[2].innerHTML=terms[22][set_menu];
   						document.getElementById('menu02').children[3].innerHTML=terms[23][set_menu];
   						document.getElementById('menu02').children[4].innerHTML=terms[24][set_menu];
   						document.getElementById('menu02').children[5].innerHTML=terms[25][set_menu];
   						document.getElementById('menu02').children[6].innerHTML=terms[26][set_menu];

document.getElementById('menu02').children[9].innerHTML=terms[27][set_menu];
   						document.getElementById('menu02').children[11].innerHTML=terms[28][set_menu];
   						document.getElementById('menu02').children[12].innerHTML=terms[29][set_menu];
   						document.getElementById('menu02').children[13].innerHTML=terms[30][set_menu];
   						document.getElementById('menu02').children[14].innerHTML=terms[31][set_menu];
   						document.getElementById('menu02').children[15].innerHTML=terms[36][set_menu];
   						document.getElementById('menu02').children[16].innerHTML=terms[32][set_menu];
   						document.getElementById('menu02').children[17].innerHTML=terms[33][set_menu];
   						document.getElementById('menu02').children[18].innerHTML=terms[34][set_menu];
   						document.getElementById('menu02').children[19].innerHTML=terms[35][set_menu];
						}
					break;
				case 'title_edit':
					var sel2=parms[kn].split(';');

terms=[];
					var elem=[sels[0],'','',''];
					terms.push(elem);
					for(let j=1;j<sel2.length;j++) {
						elem=sel2[j].split(',');
						if(elem!='') terms.push(elem);
						}
					html_design_title=terms;
//console.log('sel2=',sel2,'title=',html_design_title);
					break;
				case 'title_style':
					var sel2=parms[kn].split(';');
					terms=[];
					var elem=[sels[0],'','',''];
					terms.push(elem);
					for(let j=1;j<sel2.length;j++) {
						elem=sel2[j].split(',');
						if(elem!='') terms.push(elem);
						}
					style_design_title=terms;
//console.log('sel2=',sel2,'title=',style_design_title);
					break;
				case '':
					break;
				case 'addr_list':
					old_addr=parms[kn];
					break;
				case 'user_menu':
//					old_user_menu=parms[kn];
//					user_menu_to_menu();
					break;
       				default:
					break;
				}
			}
		}

set_changed_pallet();
//console.log('svg pallet=',svg_gm_sel,svg_gm_pal);
//console.log('html pallet=',html_gm_sel,html_gm_pal);
	} //End of read_sysparms

//Text本体部分（含むTop_svg）のsaveをするがその前にCnSvg部分を削除後の残り部分とする
console.log('***Enter to Save HTML_Text confirm8 ***');
//const element = document.querySelector('section')
//element.remove()
		dumy_div=document.getElementById('wClone').cloneNode(true);
		var dumy=document.getElementById('texx').cloneNode(true);

var wrap = dumy.querySelectorAll("[class='bx-wrapper']");
console.log('wrapper=',wrap);
		if(wrap) {
			const tags = dumy.querySelectorAll("[class='slider_001']");
			$(tags).insertAfter(wrap);
			wrap.forEach(function (element) {
				element.remove();
console.log(element);
				});
			}
console.log('****before <font> remove=',dumy);

dumy.appendChild(dumy_div);

del_tags = dumy.querySelectorAll('svg');
//console.log('del_tags leng=',del_tags.length,del_tags);
		var leng=del_tags.length;
		for(let k=0;k<leng;k++){
//console.log(del_tags[k]);
			var cls=del_tags[k].getAttributeNS(null,'my_class');
			if(cls!='indiv')　{
//console.log('del tag class=',cls,del_tags[k]);
				del_tags[k].remove();
				}
			}
        	while (del_tag = dumy.querySelector('#wClone')) {
//console.log(del_tag);
			del_tag.remove();
			}
//		tex_to_serv=escapeHtml(escape(dumy.innerHTML));
//2023.10.21 add page_script after tex_to_serv
		doc_script=doc_script.trim();
console.log('****before save doc_scrtpt leng=',doc_script.length,'doc_script=',doc_script);
		if(doc_script.length>15) dumy.innerHTML=dumy.innerHTML+'|<===>|'+doc_script;
		if(seo_phrase.length>5) dumy.innerHTML=dumy.innerHTML+'|<===>|'+seo_phrase;
		tex_to_serv=escapeHtml(escape(dumy.innerHTML));

//console.log('**save text=',text_to_serv);
		svg_tag=fold_svg('svg_00');
		svg_tag=escapeHtml(escape(svg_tag));
//		svg_tag=escape(svg_tag);
		dumy.remove();
		dumy_div.remove();
//console.log('***End of comfirm8 ***');

export_html();

function export_html(){
//class=Tivの複製
  var data=get_common(20);
//console.log('data=',data);

const parser = new DOMParser();
    const html_dat = parser.parseFromString(data, "text/html");
console.log('html=',html_dat,html_dat.children[0].children[0],html_dat.children[0].children[0].children[2]);

/*
//metaフレーズのtagが定義されていたらTitleを変更しさらに以下の２つのタグを付加する
    <meta name="description"  content="入門コースではプログラミングの基本概念であるオブジェクト指向を習得します。" />
    <meta name="keywords"  content="pythonプログラミング入門,raspberrypi,webアプリ開発,modelica言語と物理モデル" />
*/
console.log('seo_phrase=',seo_phrase);
    if(seo_phrase.length>3) {
    	var seoph=seo_phrase.split('|@|');
	var present=html_dat.children[0].children[0].children[0];
	if(seoph.length>=2 && seoph[1]!="") {
		present.innerHTML=seoph[1];
		}
	present=html_dat.children[0].children[0].children[2];
	var add_node="";
	if(seoph.length>=4 && seoph[3]!="") {
    		add_node = document.createElement('meta');
    		add_node.setAttribute('name', 'keywords');
    		add_node.setAttribute('content', seoph[3]);
		present.after(add_node);
		}
	if(seoph.length>=3 && seoph[2]!="") {
    		add_node = document.createElement('meta');
    		add_node.setAttribute('name', 'description');
    		add_node.setAttribute('content', seoph[2]);
//		var next1='<meta name="description"  content=' +'"'+seoph[2]+'" />';
console.log('secont present=',present,'meta=',add_node);
		present.after(add_node);			
		}
	}

var styl_char=document.querySelector('style');
console.log('style=',styl_char);

var tagn=document.getElementById('texx');

var v_leng=0;
	var svg_tag=document.getElementById('divsvg_00');
	var area=svg_tag.getAttribute('svgarea');
	if(area) {
		var v_num=area.split(" ");
		v_leng=v_num.length;
		if(v_leng==3 && v_num[2]=='999') {
			v_leng=3;
			}
		}

var dumy=tagn.cloneNode(true);

var before=dumy.getAttribute('contenteditable');
	dumy.setAttribute('contenteditable','false');
	var after=tagn.getAttribute('contenteditable');
console.log('contentedit before and after=',before,after);
	var overvw=document.createElement('textarea');
	overvw.setAttribute('style',"display:none;");
	overvw.setAttribute('id',"over_vw001");
	overvw.innerText=my_overview;
	dumy.appendChild(overvw);

console.log('Enter to export document=',svg_area_position);
	if(svg_area_position=="exe_core") {
		var btag=html_dat.querySelector('body');
		var styl_char=document.querySelector('style').cloneNode(true);
		styl_char.setAttribute('id','style_def');
console.log('style=',styl_char);
		btag.appendChild(styl_char);
		btag.appendChild(overvw);
		//if(wrap) btag.appendChild(wrap);
		const serializer = new XMLSerializer();
		svgout = serializer.serializeToString(html_dat);
		global_htmldoc=svgout;
console.log('Only exe_core out');
		return;
		}

console.log('dumy=',dumy);

var styl_char=document.querySelector('style').cloneNode(true);
	styl_char.setAttribute('id','style_def');
console.log('style=',styl_char);
	dumy.appendChild(styl_char);

//var styl_char=document.querySelector('style');
//console.log('style=',styl_char);

//	var chain=$('.chain_svg_mark');
	$('.chain_svg_mark').css('display', 'none');

if(outer_inner_form=="inner") {
	if(doc_script) {
		var scp=document.createElement('textarea');
		scp.setAttribute('style',"display:none;");
		scp.setAttribute('id',"doc_script");
		scp.innerText=doc_script;
		dumy.appendChild(scp);
console.log('script=',scp,'dumy=',dumy);
		var boot_script=document.createElement('script');
		boot_script.setAttribute('id',"boot_script");
		var scrt=get_common(23);
		boot_script.innerHTML=scrt;
console.log('boot_script=',scrt,boot_script);
		dumy.appendChild(boot_script);
		}
	if(seo_phrase) {
		var scp=document.createElement('textarea');
		scp.setAttribute('style',"display:none;");
		scp.setAttribute('id',"seo_phrase");
		scp.innerText=seo_phrase;
		dumy.appendChild(scp);
		}
	}

var btag=html_dat.querySelector('body');
	
//console.log('before=',btag);
	btag.appendChild(dumy);
console.log('before=',btag,html_dat);

//if(v_leng==4)：header出力用 の場合はhead_svg_00とhead_divsvg_00のみを出力する。
	if(v_leng==4) {
console.log('Enter to html_out for header');
		var k=0;
		var elems=dumy.querySelectorAll("div.flex_box");
console.log('selected flex_box=',elems);
		for(let k=0;k<elems.length;k++) {
			var styl=elems[k].getAttribute('style');
			var ad_st="display: flex; flex-direction: row; align-items:stretch;"
			if(styl) styl=styl+ad_st;
			else styl=ad_st;
			elems[k].setAttribute('style',styl);
console.log('flex_box=',elems[k]);
			}
		// 複製要素内のIDを持つ全ての要素を取得して名前を変更する
		var svgout="";						
		dumy.querySelectorAll("[id]").forEach((element, index) => {
			var elem_id=element.getAttribute("id");
			if(elem_id.includes("svg_")) {
				if(elem_id.slice(0,3)=='div') {
					var wd=get_remove_attr(element,'width');
					var heit=get_remove_attr(element,'height');
					var dvsty=get_remove_attr(element,'background-color');
					if(sty_color=="" && dvsty) {
						sty_color=dvsty;
console.log('remove background-color=',sty_color,element);
						}
					var adsy="width:"+v_num[2]+";height:"+v_num[3]+";";
					var nw_styl=element.getAttribute('style');
					nw_styl=nw_styl+adsy+"position:relative;z-index:10;";
					element.setAttribute('style',nw_styl);
					}
				if(elem_id.slice(0,3)=='svg') {
					var styl=element.getAttribute('style');
					if(styl) styl=styl+"position:absolute;z-index:30;";
					else styl="position:absolute";
					element.setAttribute('style',styl);
					element.setAttribute("viewBox",area);
					element.setAttribute("width",v_num[2]);
					element.setAttribute("height",v_num[3]);
					}
    				element.setAttribute("id", "head_"+element.id);
console.log('rename tag=',elem_id);
				svgout=svgout+element.outerHTML;
				}
			});
		global_htmldoc=svgout;
		}
//main_textのみ(svg+divsvgをdivで囲う)を出力する場合はここにくる
	else if(v_leng==3) {
console.log('Enter to html_out for main_text');
		// 複製要素内のid=svg_xxとid=divsvg_xxのペアを新たなdivで囲んだ形で出力する
		var k=0;
		var elems=dumy.querySelectorAll("div.flex_box");
console.log('selected flex_box=',elems);
		for(let k=0;k<elems.length;k++) {
			var styl=elems[k].getAttribute('style');
			var ad_st="display: flex; flex-direction: row; align-items:stretch;"
			if(styl) styl=styl+ad_st;
			else styl=ad_st;
			elems[k].setAttribute('style',styl);
console.log('flex_box=',elems[k]);
			}
		var svg_tags = dumy.querySelectorAll('svg');
		for(let k=0;k<svg_tags.length;k++){
			var cls=svg_tags[k].getAttribute('my_class');
			if(cls=='indiv')　{
				var styl=svg_tags[k].getAttribute('style');
				var ad_st="position: absolute;"
				if(styl) styl=styl+ad_st;
				else styl=ad_st;
				svg_tags[k].setAttribute('style',styl);

}
	else {
		const serializer = new XMLSerializer();
		svgout = serializer.serializeToString(html_dat);
console.log('after serialize=',svgout);
		}
	global_htmldoc=svgout;
   }

enter_to_insvg();
function enter_to_insvg(){  //cont_d_menu4()
//console.log('**********Enter to insvg setting',doc_edit_node);
	if(check_svgindiv(doc_edit_node)) {
		alert('svg origin not in this div');
		return;
		}
	fgedit.selectedIndex=2;
	from_svg='indiv';
	chng_mode();
	set_svgindiv(doc_edit_node);
	if(org_container) {
//console.log('indiv container=',org_container);
		var svgheit=org_container.getAttribute('height');
//console.log('svg height=',svgheit,org_container,container);
		if(svgheit!='auto') {
			var max_heit=0;
			for(let k=0;k<doc_edit_node.childElementCount;k++) {
				var tag=doc_edit_node.children[k];
				var heit=tag.clientHeight;
				if(max_heit<heit) max_heit=heit;
//console.log('child k=',k,tag,'height=',heit,'max_heit=',max_heit);
				}
//			if(max_heit>svgheit) org_container.setAttribute('height','auto');
//			org_container.setAttribute('height',max_heit);
			org_container.setAttribute('height','auto');
			}
		}
   }
function check_svgindiv(tag) {
	var error=0;
	var svgtag = tag.querySelector('svg');
//console.log('check insvg mode tag and svgtag=',tag,svgtag);
	if(!svgtag) error=1;
	return error;
	}

function set_svgindiv(tag) {
	var svgtag = tag.querySelector('svg');
	org_container = svgtag;

if(org_container.querySelector('.top')==null) {
//console.log('***make g01 group as container');
		container=org_container;
		var {group,fig_id}=make_group('top');
		group.setAttribute('class', 'top');
		group.removeAttribute('opacity');
		container=org_container.appendChild(group);
		var rect=createRectFig(0,0,20,20);
		var indiv_id='in'+(Date.now()).toString();
		rect.setAttribute('id', indiv_id);
		rect.setAttribute('class', 'indiv_svg_mark');
		rect.setAttribute('stroke', 'blue');
		rect.setAttribute('stroke-width', '1');
		rect.setAttribute('fill', 'blue');
		org_container.appendChild(rect);
		}
	else {
		container=org_container.querySelector('.top');
		var indiv_id=org_container.getAttribute('id');
		var svg_mark=org_container.querySelector('.indiv_svg_mark');
//console.log('svg_mark=',svg_mark,'length=',!svg_mark);
		if(!svg_mark) {
			var rect=createRectFig(0,0,20,20);
			var indiv_id='in'+(Date.now()).toString();
			rect.setAttribute('id', indiv_id);
			rect.setAttribute('class', 'indiv_svg_mark');
			rect.setAttribute('stroke', 'blue');
			rect.setAttribute('stroke-width', '1');
			rect.setAttribute('fill', 'blue');
			org_container.appendChild(rect);		
			}
		else {
			var indiv_id=svg_mark.getAttribute('id');
			if(!indiv_id) {
				var indiv_id='in'+(Date.now()).toString();
				svg_mark.setAttribute('id', indiv_id);
				}
			svg_mark.setAttribute('stroke', 'blue');
			svg_mark.setAttribute('stroke-width', '1');
			svg_mark.setAttribute('fill', 'blue');
			svg_mark.setAttribute('opacity', '0.6');
			}
		}
	var off_tag='#'+indiv_id;
	off_page=$(off_tag).offset();
//console.log('divSvg offset=',off_tag,'XY=',off_page.left,off_page.top);
      	//var org=document.getElementById(org_container);
	org_container.setAttribute('class','canv2 point_auto select_none');

var target = document.getElementById("JumpTo");
    	target.href = '#'+indiv_id;
//console.log('jump to Svg_indiv set=',target.href);
        document.getElementById('jump_svg').click();

//console.log('change svg_indiv container to=',svgtag);
} //End set_svgindiv

tempo_export_html();
function tempo_export_html(){
  var data='<!DOCTYPE html><html lang="en"><body>';
//console.log('data=',data);

const parser = new DOMParser();
    const html_dat = parser.parseFromString(data, "text/html");

var tagn=document.getElementById('texx');
    var dumy=tagn.cloneNode(true);

dlist=dumy.querySelectorAll('rect');
	dlist.forEach(function (element) {
		element.remove();
//		element.setAttribute('style','display;block');
//		element.setAttribute('class','canv point_none');
//console.log(element);
		});

var btag=html_dat.querySelector('body');
//console.log(btag);
	btag.appendChild(dumy);
//console.log(html_dat);
	const serializer = new XMLSerializer();
	const es_html = serializer.serializeToString(html_dat);
//console.log('export html length=',es_html.length);

let blob = new Blob([es_html],{type:"html"});
let link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'tempofile.html';
link.click();
   }

after_dbl_click();
   function after_dbl_click() {
	if(start_svg_records) svg_record('','',control.value,'execB','',0,0);
	if ((control.value== 'simp_line')||(control.value== 'seri_line')||(control.value== 'close_line')||(control.value== 'smooth')||(control.value== 'close_smooth')){
console.log('Enter after_dbl_click control.value=',control.value);
		if((key_shift)&&(drawingPoints.length>1)) {
//console.log('x0,y0=',x0,y0);
			mend_points();
			}
		if(drawingPoints.length<2) {
console.log('enter not proper figure');
//			alert('not proper figure');
			drawingPoints = [];
			Step=0;
			return;
			}
		else if((drawingPoints.length==2) && (control.value=='simp_line')){
			var {group,fig_id}=make_group('path');
console.log('make_group=',group,fig_id,'Step=',Step);
			}
		else {
			var {group,fig_id}=make_group('path');
console.log('make_group=',group,fig_id,'Step=',Step);
			}
console.log('***fig id= ',fig_id);
		var c_para="else";
		if((control.value== 'close_line')||(control.value== 'close_smooth')) {
			c_para="close";
			drawingPoints.push(drawingPoints[0]);
			}
/*
		if(first_point){
			container.removeChild(first_point);
			first_point=null;
			}
*/
		if(drawingPath && !exec_svghistry){
        		container.removeChild(drawingPath);
                	drawingPath=null;
			}
        	drawingPath = null;
        	var path;
		group.setAttributeNS(null,'close', c_para);
		var s_para="else";
console.log(drawingPoints);
		if((control.value== 'smooth')||(control.value== 'close_smooth')) {
			//3次ベジエで滑らかにするアルゴリズム　resultPoints=catmullRom2bezier(drawingPoints);では上手くいかず
			s_para="smooth";
			}
		else if(((control.value== 'seri_line')||(control.value== 'close_line'))&&(S_line_Trim>0)) {
			var R=S_line_Trim;
			s_para='trim '+String(S_line_Trim);
			}

group.setAttribute('smooth', s_para);
		drawingPtype=Array(drawingPoints.length);
		drawingPtype.fill(0);
console.log('**01 remove path Ptype=',drawingPtype);
		var path=set_line_group(group,drawingPtype,c_para,s_para);
		group.insertBefore(path, group.firstChild);

remake_group(group,path,defaultArrowStyle);

double_2line_id=fig_id;
console.log('**06 append path');
		drawingPoints = [];
	}
   }  //after dbl_click

add_tag_func();
   function add_tag_func() {
console.log('Enter add_tag');
	var add_tag;
	var tag_name=document.getElementById('sel_add_tag').value;
	if(start_html_records) html_record('button','sel_add_tag','','','',0,0);
	if(start_html_records) {
		if(tag_name=="flex") {
			var num_parm=document.getElementById('hm_numb').value;
			html_record('select',tag_name,num_parm,'','',0,0);
			}
		else html_record('select',tag_name,'','','',0,0);
		}
	if(start_html_records) html_record('button','add_tag','','','',0,0);
console.log('selected add tag=',tag_name);
	add_tag_func_common(tag_name,'');
//	document.getElementById('sel_add_tag').selectedIndex=0;
	}
   function add_tag_func_common(tag_com_name,hm_parm) {
    	//選択したtagによって分岐
	if(doc_deep_level<0) {
		alert('Not selected text');
		return;
		}
	var level=tag_trees[doc_deep_level].level;
console.log('doc_edit_node=',doc_edit_node,'deep level=',doc_deep_level,' level=',level);
	if(level<=0) {
		var result = window.confirm('先頭への追加となります。追加しますか？');
		if(result==true){
			doc_add_first=true;
			}
			else return;
		}
    	switch (tag_com_name) {
//    	switch (tag_name) {
      		case 'div':               
			add_tag="<div> 大枠   typ_chng_flg=1 //基本配置 ";
console.log('select=',add_tag);

if(!check_structure_tag(doc_edit_node)) return;

var par_tag= document.createElement('div');
			//var parms="width:50%;float:left;height:auto;";
			//par_tag.setAttribute('style', parms);
			//par_tag.setAttribute('height', 'auto');
			//par_tag.setAttribute('width', '50%');
			var chd_tag = document.createElement('p');
			chd_tag.innerHTML='DIVタグ＆Pタグを挿入しました。';
			par_tag.setAttribute('fig', '大枠');
			par_tag.setAttribute('class', 'div');
			chd_tag.setAttribute('fig', '段落');
			chd_tag.setAttribute('class', 'p');
			par_tag.appendChild(chd_tag);
			if(doc_add_first){
				doc_edit_node.insertBefore(par_tag, doc_edit_node.firstChild);
console.log('add First child');
				}
			else {
				$(par_tag).insertAfter(doc_edit_node);
console.log('not first');
				}
			doc_add_first=false;
			cancel_green_line();

if(!check_structure_tag(doc_edit_node)) return;

if(!check_structure_tag(doc_edit_node)) return;

var par_tag= document.createElement('div');
			par_tag.setAttribute('class', 'colm_box');
			//par_tag.setAttribute('flex-direction', 'column');
			par_tag.setAttribute('fig', '縦小枠');
			var hm_numb=Number(document.getElementById('hm_numb').value);
			dwidth='';
			if(hm_numb<2) hm_numb=2;
			if(hm_numb>10) hm_numb=10;

for(let i=0;i<hm_numb;i++) {
				var chd_tag = document.createElement('div');
				chd_tag.setAttribute('fig', '小枠');
				chd_tag.setAttribute('class', 'colm_flex');
				chd_tag.innerHTML='<p>コンテンツが入ります</p>';
				//if(i<leng_wd) parms_1='height:'+parm_w[i]+';';
				//else parms_1='height:'+parm_w.slice(-1)[0]+';';
				var parms_1="border: solid 1px #008080;";
				chd_tag.setAttribute('style', parms_1);
				chd_tag.setAttribute('height', 'auto');
				par_tag.appendChild(chd_tag);
				}
			if(doc_add_first){
				doc_edit_node.insertBefore(par_tag, doc_edit_node.firstChild)
console.log('add First child');
				}
			else {
				$(par_tag).insertAfter(doc_edit_node);
console.log('not first');
				}
			doc_add_first=false;
			cancel_green_line();

if(!check_structure_tag(doc_edit_node)) return;

tag_trees=[];
    			tag_trees=get_tagStruct(chd_tag,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=chd_tag;
			doc_origin_node=chd_tag;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
			setto_current_tag(doc_edit_node);
			set_parms();
			var result=check_html_hist(chd_tag,tag_trees,level,'add');
			display_current_tag(doc_edit_node);
			break;
      		case 'ol':               
			add_tag="<div><ol>　数列挙　typ_chng_flg=1　　//基本配置";
console.log('select=',add_tag);

if(!check_structure_tag(doc_edit_node)) return;

tag_trees=[];
    			tag_trees=get_tagStruct(chd_tag,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=chd_tag;
			doc_origin_node=chd_tag;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
			setto_current_tag(doc_edit_node);
			set_parms();
			var result=check_html_hist(chd_tag,tag_trees,level,'add');
			display_current_tag(doc_edit_node);
			break;
      		case 'hx_title':
			add_tag="<title>　見出し　typ_chng_flg=3：　//並び・装飾　　";
    			var selectedText = window.getSelection().toString();
console.log('Enter add　H tag');
			var sel = window.getSelection();
  			if(!sel.rangeCount) return; 
  			var range = sel.getRangeAt(0);

if(!check_structure_tag(doc_edit_node)) return;

var H_size=document.getElementById("tit_size").value;
			if(H_size=='none') {
				alert('Title size not selected');
				return;
				}

if(selectedText.length>0){
    				range.deleteContents();    // 範囲選択箇所を一旦削除
				var par_tag= document.createElement(H_size);
				par_tag.setAttribute('class', 'title');
				par_tag.setAttribute('fig', '見出し');
				var temp_id='t'+(Date.now()).toString();
				par_tag.setAttribute('id', temp_id);
				par_tag.innerHTML=selectedText;
    				range.insertNode(par_tag);

reform_html_after_ptag();
				par_tag=document.getElementById(temp_id);
				par_tag.removeAttribute('id');
				}
			else {
				var par_tag= document.createElement(H_size);
				par_tag.setAttribute('class', 'title');
				par_tag.setAttribute('fig', '見出し');
				if(document.getElementById('tit_title').value) {
					par_tag.innerHTML=document.getElementById('tit_title').value;
					}
				else {
					par_tag.innerHTML="見出し";
					}
console.log('edit_node=',doc_edit_node);
				if(doc_add_first){
					doc_edit_node.insertBefore(par_tag, doc_edit_node.firstChild)
console.log('add First child');
					}
				else {
					$(par_tag).insertAfter(doc_edit_node);
console.log('not first');
					}
				}
			doc_add_first=false;
			cancel_green_line();

tag_trees=[];
    			tag_trees=get_tagStruct(par_tag,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=par_tag;
			doc_origin_node=par_tag;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
			setto_current_tag(doc_edit_node);
			set_parms();
			var result=check_html_hist(par_tag,tag_trees,level,'add');
			display_current_tag(doc_edit_node);
			break;
      		case 'photo':                        
			add_tag="<photo>　絵写真　　typ_chng_flg=4:  //画像・リンク　";
console.log('photo present=',doc_edit_node,'level=',doc_deep_level,'dog_tree=',tag_trees);
			var tempnode=doc_edit_node;
			if(doc_edit_node.nodeName!='P') {
alert('指定位置が違います textを選択下さい。');
				return;
				}
			tempnode= doc_edit_node.parentNode;
			photo_type='new';
			var type=tempnode.nodeName;
			if(type=='flex' || type=='DIV') photo_type='flex';

console.log('photo type=',photo_type,'tempnode=',tempnode);
			var rect=doc_edit_node.getBoundingClientRect();
console.log('context_pos=',rect.left,rect.top);
//写真をLocal or　Googleから持ってくるかのメニュー
			document.getElementById('contextmenu_c').style.left=(rect.left+20)+"px";
                	document.getElementById('contextmenu_c').style.top=(rect.top+20)+"px";
		        document.getElementById('contextmenu_c').style.display="block";
console.log('Create photo tag End');
			break;
      		case 'p_tag':                        
			add_tag="<p>　段落　　typ_chng_flg=1:  //基本配置　";
    			var selectedText = window.getSelection().toString();
console.log('Enter add　P tag start_html_records=',start_html_records);
			var sel = window.getSelection();
  			if(!sel.rangeCount) return; 
  			var range = sel.getRangeAt(0);

if(!check_structure_tag(doc_edit_node)) return;

var par_tag= document.createElement('p');
			//var parms="background-color:#edf7ff;";

par_tag.setAttribute('fig', '段落');
			par_tag.innerHTML='新規の段落です。';
console.log('edit_node=',doc_edit_node);
			if(doc_add_first){
				doc_edit_node.insertBefore(par_tag, doc_edit_node.firstChild)
console.log('add First child');
				}
			else {
				$(par_tag).insertAfter(doc_edit_node);
console.log('not first');
				}
			doc_add_first=false;
			cancel_green_line();

var f_name=font_import[0][0];
			var parms='font-family:'+f_name+';';
console.log('add P tag style=',parms);
			par_tag.setAttribute('style', parms);
			if(font_import[0][2]==0) {
				font_import[0][2]=1;
				applyCustomCss_add(font_import[0][1]);
				}

var node=doc_edit_node.nodeName;
			if(node!='DIV') {
alert('svg must be made in DIV');
				return;
				}
			var svgtags = doc_edit_node.querySelector('svg');
			if(svgtags) {
alert('svg tag already exis in DIV');
				return;				
				}
			var svg_div = document.createElementNS('http://www.w3.org/2000/svg','svg');
			svg_div.setAttributeNS(null,'version', "1.1");
			svg_div.setAttributeNS(null,'my_class', "indiv");
			svg_div.setAttributeNS(null,'class', "canv2 point_auto select_auto");
			svg_div.setAttributeNS(null,'width', "100%");
			var fig_id='svg'+(Date.now()).toString();
			svg_div.setAttribute('id', fig_id);
			svg_div.setAttributeNS(null,'height', "auto");
			//svg_div.setAttributeNS(null,'viewBox', "0 0 400 200");

doc_edit_node.insertBefore(svg_div, doc_edit_node.firstChild);
			cancel_green_line();
			setto_current_tag(doc_edit_node);
			set_parms();
			//Svg_indivを作成時一度はSvg_indivに入る必要がある。
			document.getElementById("makeSvg_indiv").click();
			break;
      		case 'table':
			add_tag="<table>　作表  typ_chng_flg=4 //並び・装飾　";
console.log('select=',add_tag);

if(!check_structure_tag(doc_edit_node)) return;

/*
//列cellの合体（rowspan）のテスト OK
console.log('tbody=',tbody_tag);
console.log('rows=',tbody_tag.rows);
console.log('tr=',tbody_tag.rows[0].cells);
console.log('td=',tbody_tag.rows[0].cells[0]);
tbody_tag.rows[1].cells[1].setAttribute('rowspan','2');
tbody_tag.rows[2].cells[1].remove();
//行列の追加
var row = tabl_tag.insertRow( -1 );
//tabl_tag.appendChild(row);
var td = row.insertCell( -1 );
td.innerHTML='追加';
//row.appendChild(td);
var col = tabl_tag.insertCol( -1 );
//tabl_tag.appendChild(row);
var tr = col.insertCell( -1 );
tr.innerHTML='追加';
*/

if(doc_add_first){
				doc_edit_node.insertBefore(par_tag, doc_edit_node.firstChild)
console.log('add First child');
				}
			else {
				$(par_tag).insertAfter(doc_edit_node);
console.log('not first');
				}
console.log('01 parm type=',typ_chng_flg);
			doc_add_first=false;
			cancel_green_line();
    			tag_trees=[];
    			tag_trees=get_tagStruct(par_tag,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=par_tag;
			doc_origin_node=par_tag;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
console.log('02 parm type=',typ_chng_flg);
			setto_current_tag(doc_edit_node);
console.log('03 parm type=',typ_chng_flg);
			set_parms();
			var result=check_html_hist(par_tag,tag_trees,level,'add');
			display_current_tag(doc_edit_node);
			break;
      		case 'span':               
			add_tag="<span>　強調　　　　typ_chng_flg=2:  //文字書式　";
			var selectedText = window.getSelection().toString();
console.log('Enter span sel=',selectedText);

var sel = window.getSelection();
  			if(!sel.rangeCount) return; 
  			var range = sel.getRangeAt(0);　　　　　　　　　　　//OK!!　<font>でも下記の<span>でもOK
console.log('#####selection=',sel,range);
console.log('text and Node=',selectedText,sel.focusNode);
console.log('start=',range.startContainer,'end=',range.endContainer);
if(range.startContainer!=range.endContainer) console.log('start and end not equal');
			if(selectedText=="" || range.startContainer!=range.endContainer) {
				alert('not proper selection');
				return;
				}
  			var span = document.createElement("span");
			span.setAttribute('fig', '強調');
console.log('catch span text=',range);

if(selectedText.length>0){
    				range.deleteContents();    // 範囲選択箇所を一旦削除
				span.innerHTML=selectedText;
    				range.insertNode(span);
				}
			else {
				span.innerHTML='span';
    				range.insertNode(span);
//				$(span).insertAfter(doc_edit_node);
				}
/* <font>タグを除く
function normalizeFonts(root) {
  // <font color="..."> → style に変換
  root.querySelectorAll("font[color]").forEach(font => {
    const color = font.getAttribute("color");
    const span = document.createElement("span");
    span.style.color = color;
    // 中身を移動
    while (font.firstChild) {
      span.appendChild(font.firstChild);
    }
    font.replaceWith(span);
  });

// <font face> や <font size> はキャンセル（中身だけ残す）
  root.querySelectorAll("font[face], font[size]").forEach(font => {
    font.replaceWith(...font.childNodes);
  });
}
*/

var old_trees=tag_trees;
			var old_level=level;
			cancel_green_line();
    			tag_trees=[];
    			tag_trees=get_tagStruct(span,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=span;
			doc_origin_node=span;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
			setto_current_tag(doc_edit_node);
			set_parms();

var span_par=doc_edit_node.parentNode;
console.log('span tag=',span,span_par);
//			var result=check_html_hist(span_par,old_trees,old_level,'add_d');
			display_current_tag(doc_edit_node);
			window.getSelection().removeAllRanges();
			break;
		case 'button':
			add_tag="<a>　ボタン　　typ_chng_flg=4:  //画像・リンク　";
    			var selectedText = window.getSelection().toString();
console.log('Enter button');

var sel = window.getSelection();
  			if(!sel.rangeCount) return; 
  			var range = sel.getRangeAt(0);　　　　　　　　　　　//OK!!　<font>でも下記の<span>でもOK
//<a>タグを作成
    			var newNode =document.createElement('a');
			newNode.setAttribute('fig', 'ボタン');

if(selectedText.length>0){
    				range.deleteContents();    // 範囲選択箇所を一旦削除
    				range.insertNode(newNode);
				document.getElementById('im_pam5').value=selectedText;
				}
			else {
				if(document.getElementById('im_pam5').value) {
					newNode.innerHTML=document.getElementById('im_pam5').value;
					}
				else newNode.innerHTML='google';
				range.insertNode(newNode);
				}

if(document.getElementById('link_targ').value) {
				newNode.href=document.getElementById('link_targ').value;
				}
			newNode.setAttribute('target', '_blank');
			var parms='';
			if(document.getElementById('hm_parm1').value) {
				parms=parms+'color:'+document.getElementById('hm_parm1').value+';';
				}
//			if(document.getElementById('hm_parm2').value) {
//				parms=parms+'background-color:'+document.getElementById('hm_parm2').value+';';
//				}
			if(document.getElementById('hm_parm14').value) {
				parms=parms+'font-weight:'+document.getElementById('hm_parm14').value+';';
				}
			newNode.setAttribute('style', parms);
/*
			if(document.getElementById('tit_title').value) {
				par_tag.innerHTML=document.getElementById('tit_title').value;
				}
*/
			var new_par=newNode.parentNode;
			cancel_green_line();

tag_trees=[];
    			tag_trees=get_tagStruct(newNode,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=newNode;
			doc_origin_node=newNode;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
			setto_current_tag(doc_edit_node);
			set_parms();
//			var result=check_html_hist(new_par,tag_trees,level,'add_d');
			display_current_tag(doc_edit_node);
			break;
		case 'link':
			add_tag="<a>　link　　typ_chng_flg=4:  //画像・リンク　";
    			var selectedText = window.getSelection().toString();
console.log('Enter link');
			var sel = window.getSelection();
  			if(!sel.rangeCount) return; 
  			var range = sel.getRangeAt(0);　　　　　　　　　　　//OK!!　<font>でも下記の<span>でもOK
console.log('catch link text=',range);

//<a>タグを作成
    			var newNode =document.createElement('a');
			newNode.setAttribute('fig', 'リンク');
			if(selectedText.length>0){
    				range.deleteContents();    // 範囲選択箇所を一旦削除
    				range.insertNode(newNode);
				document.getElementById('im_pam5').value=selectedText;
				newNode.innerHTML=selectedText;
				}
			else {
				if(document.getElementById('im_pam5').value) {
					newNode.innerHTML=document.getElementById('im_pam5').value;
					}
				else newNode.innerHTML='google';
				range.insertNode(newNode);
//				$(newNode).insertBefore(doc_edit_node);
				}

if(document.getElementById('link_targ').value) {
				newNode.href=document.getElementById('link_targ').value;
				}
			var new_par=newNode.parentNode;

newNode.setAttribute('target', '_blank');
			cancel_green_line();

if(!check_structure_tag(doc_edit_node)) return;

//<nav class="my_navi" style="color:white; background-color:blue;">
			var oya_tag= document.createElement('nav');
			oya_tag.setAttribute('fig', 'メニュー');
			oya_tag.setAttribute('class', 'my_navi')
//<ul id="my_resp_menu" >
			var par_tag= document.createElement('ul');
			par_tag.setAttribute('id', 'my_resp_menu');
			par_tag.setAttribute('style','color:white;font-weight:bold;list-style-type:none;');
			var hm_numb=Number(document.getElementById('hm_numb').value);
			if(hm_numb<2) hm_numb=2;
			if(hm_numb>10) hm_numb=10;
//<li class='my_nav'><a href="home.html" >Home</a></li>
			for(let i=0;i<hm_numb;i++) {
				var chd_tag = document.createElement('li');
				chd_tag.setAttribute('class', 'my_nav');
				var marginLR='margin-right:10px;';
				chd_tag.setAttribute('style', marginLR);
				chd_tag.setAttribute('fig', '項目');
				chd_tag.innerHTML='<a href="https://www.google.com/">google</a>';
				par_tag.appendChild(chd_tag);
				}
//<li>のfirstChildとして次にhumburgerを追加
//    <li class="my_hamburger" id="my_nav_togl"><a href="#my_resp_menu"><i class="fa fa-bars"></i></a></li>
				var chd_tag = document.createElement('li');
				chd_tag.setAttribute('id', 'my_nav_togl');
				chd_tag.setAttribute('class', 'my_hamburger');
				chd_tag.innerHTML='<a href="#my_resp_menu"><i class="fa fa-bars"></i></a>';
				par_tag.insertBefore(chd_tag, par_tag.firstChild)
			if(doc_add_first){
				doc_edit_node.insertBefore(oya_tag, doc_edit_node.firstChild)
console.log('add First child');
				}
			else {
				$(oya_tag).insertAfter(doc_edit_node);
console.log('not first');
				}
			doc_add_first=false;
			oya_tag.appendChild(par_tag);
			cancel_green_line();
			
			tag_trees=[];
    			tag_trees=get_tagStruct(oya_tag,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=oya_tag;
			doc_origin_node=oya_tag;
			setto_current_tag(doc_edit_node);
			set_parms();
			var result=check_html_hist(oya_tag,tag_trees,level,'add');
			display_current_tag(doc_edit_node);
			break;
		case 'I_con':
			add_tag="<i>　Icon　　typ_chng_flg=4:  //画像・リンク　";
    			//const selectedText = window.getSelection().toString();
console.log('Enter Icon');
			var sel = window.getSelection();
  			if(!sel.rangeCount) return; 
  			var range = sel.getRangeAt(0);　　　　　　　　　　　//OK!!　<font>でも下記の<span>でもOK
//<i>タグを作成
    			var newNode =document.createElement('i');
			newNode.setAttribute('fig', 'Icon');
    			range.insertNode(newNode);
			if(document.getElementById('link_targ').value) {
				var font_code=document.getElementById('link_targ').value;
				}
			newNode.setAttribute('class', font_code);
			var new_par=new_Node.parentNodel
			cancel_green_line();

tag_trees=[];
    			tag_trees=get_tagStruct(newNode,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_edit_node=newNode;
			doc_origin_node=newNode;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
			setto_current_tag(doc_edit_node);
			set_parms();
//			var result=check_html_hist(new_par,tag_trees,level,'add_d');
			display_current_tag(doc_edit_node);
			break;
		case 'recipe':
			add_tag="<i>　recipe　　typ_chng_flg=4:  //画像・リンク　";
console.log('Enter recipe');
			var sl = document.getElementById( "style_recipe_tag" ) ;
			while(sl.lastChild)
				{
				sl.removeChild(sl.lastChild);
				}
			var newElement = new Option("","none") ;	// <option value="newtag">newtag</option>を追加する
			sl.add( newElement );
			if(recipe_selection) {
console.log('recipe selection=',recipe_selection-1,myrecipe_list);
				var rec_num=myrecipe_list[recipe_selection-1][0];
				var recipe_text=get_myrecipe(rec_num);

const domParser = new DOMParser();
　　				var parsed = domParser.parseFromString(my_recipe_data, 'text/html');

//const new_node = parsed.querySelectorAll('html body > *');
　　				const new_node = parsed.body;
console.log('new_node leng=',new_node.childNodes.length,new_node);
				//$(new_node).insertAfter(doc_edit_node);
				var par_tag= document.createElement('div');
				var temp_tag;
				for(let i=0;i<new_node.childNodes.length;i++) {
					temp_tag=new_node.children[i].cloneNode(true);
					par_tag.appendChild(temp_tag);
					//$(temp_tag).insertAfter(doc_edit_node);
					//doc_edit_node=temp_tag;
					//doc_edit_node=doc_edit_node.append(new_node.children[i]);
					}
				$(par_tag).insertAfter(doc_edit_node);
				}
console.log('after_recipe new_tag=',doc_edit_node,par_tag);
			doc_add_first=false;
			cancel_green_line();
    			tag_trees=[];
			doc_edit_node=par_tag;
			doc_origin_node=par_tag;
    			tag_trees=get_tagStruct(doc_edit_node,0);
    			if(tag_trees.length>0) doc_deep_level=0;
			doc_origin_node=doc_edit_node;
			setto_current_tag(doc_edit_node);
			set_parms();
			var result=check_html_hist(par_tag,tag_trees,level,'add');
			display_current_tag(doc_edit_node);
			break;
		}
    }      //End of add_tag_func_common

$(document).on('click', '#regi_icon', function(){
	icon_regist='regist';
	document.getElementById("draw_mesh").click();
	});
    $(document).on('change', '#icon_area', function(){
	mesh_draw=0;
	icon_regist='';	
	document.getElementById("draw_mesh").click();
	});
    $(document).on('click', '#draw_mesh', function(){
console.log("***Enter draw_mesh");
	var mesh_container = document.getElementById('mesh_canv');

if(!icon_regist) {
		mesh_draw=0;
		icon_regist='';
		}
	if(!mesh_draw){
			switch (icon_area.selectedIndex){
      				case 0:               
					box_size=16;
					expan=8;
					break;
      				case 1:               
					box_size=32;
					expan=8;
					break;
      				case 2:
					box_size=48;
					expan=4;               
					break;
      				case 3:
					box_size=64;
					expan=4;               
					break;
      				case 4:
					box_size=256;
					expan=1;               
					break;
      				case 5:
					box_size=400;
					expan=1;               
					break;
      				case 6:
					box_size=600;
					expan=1;               
					break;
      				case 7:
					box_size=800;
					expan=1;               
					break;
				}
console.log('icon_size selected=',icon_area.selectedIndex,'box_size=',box_size);
		// div要素を生成
		var show_area=document.getElementById('icon_show_area');
		if(!show_area) {
			var div = document.createElement('div');
			div.setAttribute('id','icon_show_area');
			// classを追加
			div.className = 'show_icon';
			var p_area = document.createElement('p');
			p_area.textContent = "icon_show area";
			div.appendChild(p_area);
			// 生成したdiv要素を追加する
			document.getElementById('tab1').appendChild(div);
			var div_b = document.createElement('div');
			div_b.setAttribute('id', 'use_icon');
			div.appendChild(div_b);
			}
		}
	if(icon_regist=='regist') {
		var result = window.prompt("symbol name:", "name");
		if(result!=null){ 
console.log('result=',result);
			var symbol = document.createElementNS('http://www.w3.org/2000/svg', 'symbol');
			var fig_id=result;
			symbol.setAttribute('id', fig_id);
			var zero=0;
			symbol.setAttribute('viewBox', `${zero} ${zero} ${box_size} ${box_size}`);
			symbol.setAttribute('preserveAspectRatio', "none");
			mesh_container.appendChild(symbol);
			target = container;
console.log("target=",target);
        			var g_temp = document.createElementNS('http://www.w3.org/2000/svg', 'g');
				var fig_id2='g'+(Date.now()).toString();
				g_temp.setAttribute('id', fig_id2);
				g_temp.setAttribute('fig', 'group');
//				container.appendChild(g_temp);
console.log('g_temp=',g_temp);
//Iconの場合はtargetはsvg00のcontainerそのもので含まれる<g>タグをすべてIconに入れる
			var shift=20;
			var divs=expan;
			simple_fig_top(g_temp,target,target,shift,divs);              //transform matrixを適用して図形simple化

console.log('g_temp,target=',g_temp,target);
/*
元々のIcon用描画は削除しない。
			while (target.lastElementChild) {
				target.removeChild(target.lastElementChild);
				}
       			while (g_temp.lastElementChild) {
				target.append(g_temp.lastElementChild.cloneNode(true));
				g_temp.removeChild(g_temp.lastElementChild);
				}
*/
console.log('g_temp2,target2=',g_temp,target);
//本システムは<g>タグ下のpath要素が基本なのでこのレベルから連結化及びSimple化を実施する
			　var back=$("#icon_back").val();
			  var wdt=$("#icon_width").val();
			  var frm=$("#icon_frame").val();

for (k = 0; k < g_temp.childElementCount; k++) {
//				symbol.append(target.children[k].cloneNode(true));
				symbol.appendChild(g_temp.children[k].cloneNode(true));
console.log('symbol=',symbol);
				}

var svg_a = document.createElementNS('http://www.w3.org/2000/svg','svg');
			svg_a.setAttributeNS(null,'viewBox', "0 0 200 100");
			var use_a=document.createElementNS('http://www.w3.org/2000/svg','use');
			use_a.setAttributeNS(null,'width', '25');
			use_a.setAttributeNS(null,'height', '25');
			use_a.setAttributeNS(null,'href', '#'+fig_id);
console.log('use_a=',use_a);
			svg_a.appendChild(use_a);

var recta=createRectFig(0,0,25,25);
			if(Number(wdt)>0 && (frm!="none" || frm!='')) {
			  	recta.setAttribute('stroke', frm);
			  	recta.setAttribute('stroke-width',wdt);
				}
//			if(back!="none" || back!='') recta.setAttribute('fill',back)
			svg_a.appendChild(recta);

var use_b=document.createElementNS('http://www.w3.org/2000/svg','use');
			use_b.setAttributeNS(null,'x', '30');
			use_b.setAttributeNS(null,'y', '0');
			use_b.setAttributeNS(null,'width', '50');
			use_b.setAttributeNS(null,'height', '50');
			use_b.setAttributeNS(null,'href', '#'+fig_id);
console.log('use_a=',use_b);
			svg_a.appendChild(use_b);

var rectb=createRectFig(30,0,50,50);
			if(Number(wdt)>0 && (frm!="none" || frm!='')) {
			  	rectb.setAttribute('stroke', frm);
			  	rectb.setAttribute('stroke-width',wdt);
				}
//			if(back!="none" || back!='') rectb.setAttribute('fill',back)
			svg_a.appendChild(rectb);

var use_c=document.createElementNS('http://www.w3.org/2000/svg','use');
			use_c.setAttributeNS(null,'x', '100');
			use_c.setAttributeNS(null,'y', '0');
			use_c.setAttributeNS(null,'width', '100');
			use_c.setAttributeNS(null,'height', '100');
			use_c.setAttributeNS(null,'href', '#'+fig_id);
console.log('use_a=',use_c);
			svg_a.appendChild(use_c);

var rectc=createRectFig(100,0,100,100);
			if(Number(wdt)>0 && (frm!="none" || frm!='')) {
			  	rectc.setAttribute('stroke', frm);
			  	rectc.setAttribute('stroke-width',wdt);
				}
//			if(back!="none" || back!='') rectc.setAttribute('fill',back)
			svg_a.appendChild(rectc);

next_icon.onclick = function(){
//svg_00領域をclearする
        				while (container.lastElementChild) {
console.log('**lastChild nodename= ',container.lastElementChild.nodeName);
						if(container.lastElementChild.nodeName!='defs'){
            						container.removeChild(container.lastElementChild);
							}
						}
	icon_regist='';
//	disp_yn_check();
	document.getElementById("icon_area").click();
	}

cancel_icon.onclick = function(){
//cancelの場合　symbol(id)と最後のuse_iconを削除する
					var canv=document.getElementById('mesh_canv');
					var last_symb=canv.querySelectorAll('symbol');
					last_symb[last_symb.length-1].remove();
					var icons=document.getElementById('use_icon');
console.log('delete last_one icons=',icons);
					icons.lastElementChild.remove();
				icon_regist='';
//				disp_yn_check();
	document.getElementById("icon_area").click();
	}

export_symbols.onclick = function(){
//function export_symbols() {
console.log("***Enter export");
	var canv=document.getElementById("mesh_canv");
console.log('canv=',canv);
//	icons=canv.queryselectorAll('symbol');
	var tag_icons=canv.getElementsByTagName('symbol');
console.log('symbols=',tag_icons);
	var use_tag=document.getElementById("use_icon");
console.log('use_icon=',use_tag);

svg_tag='<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'+'\n';
console.log('outerHTML=',svg_tag);
console.log('**icons length=',tag_icons.length);
	for (nn = 0; nn < tag_icons.length; nn++) {
console.log('icon id=',tag_icons[nn].id,document.getElementById(tag_icons[nn].id));
		var tagn=document.getElementById(tag_icons[nn].id).cloneNode(true);
		svg_tag=svg_tag+tagn.outerHTML+'\n';
		}
	svg_tag=svg_tag+use_tag.outerHTML;
	svg_tag=svg_tag+'</svg>';
console.log('***svg_tag length = ', svg_tag.length);	
console.log('svg_tag=',svg_tag);
//for デモバージョン
	if(((for_cloud=='yes') || (for_demo=='yes')) && (svg_tag.length > 10000)) {
		alert('Download symbols is too large this Demo version!');
		return;
		}

let blob = new Blob([svg_tag],{type:"svg"});
	let link = document.createElement('a');
	link.href = URL.createObjectURL(blob);
	link.download = 'symbol_files.svg';
	link.click();
	if(icon_gen_dialog) $('#icon_generate').dialog("close");
	icon_gen_dialog=0;
    }

export_icon.onclick = function(){
//function export_icon() {
console.log("***Enter export_icon");
var box='viewBox='+'"'+'0 0 '+`${box_size}`+' '+`${box_size}`+'"';
var view_size="width="+'"'+`${box_size}`+'"'+" height="+'"'+`${box_size}`+'" '+box+' ';
console.log('view=',view_size);
	var canv=document.getElementById("mesh_canv");
	var tag_icons=canv.getElementsByTagName('symbol');
console.log('symbols=',tag_icons);
	var paths=tag_icons[tag_icons.length-1].getElementsByTagName('path');

var waku=document.createElementNS('http://www.w3.org/2000/svg','rect');
	waku.setAttribute('x',0);
	waku.setAttribute('y',0);
	waku.setAttribute('width',box_size);
	waku.setAttribute('height',box_size);
	　var back=$("#icon_back").val();
//	  waku.setAttribute('fill',back)
	  var wdt=$("#icon_width").val();
	  var frm=$("#icon_frame").val();
	  if(Number(wdt)>0 && frm!="none") {
	  	waku.setAttribute('stroke', frm);
	  	waku.setAttribute('stroke-width',wdt);
		}
console.log('waku=',waku);
	svg_tag='<svg version="1.1" '+view_size+' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">'+'\n';
//	svg_tag=svg_tag+waku.outerHTML+'\n';
console.log('outerHTML=',svg_tag);
console.log('**icons paths=',paths.length);
	for (nn = 0; nn < paths.length; nn++) {
//console.log('icon paths=',paths[nn]);
		var tagn=paths[nn].cloneNode(true);
console.log('style width=',tagn.style.strokeWidth);
		var width=tagn.style.strokeWidth;
		if(width && Number(width)<5) tagn.style.strokeWidth="5";
		svg_tag=svg_tag+tagn.outerHTML+'\n';
		}
	svg_tag=svg_tag+'</svg>';

console.log('***svg_tag length = ', svg_tag.length);
console.log('svg_tag=',svg_tag);
//for デモバージョン
	if(((for_cloud=='yes') || (for_demo=='yes')) && (svg_tag.length > 10000)) {
		alert('Download svg is too large this Demo version!');
		return;
		}

let blob = new Blob([svg_tag],{type:"svg"});
	let link = document.createElement('a');
	link.href = URL.createObjectURL(blob);
	link.download = 'icon_file.svg';
	link.click();
//	if(icon_gen_dialog) $('#icon_generate').dialog("close");
//	icon_gen_dialog=0;
    }

add_more.onclick = function(){
console.log('***sub animation');
	var theDialog=$( '#more_anime' ) . dialog( { autoOpen: false, draggable: true, resizable: true,
		height:260, width: 420,  position: {my: "right bottom", at: "right top", of: window}} );
	//ダイアログを表示する
	subanimation_dialog=1;
	add_more_type();
//	set_gradpallet();
	theDialog.dialog("open");
	}

$('#more_anime').on('dialogclose', function(event) {
console.log('subAnimation Dialog closed');
	subanimation_dialog=0;
	});

function set_gradpallet() {
//console.log('set gradpallet ',sel,pal);
	var pal_tag=document.getElementById('grad_pallet');
	var cx=10;
	var cy=100;
	var w=40;
	var h=20;
	for(let k=0; k<5;k++){
	  let rect=createRectFig(cx,cy,w,h);
	  rect.setAttribute('stroke', 'blue');
	  rect.setAttribute('stroke-width', '1');
	  cx=cx+50;

//c.setAttributeNS(null,'id',sel[k][1]);
	  //if(sel[k][4]=="none") c.setAttributeNS(null,'fill','#ffffff');
          //else c.setAttributeNS(null,'fill',sel[k][4]);
	  //rect.setAttribute('stroke', 'green');
	  //rect.setAttribute('stroke-width', '1');
	  pal_tag.append(rect);
//console.log('grad pallet draw');
	  }
    }

function add_more_type() {
//元dialogでのamine_tagを設定していない場合　last_anime_node==""の場合
	former_anime_tag="";
	if(Drag_elem) last_anime_node=Drag_elem;
	var rect=last_anime_node.getBoundingClientRect();
console.log('rect=',rect);
//	getrect_shape(rect_node);
//console.log('shape center=',drag.center_x,drag.center_y)

var center_x=Math.round(Number((rect.left+rect.width/2)*10)/10);
	var center_y=Math.round(Number((rect.top+rect.height/2)*10)/10);
console.log('center=',center_x,center_y);

console.log('anime_type selected num=',anime_tp.selectedIndex);
    	switch (more_tp.selectedIndex){
      		case 0:
			more_anime_type=0;
			document.getElementById('more_key_time').value="0;0.5;1";
			var parm1=String(-100)+',0';
			var parm2=String(100)+',0';
			document.getElementById('more_key_value').value=parm1+';'+parm2+';'+parm1;
			break;
      		case 1:
			more_anime_type=1;
			document.getElementById('more_key_time').value="0;1";
			var parm=String(center_x)+','+String(center_y);
			document.getElementById('more_key_value').value='0 '+parm+';'+'360 '+parm;
			break;
      		case 2:
			more_anime_type=2;
			color_val='';
			document.getElementById('more_key_time').value="";
			document.getElementById('more_key_value').value="";
			break;
		}
	}

more_animation.onclick = function(){
console.log('Enter set_more_animation last_anime=',last_anime_node);
//最初にｇタグ下のtextタグを取り出して、その下にある<span>タグを取り出して置く
	var anim_durtime=$("#time_more").val();
	var anim_start=$("#time_morebegin").val();
	var more_time=$(more_key_time).val();
console.log('anime dur_time,start_time=',anim_durtime,anim_start);
	if(anim_durtime<=0.1) {
		alert('set animate time not right');
		return;
		}

if(anim_durtime>0) {
/*
		var my_anime=last_anime_node.getAttribute('fig','anime_top');
		if(!my_anime){
			my_anime = document.createElementNS('http://www.w3.org/2000/svg', 'g');
			my_anime.setAttribute('fig','anime_top');
			fig_id='g'+(Date.now()).toString();
			my_anime.setAttribute('id', fig_id);
console.log('anime_top fig_id=',fig_id);
			container.appendChild(my_anime);
console.log('added to container=',container);
			}
*/
		}

if(Drag_elem) last_anime_node=Drag_elem;

if(more_anime_type==0 || more_anime_type==1) {
		var anime_node = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
		}
	else {
		var anime_node = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
		}

var anime_group= document.createElementNS('http://www.w3.org/2000/svg', 'g');
	anime_group.setAttribute('fig', "anime");
	fig_id='g'+(Date.now()).toString();
	anime_group.setAttribute('id', fig_id);
console.log('new fig_id=',fig_id);

var value=document.getElementById('more_key_value').value;
console.log('color_val,value=',value,color_val);
	anime_node.setAttribute('attributeType', "XML");
	anime_node.setAttribute('repeatCount', "indefinite");
//	anime_node.setAttribute('calcMode', "linear");
	anime_node.setAttribute('dur', String(anim_durtime));
//	anime_node.setAttribute('begin', String(anim_start));

console.log('more type=',more_anime_type);
	if(more_anime_type==0 || more_anime_type==1) {
		anime_node.setAttribute('attributeName', "transform");
		if(more_anime_type==0) anime_node.setAttribute('type', "translate");
		else anime_node.setAttribute('type', "rotate");
		anime_node.setAttribute('values',value);
		anime_node.setAttribute('keyTimes',more_time);
		if(last_anime_node) {
			var node_id=last_anime_node.getAttribute('id');
			var node=document.getElementById(node_id);
console.log('move node=',node);
			anime_group.appendChild(node);
			}
		anime_group.appendChild(anime_node);
		}
	if(more_anime_type==2) {
		anime_node.setAttribute('attributeName', "fill");
console.log('222color_val,value=',value,color_val);
		anime_node.setAttribute('values',value);
		var pnode=last_anime_node.querySelector('path');
console.log('path_node=',pnode);
		pnode.appendChild(anime_node);
		anime_group.appendChild(last_anime_node);
		}
	container.appendChild(anime_group);
	last_anime_node=anime_group;
console.log('set last_anime_node=',last_anime_node);
	}

p_disp_on.onclick= function(){
//   function p_disp_onoff(v_path){
console.log('**display on/off called');
	var disp_path_id=document.getElementById('animPath').value;
	var disp_path=document.getElementById(disp_path_id);
console.log('disp_path=',disp_path);
//	v_path = (typeof v_path !== 'undefined') ?  v_path : Drag_elem;
//	var disp_path=v_path;

var styl=disp_path.getAttribute('style');            //style指定必要な場合
	var sty_char=[];
	if(styl!=null) sty_char=styl.split(';');
console.log(sty_char)
	styl="";
	var path_disp_on_off=1;
	if(sty_char.length>0) {
		let splt=sty_char[0].split(':');
		if(splt[1]=='none') path_disp_on_off=0;
		}
console.log('style=',sty_char,'disp_on=',path_disp_on_off);

if(path_disp_on_off) {
		styl=styl+'display:none;'; 
		path_disp_on_off=0;
		document.getElementById('p_disp_on').value="disp_on";
		}
	else {
		styl=styl+'display:block;';
		path_disp_on_off=1;
		document.getElementById('p_disp_on').value="disp_off";
		}
	disp_path.setAttribute('style', styl);
    }

start_anime.onclick = function(){
console.log('start_animeが押されました');
	fgedit.selectedIndex=3;
	chng_mode();
	fgedit.selectedIndex=2;
	chng_mode();
      }

function select_anime_tag() {
console.log('Check tags Tags No.=',select_mend_node,svg_mend_tags);
	var mend_tag=svg_mend_tags[select_mend_node]; 
console.log('mend_tag=',mend_tag);

var node_type=check_animetype(mend_tag);
console.log('anime_type=',node_type);
	document.getElementById('anim_tag_num').value=String(select_mend_node+1);
	switch (node_type){
		case "path_along_g":
			document.getElementById('mend_time_figanime').value=mend_tag.getAttribute('dur');
			document.getElementById('mend_time_figbegin').value=mend_tag.getAttribute('begin');
			document.getElementById('mend_key_time').value=mend_tag.getAttribute('keyTimes');
			document.getElementById('mend_key_value').value=mend_tag.getAttribute('keyPoints');
			var parent=mend_tag.parentNode;
			var svg_node=(parent.getAttribute('xlink:href')).slice(1);
			svg_edit_node=document.getElementById(svg_node);
			var rect_a=svg_edit_node.getBoundingClientRect();
			var w=rect_a.right-rect_a.left;
			var h=rect_a.bottom-rect_a.top;
			var pnt2=svgPoint(svg_edit_node, rect_a.left, rect_a.top);
			rect01=createRectFig(pnt2.x,pnt2.y,w,h);
//			rect01.setAttribute('id', 'rect01');
			rect01.setAttribute('fig', 'temp');
			svg_edit_node.appendChild(rect01);
			former_parent=svg_edit_node;
			break;
		case "path_along_tx":
		case "one-stroke":
		case "draw_hide":
		case "path_deform":
		case "translate":
		case "rotate":
		case "gradation":
			document.getElementById('mend_time_figanime').value=mend_tag.getAttribute('dur');
			document.getElementById('mend_time_figbegin').value=mend_tag.getAttribute('begin');
			document.getElementById('mend_key_time').value=mend_tag.getAttribute('keyTimes');
			document.getElementById('mend_key_value').value=mend_tag.getAttribute('values');
			var parent=mend_tag.parentNode;
			var rect_a=parent.parentNode.getBoundingClientRect();
			var w=rect_a.right-rect_a.left;
			var h=rect_a.bottom-rect_a.top;
			var pnt2=svgPoint(parent.parentNode, rect_a.left, rect_a.top);
			var rect01=createRectFig(pnt2.x,pnt2.y,w,h);
//			rect01.setAttribute('id', 'rect01');
			rect01.setAttribute('fig', 'temp');
			//Drag_elem.appendChild(rect01);
			//former_parent=Drag_elem;
			former_parent=parent;
			break;
		}
	}

function former_animetype() {
	var mend_tag=Drag_elem.querySelector('animate,animateMotion,animateTransform');
	var parent=mend_tag.parentNode;
	var attr=mend_tag.getAttribute('attributeName');

if(parent.nodeName=='use')  {                       //animateMotion and <g> along the pass
		var tagn=parent.querySelector('mpath');
		var svg_node=(tagn.getAttribute('xlink:href')).slice(1);
		return type;
		}
	if(parent.nodeName=='textPath') {                        //animate and <text> along the pass
		var svg_node=(parent.getAttribute('href')).slice(1);
		return type;
		}
	}

function check_animetype(mend_tag) {
	var type="";
	var parent=mend_tag.parentNode;
	var attr=mend_tag.getAttribute('attributeName');

if(parent.nodeName=='use')  {                       //animateMotion and <g> along the pass
		document.getElementById('mend_anime_type').value="go along the path";
		type="path_along_g";
		return type;
		}
	if(parent.nodeName=='textPath') {                        //animate and <text> along the pass
		document.getElementById('mend_anime_type').value="go along the path";
		type="path_along_tx";
		return type;
		}
	if(mend_tag.nodeName=='animate' && attr=="d") {        //animate attributeName="d" deform
		document.getElementById('mend_anime_type').value="path deformation";
		type="path_deform";
		return type;
		}		
	if(mend_tag.nodeName=='animate' && attr=="fill") {        //animate 	gradation
		document.getElementById('mend_anime_type').value="gradation";
		type="gradation";
		return type;
		}
	if(mend_tag.nodeName=='animate' && attr=="stroke-dashoffset") {        
		var mask_tag=parent.querySelector('mask');
		if(mask_tag) {						//draw and hide	
			document.getElementById('mend_anime_type').value="draw and hide";
			type="draw_hide";
			return type;
			}	  
		else { 								//animate maskを含まないone-stroke-write
			document.getElementById('mend_anime_type').value="one-stroke writing";
			type="one-stroke";
			return type;
			}
		}
	if(mend_tag.nodeName=="animateTransform") {        //animateTansform   transform
		var attr_type=mend_tag.getAttribute('type');
		if(mend_tag.nodeName=='animate' && attr_type=="rotate") {  //animateTansform   transform and rotate
			document.getElementById('mend_anime_type').value="rotate";
			type="rotate";
			return type;
			}	  		    
		else { 								//animate maskを含まないone-stroke-write
			document.getElementById('mend_anime_type').value="translate";
			type="translate";
			return type;
			}
		}
	return type;
	}

modify_parms.onclick=function() {
console.log('Enter to modify parms mend tags No.=',select_mend_node,svg_mend_tags);
	var mend_tag=svg_mend_tags[select_mend_node]; 
console.log('mend_tag and Drag_elem=',mend_tag,Drag_elem);

var node_type=check_animetype(mend_tag);
console.log('anime_type=',node_type);
	document.getElementById('anim_tag_num').value=String(select_mend_node+1);
	switch (node_type){
		case "path_along_g":
			mend_tag.setAttribute('dur',document.getElementById('mend_time_figanime').value);
			var begin=document.getElementById('mend_time_figbegin').value;
			if(begin) mend_tag.setAttribute('begin',begin);
			else mend_tag.removeAttribute('begin');
			mend_tag.setAttribute('keyTimes',document.getElementById('mend_key_time').value);
			var value=document.getElementById('mend_key_value').value;
			if(value) mend_tag.setAttribute('keyPoints',value);
			else mend_tag.removeAttribute('keyPoints');
			break;
		case "path_deform":
			mend_tag.setAttribute('dur',document.getElementById('mend_time_figanime').value);
			var begin=document.getElementById('time_figbegin').value;
			if(begin) mend_tag.setAttribute('begin',begin);
			else mend_tag.removeAttribute('begin');
			break;
		case "path_along_tx":
		case "one-stroke":
		case "draw_hide":
		case "translate":
		case "rotate":
		case "gradation":
			var dura=document.getElementById('mend_time_figanime').value;
			if(dura) mend_tag.setAttribute('dur',dura);
			var begin=document.getElementById('mend_time_figbegin').value;
			if(begin) mend_tag.setAttribute('begin',begin);
			else mend_tag.removeAttribute('begin');
			var times=document.getElementById('mend_key_time').value;
			if(times) mend_tag.setAttribute('keyTimes',times);
			var value=document.getElementById('mend_key_value').value;
			if(value) mend_tag.setAttribute('values',value);
			break;
		}
	document.getElementById("start_anime").click();
	}

/*
   remove_all_anime.onclick = function(){
console.log('Enter remove_all_anime');
	var core_tag=Drag_elem;
	var mend_tag=null;
	var mend_tag=Drag_elem.querySelector('animate,animateMotion,animateTransform');
	while(mend_tag){
		var parent=mend_tag.parentNode;
		if(parent.nodeName=='use') {    //use idを元の位置に戻す
			var fig_id=parent.getAttribute('xlink:href');
			fig_id=fig_id.slice( 1 ) ;
			var fig_tag=document.getElementById(fig_id);
console.log('anime tag=',fig_id,fig_tag);
			fig_tag.setAttribute("transform", "translate(0,0)");
			parent.remove();
			}
		var attr_d=mend_tag.getAttribute('attributeName');
console.log('mend_tag and attributeName=',mend_tag,attr_d);
		if(mend_tag.nodeName=='animate' && attr_d=="d") {
			var def_path=parent.parentNode.parentNode.getAttribute('deform');
			if(def_path==null) def_path="";
console.log('def_path,node=',def_path,parent.parentNode.parentNode);
			var pathes=def_path.split(',');
console.log('pathes=',pathes);
			for(let k=0;k<pathes.length;k++) {
				if(pathes[k]) {
					var path_tag=document.getElementById(pathes[k]);
					path_tag.style.display="block";
					}
				}
			parent.parentNode.parentNode.remove();
			}
		else {
			var mask_tag=parent.querySelector('mask');
			if(mask_tag) {
				mask_tag.remove();
				var path_tag=parent.querySelector('path');
				if(path_tag) path_tag.removeAttribute("mask");
				}
  			mend_tag.remove();
			mend_tag=parent.querySelector('animate,animateMotion,animateTransform');
console.log('tag in parent=',mend_tag,parent);
			if(mend_tag==null) {
				var fig=parent.getAttribute('fig');
console.log('parent and Drag=',parent,Drag_elem);
				if(fig=='anime' && parent!=Drag_elem) {
					var grand=parent.parentNode;
					var old_transf=grand.getAttribute('transform');
					if(old_transf==null) old_transf="";
					var len=parent.childNodes.length;
					for(let k=len;k>0;k--) {
						var tagn=parent.childNodes[k-1];
						var add_transf=tagn.getAttribute('transform');
						if(add_transf==null) add_transf="";
						var transf=old_transf+add_transf;
						if(transf) tagn.setAttribute("transform",transf);
console.log('move_tag=',tagn);
						$(tagn).insertAfter(parent);
						}
					parent.remove();
console.log('parent removed');
					}
				}
			}
		var mend_tag=Drag_elem.querySelector('animate,animateMotion,animateTransform');
console.log('animeNode and Drag_elem=',mend_tag,Drag_elem);
		}
	var rect=former_parent.querySelector('rect');
	if(rect) rect.remove();
	var fig=Drag_elem.getAttribute('fig');
	var old_transf=Drag_elem.getAttribute('transform');
	if(old_transf==null) old_transf="";
console.log('Drag=',Drag_elem);
	if(fig=='anime' || fig=='anime_top') {
		var len=Drag_elem.childNodes.length;
		for(let k=len;k>0;k--) {
			var tagn=Drag_elem.childNodes[k-1];
			var add_transf=tagn.getAttribute('transform');
			if(add_transf==null) add_transf="";
			var transf=old_transf+add_transf;
			if(transf) tagn.setAttribute("transform",transf);
console.log('move_tag=',tagn);
			$(tagn).insertAfter(Drag_elem);
			}
		Drag_elem.remove();
		}
console.log('Drag_elem removed');
	}

remove_one_anime.onclick = function() {
console.log('Check tags Tags No.=',select_mend_node,svg_mend_tags);
	var mend_tag=svg_mend_tags[select_mend_node]; 
console.log('mend_tag=',mend_tag);

$("#svg_tag_next").on("click", function(){
console.log('Nextが押されました');
	var max_num=svg_mend_tags.length;

var nn=select_mend_node+1;
console.log('now select max_num nn=',select_mend_node,max_num,nn);
	if(nn<max_num) {
		select_mend_node=nn;
		var rect=former_parent.querySelector('rect');
		if(rect) rect.remove();
console.log('before select_anime_tag=',select_mend_node);
		select_anime_tag();
console.log('after select_anime_tag=',select_mend_node);
		}
	});

$("#svg_tag_back").on("click", function(){
console.log('Backが押されました');
	var max_num=svg_mend_tags.length;

var nn=select_mend_node-1;
console.log('now select max_num nn=',select_mend_node,max_num,nn);
	if(nn>=0) {
		select_mend_node=nn;
		var rect=former_parent.querySelector('rect');
		if(rect) rect.remove();
console.log('before select_anime_tag=',select_mend_node);
		select_anime_tag();
console.log('after select_anime_tag=',select_mend_node);
		}
	});

function Cubic_interpol(pts,p_type,controle){
   var iLen= pts.length;
   var cubics=[];
   var sn=[];
   var vn=[];
   var wn=[];

for ( var i = 0;  i < iLen ; i++ ){
	pts[i].x=Number(pts[i].x);
	pts[i].y=Number(pts[i].y);
	sn[i]=[0,0];
	vn[i]=[0,0];
	wn[i]=[0,0];
	}
console.log('Enter Cubic inter controle and points=',controle,pts);
//slope vector の作成   pts[i]からpts[i-1]→pts[i+1]の方向(snは終点のベクトル（始点＋方向成分）
   for ( var i = 1;  i < iLen-1 ; i++ ){
	sn[i][0]=pts[i].x+pts[i+1].x-pts[i-1].x;
	sn[i][1]=pts[i].y+pts[i+1].y-pts[i-1].y;
	}

if (controle=='close_smooth') {
	sn[iLen-1][0]=pts[iLen-1].x+pts[1].x-pts[iLen-2].x;
	sn[iLen-1][1]=pts[iLen-1].y+pts[1].y-pts[iLen-2].y;

sn[0][0]=pts[0].x+pts[1].x-pts[iLen-2].x;
	sn[0][1]=pts[0].y+pts[1].y-pts[iLen-2].y;
//console.log('smooth close [0] [iLen-1]=',sn[0],sn[iLen-1]);
	}

else{
	sn[0][0]=pts[0].x+pts[1].x-pts[0].x;
	sn[0][1]=pts[0].y+pts[1].y-pts[0].y;

sn[iLen-1][0]=pts[iLen-1].x+pts[iLen-2].x-pts[iLen-1].x;
	sn[iLen-1][1]=pts[iLen-1].y+pts[iLen-2].y-pts[iLen-1].y;
/*
var drawPoint=[];
var x0,y0,x1,x2;
drawPoint.push({x: pts[iLen-1].x,y: pts[iLen-1].y});
drawPoint.push({x: sn[iLen-1][0],y: sn[iLen-1][1]});
bezier_line=createPath(drawPoint,0);
Object.assign(bezier_line.style, tempoPathStyle);
container.appendChild(bezier_line);
*/
     }

var drawPoint=[];
var x0,y0,x1,x2;
   for ( var i = 0; i < iLen-1 ; i++ ){
/*
drawPoint.push({x: pts[i].x,y: pts[i].y});
drawPoint.push({x: sn[i][0],y: sn[i][1]});
console.log(drawPoint);
bezier_line=createPath(drawPoint,0);
Object.assign(bezier_line.style, tempoPathStyle);
container.appendChild(bezier_line);
drawPoint=[];
*/
	var vn0x=(2*pts[i].x+pts[i+1].x)/3;
	var vn0y=(2*pts[i].y+pts[i+1].y)/3;
	var vnx=vn0x-(pts[i+1].y-pts[i].y);
	var vny=vn0y+(pts[i+1].x-pts[i].x);

for ( var i = 0; i < iLen-1 ; i++ ){
	pts[i].x=Math.round(pts[i].x*100)/100;
	pts[i].y=Math.round(pts[i].y*100)/100;
	cubics.push({x: pts[i].x,y: pts[i].y});
	vn[i][0]=Math.round(vn[i][0]*100)/100;
	vn[i][1]=Math.round(vn[i][1]*100)/100;
	cubics.push({x: vn[i][0],y: vn[i][1]});
	wn[i][0]=Math.round(wn[i][0]*100)/100;
	wn[i][1]=Math.round(wn[i][1]*100)/100;
	cubics.push({x: wn[i][0],y: wn[i][1]});
	}

pts[iLen-1].x=Math.round(pts[iLen-1].x*100)/100;
   pts[iLen-1].y=Math.round(pts[iLen-1].y*100)/100;
   cubics.push({x: pts[iLen-1].x,y: pts[iLen-1].y});
//console.log('Cubics=',cubics);
   return cubics;
}  //End of Cubic_interpol
var path_p=Cubic_interpol(drawingPoints,drawingPtype,control.value);

//
//Chain Svgの展開
//
      cnsvg_tags=svgtag_decompose(header_term[5],header_term[6]);
      cnsvg_nums=cnsvg_tags.length;
//console.log('tags leng=',cnsvg_tags.length,cnsvg_tags);
//CnSvg(複数個所の読み込みと展開
//console.log('*Start set cnsvg tag leng=',cnsvg_tags.length);
	for(var i=0;i<cnsvg_tags.length;i++) {
		var tagn=cnsvg_tags[i].name;
		get_cnsvg(cnsvg_tags[i].pk)
		cnsvg_tags[i].head=wfcn_header;
		var svg_div=document.getElementById('div'+tagn);
    		var oya = svg_div.parentNode;
    		var dumy=document.getElementById('chain');
    		var newsvg=dumy.cloneNode(true);
    		newsvg.setAttribute('id', tagn);
    		newsvg.setAttribute('style', 'display:block;');
//console.log(newsvg,svg_div);
		var rect=createRectFig(0,0,20,20);
		rect.setAttribute('class', 'chain_svg_mark');
		rect.setAttribute('stroke', 'blue');
		rect.setAttribute('stroke-width', '1');
		rect.setAttribute('fill', 'blue');
		newsvg.appendChild(rect);
//		cnsvg_field=unescapeHtml(unescape(cnsvg_field));
		cnsvg_field=unescape(cnsvg_field);
//console.log(cnsvg_field,svg_div,oya);
    		oya.insertBefore(newsvg,svg_div);
//console.log('expand chain_svg');
		expand_svg(cnsvg_field,tagn);
//console.log(cnsvg_field,svg_div,oya);
		svg_tag_add(tagn)
		}
//console.log('cnsvg tags leng=',cnsvg_tags.length,cnsvg_tags);

//
//Top Svgの展開と表示
//
      var first_child = first_container.firstChild ;
      var dumy=document.getElementById('chain');
      var newsvg=dumy.cloneNode(true);
      newsvg.setAttribute('id', 'svg_00');
      newsvg.setAttribute('style', 'display:block;');
	var rect=createRectFig(0,0,20,20);
	rect.setAttribute('class', 'chain_svg_mark');
	rect.setAttribute('stroke', 'blue');
	rect.setAttribute('stroke-width', '1');
	rect.setAttribute('fill', 'blue');
	newsvg.appendChild(rect);
      first_container.insertBefore(newsvg,first_child);

org_container = document.getElementById('svg_00');
//containerは下記expand_svgnの中でsvg_00中のg01を設定
//console.log('expand top_svg leng=',svg_tex.length);
      expand_svg(svg_tex,'svg_00');
console.log('after expand svg_00=',org_container);
      set_svg(svg_now);
console.log('after set_svg svg_00=',org_container);

console.log('***Enter to Save confirm19 ***');
	var text_to_serv;
	var svg_tag;
//Saveの順番は①最初にChain_CnSvgが最初でその後②本体HTML（含む本体SVG（svg_00)のsaveとする
//CnSvgのsaveはcnsvg_tagで分かる
console.log('**Save CnSvg Enter leng=',cnsvg_tags.length,cnsvg_tags);
		for(var i=0;i<cnsvg_tags.length;i++){
			svg_tag=fold_svg(cnsvg_tags[i].name);
console.log('each cnsvg lenth=',svg_tag.length,svg_tag,'head=',cnsvg_tags[i].head);
			save_cnsvg(cnsvg_tags[i].head,svg_tag);
			}
		my_confirm(8);

var tags_header=cntags_compose();
		overview_term[8]=set_doc_parms();
		my_overview=compose_overview(overview_term[0],overview_term[1],overview_term[2],overview_term[3],overview_term);

console.log('my_header=',my_header);
//console.log('text_to_serv=',tex_to_serv);
console.log('svg=',svg_tag);
console.log('cnsvg_nums,cnsvg_header=',cnsvg_nums,tags_header);
console.log('my_overview=',my_overview);
//console.log('svg_tag',svg_tag);
//console.log('at save demo='+for_demo,' text=',String(tex_to_serv.length),' svg=',String(svg_tag.length));
	if((for_demo=='yes') && ((svg_tag.length > 30000) || (tex_to_serv.length > 30000)) ) {
		alert('保存できません。Cant Save Document! too large in this Demo version');
		}
	else {

$.ajax({
            		url: "/db_serv/update/",
            		async:true,
			type: "POST",
            		data: {
				"description":tex_to_serv,
				"my_header":my_header,
				"my_overview":my_overview,
				"cnsvg_nums":cnsvg_nums,
				"cnsvg_header":tags_header,
				"svg":svg_tag,
				},
            		dataType: 'json'
        		})
        	.done((data) => {
            		//結果が帰ってきたら、表示します。
//console.log('**Doc really saved Ajax Returned result=',data);
        		});
alert('保存されました。document saved!!');
		}

//    var tags_header=cntags_compose();
//    update_head(header_term[0],String(cnsvg_nums),tags_header);
//console.log('My_Data mend nk=',header_term[0],String(cnsvg_nums),tags_header);
	Popcheck=0;
//console.log('***End of confirm19 ***');

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Note</title>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <link href="/static/css/lib/font-awesome.min.css" rel="stylesheet" />
  
  <link rel="stylesheet" href="/static/css/lib/bootstrap.min.css">
  <script src="/static/js/lib/jquery.min.js"></script>
  <script src="/static/js/lib/bootstrap.min.js"></script>
  
  <link rel="stylesheet" href="/static/css/lib/jquery-ui.css">
  <script src="/static/js/lib/jquery.min.js"></script>
  <script src="/static/js/lib/jquery-ui.min.js"></script>

  <script src="/static/js/lib/html2canvas.min.js"></script>
  <script src="/static/js/lib/dom-to-image.min.js"></script>
<link rel="stylesheet" href="/static/css/lib/jquery.bxslider.css">
<script src="/static/js/lib/jquery.bxslider.min.js"></script>
</head>
<style>
</style>
<body class="point_auto select_auto" style="font-size: 14px; line-height: 1.42857143;">
<div id="sys_temp" style="display:none;"></div>
        <svg id="mesh_canv" class="canv" width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg" >
	    <defs>
	      <marker id="start_arw" viewBox="-10 -3 10 6" refX="-10" refY="0" markerWidth="10" markerHeight="6" orient="auto">
	        <path d="M -10 0 L 0 -3 L 0 3 Z"/>
	      </marker>
	      <marker id="end_arw" viewBox="0 -3 10 6" refX="10" refY="0" markerWidth="10" markerHeight="6" orient="auto">
	        <path d="M 0 -3 L 0 3 L 10 0 Z"/>
	      </marker>
	    </defs>
	</svg>
<script>
$(function () {
  $('#my_nav_togl').on('click', function () {        // js-btnクラスをクリックすると、
//console.log('click');
	$('li.my_nav').slideToggle();  // こちらがOK
  })
});

document.addEventListener('DOMContentLoaded', () => {
  const entryContent = document.querySelector('.entry-content');
  const tvis = document.querySelector('.Tvis');
  if (!entryContent || !tvis) return;          // Tvis が無ければ何もしない

const dispLeng = Math.max(540, tvis.clientHeight);
  entryContent.style.minHeight = dispLeng + 'px'; // ← height ではなく min-height
});

/*
document.addEventListener("DOMContentLoaded", function() {
    let entryContent = document.querySelector(".entry-content");
    let tvisElement = document.querySelector(".Tvis"); // Tvisをクラスとして取得
    
    console.log('Enter entry-content=', entryContent);
    
    if (tvisElement) {
        console.log('Tvis found:', tvisElement);
        console.log('Tvis clientHeight=', tvisElement.clientHeight);
	var disp_leng=540;
	if(tvisElement.clientHeight>disp_leng) disp_leng=tvisElement.clientHeight;
        entryContent.style.height = disp_leng + "px";  // 高さを設定
    } else {
        console.log('Tvis not found');
    }
    console.log('length=', disp_leng);
});
*/

var set_disponoff_dialog=0;
var disp_target_no=0;
//var my_disp_onoff=["sw_01,target_01,none","sw_02,target_02,block"];
var my_disp_onoff=[];
var my_disp_now=[];

// クリックイベントハンドラ
function click_event_disp_onoff_handler(e) {
	var cl_elem=e.srcElement;
	var cl_id=cl_elem.getAttribute("id");
	if(!cl_id) {
		var cl_elem=e.srcElement.closest("g");
		var cl_id=cl_elem.getAttribute("id");
		if(!cl_id) {
			alert('tag not have id');
			return;
			}
		}
console.log('target clicked=',cl_elem,cl_id);
	var len=my_disp_onoff.length;

my_disp_now=[];
	for(let k=0;k<len;k++) {
		var disp_d=my_disp_onoff[k].split(',');
		my_disp_now.push(disp_d);
		}
console.log('my_disp array=',my_disp_now);

for(let k=0;k<len;k++) {
		if(my_disp_now[k][0]==cl_id) {
			var elem=document.getElementById(my_disp_now[k][1]);
			var now=elem.style.display;
			if(now=='none' ) elem.style.display='block';
			else elem.style.display='none';
			break;
			}
	}
}

function init_set_disponoff() {
console.log('Enter to initial disp_onoff');
	var len=my_disp_onoff.length;
	my_disp_now=[];
	for(let k=0;k<len;k++) {
		var disp_d=my_disp_onoff[k].split(',');
		my_disp_now.push(disp_d);
		}

for(let k=0;k<len;k++) {
		var elem=document.getElementById(my_disp_now[k][1]);
		var now=my_disp_now[k][2];
		if(now=='none' ) elem.style.display='none';
		else elem.style.display='block';
console.log('my_disp array=',my_disp_now[k],elem);
		}
	}

var doc_script="";
var my_overview="";
window.onload = function() {

$(document).ready(function(){
            jQuery('.slider_001').bxSlider({
                auto: true,
                pause: 5000, // 画像がスライドするスピード
                slideWidth: 500, // 画像の横幅
            });
        });

// disp_onoff クリックイベントハンドラの設定とinitial状態を設定
const tgts = document.querySelectorAll("[type='disp_onoff']");
for (let tgt of tgts) {
console.log('disp_onoff target setted',tgt);
  tgt.onclick = (e) => { click_event_disp_onoff_handler(e); }
	}

init_set_disponoff();

//2024.9.6 get original doc_script 
	var exst_tex=document.getElementById('texx');
console.log('exst_tex=',exst_tex);
	var styl_char=document.getElementById('style_def');
	var style=document.querySelector('style');
	style.innerText=styl_char.innerHTML;
	styl_char.remove();

var exst_tex2=(exst_tex.innerHTML).split('|<===>|');
console.log('exst_tex2=',exst_tex2);
//	var scr=exst_tex2[1].split('|<==>|');
//console.log('source=',scr);
	//scr[2].replace('<br />',' ');
	//applyCustomCss(scr[3]);
	
	exst_tex.innerHtml=exst_tex2[0];
}

function user_script_page_b(){
console.log('Enter to user_script');
	if(doc_script) {
		//doc_script=doc_script.replace('|<=>|', '|<==>|');
		var src=doc_script.split('|<==>|');

if(src[1]) {
			var var_script=document.createElement('textarea');
			var_script.setAttribute('id','user_page_script_b');
			var_script.setAttribute('style','display:none;');
			var_script.innerHTML=src[1];
//			document.getElementById('user_page_script_b').value=src[1];
			}
		}
	}

function user_dialog_page_b(){
console.log('Enter to user_dialog');
	if(doc_script) {
		//doc_script=doc_script.replace('|<=>|', '|<==>|');
		var src=doc_script.split('|<==>|');

if(src[0]) {
			var var_dia=document.createElement('textarea');
			var_dia.setAttribute('id','user_dialog_b');
			var_dia.setAttribute('style','display:none;');
			var_dia.innerHTML=src[0];
//			document.getElementById('user_dialog_b').value=src[0];
			}
		}
    	}

console.log('Enter to script21');
	document.getElementById("htmlfile").click();
//外部htmlfileの読み込み
　　var html_read = document.getElementById("htmlfile");
　　//ダイアログでファイルが選択された時
　　html_read.addEventListener('change',function(evt){

var file = evt.target.files;
　　	//FileReaderの作成
  　	var reader = new FileReader();
  　	//テキスト形式で読み込む
  　	reader.readAsText(file[0]);
console.log('file=',file[0],file[0].name);

//読込終了後の処理
  　	reader.onload = function(ev){
　　		var htmlText = reader.result;
//		htmlText=unescapeHtml(unescape(htmlText));
console.log('load text=',htmlText);

const domParser = new DOMParser();
　　		var testDoc = domParser.parseFromString(htmlText, 'text/html');
console.log('testDoc=',testDoc);
		var tags=testDoc.querySelector('#texx')
console.log('texx=',tags);
		var set_tag=document.getElementById('tab1');
		var del_tag=document.getElementById('texx');

//var doc_scr=document.getElementById('doc_script');
		var doc_scr=testDoc.querySelector('#doc_script');
console.log('remove doc_scr=',doc_scr);
		if(doc_scr) {
			doc_script=doc_scr.innerHTML;
			doc_scr.remove();
			}
		//var seo_phr=document.getElementById('seo_phrase');
		var seo_phr=testDoc.querySelector('#seo_phrase');
console.log('remove seo_phr=',seo_phr);
		if(seo_phr) {
			seo_phrase=seo_phr.innerHTML;
			seo_phr.remove();
			}
		var boot_script=testDoc.querySelector('#boot_script');
		if(boot_script) boot_script.remove();
		var style_def=testDoc.querySelector('#style_def');
		if(style_def) style_def.remove();

if(tags) {  //from My Note
console.log('old texx=',del_tag);
			set_tag.removeChild(del_tag);
			set_tag.appendChild(tags);
//chainsvgの設定を行う
			var terms=my_header.split('|<=>|');

cnsvg_nums=0;
			cnsvg_tags=[];
			svg_tag_del();

var all_divsvg=$("div[id^='divsvg']");
//console.log('divsvg_all=',all_divsvg);
	//新規My_CnSvgのAjaxへの設定と書き込み
    			var cn_header=cnhead_compose('0','CnSvg','False','False');
			for(let i=1;i<all_divsvg.length;i++){
				var idname=all_divsvg[i].getAttribute('id');
				var svg_name=idname.slice(3);
    				var svg_tags=fold_svg(svg_name);
				svg_tag_add(svg_name);
//console.log('idname=',idname,svg_name);
    				save_cnsvg(cn_header,svg_tags);
				cnsvg_nums++;
//console.log('cnsvg_header=',cn_header);
//My_Dtataのcnsvg_tagsへの変更処理とDBへの書き込み
    				cnsvg_tags.push({name: svg_name,pk: cnsvg_new_pk,head:wfcn_header});
//my_header、headerを作る
console.log('cnsvg_tags=',cnsvg_tags);
console.log('cnsvg_nums=',cnsvg_nums);
				}
			my_header=terms[0]+'|<=>|'+terms[1]+'|<=>|'+terms[2]+'|<=>|'+terms[3]+'|<=>|'+terms[0]+'|<=>|'+String(cnsvg_nums)+'|<=>|'+cntags_compose();
console.log('header=',my_header);

first_container=tags;
			var texxx=first_container.innerHTML;

header_term=my_header.split('|<=>|');
//console.log('header=',header_term);
			}
		else {      //from outer html
			var divsvg='div'+svg_now;
			var divsvg_tag=document.getElementById(divsvg);
console.log('divsvg=',divsvg_tag);
			tags=testDoc.body;
			var leng=tags.children.length;
			for(k=0;k<leng;k++) {
console.log('tags k=',k,tags.children[k]);
				if(tags.children[k].nodeName=='DIV') {
					divsvg_tag.appendChild(tags.children[k]);
					}
				}
			svg_tag_del();
			first_container = document.getElementById('texx');
			confirm_last2line();
console.log('first_container=',first_container);
			var svg_tags=first_container.querySelectorAll('svg.canv');
//			var svg_tags2=first_container.querySelectorAll('svg');
console.log('main svg=',svg_tags);
//console.log('include indiv=',svg_tags2);
			var rect=createRectFig(0,0,20,20);
			rect.setAttribute('class', 'chain_svg_mark');
			rect.setAttribute('stroke', 'blue');
			rect.setAttribute('stroke-width', '1');
			rect.setAttribute('fill', 'blue');
			svg_tags[0].prepend(rect);
			for(var k=1; k<svg_tags.length;k+=1){
//console.log(svg_tags[k]);
				var name=svg_tags[k].id;
				svg_tag_add(name);
//console.log('chain svg=',name);
				var rect=createRectFig(0,0,20,20);
				rect.setAttribute('class', 'chain_svg_mark');
				rect.setAttribute('stroke', 'blue');
				rect.setAttribute('stroke-width', '1');
				rect.setAttribute('fill', 'blue');
				svg_tags[k].prepend(rect);
				}
			}
	var old4=overview_term[4];
	var old5=overview_term[5];
	var over_vw=document.getElementById('over_vw001');
console.log('my_overview at import=',over_vw);
	my_overview=over_vw.innerText;
console.log('my_overview at import=',my_overview);

if(over_vw) over_vw.remove();

overview_term=my_overview.split('|<=>|');
	overview_term[4]=old4;
	overview_term[5]=old5;

if(overview_term[8]=='') {
		default_margin_L=sys_marginL;
		default_margin_R=sys_marginR;
		}
	else {
		var parms=overview_term[8].split(/;|,/);
console.log('sys parm=',parms);
		default_margin_L=parms[2];
		default_margin_R=parms[3];
		exe_auto=0;
		if(parms[5]=='auto') exe_auto=1;
		my_disp_onoff=[];
		if(parms[6]=='slider') {
			slider_pause_time=parms[7];
			slider_screen_width=parms[8];			
			}
		if(parms[9]=='disponoff') {
			k=10;
			while(parms[k] && k<parms.length) {
				var disp=parms[k]+','+parms[k+1]+','+parms[k+2];
				my_disp_onoff.push(disp);
				k=k+3;
				}
			}
console.log('set disp_onoff=',my_disp_onoff);
		}
/*
$(document).ready(function(){
            jQuery('.slider_001').bxSlider({
                auto: true,
                pause: slider_pause_time, // 画像がスライドするスピード
                slideWidth: slider_screen_width, // 画像の横幅
            });
        });
*/

init_set_disponoff();

my_overview="";
	overview_term[0]="";
	overview_term[1]="";
	overview_term[2]="";
	overview_term[3]="";
console.log('reset my_overview=',my_overview,overview_term[0]);

//		fgedit.selectedIndex=2;
//		chng_mode();
		org_container = document.getElementById('svg_00');
		svg_now='svg_00';
		set_svg(svg_now);
		save_from="html";
		}
	});

console.log('Enter to script22');
	function parse_and_set_svgfiles(svgText) {
　　		const domParser = new DOMParser();
　　		var testSVGDoc = domParser.parseFromString(svgText, 'image/svg+xml');
　　		var testparsedSVG = testSVGDoc.childNodes[0];
console.log('**import svg length=',testparsedSVG.children.length,testparsedSVG,' Node=',testparsedSVG.nodeName);

if(testparsedSVG.nodeName!='svg') {
			svgText = '<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">'
			+svgText+'</svg>';
			}
　　		const parsedSVGDoc = domParser.parseFromString(svgText, 'image/svg+xml');
　　		var parsedSVG = parsedSVGDoc.childNodes[0];   //解釈svgはすべてchildNodes[0]にある
		var gname=parsedSVG.getAttribute('class');
		if(gname='') {
    			var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    			var fig_id='g'+(Date.now()).toString();
    			group.setAttribute('id', fig_id);
    			group.setAttribute('class', 'outgroup');
    			container.appendChild(group);
    			for (let nn = 0; nn < parsedSVG.children.length; nn++) {
console.log('**import svg **nodename= ',parsedSVG.children[nn].nodeName,parsedSVG.children[nn]);
　　				group.appendChild(parsedSVG.children[nn].cloneNode(true));
				}
			}
		else {
console.log('**import svg length=',parsedSVG.children.length,parsedSVG,' Node=',parsedSVG.nodeName);
    			var group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
			if(parsedSVG.children[0].nodeName!='g' || parsedSVG.children.length>1) {
				var fig_num=Number(Date.now());
				var leng=parsedSVG.children.length;
				for (let nn = leng-1 ; nn >= 0; nn--) {
console.log('**import svg **nodename nn=',nn,parsedSVG.children[nn].nodeName,parsedSVG.children[nn]);
	    				var fig_id='g'+(fig_num+nn).toString();
	    				parsedSVG.children[nn].setAttribute('id', fig_id);
　　					group.prepend(parsedSVG.children[nn]);
					}
				}
			else {
				group=parsedSVG.children[0];
				}
    			var fig_id='g'+(Date.now()).toString();
    			group.setAttribute('id', fig_id);
    			group.setAttribute('class', 'outgroup');
    			container.appendChild(group);
console.log('**import apend svg group=',group);
			}
	}

function exe_page_script_next(s_name="",my_tag="",from_tag=""){
  	var script_val=$("#user_page_script").val();
console.log('Enter exe_page_script script=',script_val);
	var dialog_val=$("#user_dialog").val();
//console.log('dialog=',dialog_val);
	var css_val=$("#user_css").val();
//console.log('css=',css_val);
	if(css_val=='') doc_script=dialog_val+'|<==>|'+script_val;
	else doc_script=dialog_val+'|<==>|'+script_val+'|<==>|'+css_val;
console.log('doc_script=',doc_script);

if(dialog_val) {
//page_scriptの場合　defaultのmy_tagを作成して、from_tagがあればparmをもってくる
		var tag_name='pagescript'
		var tag_n='u__'+tag_name;
		var exist=document.getElementById(tag_n);
		if(!exist) {
            		var prog_tag = document.createElement('botton');
	    		prog_tag.setAttribute('id',tag_n);
	    		prog_tag.setAttribute('style','display:none;');
	    		u_present_pos=prog_tag;
	    		var base_script=document.getElementById('sys_expand');
	   		 base_script.appendChild(prog_tag);
console.log('make present tag=',u_present_pos);
			}
	    	if(from_tag) {
			var fm_tag=from_tag.slice( 3 ) ;
			var parm=get_result(fm_tag);
console.log('get result from formar=',parm);
	    		set_parm(tag_name,JSON.stringify({parm:parm}));
			}
		if(css_val) applyCustomCss(css_val);
　　		const domParser = new DOMParser();
　　		var parsed = domParser.parseFromString(dialog_val, 'text/html');
console.log('parsed',parsed);
　　		const new_node = parsed.childNodes[0];
console.log('new_node=',new_node);
		var node = new_node.querySelector('html body > *');
		var b_node=document.querySelector('body');
		var node_id=node.getAttribute('id');
		var node_set_node=document.querySelector('body');
		var n_node=document.getElementById(node_id);
		if(!n_node) node_set_node.appendChild(node);
		u_addtext=[];
		for(let k=0;k<node.length;k++) {
			var cls=node[k].getAttribute('class');
			if(cls=="dialog") b_node.append(node[k]);
			else u_addtext.push(node[k]);
			}
		}

//  My Note定義Scriptのシリーズ実行のTrial部分   
	var {kind,script_stack}=parze_script_kind(script_val);
console.log('script parsed kind=',kind,'stack leng=',script_stack.length,script_stack);
	if(kind==0 && script_stack.length>=1) {
		$('#page_script_page').dialog("close"); 
		u_stack_progs=script_stack.length;
		u_stack_program=script_stack;
		if(u_stack_progs) {
console.log('**stack programs=',u_stack_progs,u_stack_program);
			var prog=u_stack_program[0];
			u_stack_program.shift();
			var lines = prog.split(/[(,;)]/);
			u_stack_progs=u_stack_program.length;
			user_script_exe_next(lines[1],lines[2],lines[3]);
			now_cursor();
			getCursorPosition();
			}
		document.getElementById("sys_exp_func01").click();
		return;
		}

var s_tag=document.getElementById('sys_temp');　//javascriptソースを下記div id='for_pagescript_test'に変更してもOK
//	var s_tag=document.getElementById('for_pagescript_test');
	len=s_tag.childNodes.length;
	//すべての要素を削除する
	for(var k=len-1;k>=0;k--){
		s_tag.childNodes[k].remove();
		}
	if(script_val) {
    		//文字列をJavaScriptコードとして実行する
    		//eval(script_val)
		var scp=document.createElement('script');
		scp.innerHTML=script_val;
		s_tag.appendChild(scp);
		}
//	if(scp) scp.remove();
console.log('At exe_page end s_tag=',s_tag);
	}

function exe_user_script_direct(prog_name,prog_numb,my_tag_name){
console.log('Enter exe_direct prog_numb=',prog_numb);
	get_userscript(prog_numb);
	doc_script=my_script_data;
	if(!doc_script) {
		alert('script not found');
		return;
		}
	//doc_script=doc_script.replace('|<=>|', '|<==>|');
	var src=doc_script.split('|<==>|');
console.log('src leng=',src.length,src);
	var script_val=src[1];
	var dialog_val=src[0];
	var css_val=src[2];
	if(dialog_val) {
		if(css_val) applyCustomCss(css_val);
　　		const domParser = new DOMParser();
　　		var parsed = domParser.parseFromString(dialog_val, 'text/html');
console.log('parsed',parsed);
　　		const new_node = parsed.childNodes[0];
console.log('new_node=',new_node);
		var node = new_node.querySelector('html body > *');

var b_node=document.querySelector('body');
		u_addtext=[];
		for(let k=0;k<node.length;k++) {
			var cls=node[k].getAttribute('class');
			if(cls=="dialog") b_node.append(node[k]);
			else u_addtext.push(node[k]);
			}
		}

var s_tag=document.getElementById('sys_temp');
	if(script_val) {
console.log('script_val=',script_val);
    		//文字列をJavaScriptコードとして実行する
		var scp=document.createElement('script');
		scp.innerHTML=script_val;
		s_tag.appendChild(scp);
		}
//	if(scp) scp.remove();
	}

function user_script_exe_next(s_name,my_tag,from_tag="") {
console.log('***** Enter in user_script_exe name=',s_name,my_tag,'from_tag=',from_tag);
	u_prog_now=[];
	var prog_list=[s_name,my_tag,from_tag];

non_recursiveFunc(prog_list);

//	recursiveFunc(u_prog_now).then(function(){var done=0;});

}

function non_recursiveFunc(u_prog){
		can_go_next=0;
console.log('***********Enter non recursive exe prog=',u_prog);
		var s_name=u_prog[0];
		var my_tag=u_prog[1];
		//get_newtag_for_user(my_tag);
		var from_tag=u_prog[2];
		u_pres_tag=my_tag;
		var prog_numb=get_from_index(s_name);
		if(prog_numb==0) {
			alert('script '+s_name+' not found');
			return;
			}
		set_user_common(s_name,my_tag,from_tag);
console.log('**End of set_user_common and next=',u_stack_progs);
	if(u_stack_progs) document.getElementById("sys_exp_func01").click();
	}

async function recursiveFunc(arr_progs){
  while (arr_progs.length > 0 ) {
    return new Promise((resolve,reject)=>{
		can_go_next=0;
		var u_prog=arr_progs.shift();
console.log('***********Enter recursive exe prog=',u_prog);
console.log('next prog=',arr_progs.length,arr_progs[0]);
		var s_name=u_prog[0];
		var my_tag=u_prog[1];
		//get_newtag_for_user(my_tag);
		var from_tag=u_prog[2];
		u_pres_tag=my_tag;
		var prog_numb=get_from_index(s_name);
		if(prog_numb==0) {
			alert('script '+s_name+' not found');
			return;
			}
		set_user_common(s_name,my_tag,from_tag);
		//recursiveFunc(arr_progs);
      	resolve();
    }).then(function(){return recursiveFunc(arr_progs)});  //{console.log('recursive romise end')});
  }
}

//async function set_user_common(s_name,tag_name,from_tag){
function set_user_common(s_name,tag_name,from_tag){
console.log('##### Enter script=',s_name,tag_name,from_tag);
	var tag_n='u__'+tag_name;
	var exist=document.getElementById(tag_n);
	if(!exist) {
	    var base_script=document.getElementById('sys_expand');
	    var dia_script=get_username(s_name);
console.log('script=',dia_script);
	    //dia_script=dia_script.replace('|<=>|', '|<==>|');
	    var code=dia_script.split('|<==>|');
            var script_tag = document.createElement('script');
//下記数行は　get_newtag_for_user(my_tag) 
            var prog_tag = document.createElement('botton');
	    u_present_pos=prog_tag;
	    prog_tag.setAttribute('id',tag_n);
	    prog_tag.setAttribute('style','display:none;');
	    base_script.appendChild(prog_tag);
console.log('make present tag=',tag_n,u_present_pos);
	    set_status(tag_name,JSON.stringify({status:'1'}));
//
	    if(from_tag) {
			var parm=get_result(from_tag);
			//var parm=get_result_db(from_tag);
console.log('get result from fermar=',parm);
	    		set_parm(tag_name,JSON.stringify({parm:parm}));
		}
	    else set_parm(tag_name,JSON.stringify({parm:''}));
//	    set_result(tag_name,JSON.stringify({result:'0'}));

//	    const observer = new MutationObserver(callback_next);
//console.log('mutation observer set tag=',prog_tag);
//	    observer.observe(prog_tag, {attributes: true});

// Wait for script execution to complete using a custom event
    	    //var scriptEvent = new CustomEvent('script-executed');
	    script_tag.innerHTML =code[1] ;
//console.log('script code=',code[1]);
	    if(code[0]) {
		if(code[2]) applyCustomCss(code[2]);
　　		const domParser = new DOMParser();
　　		var parsed = domParser.parseFromString(code[0], 'text/html');
//console.log('parsed',parsed);
　　		const new_node = parsed.childNodes[0];
//console.log('new_node=',new_node);
		var node = new_node.querySelector('html body > *');
		var node_id=node.getAttribute('id');
		var node_set_node=document.querySelector('body');
		var n_node=document.getElementById(node_id);
		if(!n_node) node_set_node.appendChild(node);
		}

base_script.appendChild(script_tag);
	    //if(u_get_csvlines)
//	    set_result(tag_name,JSON.stringify({status:u_get_csvlines}));
//	    set_status(tag_name,JSON.stringify({status:'10'}));
//console.log('u_result=',u_get_csvlines);
	    can_go_next=1;
console.log('@@@@@End set_common script_tag=',tag_name,sys_expand);
	   }
	if(script_tag) script_tag.remove();
	}

function applyCustomCss(custom_css){
	//HTML and javascript test By page script
    	var css_div=document.getElementById('css_test_0001');
    	if(!css_div) {
		var css_div= document.createElement('style');
		css_div.setAttribute('id','css_test_0001');
        	}
	else css_div.innerHTML="";
      css_div.innerHTML=custom_css;
      var base=document.querySelector('body');
　　　base.insertBefore(css_div, base.firstChild);
}

var u_present_pos='';

function set_mystatus(status) {
console.log('Enter to set_mystatus=',status);
   if(u_present_pos) {
      u_present_pos.setAttribute('status',status);
console.log('after set status=',JSON.parse(u_present_pos.getAttribute('status')));
      return true;
      }
   else return false;
}

function set_myresult(result) {
console.log('Enter to set_myresult');
   if(u_present_pos) {
      u_present_pos.setAttribute('result',result);
console.log('after set myresult=',JSON.parse(u_present_pos.getAttribute('result')));
      return true;
      }
   else return false;
}

function get_myparm() {
console.log('Enter to get_myparm');
console.log('get_myparm present=',u_present_pos);
   if(u_present_pos) {
      var parm=JSON.parse(u_present_pos.getAttribute('parm'));
console.log('parm=',parm);
     ret=parm;
     }
   else ret='undone';
console.log('Enter to get_myparm return=',ret);
   return ret;
}

function get_status(user_tag) {
console.log('Enter to get_status name=',user_tag);
   var tagn='u__'+user_tag;
   var exist=document.getElementById(tagn);
   if(exist) {
      var status=JSON.parse(exist.getAttribute('status'));
console.log('status=',status);
     ret=status.status;
     }
   else ret='undone';
console.log('Enter to check_userstatus return=',tagn,exist,ret);
   return ret;
}

function set_status(user_tag,status) {
console.log('Enter to set_status name=',user_tag);
   var tagn='u__'+user_tag;
   var exist=document.getElementById(tagn);
   if(exist) {
      exist.setAttribute('status',status);
console.log('after set status=',JSON.parse(exist.getAttribute('status')));
      return true;
      }
   else return false;
console.log('Enter to set_userstatus return=',tagn,exist);
}

function get_parm(user_tag) {
console.log('Enter to get_parm name=',user_tag);
   var tagn='u__'+user_tag;
   var exist=document.getElementById(tagn);
   if(exist) {
      var parm=JSON.parse(exist.getAttribute('parm'));
console.log('parm=',parm);
     ret=parm;
     }
   else ret='undone';
console.log('Enter to get_userparm return=',user_tag,ret);
   return ret;
}

function set_parm(user_tag,parm) {
console.log('Enter to set_parm name=',user_tag);
   var tagn='u__'+user_tag;
   var exist=document.getElementById(tagn);
   if(exist) {
      exist.setAttribute('parm',parm);
console.log('after set status=',JSON.parse(exist.getAttribute('parm')));
      return true;
      }
   else return false;
}

function get_result(user_tag) {
console.log('Enter to get_result name=',user_tag);
   var tagn='u__'+user_tag;
   var exist=document.getElementById(tagn);
   if(exist) {
      var result=JSON.parse(exist.getAttribute('result'));
console.log('result=',result);
     ret=result;
     }
   else ret='undone';
console.log('Enter to get_userresult return=',user_tag,ret);
   return ret;
}

function set_result(user_tag,result) {
console.log('Enter to set_result name=',user_tag);
   var tagn='u__'+user_tag;
   var exist=document.getElementById(tagn);
   if(exist) {
      exist.setAttribute('result',result);
console.log('after set status=',JSON.parse(exist.getAttribute('result')));
      return true;
      }
   else return false;
}

/*
//mouseup時の処理
//    var hand_up=org_container.addEventListener('mouseup', draw_up,false);
document.onmouseup = function (e) {
console.log('mouse up');
		var range=window.getSelection();
		if(range!='') {
console.log('selection=',range);
			}
　　　　	++Up_count;
		drag.isMouseDown = false;
　　　　	if(mouse_Error) {
　　　　　　		mouse_Error=false;
　　　　　　		Up_count=0;
　　　　　　		}
　　　　	if(Move_mode) {
console.log('canceled Move_mode');
    			switch (Draw_mode){
      		 	   case 'Aux':
console.log('** element drag stop');
				drag.isMouseDown = false;
				draw_op.aux_pos=e.clientX;
				break;
      			   case 'Basic':
	  		    default:
console.log('** element draw stop');
				draw_up(e);
				break;
				}
			Move_mode=0;
			Up_count=0;
console.log('After basic_moveup=',Up_count);
   			}
//	disp_yn_check();
    }//mouseup end]
*/

function disp_yn_check() {
    	if((for_cloud=='yes') || (for_demo=='yes')) ch_check_func();
	}

function some_check() {
	var flag=0;

var canv=document.getElementById("mesh_canv");
	var tags=canv.getElementsByTagName('symbol');
	if(tags.length>0) {
		flag=1;
console.log('symbol detected tags=',tags);
		return flag;
		}

tags=document.querySelector('animate');
	if(tags) {
		flag=1;
console.log('animate detected tags=',tags);
		return flag;
		}

tags=document.querySelector('animateMotion');
	if(tags) {
		flag=1;
console.log('animateMotion detected tags=',tags);
		return flag;
		}
	return flag;
	}

Google_chars.onclick = function() { 
 	navigator.permissions.query({ name: 'clipboard-read' }).then(result => {
            // If permission to read the clipboard is granted or if the user will
            // be prompted to allow it, we proceed.

if (result.state === 'granted' || result.state === 'prompt') {
		getClipboardContents();
		after_clipboard_google();
		}
	   });
    }

async function after_clipboard_google() {
	const result2 = await getClipboardContents();
console.log('global=',global_htmldoc);
	var s_node = global_htmldoc.querySelectorAll('html body > *');
console.log('paste_node leng=',s_node.length,s_node);
//この段階でA>H3の場合もある
	var node=document.createElement('div');
/*
	for(k=0;k<s_node.length;k++) {
		var c_name=s_node[k].getAttribute('class');
console.log('s_node[i]=',s_node[k].nodeName,c_name);
console.log('Yes/No=',c_name=='MjjYud');
		if(s_node[k].nodeName=='DIV' && c_name=='MjjYud') {
console.log('only one search');
			one_search(s_node[k],node);
			}
		else {
			var d_node=s_node[k].querySelectorAll('DIV.MjjYud');
console.log('d_node=',d_node,d_node.length);
			for(let l=0;l<d_node.length;l++) {
console.log('batch search l=',l);
				one_search(d_node[l],node);
				}
			}
		}

//	one_search(ss_node,node);
*/

for(i=0;i<s_node.length;i++) {
		var exst1=s_node[i].querySelectorAll('A>H3');

console.log('extract1=',i,exst1);
		exst1.forEach(function (element) {
			var par_tag=element.parentNode;
console.log('search=',par_tag);//粗これで良いか？

var title=par_tag.querySelector('H3').innerText;
			var new_title=document.createElement('H4');
			new_title.innerText=title;
			new_title.setAttribute('fig', '見出し');
			var href=par_tag.getAttribute( "href");
    			var newNode =document.createElement('a');
    			newNode.href=href;
    			newNode.setAttribute('fig', 'リンク');
    			newNode.appendChild(new_title);
    			newNode.setAttribute('target', '_blank');
    			newNode.setAttribute('rel', 'noopener');
console.log('newNode=',title,newNode,new_title);
			node.appendChild(newNode);
//.MUxGbd.wuQ4Ob.WZ8Tjf
//OK			var text_a=s_node.querySelector('SPAN');
			var text_b="";

if(!doc_edit_node) alert('set green line!!');
	else $(node).insertAfter(doc_edit_node);

tag_trees=[];
    	tag_trees=get_tagStruct(node,0);
    	if(tag_trees.length>0) doc_deep_level=0;
	doc_edit_node=node;
	doc_origin_node=node;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
	display_current_tag(doc_edit_node);
	}

function one_search(s_node,node) {
	var element=s_node.querySelector('A>H3');
console.log('one_search element=',element);
	if(element==null) return;
			var par_tag=element.parentNode;
console.log('search=',par_tag);//粗これで良いか？

}

Cr_to_Br();
function Cr_to_Br() {
//  $("#Cr_to_Br").on("click", function(){
	if(Editmode!='Edit') return;
console.log('*****Enter Cr to Br')
	const selection = window.getSelection();
	if(!selection.rangeCount) return; 
	
	var range = selection.getRangeAt(0);

// 選択範囲を含む親タグを取り出す
//console.log('rang parent=',range.commonAncestorContainer);
	var sel_rang=range.commonAncestorContainer;
	var ptags = sel_rang.querySelector('.divsvg');
	var tdom='';
//console.log('*****ptags=',ptags);
	if(ptags) tdom=ptags;
	else tdom=sel_rang;

//	var n_node=tdom.childNodes.length;
//console.log('sel nth=',n_node,tdom);
//console.log('selectio start=',selection.anchorNode.nodeValue,'selection end=',selection.extentNode.nodeValue);
//	var nums=num_search(tdom,selection.anchorNode.nodeValue,tdom,selection.extentNode.nodeValue);
//console.log('***********selectio number first=',nums[0],'last=',nums[1]);

var nstr=cut_tags(tdom);
	var newar=nstr.split('<br>');
console.log('str=',nstr,'new array=',newar);
	nstr='';
	for(let i=0;i<=newar.length-1;i++) {
		if(newar[i]!='') nstr=nstr+newar[i]+'<br>';
		}

var new_ptag= document.createElement("p");
	new_ptag.innerHTML=nstr;
console.log(new_ptag);
	var clsname=''
	if(tdom.nodeName=='DIV') clsname=tdom.getAttribute('class');
	if(tdom.nodeName=='DIV' && clsname=='divsvg') {
console.log('replace first tag=',tdom);
		tdom.innerHTML='';
		tdom.insertBefore(new_ptag, tdom.firstChild);
		}
	else {
		$(new_ptag).insertAfter(tdom);
		tdom.remove();
		}

if(my_html_design_dialog) {
    		tag_trees=[];
    		tag_trees=get_tagStruct(new_ptag,0);
    		if(tag_trees.length>0) doc_deep_level=0;
		doc_edit_node=new_ptag;
		doc_origin_node=new_ptag;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
		cancel_green_line();
		setto_current_tag(doc_edit_node);
		set_parms();
		display_current_tag(doc_edit_node);
		}
	}  //function Cr to Br end

Br_to_Cr();
function Br_to_Cr() {
//$("#Br_to_Cr").on("click", function(){
	if(Editmode!='Edit') return;
console.log('*****Enter Br to Cr')
	const selection = window.getSelection();
	if(!selection.rangeCount) return;

place_to_tag();
console.log('after place to tag=',doc_edit_node);
	var node=doc_edit_node.nodeName;
	if(node!='P' && node!='DIV') return;

var range = selection.getRangeAt(0);
console.log('selection start=',selection.anchorNode.nodeValue,'selection end=',selection.extentNode.nodeValue);
	var term1=selection.anchorNode.nodeValue;
	var term2=selection.extentNode.nodeValue;

reform_html_after_ptag();
	node=document.getElementById(temp_id);
	node.removeAttribute('id');

if(my_html_design_dialog) {
    		tag_trees=[];
    		tag_trees=get_tagStruct(node,0);
    		if(tag_trees.length>0) doc_deep_level=0;
		doc_edit_node=node;
		doc_origin_node=node;
console.log('After add tag tree=',tag_trees,'levels=',tag_trees.length);
		cancel_green_line();
		setto_current_tag(doc_edit_node);
		display_current_tag(doc_edit_node);
		}
	}  //function Br to Cr end