Html_Svg Editor

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

anchor Title:

　 id:
　 id:
　　　　defaul表示:
　　　

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

doc link test
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: 　　　　　　
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

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

線幅　redraw all:
矢印　Opacity：
線種　Cap：
Trim R
多重線　線間隔

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

追加: 　白

　　　　彩度明度　

<div id="slider_template" class="dialog" data-target="" style="display: none;">
  <div class="dialog-content">
    <label>slider_1:
      <input type="text" class="slider-value" name="slider1" value="0" style="width:50px;">
      <input type="range" class="slider" name="slider1" value="0" min="0" max="100" style="width:150px;">
      <button class="apply-button" data-slider="slider1">設定</button>
    </label>
    <label>slider_2:
      <input type="text" class="slider-value" name="slider2" value="0" style="width:50px;">
      <input type="range" class="slider" name="slider2" value="0" min="0" max="100" style="width:150px;">
      <button class="apply-button" data-slider="slider2">設定</button>
    </label>
    <label>slider_3:
      <input type="text" class="slider-value" name="slider3" value="0" style="width:50px;">
      <input type="range" class="slider" name="slider3" value="0" min="0" max="100" style="width:150px;">
      <button class="apply-button" data-slider="slider3">設定</button>
    </label><br>
    <select class="slider-option" name="slider1" style="margin-left:50px;">      <option value="margin" selected>margin</option>
      <option value="padding">padding</option>
      <option value="line-height">line-height</option></select>
    <select class="slider-option" name="slider2"  style="margin-left:80px;">      <option value="margin" selected>margin</option>
      <option value="padding">padding</option>
      <option value="line-height">line-height</option></select>
    <select class="slider-option" name="slider3" style="margin-left:80px;">      <option value="margin" selected>margin</option>
      <option value="padding">padding</option>
      <option value="line-height">line-height</option></select>
  </div>
</div>

u_slider_gen();
function u_slider_gen() {
	const template = document.getElementById('slider_template');
	const newDialog = template.cloneNode(true);

newDialog.id = 'slider_dialog_1'; // 固有のIDに変える
	newDialog.dataset.target = 'my_target_1'; // 結び付ける対象タグ
	newDialog.style.display = 'block'; // 表示する
//console.log('Enter slider generation=',newDialog)
    	container.appendChild(newDialog);						
	//document.body.appendChild(newDialog);
	u_slider_show(newDialog.id);
	}

function u_slider_show(dialog_id) {
  //console.log('***display slider open');

const dialogElem = document.getElementById(dialog_id);
  const theDialog = $('#' + dialog_id).dialog({
    autoOpen: false,
    draggable: true,
    resizable: true,
    height: 200,
    width: 600,
    position: { my: "right bottom", at: "right bottom", of: window }
  });

// 各 slider にイベントを登録（dialog内部を限定）
  dialogElem.querySelectorAll('.slider').forEach(slider => {
    const name = slider.name;
    const valueBox = dialogElem.querySelector(`.slider-value[name="${name}"]`);

slider.addEventListener('input', function () {
      if (valueBox) valueBox.value = this.value;

// 対象要素へstyleを適用
      const targetId = dialogElem.dataset.target;
      const targetEl = document.getElementById(targetId);
      const optionSel = dialogElem.querySelector(`.slider-option[name="${name}"]`);
      const styleProp = optionSel?.value;

if (targetEl && styleProp) {
        targetEl.style[styleProp] = this.value + 'px';
      }
    });
  });

// select 変更時のイベントも汎用化
  dialogElem.querySelectorAll('.slider-option').forEach(select => {
    select.addEventListener('change', function () {
      const name = this.name;
      const slider = dialogElem.querySelector(`.slider[name="${name}"]`);
      slider?.dispatchEvent(new Event('input')); // 強制的にsliderのinputイベントを発火
    });
  });

// 設定ボタンのイベント登録（dialogElem 内部に限定）
  dialogElem.querySelectorAll('.apply-button').forEach(button => {
    button.addEventListener('click', function () {
//console.log('Enter slider 設定 tag=',doc_edit_node);
      const sliderName = this.dataset.slider;
      const slider = dialogElem.querySelector(`.slider[name="${sliderName}"]`);
      const option = dialogElem.querySelector(`.slider-option[name="${sliderName}"]`);
      const value = slider?.value;
      const cssProp = option?.value;
      const targetId = dialogElem.dataset.target;
      const targetEl = document.getElementById(targetId);
//console.log('setteis=',sliderName,option,value,cssProp,targetId,targetEl);
      if (slider && cssProp && targetEl) {
        targetEl.style[cssProp] = value + 'px';
//console.log(`[設定] ${targetId} に ${cssProp}=${value}px を適用`);
        }
      });
    });

theDialog.dialog("open");
}

$('#slider3_dialog').on('dialogclose', function(event) {
//console.log('slider3 dialog closed');
	});