Forked from: negotoy's HTML ( SVG ) レイヤーテスト View Diff (1)

forked: HTML ( SVG ) レイヤーテスト

teetteet

2017-10-18 15:14:46

License: MIT License

Fork: 0

Fav: 0

View: 338

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 2142 lines
HTML 162 lines
CSS 553 lines

forked: HTML ( SVG ) レイヤーテスト

// forked from negotoy's "HTML ( SVG ) レイヤー テスト" http://jsdo.it/negotoy/QHlo
var win = window;
var doc = win.document;

win.addEventListener("load",function(){
    /* getElem */
    //{
    var testArea = doc.getElementsByClassName('testArea')[0];
    var svg = doc.getElementById('SVG');
    var svgSpare = doc.getElementById('svgSpare');
    var control = svg.querySelectorAll('#control > g');
    var cell = doc.getElementById('cell');
    var skin = doc.getElementById('skin');
    var svgBox = doc.getElementById('svgBox');
    var naviIcon = doc.getElementById('naviIcon');
    var naviSVG = naviIcon.getElementsByTagName('svg')[0];
    var rightMenu = doc.getElementById('rightMenu');
    var rightMenuDisplay = rightMenu.querySelectorAll('#rightMenu > input');
    var layerTable = doc.getElementById('layerTable');
    var layer = layerTable.getElementsByTagName('li')[0];
    var layerItem = layer.getElementsByTagName('ol')[0].getElementsByTagName('li')[0];
    var itemSpare = layerItem.cloneNode(true);
        layerItem.parentNode.removeChild(layerItem);
    var layerSpaer = layer.cloneNode(true);
        layerTable.removeChild(layer);
    var layerBorder = doc.getElementById('layerBorder');
    var layerNavi = doc.getElementById('layerNavi').getElementsByTagName('span');
    var color = doc.getElementById('color');
    var slider = rightMenu.querySelectorAll('.slider > span');
    var picker = doc.getElementById('picker').getElementsByTagName('span');
    var rgba = color.querySelectorAll('.pickerCaption + span > span');
    var pathFS = color.querySelectorAll('.colorCheck > span');
    var colorCheck = color.querySelectorAll('.colorCheck > input[type]');
    var fill = doc.getElementById('fill');
    var fillSelect = fill.getElementsByTagName('select');
    var stroke = doc.getElementById('stroke');
    var fillColor = doc.getElementById('fillColor');
    var strokeColor = doc.getElementById('strokeColor');
    var strokeSelect = stroke.getElementsByTagName('select');
    var strokeInput = stroke.getElementsByTagName('input');
    var strokeWidth = doc.getElementById('strokeWidth');
    var miterLimit = doc.getElementById('miterLimit');
    var lineCap = doc.getElementById('lineCap');
    var lineJoin = doc.getElementById('lineJoin');
    var dashArray = doc.getElementById('dashArray');
    var pathZ = doc.getElementById('pathZ');
    var other = doc.getElementById('other');
    var otherSelect = other.getElementsByTagName('select');
    var otherInput = other.getElementsByTagName('input');
    var test = doc.getElementById('test');
    var locus = doc.getElementById('locus');

setObjIndex(delSpace(layerTable));
        setObjIndex(layerNavi);
        setObjIndex(colorCheck);
        setObjIndex(slider, undefined, 255);
        slider[3].SVGEditor.VALUE = 1;
        slider[4].SVGEditor.VALUE = 20;
        slider[5].SVGEditor.VALUE = 8;
        setObjIndex(fillSelect);
        setObjIndex([lineCap, lineJoin, dashArray, pathZ]);
        setObjIndex([otherSelect[0], otherInput[0]]);
        //}
        /* setpam */
        //{
        _set('Data', function(a){
        var d = _getVal('Data');
            switch(a){
            case undefined:
            return [d];
            default :
                switch(a.length){
                case 1 :
                return [d[a[0]]];
                case 2 :
                return [d[a[0]], d[a[1]]];
                }
            }
        });
        _set('LayerData', function(a){
        //var p = getIndex(a);
        var d = _getVal('Data')[a[0]];
            return d;
        });
        _set('ItemData', function(a){
        var d = _getVal('Data')[a[0]];
        var p = getIndex(a);
            p = _get('Cell')([p[0],p[1]]);
            return [d, d.item[a[1]]];
        });
        _set('Cell', function(n){
            if(n === undefined){
                return cell.getElementsByTagName('g');
            }
            else{
                switch(n[1]){
                case undefined:
                return cell.getElementsByTagName('g')[n[0]];
                default :
                return [cell, cell.getElementsByTagName('g')[n[0]], cell.getElementsByTagName('g')[n[0]].childNodes[n[1]]];
                }
            }
        });
        _set('Layer', function(n){
            if(n === undefined){
                return layerTable.querySelectorAll('div > ul > li');
            }
            else{
                return layerTable.querySelectorAll('div > ul > li')[n];
            }
        });
        _set('LayerObj', function(o){
            return [o.getElementsByTagName('span')[1],o.getElementsByTagName('input')[0], o.getElementsByTagName('span')[2], o.getElementsByTagName('input')[1]];
        });
        _set('ItemObj', function(o){
            switch(o.nodeName.toLowerCase()){
            case 'li' :
            break;
            }
            return [o.getElementsByTagName('input')[0], o.getElementsByTagName('input')[1],];
        });
        _set('ViewBox', function(){
            return _getVal('Margin') + _getVal('Offset') * 2;
        });
        _set('Box', function(){
            return _getVal('Margin') * 2 + _get('Scale')() + _getVal('Offset') * 2;
        });
        _set('Scale', function(){
            return parseInt(otherSelect[0].value);
        });
        _set('GridFlag', function(){
            return otherInput[0].checked;
        });
        _set('ScrollXY', function(){
            return _getVal('Margin') - (_getVal('Margin') - _get('Scale')()) / 2;
        });
        _set('NaviCenterXY', function(){
            return svg.width.animVal.value - svgBox.clientWidth;
        });
        _set('ColorCheck', function(a){
            switch(a){
            case 'defo' :
            return [colorCheck[0], colorCheck[1], colorCheck[2], colorCheck[3]];
            case 'init' :
                colorCheck[0].checked = colorCheck[1].checked = false;
                colorCheck[2].checked = colorCheck[3].checked = true;
            return [false, false, true, true];
            default :
            return [colorCheck[0].checked, colorCheck[1].checked, colorCheck[2].checked, colorCheck[3].checked];
            }
        });
        _set('PathProperty', function(ad){
        var type = 'path';
        var ctr, cts, pro, inp;
            console.log(0,'[PathProperty]\n',ad[ad.length - 1]);
            switch(ad[ad.length - 1]){
            case 5 :
            case 'init' :
                console.log(0,'*type[init]');
                ctr = [_get('Spare')('layer'), _get('Spare')('cell')];
                cts = [_get('Spare')('item'), _get('Spare')(type)];
            break;
            case 'layer' :
            case 'copy' :
                ctr = [_getVal('ActiveData')[0].layer, _getVal('ActiveData')[0].cell];
                cts = [_get('Spare')('item'), _get('Spare')(type)];
                console.log(0,'*type[layer]');
                ad[ad.length - 1] = 'layer';
            break;
            case 'item' :
                ctr = [_getVal('ActiveData')[1].layer, _getVal('ActiveData')[1].cell];
                cts = [_get('Spare')('item'), _get('Spare')(type)];
                console.log(0,'*type[item]');
            break;
            case 'add' :
                ctr = [_get('Spare')('layer'), _get('Spare')('cell')];
                cts = [null, null];
            break;
            }
            pro = {
                'fill' : fillColor.style.backgroundColor,
                'fill-rule' : fillSelect[0].value,
                'stroke' : strokeColor.style.backgroundColor,
                'stroke-width' : parseInt(strokeWidth.textContent),
                'stroke-miterlimit' : parseInt(miterLimit.textContent),
                'stroke-linecap' : lineCap.value,
                'stroke-linejoin' : lineJoin.value,
                'stroke-dasharray' : dashArray.value,
                'z' : pathZ.checked,
                'fill-active' : colorCheck[0].checked,
                'fill-display' : colorCheck[1].checked,
                'stroke-active' : colorCheck[2].checked,
                'stroke-display' : colorCheck[3].checked,
                'fill-rgba' : assasin(_getVal('RGBFill')),
                'stroke-rgba' : assasin(_getVal('RGBStroke')),
                'd' : [],
                'type' : type,
                'layer-focus' : false,
                'item-focus' : false,
                'layerTable' : _getHtm('LayerTable'),
                'layer' : ctr[0],
                'itemTable' : ctr[0].getElementsByTagName('ol')[0],
                'item' : cts[0],
                'cellTable' : _getSvg('CellTable'),
                'cell' : ctr[1],
                'path' : cts[1],
                'id' : null,
                'display' : true,
                'set' : HTMLEvent.ItemWatch
            };
            if(cts[0] !== null){
                inp = _get('ItemObj')(pro.item);
                inp[1].value = _getVal('InitVal') + pro.itemTable.childNodes.length;
            }
            return pro;
        });
        _set('CanvasXY', function(e){
        var margin = _getVal('Margin');
        var off = _getVal('Offset');
        var sx = svgBox.scrollLeft;
        var sy = svgBox.scrollTop;
        var w = svgBox.clientWidth + sx;
        var h = svgBox.clientHeight + sy;
        var ra = svgBox.getBoundingClientRect();
        var x = e.clientX - ra.left + sx;
        var y = e.clientY - ra.top + sy;
            //if(x > w){ svgBox.scrollLeft = svgBox.scrollLeft + 10; }
            //if(y > h){ svgBox.scrollTop = svgBox.scrollTop + 10; }
            //if(x < sx){ svgBox.scrollLeft = svgBox.scrollLeft - 10; }
            //if(y < sy){ svgBox.scrollTop = svgBox.scrollTop - 10; }
            return [(e.clientX - ra.left + sx - off) - margin, (e.clientY - ra.top + sy - off) - margin];
        });
        _set('Spare', function(a){
            switch(a){
            case 'layer' :
            return _getHtm('LayerSpare').cloneNode(true);
            case 'item' :
            return _getHtm('ItemSpare').cloneNode(true);
            case 'cell' :
            return _getSvg('CellSpare').cloneNode(true);
            case 'g' :
            return _getSvg('GSpare').cloneNode(true);
            case 'path' :
            return _getSvg('PathSpare').cloneNode(true);
            case 'rect' :
            return _getSvg('RectSpare').cloneNode(true);
            case 'circle' :
            return _getSvg('CircleSpare').cloneNode(true);
            }
        });
        _setHtm('SVGBox', svgBox);
        _setHtm('NaviIcon', naviIcon);
        _setHtm('LayerTable', layerTable);
        _setHtm('Layer', null);
        _setHtm('LayerBorder', layerBorder);
        _setHtm('ItemBorder' , layerTable.getElementsByClassName('itemBorder'));
        _setHtm('Picker', picker);
        _setHtm('RGBA', rgba);
        _setHtm('PathFS', pathFS);
        _setHtm('LayerNavi', layerNavi);
        _setHtm('SliderItem', slider);
        _setHtm('LayerSpare', layerSpaer);
        _setHtm('ItemSpare', itemSpare);
        _setHtm('Skin', skin);
        _setHtm('Fill', fill);
        _setHtm('Stroke', stroke);
        _setHtm('StrokeWidth', strokeWidth);
        _setHtm('MiterLimit', miterLimit);
        _setHtm('LineCap', lineCap);
        _setHtm('LineJoin', lineJoin);
        _setHtm('DashArray', dashArray);
        _setSvg('NaviSVG', naviSVG);
        _setSvg('SVG', svg);
        _setSvg('Grid', doc.getElementById('grid'));
        _setSvg('CellTable', delSpace(doc.getElementById('cell')));
        _setSvg('Cell', doc.getElementById('cell').getElementsByTagName('g'));
        _setSvg('Control', control);
        _setSvg('OffsetItem', svg.querySelectorAll('svg > g'));
        _setSvg('Points', doc.getElementById('points'));
        _setSvg('Guide', doc.getElementById('guide'));
        _setSvg('Image', doc.getElementById('image'));
        _setSvg('CellSpare', svgSpare.getElementsByTagName('g')[0].cloneNode(true));
        _setSvg('GSpare', svgSpare.getElementsByTagName('g')[0].cloneNode(true));
        _setSvg('PathSpare', svgSpare.getElementsByTagName('path')[0].cloneNode(true));
        _setSvg('RectSpare', svgSpare.getElementsByTagName('rect')[0].cloneNode(true));
        _setSvg('CircleSpare', svgSpare.getElementsByTagName('rect')[0].cloneNode(true));
        setAttribute(otherSelect[0].getElementsByTagName('option')[3], 'selected', 'selected');
        colorCheck[0].checked = false;
        colorCheck[1].checked = false;
        colorCheck[2].checked = true;
        colorCheck[3].checked = true;
        rightMenuDisplay[0].checked = false;
        rightMenuDisplay[1].checked = true;
        rightMenuDisplay[2].checked = false;
        rightMenuDisplay[3].checked = false;
        rightMenuDisplay[4].checked = false;
        rightMenuDisplay[5].checked = false;
    //}
        /* setElem */
        //{
        var offset = _getVal('Offset');
        var sw = (svgBox.offsetWidth - svgBox.clientWidth);
        var sh = (svgBox.offsetHeight - svgBox.clientHeight);
        var margin = _getVal('Margin');
        var nb = naviSVG.width.animVal.value;
        var wh = nb / 2;
        var vb = margin + offset * 2;
        var sx = (Math.round(sw / 2) - wh);
        var sy = (Math.round(sh / 2) - wh);
        setStyle(svgBox, 'width', (vb + sw) + 'px', 'height', (vb + sh) + 'px', 'maxWidth', (vb + sw) + 'px', 'maxHeight', (vb + sh) + 'px');
        setStyle(svgBox.nextSibling, 'width', (testArea.offsetWidth - svgBox.offsetWidth) + 'px', 'height' , (vb + sh) + 'px');
        setStyle(naviIcon, 'overflow', 'hidden', 'width', sw + 'px', 'height', sh + 'px', 'left', (svgBox.offsetWidth - sw) + 'px', 'top', (svgBox.offsetHeight - sh) + 'px');
        setStyle(naviSVG, 'left', sx + 'px', 'top', sy + 'px');
        for(var i = 0; i < control.length; i = i + 1){
        var pa = control[i].getElementsByTagName('path')[0];
        var pb = control[i].getElementsByTagName('path')[1];
        var ca = control[i].getElementsByTagName('circle')[0];
        var cb = control[i].getElementsByTagName('circle')[1];
            setAttribute(pa, 'stroke', _getVal('LFill'));
            setAttribute(pb, 'stroke', _getVal('RFill'));
            setAttribute(ca, 'fill', _getVal('LFill'), 'r', _getVal('CRect') / 2);
            setAttribute(cb, 'fill', _getVal('RFill'), 'r', _getVal('CRect') / 2);
        }//for
        setStyle(pathFS[0], 'backgroundColor', 'rgba(' + (_getVal('RGBFill').join(',')) + ')');
        setStyle(pathFS[1], 'backgroundColor', 'rgba(' + (_getVal('RGBStroke').join(',')) + ')');
        setStyle(picker[0], 'backgroundColor', 'rgba(' + (_getVal('RGBFill').join(',')) + ')');
        setStyle(picker[1], 'borderColor', 'rgba(' + (_getVal('RGBStroke').join(',')) + ')');
        var sv = _getVal('SliderValue');
        for(var j = 0; j < slider.length; j = j + 1){
            setSlider(slider[j], sv[j]);
        }
        _setVal('NaviOffset', [sx, sy, (wh - 0.5), (wh - 0.5)]);
        _setVal('NaviBox', nb);
        //}
        /* event */
        //{
        svgBox.addEventListener('scroll', CanvasNaviEvent.Scroll, false);//canvas area scroll
        naviIcon.addEventListener('mousedown', CanvasNaviEvent.Down, false);//canvas navi
        otherSelect[0].addEventListener('change', HTMLEvent.SetScale, false);//canvas scale
        otherInput[0].addEventListener('change', HTMLEvent.SetGrid, false);//grid
        svg.querySelector('svg > rect:nth-of-type(1)').addEventListener('mousedown', HTMLEvent.AddPoint, false);//control add
        layerTable.addEventListener('mousedown', HTMLEvent.LayerDown, true);//layer select
        //layerTable.addEventListener('mousedown', HTMLEvent.ItemDown, false);//layer select
        layerNavi[0].addEventListener('mouseup', HTMLEvent.LayerNavi, false);//layer event
        layerNavi[1].addEventListener('mouseup', HTMLEvent.LayerNavi, false);
        layerNavi[2].addEventListener('mouseup', HTMLEvent.LayerNavi, false);
        layerNavi[3].addEventListener('mouseup', HTMLEvent.LayerNavi, false);
        layerNavi[4].addEventListener('mouseup', HTMLEvent.LayerNavi, false);
        slider[0].addEventListener('mousedown', HTMLEvent.SliderDown, false);//color slider
        slider[1].addEventListener('mousedown', HTMLEvent.SliderDown, false);
        slider[2].addEventListener('mousedown', HTMLEvent.SliderDown, false);
        slider[3].addEventListener('mousedown', HTMLEvent.SliderDown, false);
        slider[4].addEventListener('mousedown', HTMLEvent.SliderDown, false);//stroke slider
        slider[5].addEventListener('mousedown', HTMLEvent.SliderDown, false);
        colorCheck[0].addEventListener('change', HTMLEvent.ColorCheck, false);//fill stroke
        colorCheck[1].addEventListener('change', HTMLEvent.ColorCheck, false);
        colorCheck[2].addEventListener('change', HTMLEvent.ColorCheck, false);
        colorCheck[3].addEventListener('change', HTMLEvent.ColorCheck, false);

fillSelect[0].addEventListener('change', function(){//fill rule
        }, false);
        strokeSelect[0].addEventListener('change', function(){//linecap
        }, false);
        strokeSelect[1].addEventListener('change', function(){//linejoin
        }, false);
        strokeInput[0].addEventListener('blur', function(e){//stroke-dasharray
        }, false);
        strokeInput[0].addEventListener('keydown', function(e){//stroke-dasharray
        }, false);
        pathZ.addEventListener('change', function(){//pathZ
        }, false);
        doc.addEventListener('mousedown', HTMLEvent.InitDown, false);//init
        skin.addEventListener('mousedown', SVGEvent.InitDown, false);//svg skin
        doc.addEventListener('mousedown', function(e){
            //console.log(e.target.SVGEditor);
        }, false);
        //}
        //setData();
        //setId();
        resize();
        doc.body.style.visibility = 'visible';
        testArea.focus();
    }, false);//onload

<div class="testArea" tabindex="-1">
<div id="topMenu">
<span>
&#x1f5e8;
</span>fesafsa
<span>
<span class="pop">
&#x1f5e8;
</span>
</span>
</div>
<div id="content">
<div id="svgBox">
<svg id="SVG" viewBox="0 0 1240 1240" width="1240" height="1240" style="background-color:black;" tabindex="-1">
<g id="svgSpare">
<g></g>
<rect></rect>
<path d="M0,0 L0,0" fill="none" stroke="white" stroke-width="2" fill="none"></path>
</g>
<g>
    <g id="guide">
        <rect x="0" y="0" width="600" height="600" fill="#101010" stroke="none"></rect>
        <path d="M0,199.5 L600,199.5 M199.5,0 L199.5,600" fill="none" stroke="#666" stroke-width="1" fill="none"></path>
        <path d="M-1,-1800 L-1,1800 M-1800,-1 L1800,-1" fill="none" stroke="white" stroke-width="2" fill="none"></path>
    </g>
    <g id="image"></g>
    <g id="cell"></g>
    <g>
        <path id="locus" d="M0,0 L0,0" fill="none" stroke="white" stroke-width="2" fill="none" stroke-opacity="1"></path>
    </g>
    <path id="grid" d="M0,0 L0,0" fill="none" stroke="#202020" stroke-width="1" fill="none" opacity="0.5"></path>
</g>
<rect id="skin" x="0" y="0" width="100%" height="100%" fill="#f00" stroke="none" fill-opacity="0"></rect>
<g>
    <g id="control" style="display:none;">
        <g>
            <path fill="none" stroke="none" stroke-width="1" d="M0,0L20,20"></path>
            <path fill="none" stroke="none" stroke-width="1" d="M0,0L30,40"></path>
            <circle cx="0" cy="40" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle>
            <circle cx="0" cy="60" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle>
        </g>
        <g>
            <path fill="none" stroke="none" stroke-width="1" d="M0,0L20,60"></path>
            <path fill="none" stroke="none" stroke-width="1" d="M0,0L30,80"></path>
            <circle cx="0" cy="80" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle>
            <circle cx="0" cy="100" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle>
        </g>
        <g>
            <path fill="none" stroke="none" stroke-width="1" d="M0,0L20,100"></path>
            <path fill="none" stroke="none" stroke-width="1" d="M0,0L30,120"></path>
            <circle cx="0" cy="120" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle>
            <circle cx="0" cy="140" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle>
        </g>
    </g>
    <g id="points" style="display:none;"></g>
</g>
</svg>
</div><div>
<div id="rightMenu">
<input type="checkbox" id="A" autocomplete="off" checked="checked">
<input type="checkbox" id="B" autocomplete="off" checked="checked">
<input type="checkbox" id="C" autocomplete="off" checked="checked">
<input type="checkbox" id="D" autocomplete="off" checked="checked">
<input type="checkbox" id="E" autocomplete="off" checked="checked">
<input type="checkbox" id="F" autocomplete="off" checked="checked">
    <label for="A">Action</label>
    <div id="action">
        <ul>
            <li><span><label>draw : </label><input type="radio" name="actype"><label>move : </label><input type="radio" name="actype"></span></li>
        </ul>
    </div>
    <label for="B">Layer</label>
    <div id="layer">
        <div>
            <ul id="layerTable">
                <li class="lay"><span class="lay"><span class="pn lay">+</span><input type="checkbox" checked="checked" class="lay"><span class="lay"></span><input type="text" style="display:none;" class="lay"></span><div class="item"><ol class="item"><li class="item"><input type="checkbox" checked="checked" class="item"><input type="text" class="item"></li></ol><div class='itemBorder' style="display:none;"></div></div></li>
            </ul>
            <div id='layerBorder' style="display:none;"></div>
        </div>
        
        <div id='layerNavi'><span title="copy">&#x1f5d2;</span><span title="add">+</span><span title="del">-</span><span title="up">↑</span><span title="down">↓</span></div>
    </div>
    <label for="C">Color</label>
    <div id="color">
        <ul>
            <li><span class="colorCaption">red</span><span class="slider"><span></span></span></li>
            <li><span class="colorCaption">green</span><span class="slider"><span></span></span></li>
            <li><span class="colorCaption">blue</span><span class="slider"><span></span></span></li>
            <li><span class="colorCaption">alpha</span><span class="slider"><span></span></span></li>
            <li><span class="pickerCaption"><span id="picker"><span></span><span></span></span></span><span>rgba(<span>0</span>,<span>0</span>,<span>0</span>,<span>1</span>)</span></li>
            <li><span class="colorCaption">fill</span><span class="colorCheck"><span id="fillColor" style="background-color:rgb(0,0,0);"></span><input type="radio" value="x" name="fstype" title="select"><input type="checkbox" title="display"></span></li>
            <li><span class="colorCaption">stroke</span><span class="colorCheck"><span id="strokeColor" style="background-color:rgb(0,0,0);"></span><input type="radio" value="x" name="fstype" title="select"><input type="checkbox" title="display"></span></li>
        </ul>
    </div>
    <label for="D">Fill</label>
    <div id="fill">
        <ul>
            <li>
                <span class="otherCaption">rule</span><span><select autocomplete="off" id="fillRule">
                        <option value="nonzero">nonzero</option>
                        <option value="evenodd">evenodd</option>
                    </select>
                </span>
            </li>
        </ul>
    </div>
    <label for="E">Stroke</label>
    <div id="stroke">
        <ul>
            <li><span class="strokeCaption">width</span><span id="strokeWidth">0</span><span class="slider"><span></span></span></li>
            <li><span class="strokeCaption">miterlimit</span><span id="miterLimit">0</span><span class="slider"><span></span></span></li>
            <li>
                <span class="strokeCaption">linecap</span><span><select autocomplete="off" id="lineCap">
                        <option value="butt">butt</option>
                        <option value="round">round</option>
                        <option value="square">square</option>
                    </select>
                </span>
            </li>
            <li>
                <span class="strokeCaption">linejoin</span><span><select autocomplete="off" id="lineJoin">
                        <option value="miter">miter</option>
                        <option value="round">round</option>
                        <option value="bevel">bevel</option>
                    </select>
                </span>
            </li>
            <li>
                <span class="strokeCaption">dasharray</span><span><input type="text" id="dashArray" autocomplete="off"></span>
            </li>
            <li><span class="strokeCaption">Z</span><span><input type="checkbox" id="pathZ" autocomplete="off"></span></li>
        </ul>
    </div>
    <label for="F">Other</label>
    <div id="other">
        <ul>
            <li>
                <span class="otherCaption">canvas size</span><span><select autocomplete="off">
                        <option value="600">600</option>
                        <option value="400">400</option>
                        <option value="200">200</option>
                        <option value="100">100</option>
                    </select>
                </span>
            </li>
            <li><span class="otherCaption">grid</span><span class="gridCheck"><span></span><input type="checkbox" autocomplete="off"></span></li>
        </ul>
    </div>
</div>
</div>
<div id="naviIcon">
    <svg id="naviSVG" viewBox="0 0 100 100" width="100" height="100" style="background-color:transparent;">
        <g>
            <rect x="0" y="0" width="100" height="100" fill="black" stroke="white" stroke-width="2"></rect>
            <rect x="25" y="25" width="50" height="50" fill="#111" stroke="none" stroke-width="0"></rect>
            <path d="M49.5,25 L49.5,75 M25,49.5 L75,49.5" fill="none" stroke="#333" stroke-width="1"></path>
            <circle cx="49.5" cy="49.5" r="4" fill="#111" stroke="white" stroke-width="2"></circle>
        </g>
    </svg>
</div>
</div>
</div>

forked: HTML ( SVG ) レイヤーテスト

body{
    background-color:white;
    visibility:hidden;
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
*:not(input):not(select){
    border:0;
    outline:none;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    cursor:default;
}
.testArea{
    width:930px;
    height:800px;
    color:white;
    font-family:Consolas;
    font-size:12px;
    padding:0px 0px 10px;
    margin:10px auto;
    position:relative;
    background-color:black;
    outline:none;
}
#topMenu{
    width:100%;
    height:30px;
    line-height:30px;
    font-size:12px;
    padding:0px 5px;
    background-color:#000;
}
#topMenu > span{
    color:white;
}
#topMenu > span > input{
    vertical-align:text-bottom;
}
#topMenu > span:nth-of-type(2){
    color:white;
    position:relative;
}
#topMenu > span:nth-of-type(2) > .pop{
    position:absolute;
    font-size:18px;
    top:-20px;
    left:-15px;
}
#topMenu > span:nth-of-type(2) > .pop:before{
    content:'';
    width:18px;
    height:18px;
    border-top-color:black;
    border-top-style:dotted;
    border-top-width:1px;
    position:absolute;
    top:14px;
    left:-0px;
    color:black;
    clip:rect(0px 12px 2px 5px);
}
#content{
    display:flex;
    position:relative;
    justify-content:space-between;
}

#svgBox{/*svgBox*/
    width:auto;
    height:auto;
    max-width:640px;
    max-height:640px;
    overflow:scroll;
}
#svgBox + div{
    overflow-y:scroll;
}
#rightMenu{/*menuBox*/
    width:calc(100% - 680px);/*920px*/
    width:100%;
    height:auto;
    padding-top:0px;
    padding-right:0px;
    0background-color:red;
    overflow:auto;
}
#action,
#layer > div:nth-of-type(1),
#color,
#fill,
#stroke,
#other{/*menuBox item*/
    width:100%;
    height:auto;
    margin:0px 0px 2px;
    max-height:0px;
    overflow-y:scroll;
    position:relative;
}
#layer > div:nth-of-type(1){
    min-height:34px;
}
#layer{
    position:relative;
}
#rightMenu > input[type="checkbox"]{
    display:none;
}
#rightMenu > div > div:nth-of-type(1) > ul,
#rightMenu > div > ul{
    width:100%;
    height:auto;
    overflow:hidden;
    position:relative;
}
#rightMenu > div > div:nth-of-type(1) > ul > li,
#rightMenu > div > ul > li{
    padding:0px 10px 0px;
    height:auto;
    line-height:30px;
    font-size:12px;
    border-bottom:solid 1px #fff;
    background-color:#111;
    position:relative;
}

#rightMenu > div > div:nth-of-type(1) > ul > li:first-child,
#rightMenu > div > ul > li:first-child{
    border-top:solid 1px #fff;
}
#layer > div:nth-of-type(1) > ul > li > span{
    width:100%;
    display:inline-block;
    line-height:normal;
    vertical-align:text-bottom;
}
#layer > div:nth-of-type(1) > ul > li > span > span:nth-of-type(1){
    background-color:black;
    display:inline-block;
    width:14px;
    height:14px;
    line-height:11px;
    font-size:14px;
    vertical-align:text-bottom;;
    text-align:center;
    margin-top:1px;
    padding-left:0px;
    border:solid 1px white;
}
#layer > div:nth-of-type(1) > ul > li > span > span:nth-of-type(2){
    font-size:12px;
    font-family:Consolas;
    display:inline-block;
    width:70%;
    vertical-align:text-bottom;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
#layer > div:nth-of-type(1) > ul > li > span > input[type="checkbox"]{
    vertical-align:text-bottom;
    margin:0px 5px 0px 5px;
}
#layer > div:nth-of-type(1) > ul > li > span > input[type="text"]{
    width:70%;
    font-size:12px;
    font-family:Consolas;
    vertical-align:bottom;
}
#layerBorder{
    width:100%;
    height:10px;
    background-color:rgba(0,110,255,0.6);
    position:absolute;
    top:-5px;
    display:none;
}
#layerBorder:after{
    content:'';
    width:100%;
    height:0px;
    border-top-color:white;
    border-top-style:dashed;
    border-top-width:4px;
    display:inline-block;
    position:absolute;
    top:3px;
}
#layerTable li > div > div.itemBorder{
    width:100%;
    height:10px;
    /*background-color:rgba(255,0,0,0.6);*/
    position:absolute;
    top:-5px;
    display:none;
}
#layerTable li > div > div.itemBorder:after{
    content:'';
    width:100%;
    height:0px;
    border-top-color:yellow;
    border-top-style:dotted;
    border-top-width:4px;
    display:inline-block;
    position:absolute;
    top:2px;
}
#layer{
    overflow:hidden;
}
#layerNavi{/* layer navi */
    text-align:right;
    padding:0px 0px 0px;
    position:absolute;
    bottom:4px;
    right:17px;
    /*border-radius:15px;*/
}
#layerNavi > span{
    display:inline-block;
    width:18px;
    height:18px;
    font-size:12px;
    font-weight:bold;
    color:white;
    line-height:16px;
    text-align:center;
    vertical-align:middle;
    overflow:hidden;
    margin:0px 2px 0px 0px;
    cursor:pointer;
    border-radius:6px 6px 6px 6px;
    background-color:black;
    border:solid 1px white;
}
#layerTable li > div{
    overflow-y:scroll;
    padding:px 0px 0px 0px;
    position:relative;
    /*max-height:200px;
    background-color:#111;*/
    0z-index:-1;
    overflow:visible;
}
#layerTable > li > div.item{
    margin:0px 0px 5px;
    display:none;
}
#layerTable li > div > ol{
    width:100%;
    list-style-type:decimal-leading-zero;
    list-style-position:inside;
    /*marker-offse:-5px;*/
}
#layerTable > li > div > ol > li{
    /*text-align:right;*/
    height:auto;
    line-height:18px;
    padding:4px 5px 2px;
    position:relative;
    /*overflow-y:hidden;*/
}
#layerTable > li > div > ol > li > input{
    vertical-align:text-bottom;
    padding:0;
    margin:0;
    display:inline-block;
}
#layerTable > li > div > ol > li > input[type="checkbox"]{
    margin:0px 0px 0px 0px;
}
#layerTable > li > div > ol > li > input[type="text"]{
    width:70%;
    height:16px;
    font-size:11px;
    font-family:Consolas;
    margin:0px 0px 0px 10px;
    /*
    bottom:0px;;
    right:5px;
    position:absolute;
    */
    right:5px;
    position:absolute;
}
#color > ul > li > input[type="text"]{/*#color */
    font-size:12px;
    width:100%;
    box-sizing:border-box;
}
#color > ul > li > input[type="checkbox"],
#color > ul > li > input[type="radio"]{
    vertical-align:text-bottom;
}
#color > ul > li > span.colorCaption,
#color > ul > li > span.pickerCaption{
    width:45px;
    height:auto;
    display:inline-block;
    position:relative;
}
#color > ul > li > span.colorCaption:after,
#color > ul > li > span.pickerCaption:after{
    content: ':';
    position:absolute;
    right:-5px;
}
#color > ul > li > span.slider{
    width:150px;
    height:5px;
    display:inline-block;
    position:absolute;
    right:15px;
    top:calc(50% - 2px);
    bottom:0px;
    background-color:black;
}
#color > ul > li > span.slider > span{
    width:6px;
    height:14px;
    display:inline-block;
    cursor:pointer;
    position:absolute;
    top:-5px;
    background-color:white;
}

#color > ul > li:nth-of-type(4) > span.slider > span{
    right:-6px;
}
#color > ul > li > span.pickerCaption > #picker{
    width:14px;
    height:14px;
    display:inline-block;
    position:relative;
    left:10px;
    top:0px;
    vertical-align:text-bottom;
}
#color > ul > li > span.pickerCaption > #picker > span:nth-of-type(1){
    width:8px;
    height:8px;
    display:inline-block;
    background-color:rgba(0,0,0,1);;
    vertical-align:text-bottom;
    border:solid 0px white;
    position:absolute;
    left:3px;
    top:3px;
}
#color > ul > li > span.pickerCaption > #picker > span:nth-of-type(2){
    width:14px;
    height:14px;
    display:inline-block;
    vertical-align:text-bottom;
    border:solid 3px rgba(0,0,0,1);;
    position:absolute;
    left:0px;
    top:0px;
}
#color > ul > li > span.pickerCaption + span > span{
    display:inline-block;
    width:24px;
    height:14px;
    line-height:16px;
    text-align:right;
    vertical-align:text-bottom;
    overflow:hidden;
}
#color > ul > li > span.pickerCaption + span > span:last-child{
    width:30px;
}
#color > ul > li > span.pickerCaption + span,
#color > ul > li > span.colorCaption + span.colorCheck{
    display:inline-block;
    width:calc(100% - 45px);
    text-align:right;
}

#color > ul > li > span.colorCheck{
    position:relative;
}
#color > ul > li > span.colorCheck > span{
    display:inline-block;
    width:14px;
    height:14px;
    position:absolute;
    background-color:rgba(0,0,0,1);
    left:calc(50% - 14px);
    top:calc(50% - 7px);
    transform:translate(0%,0%);
}
#color > ul > li > span.colorCheck > input{
    vertical-align:text-bottom;
}
#color > ul > li > span > input[type="checkbox"]:nth-of-type(1),
#color > ul > li > span > input[type="radio"]:nth-of-type(1){
    margin-right: 10px;
}
#fill > ul > li > span:nth-of-type(1){/*#other */
    width:45%;
    height:auto;
    display:inline-block;
    position:relative;
}
#fill > ul > li > span:nth-of-type(1):after{
    content: ':';
    position:absolute;
    right:-5px;
}
#fill > ul > li > span:nth-of-type(2){
    width:55%;
    height:auto;
    display:inline-block;
    text-align:right;
}
#fill > ul > li > span > select{
    width:80%;
}
#stroke > ul > li > span:nth-of-type(1){/*#stroke */
    width:45%;
    height:auto;
    display:inline-block;
    position:relative;
}
#stroke > ul > li:nth-of-type(1) > span:nth-of-type(2),
#stroke > ul > li:nth-of-type(2) > span:nth-of-type(2){
    width:25px;
}

#stroke > ul > li > span.slider{
    width:80px;
    height:5px;
    display:inline-block;
    position:absolute;
    right:15px;
    top:calc(50% - 2px);
    bottom:0px;
    background-color:black;
}
#stroke > ul > li > span.slider > span{
    width:6px;
    height:14px;
    display:inline-block;
    cursor:pointer;
    position:absolute;
    top:-5px;
    background-color:white;
}
#stroke > ul > li > span:nth-of-type(1):after{
    content: ':';
    position:absolute;
    right:-5px;
}
#stroke > ul > li > span:nth-of-type(2){
    width:55%;
    height:auto;
    display:inline-block;
    text-align:right;
}
#stroke > ul > li > span > select{
    width:80%;
}
#stroke > ul > li > span > input[type="text"]{
    font-size:12px;
    font-family:Consolas;
    width:80%;
    box-sizing:border-box;
    text-align:rigth;
}
#stroke > ul > li > span > input[type="checkbox"]{
    vertical-align:text-bottom;
    text-align:rigth;
}

#other > ul > li > span:nth-of-type(1){/*#other */
    width:45%;
    height:auto;
    display:inline-block;
    position:relative;
}
#other > ul > li > span:nth-of-type(1):after{
    content: ':';
    position:absolute;
    right:-5px;
}
#other > ul > li > span:nth-of-type(2){
    width:55%;
    height:auto;
    display:inline-block;
    text-align:right;
}
#other > ul > li > span > select{
    width:80%;
}
#other > ul > li > span.gridCheck > input{
    vertical-align:text-bottom;
}

#rightMenu > label{
    width:100%;
    height:28px;
    line-height:28px;
    font-size:16px;
    font-family:Consolas;
    padding:0px 5px 0px;
    display:inline-block;
    overflow:hidden;
    background-color:dimgray;
}
#rightMenu > input:nth-of-type(1):checked ~ #action{
    max-height:500px;
}
#rightMenu > input:nth-of-type(2):checked ~ #layer > div:nth-of-type(1){
    max-height:500px;
}
#rightMenu > input:nth-of-type(3):checked ~ #color{
    max-height:500px;
}
#rightMenu > input:nth-of-type(4):checked ~ #fill{
    max-height:500px;
}
#rightMenu > input:nth-of-type(5):checked ~ #stroke{
    max-height:500px;
}
#rightMenu > input:nth-of-type(6):checked ~ #other{
    max-height:500px;
}
#naviIcon{/*scale*/
    width:18px;
    height:18px;
    overflow:hidden;
    background-color:black;
    position:absolute;
}
#naviIcon > svg{
    position:absolute;
}
svg{
    display:block;
    overflow:hidden;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    outline:none;
}

// forked from negotoy's "HTML ( SVG ) レイヤーテスト" http://jsdo.it/negotoy/QHlo var win = window; var doc = win.document; var _ = { 'Cell' : null, 'CellItem' : null, 'Layer' : null, 'LayerObj' : null, 'ViewBox' : null, 'Box' : null, 'Scale' : null, 'GridFlag' : null, 'ScrollXY' : null, 'ColorCheck' : null, 'PathProperty' : null, 'CanvasXY' : null, 'Spare' : null, 'LayerData' : null, 'ItemData' : null, 'Data' : null }; var _VAL = { 'Offset' : 20, 'Margin' : 600, 'NaviXY' : null, 'NaviOffset' : null, 'SelectFocus' : '#3f91fd', 'SelectBlur' : '#111', 'ItemFocus' : '#ff6447', 'ItemBlur' : 'transparent', 'Click' : 0, 'ClickTimer' : 300, 'ClickTimeId' : 0, 'RGBFill' : [18,18,18,1], 'RGBStroke' : [255,255,255,1], 'SliderValue' :[255, 255, 255, 1, 2, 2], 'InitStr' : 'layer-', 'InitVal' : 'item-', 'LayerHeight' : 'auto', 'ItemHeight' : 'auto', /* svg guide style */ 'CRect' : 8, 'CStrokeWidth' : 2, 'MFill' : 'black', 'MStroke' : 'red', 'RLStroke' : 'yellow', 'RFill' : 'magenta', 'LFill' : 'lime', 'CFill' : 'blue', 'CStroke' : 'yellow', 'ZFill' : 'black', 'ZStroke' : 'orange', 'Data' :[], 'ActiveData' : [null,null,'init'], 'CurrentData' : null, 'SelectData' : [] }; var _HTM = { 'SVGBox' : null, 'NaviBox' : null, 'NaviIcon' : null, 'NaviSVG' : null, 'LayerTable' : null, 'Layer' : null, 'LayerBorder' : null, 'SliderItem' : null, 'LayerSpare' : null, 'ItemSpare' : null, 'Picker' : null, 'RGBA' : null, 'PathFS' : null, 'Fill' : null, 'FillRule' : null, 'Stroke' : null, 'StrokeWidth' : null, 'MiterLimit' : null, 'LineCap' : null, 'LineJoin' : null, 'DashArray' : null, 'ActiveLayer' : null, 'CurrentLayer' : null, 'CurrentItem' : null, 'ItemBorder' : null, 'LayerNavi' : null }; var _SVG = { 'Navi' : null, 'Guide' : null, 'Image' : null, 'Grid' : null, 'Control' : null, 'OffsetItem' : null, 'CellTable' : null, 'CellSpare' : null, 'GSpare' : null, 'PathSpare' : null, 'RectSpare' : null, 'CircleSpare' : null }; var testId = 0; var SVGEvent = { 'AddPoint' : function(e){ //console.log(e); }, 'PathSelect' : function(e){ console.log('[PathSelect]\n',e.SVGEditor); }, 'PathClose' : function(e){ var click = _getVal('Click'); switch(click){ case 0 : console.log('[PathClose-single]'); break; case 1 : console.log('[PathClose-double]'); var ad = _getVal('ActiveData'); var po = _getSvg('Points'); var f = ad[1]['fill-display'] === true ? pm.fill : 'none'; var z = (ad[1].z === false ? '' : 'Z'); ad[ad.length - 1] = 'item'; if(po.childNodes.length == 1){ _setVal('Click', 0); return; } pointsReset(); skin.removeEventListener('mousedown', SVGEvent.SkinDown); doc.removeEventListener('mousemove', SVGEvent.SkinMove); skin.addEventListener('mousedown', SVGEvent.InitDown, false); setAttribute(ad[1].path, 'd', getD(ad[1].d, 'L') + z, 'fill', f); break; } click = click + 1; _setVal('Click', click); clearTimeout(_get('ClickTimeId')); _setVal('ClickTimeId', setTimeout(function(){ _setVal('Click', 0); }, _getVal('ClickTimer'))); }, 'SkinDown' : function(e){ console.log('[SkinDown]'); var click = _getVal('Click'); addPoint(e, ''); doc.addEventListener('mousemove', SVGEvent.SkinDrag, false); doc.addEventListener('mouseup', SVGEvent.SkinUp, false); doc.removeEventListener('mousemove', SVGEvent.SkinMove); switch(click){ case 0 : //console.log('Skin-single'); break; case 1 : //console.log('Skin-double'); break; } click = click + 1; _setVal('Click', click); clearTimeout(_getVal('ClickTimeId')); _setVal('ClickTimeId', setTimeout(function(){ _setVal('Click', 0); }, _getVal('ClickTimer'))); }, 'SkinDrag' : function(e){ //console.log('[SkinDrag]'); }, 'SkinMove' : function(e){ //console.log('[SkinMove]'); var ad = _getVal('ActiveData')[1]; var xy = _get('CanvasXY')(e); var x = xy[0]; var y = xy[1]; ad.path.setAttribute('d', getD(ad.d, 'L') + x + ',' + y); }, 'SkinUp' : function(e){ console.log('[SkinUp]'); doc.addEventListener('mousemove', SVGEvent.SkinMove, false); doc.removeEventListener('mousemove', SVGEvent.SkinDrag); doc.removeEventListener('mouseup', SVGEvent.SkinUp); }, 'InitDown' : function(e){ console.log('[Skin InitDown]'); var ad = _getVal('ActiveData'); var dt = _getVal('Data'); var pr = _get('PathProperty')(ad); var nx, sd, x, y; switch(ad[ad.length - 1]){ case 'init' : x = pr.cellTable.childNodes.length; y = 0; pr.layerTable.appendChild(pr.layer); pr.itemTable.appendChild(pr.item); pr.cellTable.appendChild(pr.cell); pr.cell.appendChild(pr.path); addData(x, pr.layer, 'init'); break; case 'layer' : x = ad[0].index; y = 0; if(pr.itemTable.childNodes.length === 0){ pr.itemTable.appendChild(pr.item); } else{ pr.itemTable.insertBefore(pr.item, pr.itemTable.firstChild); } pr.cell.appendChild(pr.path); break; case 'item' : x = ad[1].id[0]; y = ad[1].id[1]; pr.itemTable.insertBefore(pr.item, ad[1].item); pr.cell.insertBefore(pr.path, ad[1].path.nextSibling); ad[0].set('layer-focus', false); ad[1].set('ctrl', false); ad[1].set('item-focus', false); break; case 'move' : break; case 'control' : break; } pr.cell.setAttribute('class','cl-' + testId); //testId++; addItemData(x, y, pr, 'draw'); addPoint(e, ''); ad = _getVal('ActiveData'); ad[0].set('switch', true); ad[0].set('layer-focus', true); ad[1].set('item-focus', true); this.removeEventListener('mousedown', SVGEvent.InitDown); this.addEventListener('mousedown', SVGEvent.SkinDown, false); doc.addEventListener('mousemove', SVGEvent.SkinDrag, false); doc.addEventListener('mouseup', SVGEvent.SkinUp, false); } }; var HTMLEvent = { 'ItemTableDown' : function(e){ console.log('ItemTableDown'); }, 'ItemDown' : function(e){ console.log(0,'[ItemDown]'); var dt = _get('ItemData')(e.target.SVGEditor.ID); var ad = _getVal('ActiveData'); var sd = _getVal('SelectData').length; var ol = _getHtm('LayerTable').getElementsByTagName('ol'); if(ad[ad.length - 1] == 'draw'){ return; } ad[0].set('layer-focus' , true); if(e.ctrlKey === false && ad[1] !== null){ ad[1].set('item-focus', false); } dt[1].set('ctrl', e.ctrlKey); dt[1].set('item-focus', true, e.ctrlKey); dt[dt.length] = 'item'; _setVal('ActiveData', dt); if(sd > 1){ doc.removeEventListener('mousemove', HTMLEvent.LayerMove); doc.removeEventListener('mouseup', HTMLEvent.LayerUp); return; } for(var i = 0; i < ol.length; i = i + 1){ ol[i].addEventListener('mousemove', HTMLEvent.ItemTableMove, false); } doc.removeEventListener('mousemove', HTMLEvent.LayerMove); doc.removeEventListener('mouseup', HTMLEvent.LayerUp); doc.addEventListener('mouseup', HTMLEvent.ItemTableUp, false); }, 'LayerDown' : function(e, d){ console.log(0,'[LayerDown]'); var dt = _get('Data')(e.target.SVGEditor.ID); var ad = _getVal('ActiveData'); var click = _getVal('Click'); if(ad[ad.length - 1] == 'draw'){ return; } switch(click){ case 0 : if(e.target.className != 'item'){ dt[0].set('layer-focus', true, 'reset'); } dt[1] = ad[1]; dt[dt.length] = 'layer'; _setVal('ActiveData', dt); doc.addEventListener('mousemove', HTMLEvent.LayerMove, false); doc.addEventListener('mouseup', HTMLEvent.LayerUp, false); break; case 1 : ad[0].set('rename', true); //doc.removeEventListener('mousemove', HTMLEvent.LayerMove); //doc.removeEventListener('mouseup', HTMLEvent.LayerUp); console.log('double'); break; } click = click + 1; _setVal('Click', click); clearTimeout(_getVal('ClickTimeId')); _setVal('ClickTimeId', setTimeout(function(){ _setVal('Click', 0); }, _getVal('ClickTimer'))); }, 'ItemTableMove' : function(e){ //console.log('ItemTableMove'); var li = this.getElementsByTagName('li'); var hr = this.nextSibling; var hs = _getHtm('ItemBorder'); var re = getRect(this); var mx = e.clientY - re.top; var to, bu, oh, nd; var tf = false; var bf = false; _setVal('SelectData', []); for(var i = 0; i < hs.length; i = i + 1){ hs[i].style.display = 'none'; } _setVal('CurrentData', null); setStyle(hr,'display', 'block'); for(var j = 0; j < li.length; j = j + 1){ re = getRect(li[j]); to = e.clientY - re.top; bu = re.bottom - e.clientY; oh = li[j].offsetHeight; //if(to > -oh && bu > -oh && bu < 0 || to < oh){ if(to > 0 && bu > 0){ if(to < bu){ mx = mx - to - 4; setStyle(hr,'top', mx + 'px'); tf = true; } else{ mx = mx + bu - 4; setStyle(hr,'top', mx + 'px'); j = j + 1; if(j == li.length){ j = li.length - 1; bf = true; } } nd = _get('ItemData')(li[j].SVGEditor.ID); _setVal('CurrentData', [nd[0], nd[1], li[j].parentNode, li[j], li[j].SVGEditor.ID[0], li[j].SVGEditor.ID[1], tf, bf]); break; } } }, 'ItemTableUp' : function(e){ console.log(0,'[ ItemTableUp ]'); var cd = _getVal('CurrentData'); var sd = _getVal('SelectData'); var ol = _getHtm('LayerTable').getElementsByTagName('ol'); var hr = _getHtm('ItemBorder'); if(e.target.className.indexOf('lay') > -1 && cd !== null && ol[cd[2]] && ol[cd[2]].childNodes.length === 0){ //HTMLEvent.LayerNavi({ // target : // { SVGEditor : { INDEX : 5 }, // ol : ol[e.target.SVGEditor.INDEX], // INDEX : e.target.SVGEditor.INDEX, // ID : 0 // } }); console.log('insert item'); } else if(cd !== null){ HTMLEvent.LayerNavi({'target' : { 'SVGEditor' : { 'INDEX' : 5 } } }); } _setVal('CurrentData', null); doc.removeEventListener('mouseup', HTMLEvent.ItemTableUp); for(var i = 0; i < ol.length; i = i + 1){ ol[i].removeEventListener('mousemove', HTMLEvent.ItemTableMove); hr[i].style.display = 'none'; } }, 'LayerMove' : function(e){ var layerTable = _getHtm('LayerTable'); var li = _get('Layer')(); var hr = _getHtm('LayerBorder'); var r = getRect(layerTable); var y = e.clientY - r.top; var tf = false; var bf = false; var t, b, s; setStyle(hr,'display', 'block'); for(var i = 0; i < li.length; i = i + 1){ r = getRect(li[i]); t = e.clientY - r.top; b = r.bottom - e.clientY; s = li[i + 1] === undefined ? 0 : li[i + 1].offsetHeight; if(t > 0 && b + s > s){ if(t < b){ y = y - t - 5 + 0; setStyle(hr,'top', y + 'px'); if(i > 0){ //i = i - 1; //if(i < 0){ // i = 0; //} } tf = true; } else{ y = y + b - 5 + 0;//+ (li[i + 1] === undefined ? 0 : li[i + 1].offsetHeight); setStyle(hr,'top', y + 'px'); i = i + 1; if(i == li.length){ i = li.length - 1; bf = true; } } _setVal('CurrentData',[_get('LayerData')(li[i].SVGEditor.ID), li[i], li[i].SVGEditor.ID, tf, bf]); break; } } }, 'LayerUp' : function(e){ console.log('[LayerUp]'); setStyle(_getHtm('LayerBorder'),'display', 'none'); if(_getVal('CurrentData') !== null){ HTMLEvent.LayerNavi({'target' : { 'SVGEditor' : { 'INDEX' : 5 } } }); } _setVal('CurrentData',null); doc.removeEventListener('mousemove', HTMLEvent.LayerMove); doc.removeEventListener('mouseup', HTMLEvent.LayerUp); }, 'LayerNavi' : function(e){ console.log('[LayerNavi]'); var dt = _getVal('Data'); var ad = _getVal('ActiveData'); var cd = _getVal('CurrentData'); var sd = _getVal('SelectData'); var nu = e.target.SVGEditor.INDEX; var pr, x, y; console.log(0,'*Navi type[' + ad[ad.length - 1] + ']'); switch(ad[ad.length - 1]){ case 'init' : switch(nu){ case 0 : //copyLayer(e, ad); break; case 1 : ad[ad.length - 1] = 'add'; pr = _get('PathProperty')(ad); x = pr.cellTable.childNodes.length; y = 0; pr.layerTable.appendChild(pr.layer); pr.cellTable.appendChild(pr.cell); addData(x, pr.layer, 'layer'); ad = _getVal('ActiveData'); ad[0].set('layer-focus', true); //addLayer(e, ad); break; case 2 : //delLayer(e, ad); break; case 3 : //replaceLayer(e, ad, 'up', 1); break; case 4 : //replaceLayer(e, ad, 'down', -1); break; } break; case 'layer' : switch(nu){ case 0 : copyLayer(e, ad); break; case 1 : addLayer(e, ad); break; case 2 : delLayer(e, ad); break; case 3 : replaceLayer(e, ad, 'up', 1); break; case 4 : replaceLayer(e, ad, 'down', -1); break; case 5 : replaceLayer(e, ad, 'move', cd); break; } break; case 'item' : switch(nu){ case 0 : switch(sd.length){ case 0 : case 1 : copyItem(e, ad); break; default : addSelectItem(e, ad, sd); } break; case 1 : break; case 2 : switch(sd.length){ case 0 : case 1 : delItem(e, ad); break; default : delSelectItem(e, ad, sd); } break; case 3 : replaceItem(e, ad, 'up', 1); break; case 4 : replaceItem(e, ad, 'down', -1); break; case 5 : replaceItem(e, ad, 'move', cd); break; } break; } }, 'ItemNavi' : function(e){ }, 'SliderDown' : function(e){ doc.addEventListener('mousemove', HTMLEvent.SliderMove, false); doc.addEventListener('mouseup', HTMLEvent.SliderUp, false); }, 'SliderMove' : function(e){ }, 'SliderUp' : function(e){ doc.removeEventListener('mousemove', HTMLEvent.SliderMove); doc.removeEventListener('mouseup', HTMLEvent.SliderUp); }, 'ColorCheck' : function(e){ }, 'LayerWatch' : function(a, b, c){ //console.log(0,'[LayerWatch watch]', a); var layer = this.layer; var dt = _getVal('Data'); var p = _get('LayerObj')(layer); var i, j, k, sd; this[a] = b; switch(a){ case 'display' : setStyle(this.cell, 'display', (b === true ? 'block' : 'none')); break; case 'rename' : if(b === true){ setStyle(p[0], 'display', 'none'); setStyle(p[1], 'display', 'none'); setStyle(p[2], 'display', 'none'); setStyle(p[3], 'display', 'inline-block'); setTimeout(function(e){ e.focus(); }, 100,p[3]); } else{ setStyle(p[0], 'display', 'inline-block'); setStyle(p[1], 'display', 'inline-block'); setStyle(p[2], 'display', 'inline-block'); setStyle(p[3], 'display', 'none'); } break; case 'name' : p[2].textContent = b; p[3].value = b; break; case 'switch': if(b === true){ setProperty(p[0], 'textContent', '-'); setStyle(p[0].parentNode.nextSibling, 'display', 'block'); } else{ setProperty(p[0], 'textContent', '+'); setStyle(p[0].parentNode.nextSibling, 'display', 'none'); } break; case 'layer-focus' : sd = _getVal('SelectData'); switch(b){ case null : setStyle(this.layer, 'backgroundColor', _getVal('SelectBlur')); break; default : setStyle(this.layer, 'backgroundColor', b === true ? _getVal('SelectFocus') : _getVal('SelectBlur')); for(i = 0; i < dt.length; i = i + 1){ if(this.index !== i){ dt[i].set(a, null); } if(dt[i].item === null){ continue; } if(c === 'reset'){ for(j = 0; j < dt[i].item.length; j = j + 1){ dt[i].item[j].set('item-focus', false); } } } if(c == 'reset'){ _setVal('SelectData', []); HTMLEvent.NaviWatch(); } } break; } }, 'ItemWatch' : function(a, b, c){ //console.log(0,'[ItemWatch watch]', a, _getVal('SelectData')); var id = this.id; var i, j, k, sd, nv; switch(a){ case 'fill' : break; case 'stroke' : break; case 'fill-rule' : case 'stroke-width' : case 'stroke-miterlimit' : case 'stroke-linecap' : case 'stroke-linejoin' : case 'stroke-dasharray' : break; case 'z' : break; case 'fill-display' : break; case 'stroke-display' : break; case 'fill-active' : break; case 'stroke-active' : break; case 'layer-focus' : this[a] = b; if(b === true){ //setStyle(item.parentNode.parentNode.parentNode, 'backgroundColor', _getVal('SelectFocus')); } break; case 'item-focus' : sd = _getVal('SelectData'); nv = _getHtm('LayerNavi'); switch(c){ case true://ctrl true b = !this[a]; this[a] = b; switch(b){ case true : nd = _getVal('SelectData'); nd.push(id); HTMLEvent.NaviWatch(); setStyle(this.item, 'backgroundColor', b === true ? _getVal('ItemFocus') : _getVal('ItemBlur')); break; case false : HTMLEvent.NaviWatch(id); setStyle(this.item, 'backgroundColor', b === true ? _getVal('ItemFocus') : _getVal('ItemBlur')); break; } break; case false : case undefined : this[a] = b; if(b === true){ _setVal('SelectData', [id]); HTMLEvent.NaviWatch(); } setStyle(this.item, 'backgroundColor', b === true ? _getVal('ItemFocus') : _getVal('ItemBlur')); this.set('item-clear', true); break; case null : this[a] = false; setStyle(this.item, 'backgroundColor', _getVal('ItemBlur')); break; } break; case 'display' : this[a] = b; setStyle(this.path, 'display', b === true ? 'block' : 'none'); break; case 'item-select' : break; case 'item-clear' : this[a] = b; var dt = _getVal('Data'); for(i = 0; i < dt.length; i = i + 1){ var it = dt[i].item; if(it !== undefined && it !== null){ for(j = 0; j < it.length; j = j + 1){ if(it[j].id[0] == id[0] && it[j].id[1] == id[1]){ continue; } it[j].set('item-focus', false, null); } } } break; case 'set' : break; } }, 'NaviWatch' : function(id){ var nv = _getHtm('LayerNavi'); var sd = _getVal('SelectData'); var nd = [sd[0]]; var i, j, k; for(i = 0; i < sd.length; i = i + 1){ var fg = false; for(j = 0; j < nd.length; j = j + 1){ if(sd[i][0] == nd[j][0] && sd[i][1] == nd[j][1]){ fg = true; } if(id !== undefined && sd[i][0] == id[0] && sd[i][1] == id[1]){ fg = true; } } if(fg === false){ nd.push(sd[i]); } } if(id=== undefined || sd[0] === undefined){ nd = sd; } if(id !== undefined){ sd = []; for(j = 0; j < nd.length; j = j + 1){ if(id[0] == nd[j][0] && id[1] == nd[j][1]){ continue; } sd.push(nd[j]); } nd = sd; } _setVal('SelectData', nd); setStyle(nv[1], 'visibility', nd.length > 0 ? 'hidden' : 'visible'); setStyle(nv[3], 'visibility', nd.length > 1 ? 'hidden' : 'visible'); setStyle(nv[4], 'visibility', nd.length > 1 ? 'hidden' : 'visible'); console.log(0,'[NaviWatch]\n',0,'[tar]=',_getVal('SelectData')); }, 'InitDown' : function(e){ doc.removeEventListener('mousedown', HTMLEvent.InitDown); }, 'InitUp' : function(e){ console.log('[InitUp]'); }, 'LayerText' : function(e){// rename console.log('LayerText',this.SVGEditor.ID[0]); var dt = _getVal('Data')[this.SVGEditor.ID[0]]; dt.set('rename', false); dt.set('name', this.value); }, 'ItemDisplay' : function(e){// child layer var dt = _getVal('Data')[this.SVGEditor.ID[0]]; dt.set('switch', (this.textContent == '+' ? true : false)); }, 'CellDisplay' : function(e){// cell var dt = _getVal('Data')[this.SVGEditor.ID[0]]; dt.set('display', this.checked); }, 'PathDisplay' : function(e){ var dt = _getVal('Data')[this.SVGEditor.ID[0]].item[this.SVGEditor.ID[1]]; dt.set('display', this.checked); }, 'SetGrid' : function(){ var box = _get('Box')(); setGrid(_getSvg('Grid'), box / 10, box, this.checked); }, 'SetScale' : function(){ resize(); } }; win.addEventListener("load",function(){ /* getElem */ //{ var testArea = doc.getElementsByClassName('testArea')[0]; var svg = doc.getElementById('SVG'); var svgSpare = doc.getElementById('svgSpare'); var control = svg.querySelectorAll('#control > g'); var cell = doc.getElementById('cell'); var skin = doc.getElementById('skin'); var svgBox = doc.getElementById('svgBox'); var naviIcon = doc.getElementById('naviIcon'); var naviSVG = naviIcon.getElementsByTagName('svg')[0]; var rightMenu = doc.getElementById('rightMenu'); var rightMenuDisplay = rightMenu.querySelectorAll('#rightMenu > input'); var layerTable = doc.getElementById('layerTable'); var layer = layerTable.getElementsByTagName('li')[0]; var layerItem = layer.getElementsByTagName('ol')[0].getElementsByTagName('li')[0]; var itemSpare = layerItem.cloneNode(true); layerItem.parentNode.removeChild(layerItem); var layerSpaer = layer.cloneNode(true); layerTable.removeChild(layer); var layerBorder = doc.getElementById('layerBorder'); var layerNavi = doc.getElementById('layerNavi').getElementsByTagName('span'); var color = doc.getElementById('color'); var slider = rightMenu.querySelectorAll('.slider > span'); var picker = doc.getElementById('picker').getElementsByTagName('span'); var rgba = color.querySelectorAll('.pickerCaption + span > span'); var pathFS = color.querySelectorAll('.colorCheck > span'); var colorCheck = color.querySelectorAll('.colorCheck > input[type]'); var fill = doc.getElementById('fill'); var fillSelect = fill.getElementsByTagName('select'); var stroke = doc.getElementById('stroke'); var fillColor = doc.getElementById('fillColor'); var strokeColor = doc.getElementById('strokeColor'); var strokeSelect = stroke.getElementsByTagName('select'); var strokeInput = stroke.getElementsByTagName('input'); var strokeWidth = doc.getElementById('strokeWidth'); var miterLimit = doc.getElementById('miterLimit'); var lineCap = doc.getElementById('lineCap'); var lineJoin = doc.getElementById('lineJoin'); var dashArray = doc.getElementById('dashArray'); var pathZ = doc.getElementById('pathZ'); var other = doc.getElementById('other'); var otherSelect = other.getElementsByTagName('select'); var otherInput = other.getElementsByTagName('input'); var test = doc.getElementById('test'); var locus = doc.getElementById('locus'); setObjIndex(delSpace(layerTable)); setObjIndex(layerNavi); setObjIndex(colorCheck); setObjIndex(slider, undefined, 255); slider[3].SVGEditor.VALUE = 1; slider[4].SVGEditor.VALUE = 20; slider[5].SVGEditor.VALUE = 8; setObjIndex(fillSelect); setObjIndex([lineCap, lineJoin, dashArray, pathZ]); setObjIndex([otherSelect[0], otherInput[0]]); //} /* setpam */ //{ _set('Data', function(a){ var d = _getVal('Data'); switch(a){ case undefined: return [d]; default : switch(a.length){ case 1 : return [d[a[0]]]; case 2 : return [d[a[0]], d[a[1]]]; } } }); _set('LayerData', function(a){ //var p = getIndex(a); var d = _getVal('Data')[a[0]]; return d; }); _set('ItemData', function(a){ var d = _getVal('Data')[a[0]]; var p = getIndex(a); p = _get('Cell')([p[0],p[1]]); return [d, d.item[a[1]]]; }); _set('Cell', function(n){ if(n === undefined){ return cell.getElementsByTagName('g'); } else{ switch(n[1]){ case undefined: return cell.getElementsByTagName('g')[n[0]]; default : return [cell, cell.getElementsByTagName('g')[n[0]], cell.getElementsByTagName('g')[n[0]].childNodes[n[1]]]; } } }); _set('Layer', function(n){ if(n === undefined){ return layerTable.querySelectorAll('div > ul > li'); } else{ return layerTable.querySelectorAll('div > ul > li')[n]; } }); _set('LayerObj', function(o){ return [o.getElementsByTagName('span')[1],o.getElementsByTagName('input')[0], o.getElementsByTagName('span')[2], o.getElementsByTagName('input')[1]]; }); _set('ItemObj', function(o){ switch(o.nodeName.toLowerCase()){ case 'li' : break; } return [o.getElementsByTagName('input')[0], o.getElementsByTagName('input')[1],]; }); _set('ViewBox', function(){ return _getVal('Margin') + _getVal('Offset') * 2; }); _set('Box', function(){ return _getVal('Margin') * 2 + _get('Scale')() + _getVal('Offset') * 2; }); _set('Scale', function(){ return parseInt(otherSelect[0].value); }); _set('GridFlag', function(){ return otherInput[0].checked; }); _set('ScrollXY', function(){ return _getVal('Margin') - (_getVal('Margin') - _get('Scale')()) / 2; }); _set('NaviCenterXY', function(){ return svg.width.animVal.value - svgBox.clientWidth; }); _set('ColorCheck', function(a){ switch(a){ case 'defo' : return [colorCheck[0], colorCheck[1], colorCheck[2], colorCheck[3]]; case 'init' : colorCheck[0].checked = colorCheck[1].checked = false; colorCheck[2].checked = colorCheck[3].checked = true; return [false, false, true, true]; default : return [colorCheck[0].checked, colorCheck[1].checked, colorCheck[2].checked, colorCheck[3].checked]; } }); _set('PathProperty', function(ad){ var type = 'path'; var ctr, cts, pro, inp; console.log(0,'[PathProperty]\n',ad[ad.length - 1]); switch(ad[ad.length - 1]){ case 5 : case 'init' : console.log(0,'*type[init]'); ctr = [_get('Spare')('layer'), _get('Spare')('cell')]; cts = [_get('Spare')('item'), _get('Spare')(type)]; break; case 'layer' : case 'copy' : ctr = [_getVal('ActiveData')[0].layer, _getVal('ActiveData')[0].cell]; cts = [_get('Spare')('item'), _get('Spare')(type)]; console.log(0,'*type[layer]'); ad[ad.length - 1] = 'layer'; break; case 'item' : ctr = [_getVal('ActiveData')[1].layer, _getVal('ActiveData')[1].cell]; cts = [_get('Spare')('item'), _get('Spare')(type)]; console.log(0,'*type[item]'); break; case 'add' : ctr = [_get('Spare')('layer'), _get('Spare')('cell')]; cts = [null, null]; break; } pro = { 'fill' : fillColor.style.backgroundColor, 'fill-rule' : fillSelect[0].value, 'stroke' : strokeColor.style.backgroundColor, 'stroke-width' : parseInt(strokeWidth.textContent), 'stroke-miterlimit' : parseInt(miterLimit.textContent), 'stroke-linecap' : lineCap.value, 'stroke-linejoin' : lineJoin.value, 'stroke-dasharray' : dashArray.value, 'z' : pathZ.checked, 'fill-active' : colorCheck[0].checked, 'fill-display' : colorCheck[1].checked, 'stroke-active' : colorCheck[2].checked, 'stroke-display' : colorCheck[3].checked, 'fill-rgba' : assasin(_getVal('RGBFill')), 'stroke-rgba' : assasin(_getVal('RGBStroke')), 'd' : [], 'type' : type, 'layer-focus' : false, 'item-focus' : false, 'layerTable' : _getHtm('LayerTable'), 'layer' : ctr[0], 'itemTable' : ctr[0].getElementsByTagName('ol')[0], 'item' : cts[0], 'cellTable' : _getSvg('CellTable'), 'cell' : ctr[1], 'path' : cts[1], 'id' : null, 'display' : true, 'set' : HTMLEvent.ItemWatch }; if(cts[0] !== null){ inp = _get('ItemObj')(pro.item); inp[1].value = _getVal('InitVal') + pro.itemTable.childNodes.length; } return pro; }); _set('CanvasXY', function(e){ var margin = _getVal('Margin'); var off = _getVal('Offset'); var sx = svgBox.scrollLeft; var sy = svgBox.scrollTop; var w = svgBox.clientWidth + sx; var h = svgBox.clientHeight + sy; var ra = svgBox.getBoundingClientRect(); var x = e.clientX - ra.left + sx; var y = e.clientY - ra.top + sy; //if(x > w){ svgBox.scrollLeft = svgBox.scrollLeft + 10; } //if(y > h){ svgBox.scrollTop = svgBox.scrollTop + 10; } //if(x < sx){ svgBox.scrollLeft = svgBox.scrollLeft - 10; } //if(y < sy){ svgBox.scrollTop = svgBox.scrollTop - 10; } return [(e.clientX - ra.left + sx - off) - margin, (e.clientY - ra.top + sy - off) - margin]; }); _set('Spare', function(a){ switch(a){ case 'layer' : return _getHtm('LayerSpare').cloneNode(true); case 'item' : return _getHtm('ItemSpare').cloneNode(true); case 'cell' : return _getSvg('CellSpare').cloneNode(true); case 'g' : return _getSvg('GSpare').cloneNode(true); case 'path' : return _getSvg('PathSpare').cloneNode(true); case 'rect' : return _getSvg('RectSpare').cloneNode(true); case 'circle' : return _getSvg('CircleSpare').cloneNode(true); } }); _setHtm('SVGBox', svgBox); _setHtm('NaviIcon', naviIcon); _setHtm('LayerTable', layerTable); _setHtm('Layer', null); _setHtm('LayerBorder', layerBorder); _setHtm('ItemBorder' , layerTable.getElementsByClassName('itemBorder')); _setHtm('Picker', picker); _setHtm('RGBA', rgba); _setHtm('PathFS', pathFS); _setHtm('LayerNavi', layerNavi); _setHtm('SliderItem', slider); _setHtm('LayerSpare', layerSpaer); _setHtm('ItemSpare', itemSpare); _setHtm('Skin', skin); _setHtm('Fill', fill); _setHtm('Stroke', stroke); _setHtm('StrokeWidth', strokeWidth); _setHtm('MiterLimit', miterLimit); _setHtm('LineCap', lineCap); _setHtm('LineJoin', lineJoin); _setHtm('DashArray', dashArray); _setSvg('NaviSVG', naviSVG); _setSvg('SVG', svg); _setSvg('Grid', doc.getElementById('grid')); _setSvg('CellTable', delSpace(doc.getElementById('cell'))); _setSvg('Cell', doc.getElementById('cell').getElementsByTagName('g')); _setSvg('Control', control); _setSvg('OffsetItem', svg.querySelectorAll('svg > g')); _setSvg('Points', doc.getElementById('points')); _setSvg('Guide', doc.getElementById('guide')); _setSvg('Image', doc.getElementById('image')); _setSvg('CellSpare', svgSpare.getElementsByTagName('g')[0].cloneNode(true)); _setSvg('GSpare', svgSpare.getElementsByTagName('g')[0].cloneNode(true)); _setSvg('PathSpare', svgSpare.getElementsByTagName('path')[0].cloneNode(true)); _setSvg('RectSpare', svgSpare.getElementsByTagName('rect')[0].cloneNode(true)); _setSvg('CircleSpare', svgSpare.getElementsByTagName('rect')[0].cloneNode(true)); setAttribute(otherSelect[0].getElementsByTagName('option')[3], 'selected', 'selected'); colorCheck[0].checked = false; colorCheck[1].checked = false; colorCheck[2].checked = true; colorCheck[3].checked = true; rightMenuDisplay[0].checked = false; rightMenuDisplay[1].checked = true; rightMenuDisplay[2].checked = false; rightMenuDisplay[3].checked = false; rightMenuDisplay[4].checked = false; rightMenuDisplay[5].checked = false; //} /* setElem */ //{ var offset = _getVal('Offset'); var sw = (svgBox.offsetWidth - svgBox.clientWidth); var sh = (svgBox.offsetHeight - svgBox.clientHeight); var margin = _getVal('Margin'); var nb = naviSVG.width.animVal.value; var wh = nb / 2; var vb = margin + offset * 2; var sx = (Math.round(sw / 2) - wh); var sy = (Math.round(sh / 2) - wh); setStyle(svgBox, 'width', (vb + sw) + 'px', 'height', (vb + sh) + 'px', 'maxWidth', (vb + sw) + 'px', 'maxHeight', (vb + sh) + 'px'); setStyle(svgBox.nextSibling, 'width', (testArea.offsetWidth - svgBox.offsetWidth) + 'px', 'height' , (vb + sh) + 'px'); setStyle(naviIcon, 'overflow', 'hidden', 'width', sw + 'px', 'height', sh + 'px', 'left', (svgBox.offsetWidth - sw) + 'px', 'top', (svgBox.offsetHeight - sh) + 'px'); setStyle(naviSVG, 'left', sx + 'px', 'top', sy + 'px'); for(var i = 0; i < control.length; i = i + 1){ var pa = control[i].getElementsByTagName('path')[0]; var pb = control[i].getElementsByTagName('path')[1]; var ca = control[i].getElementsByTagName('circle')[0]; var cb = control[i].getElementsByTagName('circle')[1]; setAttribute(pa, 'stroke', _getVal('LFill')); setAttribute(pb, 'stroke', _getVal('RFill')); setAttribute(ca, 'fill', _getVal('LFill'), 'r', _getVal('CRect') / 2); setAttribute(cb, 'fill', _getVal('RFill'), 'r', _getVal('CRect') / 2); }//for setStyle(pathFS[0], 'backgroundColor', 'rgba(' + (_getVal('RGBFill').join(',')) + ')'); setStyle(pathFS[1], 'backgroundColor', 'rgba(' + (_getVal('RGBStroke').join(',')) + ')'); setStyle(picker[0], 'backgroundColor', 'rgba(' + (_getVal('RGBFill').join(',')) + ')'); setStyle(picker[1], 'borderColor', 'rgba(' + (_getVal('RGBStroke').join(',')) + ')'); var sv = _getVal('SliderValue'); for(var j = 0; j < slider.length; j = j + 1){ setSlider(slider[j], sv[j]); } _setVal('NaviOffset', [sx, sy, (wh - 0.5), (wh - 0.5)]); _setVal('NaviBox', nb); //} /* event */ //{ svgBox.addEventListener('scroll', CanvasNaviEvent.Scroll, false);//canvas area scroll naviIcon.addEventListener('mousedown', CanvasNaviEvent.Down, false);//canvas navi otherSelect[0].addEventListener('change', HTMLEvent.SetScale, false);//canvas scale otherInput[0].addEventListener('change', HTMLEvent.SetGrid, false);//grid svg.querySelector('svg > rect:nth-of-type(1)').addEventListener('mousedown', HTMLEvent.AddPoint, false);//control add layerTable.addEventListener('mousedown', HTMLEvent.LayerDown, true);//layer select //layerTable.addEventListener('mousedown', HTMLEvent.ItemDown, false);//layer select layerNavi[0].addEventListener('mouseup', HTMLEvent.LayerNavi, false);//layer event layerNavi[1].addEventListener('mouseup', HTMLEvent.LayerNavi, false); layerNavi[2].addEventListener('mouseup', HTMLEvent.LayerNavi, false); layerNavi[3].addEventListener('mouseup', HTMLEvent.LayerNavi, false); layerNavi[4].addEventListener('mouseup', HTMLEvent.LayerNavi, false); slider[0].addEventListener('mousedown', HTMLEvent.SliderDown, false);//color slider slider[1].addEventListener('mousedown', HTMLEvent.SliderDown, false); slider[2].addEventListener('mousedown', HTMLEvent.SliderDown, false); slider[3].addEventListener('mousedown', HTMLEvent.SliderDown, false); slider[4].addEventListener('mousedown', HTMLEvent.SliderDown, false);//stroke slider slider[5].addEventListener('mousedown', HTMLEvent.SliderDown, false); colorCheck[0].addEventListener('change', HTMLEvent.ColorCheck, false);//fill stroke colorCheck[1].addEventListener('change', HTMLEvent.ColorCheck, false); colorCheck[2].addEventListener('change', HTMLEvent.ColorCheck, false); colorCheck[3].addEventListener('change', HTMLEvent.ColorCheck, false); fillSelect[0].addEventListener('change', function(){//fill rule }, false); strokeSelect[0].addEventListener('change', function(){//linecap }, false); strokeSelect[1].addEventListener('change', function(){//linejoin }, false); strokeInput[0].addEventListener('blur', function(e){//stroke-dasharray }, false); strokeInput[0].addEventListener('keydown', function(e){//stroke-dasharray }, false); pathZ.addEventListener('change', function(){//pathZ }, false); doc.addEventListener('mousedown', HTMLEvent.InitDown, false);//init skin.addEventListener('mousedown', SVGEvent.InitDown, false);//svg skin doc.addEventListener('mousedown', function(e){ //console.log(e.target.SVGEditor); }, false); //} //setData(); //setId(); resize(); doc.body.style.visibility = 'visible'; testArea.focus(); }, false);//onload var CanvasNaviEvent = { 'Down' : function(e){ setScale(e, 'visible'); doc.addEventListener('mouseup', CanvasNaviEvent.Up, false); doc.addEventListener('mousemove', CanvasNaviEvent.Move, false); }, 'Move' : function(e){ var naviSVG = _getSvg('NaviSVG'); var c = _get('NaviCenterXY')(); var n = _getVal('NaviBox'); var r = getRect(naviSVG); var x = e.clientX - r.left; var y = e.clientY - r.top; if(x < 0){ x = 0; } if(y < 0){ y = 0; } if(x > r.width){ x = r.width; } if(y > r.height){ y = r.height; } setAttribute(naviSVG.getElementsByTagName('circle')[0], 'cx', x, 'cy', y); _setVal('NaviXY', [x, y]); setProperty(_getHtm('SVGBox'), 'scrollLeft', (c * x / n), 'scrollTop', (c * y / n)); }, 'Up' : function(e){ setScale(e, 'hidden'); doc.removeEventListener('mouseup', CanvasNaviEvent.Up); doc.removeEventListener('mousemove', CanvasNaviEvent.Move); }, 'Scroll' : function(e){ var n = _getVal('NaviBox'); var c = _get('NaviCenterXY')(); _setVal('NaviXY', [this.scrollLeft / c * n, this.scrollTop / c * n]); } }; /* elem ----------------------------------------------------------------------------------Element Item---------*/ var addSelectItem = function(ev, ad, sd){ console.log('[addSelectItem]\n'); var dt = _getVal('Data'); var x = 0;//dt.length - 1;//ad[0].index; var la = _get('Spare')('layer'); var ca = _get('Spare')('cell'); var nd = []; ad[0].set('layer-focus', false); for(var i = 0; i < dt.length; i = i + 1){ var du = dt[i].item; if(du === null || du === undefined){ continue; } for(var j = 0; j < du.length; j = j + 1){ for(var k = 0; k < sd.length; k = k + 1){ if(du[j].id[0] == sd[k][0] && du[j].id[1] == sd[k][1]){ var ol = du[j].itemTable; var gg = du[j].cell; var li = ol.childNodes[sd[k][1]].cloneNode(true); var pa = gg.childNodes[gg.childNodes.length - 1 - sd[k][1]].cloneNode(true); nd.push(assasin(du[j])); la.getElementsByTagName('ol')[0].appendChild(li); if(ca.childNodes.length === 0){ ca.appendChild(pa); } else{ ca.insertBefore(pa, ca.lastChild); } } } } } ad[0].layerTable.insertBefore(la, ad[0].layerTable.firstChild); ad[0].cellTable.appendChild(ca); addData(x, la, 'init'); ad = _getVal('Data')[x]; ad.item = []; for(var l = 0; l < nd.length; l = l + 1){ ad.item.push(nd[l]); } _setVal('ActiveData', [dt[0], dt[0].item[0], 'item']); _setVal('SelectData', []); HTMLEvent.NaviWatch(); setId(); ad = _getVal('ActiveData'); ad[0].set('switch', true); ad[0].set('layer-focus', true, 'reset'); }; var delSelectItem = function(ev, ad, sd){ console.log('[delSelectItem]\n'); var dt = _getVal('Data'); var du, dl, ta; for(var i = 0; i < dt.length; i = i + 1){ var nd = []; du = dt[i].item; if(du === null || du === undefined){ continue; } for(var j = 0; j < du.length; j = j + 1){ var fl = false; for(var k = 0; k < sd.length; k = k + 1){ if(du[j].id[0] == sd[k][0] && du[j].id[1] == sd[k][1]){ var ol = du[j].itemTable; var gg = du[j].cell; var kl = ol.childNodes[sd[k][1]]; var pl = gg.childNodes[gg.childNodes.length - 1 - sd[k][1]]; kl.setAttribute('class', 'del'); pl.setAttribute('class', 'del'); fl = true; } } if(fl === false){ nd.push(du[j]); } else{ //delete du[j]; } } dt[i].item = nd; } dl = doc.getElementsByClassName('del'); while(dl.length > 0){ var par = dl[0].parentNode; par.removeChild(dl[0]); } ta = dt[sd[0][0]]; _setVal('ActiveData', [dt[sd[0][0]], null, 'layer']); _setVal('SelectData', []); setId(); }; var replaceItem = function(ev, ad, pa, cd){ console.log('[replaceItem]\n'); var la = ad[1].item; var ca = ad[1].path; var lb, cb, id; switch(pa){ case 'up' ://up lb = la.previousSibling; cb = ca.nextSibling; if(lb === null || cb === null){ return; } id = lb.SVGEditor.ID; lb = la.parentNode.replaceChild(la, lb); cb = ca.parentNode.replaceChild(ca, cb); la.parentNode.insertBefore(lb, la.nextSibling); ca.parentNode.insertBefore(cb, ca); replaceItemData(id[0], id[1], 1); ad = _getVal('ActiveData'); _setVal('SelectData', [ad[1].id]); ad[1].set('item-focus', true); break; case 'down'://down lb = la.nextSibling; cb = ca.previousSibling; if(lb === null || cb === null){ return; } id = lb.SVGEditor.ID; lb = la.parentNode.replaceChild(la, lb); cb = ca.parentNode.replaceChild(ca, cb); la.parentNode.insertBefore(lb, la); ca.parentNode.insertBefore(cb, ca.nextSibling); replaceItemData(id[0], id[1], -1); ad = _getVal('ActiveData'); _setVal('SelectData', [ad[1].id]); ad[1].set('item-focus', true); break; default : var lc, cc, dt, nd; //cd , data[0] > data[0].item[1] > ol[2] > li(I)[3] > index[4] > id[5] > flag[6] > flag[7] id = ad[1].id; ad[0].set('layer-focus', false); ad[1].set('item-focus', false); nd = cd[0]; cc = cd[1]; lb = la.cloneNode(true); cb = ca.cloneNode(true); if( cd[7] === true){ cd[2].appendChild(lb); } else if(id[1] < cd[5]){ cd[2].insertBefore(lb, cd[3].nextSibling); } else{ cd[2].insertBefore(lb, cd[3]); } if(cd[6] === true && cd[7] === true){ cc.cell.appendChild(cb); } else if(id[1] > cd[5]){ cc.cell.insertBefore(cb, cc.path.nextSibling); } else{ cc.cell.insertBefore(cb, cc.path); } ad[0].itemTable.removeChild(la); ad[0].cell.removeChild(ca); replaceItemData(id[0], id[1], cd[4], cd[5]); ad = _getVal('ActiveData'); _setVal('SelectData', [ad[1].id]); ad[0].set('layer-focus', true); ad[1].set('item-focus', true); } }; var delItem = function(ev, ad, sd){ console.log('[delItem]\n'); var id = ad[1].id; var la = ad[1].item; var ca = ad[1].path; var lb = la.previousSibling; la.parentNode.removeChild(la); ca.parentNode.removeChild(ca); delItemData(id[0], id[1], ad[1].layer); ad = _getVal('ActiveData'); console.log(ad); if(ad[1] !== null){ ad[1].set('item-focus', true); _setVal('SelectData', [ad[1].id]); } else{ _setVal('SelectData', []); } HTMLEvent.NaviWatch(); }; var copyItem = function(ev, ad){ console.log('[ItemCopy]\n'); var la = ad[1].item.cloneNode(true); var ca = ad[1].path.cloneNode(true); var id = ad[1].id; ad[1].set('item-focus', false); ad[1].item.parentNode.insertBefore(la, ad[1].item); ad[1].path.parentNode.insertBefore(ca, ad[1].path.nextSibling); copyItemData(id[0], id[1], ad[1]); ad = _getVal('ActiveData')[1]; _setVal('SelectData', [ad.id]); ad.set('item-focus', true); }; /* elem ----------------------------------------------------------------------------------Element Layer---------*/ var replaceLayer = function(ev, ad, pa, cd){ console.log('[layerReplace]\n'); var la = ad[0].layer; var ca = ad[0].cell; var lb, cb, id; switch(pa){ case 'up' ://up lb = la.previousSibling; cb = ca.nextSibling; if(lb === null || cb === null){ return; } id = ad[0].index; lb = la.parentNode.replaceChild(la, lb); cb = ca.parentNode.replaceChild(ca, cb); la.parentNode.insertBefore(lb, la.nextSibling); ca.parentNode.insertBefore(cb, ca); replaceData(id, 1); break; case 'down'://down lb = la.nextSibling; cb = ca.previousSibling; if(lb === null || cb === null){ return; } id = ad[0].index; lb = la.parentNode.replaceChild(la, lb); cb = ca.parentNode.replaceChild(ca, cb); la.parentNode.insertBefore(lb, la); ca.parentNode.insertBefore(cb, ca.nextSibling); replaceData(id, -1); break; default : var lc, cc; if(ad[0].index == cd[2]){ return; } ad[0].set('layer-focus', false); lc = la.cloneNode(true); cc = ca.cloneNode(true); if(cd[4] === true){ ad[0].layerTable.appendChild(lc); } else if(ad[0].index < cd[2]){ ad[0].layerTable.insertBefore(lc, cd[1].nextSibling); } else{ ad[0].layerTable.insertBefore(lc, cd[1]); } if(cd[3] === true && cd[7] === true){ ad[0].cellTable.appendChild(cc); } else if(ad[0].index > cd[2]){ ad[0].cellTable.insertBefore(cc, _get('LayerData')(cd[2]).cell.nextSibling); } else{ ad[0].cellTable.insertBefore(cc, _get('LayerData')(cd[2]).cell); } ad[0].layerTable.removeChild(la); ad[0].cellTable.removeChild(ca); replaceData(ad[0].index, 0, cd[2]); ad = _getVal('ActiveData'); ad[0].set('layer-focus', true); } }; var delLayer = function(ev, ad){ console.log('[delLayer]\n'); var dt = _getVal('Data'); var id = ad[0].index; var la = ad[0].layer; var ca = ad[0].cell; la.parentNode.removeChild(la); ca.parentNode.removeChild(ca); delData(id); ad = _getVal('ActiveData'); if(ad[0] !== null){ ad[0].set('layer-focus', true); } }; var addLayer = function(ev, ad){ console.log('[addLayer]\n'); ad[0].set('layer-focus', false); var id = ad[0].index; var la = _get('Spare')('layer'); var ca = _get('Spare')('cell'); ad[0].set('layer-focus', false); ad[0].layer.parentNode.insertBefore(la, ad[0].layer); ad[0].cell.parentNode.insertBefore(ca, ad[0].cell.nextSibling); addData(id, la, 'layer'); ad = _getVal('ActiveData'); ad[0].set('layer-focus', true); }; var copyLayer = function(ev, ad){ console.log('[layerCopy]\n'); var p, tx; var la = ad[0].layer.cloneNode(true); var ca = ad[0].cell.cloneNode(true); ad[0].set('layer-focus', false); ad[0].layer.parentNode.insertBefore(la, ad[0].layer); ad[0].cell.parentNode.insertBefore(ca, ad[0].cell.nextSibling); addData(ad[0].index, la, 'copy'); ad = _getVal('ActiveData')[0]; p = _get('LayerObj')(ad.layer); tx = p[2].textContent + '(c)'; ad.set('layer-focus', true); ad.set('name', tx); }; /* data----------------------------------------------------------------------------------Item Data---------*/ var replaceItemData = function(a, b, c, d){ var data = _getVal('Data'); var da, db, ca, cb; if(d === undefined){ da = data[a].item; ca = da.splice(b, 1); da.splice(b + c, 0, assasin(ca[0])); _setVal('ActiveData',[data[a], data[a].item[b], 'item']); setId(); console.log(0,'[replaceItemData]\n',data,data[data.length - 1], data[a]); } else{ if(a == c){ da = data[a].item; ca = da.splice(b, 1); da.splice(d, 0, assasin(ca[0])); } else{ da = data[a].item; db = data[c].item; ca = da.splice(b, 1); db.splice(d, 0, assasin(ca[0])); } _setVal('ActiveData',[data[c], data[c].item[d], 'item']); setId(); console.log(0,'[replaceItemData]\n',data,data[data.length - 1], data[c]); } }; var delItemData = function(a, b, c){ var data = _getVal('Data'); var d = data[a].item; var e; data[a].item.splice(b, 1); if(data[a].item[b] === undefined){ b = b - 1; if(b < 0){ b = 0; } } e = [data[a], data[a].item[b], 'item']; if(d.length === 0){ data[a].item = null; e = [data[a], null, 'layer']; } _setVal('ActiveData', e); setId(); console.log(0,'[delItemData]\n',data,data[data.length - 1]); }; var addItemData = function(a, b, c, t){ var data = _getVal('Data'); var d = data[a]; var e; if(d.item === null){ data[a].item = []; } e = assasin(c); data[a].item.splice(b, 0, e); _setVal('ActiveData',[data[a], data[a].item[b], t]); setId(); console.log(0,'[addItemData]\n',data,data[a]); }; var copyItemData = function(a, b, c){ var data = _getVal('Data'); var d = data[a]; var e; if(d.item === null){ data[a].item = []; } e = assasin(c); data[a].item.splice(b + 1, 0, e); _setVal('ActiveData',[data[a], data[a].item[b], 'item']); setId(); console.log(0,'[copyItemData]\n',data,d); }; /* data----------------------------------------------------------------------------------Layer Data---------*/ var replaceData = function(a, b, c){ var data = _getVal('Data'); if(c === undefined){ d = data.splice(a, 1); data.splice(a - b, 0, assasin(d[0])); a = a - b; } else{ d = data.splice(a, 1); data.splice(c, 0, assasin(d[0])); a = c; } _setVal('ActiveData', [data[a], null, 'layer']); setId(); console.log(0,'[replaceData]\n',data,data[data.length - 1]); }; var delData = function(a){ var data = _getVal('Data'); var c; data.splice(a, 1); if(data[a] === undefined){ a = a - 1; } c = [data[a], null, 'layer']; if(data.length === 0){ c = [null, null, 'init']; } _setVal('ActiveData', c); setId(); console.log(0,'[delData]\n',data,data[data.length - 1]); }; var addData = function(a, o, b){ var data = _getVal('Data'); if(data === null){ data = []; _setVal('Data', data); } var p = _get('LayerObj')(o); var x = data.length; var q = data[a]; var n, r, g; if(b == 'init' || b == 'layer'){ n = _getVal('InitStr') + (x < 10 ? ('0' + x) : x); p[2].textContent = n; p[3].value = n; r = { 'display' : true, 'name' : n, 'item' : null, 'rename' : false, 'layer-focus' : false, 'layerTable' : null, 'itemTable' : null, 'cellTable' : null, 'layer' : o, 'switch' : false, 'set' : HTMLEvent.LayerWatch }; data.splice(a, 0, r); _setVal('ActiveData', [data[a], null, b]); setId(); } else{ r = assasin(q); data.splice(a + 1, 0, r); _setVal('ActiveData', [data[a], null, b]); setId(); } console.log(0,'[addData]\n',data,data[data.length - 1]); }; var setData = function(){ var layer = _get('Layer')(); _setVal('Data', []); for(var i = 0; i < layer.length; i = i + 1){ addLayerData(layer[i], i); } }; /* elem ----------------------------------------------------------------------------------id---------*/ var setId = function(){ function data(){ var la = _get('Layer')(); var ca = _get('Cell')(); var da = _getVal('Data'); var ea, fa, lm, ln, p; for(var i = 0; i < da.length; i = i + 1){ lm = da.length - 1 - i; ea = da[i]; ea.layerTable = la[i].parentNode; ea.itemTable = la[i].getElementsByTagName('ol')[0]; ea.layer = la[i]; ea.cellTable = ca[lm].parentNode; ea.cell = ca[lm]; ea.index = i; fa = ea.item; if(fa === null){ continue; } for(var j = 0; j < ea.item.length; j = j + 1){ ln = ea.item.length - 1 - j; ea.item[j].id = [i, j]; ea.item[j].layerTable = la[i].parentNode; ea.item[j].layer = la[i]; ea.item[j].itemTable = la[i].getElementsByTagName('ol')[0]; ea.item[j].item = la[i].getElementsByTagName('ol')[0].getElementsByTagName('li')[j]; ea.item[j].cellTable = ca[lm].parentNode; ea.item[j].cell = ca[lm]; ea.item[j].path = ca[lm].getElementsByTagName(ea.item[ln].type)[ln]; ea.item[j].id = [i, j]; } } } function layer(d , z){ var a = d.getElementsByTagName('input')[0]; var b = d.getElementsByTagName('input')[1]; var c = d.getElementsByTagName('span')[0]; if(a.SVGEditor.evt === undefined){ a.SVGEditor.evt = { 'cellDisplay' : HTMLEvent.CellDisplay }; a.addEventListener('change', function(){ this.SVGEditor.evt.cellDisplay.call(this); }, false); } if(b.SVGEditor.evt === undefined){ b.SVGEditor.evt = { 'setText' : HTMLEvent.LayerText }; b.addEventListener('blur', function(e){ this.SVGEditor.evt.setText.call(this); }, false); b.addEventListener('keydown', function(e){ switch(e.keyCode){ case 13: this.SVGEditor.evt.setText.call(this); break; } }, false); } if(c.SVGEditor.evt === undefined){ c.SVGEditor.evt = { 'itemDisplay' : HTMLEvent.ItemDisplay }; c.addEventListener('mousedown', function(e){ this.SVGEditor.evt.itemDisplay.call(this, e); }, false); } } function layerItem(o, p){ var li = o.childNodes; for(var i = 0; i < li.length; i = i + 1){ var z = li[i]; var a = z.getElementsByTagName('input')[0]; var b = z.getElementsByTagName('input')[1]; if(a.SVGEditor.evt === undefined){ a.SVGEditor.evt = { 'setItemDisplay' : HTMLEvent.PathDisplay }; a.addEventListener('change', function(){ this.SVGEditor.evt.setItemDisplay.call(this); }, false); } if(b.SVGEditor.evt === undefined){ b.SVGEditor.evt = {}; } if(z.SVGEditor.evt === undefined){ //z.SVGEditor.evt = { 'selectItem' : HTMLEvent.SelectItem }; //z.addEventListener('mousedown', function(e){ this.SVGEditor.evt.selectItem.call(this, e); }, true); } z.SVGEditor.ID[1] = i; a.SVGEditor.ID[1] = i; b.SVGEditor.ID[1] = i; } if(o.SVGEditor.evt === undefined){ o.SVGEditor.evt = { 'itemDown' : HTMLEvent.ItemDown }; o.addEventListener('mousedown', function(e){ this.SVGEditor.evt.itemDown.call(this,e); }, false); } o.SVGEditor.ID[1] = i; o.parentNode.SVGEditor.ID[1] = i; } function cell(){ } function cellItem(p, a){ var o = p.childNodes; for(var i = 0; i < o.length; i = i + 1){ var z = o[i]; if(z.SVGEditor.evt === undefined){ z.SVGEditor.evt = { 'PathSelect' : SVGEvent.PathSelect }; z.addEventListener('mousedown', function(){ this.SVGEditor.evt.PathSelect.call(this); }, false); } z.SVGEditor.ID[1] = i; } } function index(a, b){ var o = a.nodeType == 1 ? a.childNodes : a; for(var i = 0; i < o.length; i = i + 1){ var z = b === undefined ? i : b; var obj = o[i].SVGEditor; if(obj === undefined){ obj = {}; o[i].SVGEditor = obj; obj.ID = []; } obj.ID[0] = z; if(o[i].nodeType == 1){ index(o[i], z); } if(o[i].nodeType == 1 && o[i].parentNode !== undefined && o[i].getAttribute('class') !== null){ if(o[i].parentNode.nodeName.toLowerCase() == 'li' && o[i].getAttribute('class').toLowerCase() == 'lay'){ layer(o[i], z); } } if(o[i].nodeType == 1 && o[i].nodeName.toLowerCase() == 'ol'){ layerItem(o[i], z); } if(o[i].nodeType == 1 && o[i].nodeName.toLowerCase() == 'g'){ cellItem(o[i], z); } } } index(_get('Layer')()); index(_get('Cell')()); data(); }; /* event -------------------------------------------------------------------------------------------*/ var pointsReset = function(){ var p = _getSvg('Points'); while(p.childNodes.length > 0){ p.removeChild(p.firstChild); } }; var addPoint = function(e, c){ console.log('[AddPoint]'); var xy = _get('CanvasXY')(e); var x = xy[0]; var y = xy[1]; var ad = _getVal('ActiveData')[1]; var p = _getSvg('Points'); var g = createNS('g'); var w = _getVal('CRect'); var t = 'translate(' + x + ',' + y + ')'; var r; ad.d.push(x, y); switch(p.childNodes.length){ case 0 : setStyle(p, 'display', 'block'); ad.path.setAttribute('d', getD(ad.d, 'L') + x + ',' + y); setAttribute(g , 'transform', t); r = createNS( 'rect', 'fill', _getVal('MFill'), 'stroke', _getVal('MStroke'), 'stroke-width', _getVal('CStrokeWidth'), 'x', -(w / 2), 'y', -(w / 2), 'width', w, 'height', w ); g.appendChild(r); break; default : ad.path.setAttribute('d', getD(ad.d, 'L') + c); setAttribute(g , 'transform', t + ' rotate(45)'); r = createNS( 'rect', 'fill', _getVal('CFill'), 'stroke', _getVal('CStroke'), 'stroke-width', _getVal('CStrokeWidth'), 'x', -(w / 2), 'y', -(w / 2), 'width', w, 'height', w ); g.appendChild(r); } r.addEventListener('mousedown', SVGEvent.PathClose); p.appendChild(g); }; var create = function(){ var d = arguments; var elem = doc.createElement(d[0]); for(var i = 1; i < d.length; i = i + 2){ elem.setAttribute(d[i], d[i + 1]); } return elem; }; var createNS = function(){ var d = arguments; var elem = doc.createElementNS('http://www.w3.org/2000/svg', d[0]); if(d.length > 2){ for(var i = 1; i < d.length; i = i + 2){ elem.setAttribute(d[i], d[i + 1]); } } else{ for(var j in d[1]){ switch(j){ case 'fill' : elem.setAttribute([j], 'none'); break; case 'fill-rule' : case 'stroke' : case 'stroke-width' : case 'stroke-miterlimit' : case 'stroke-linecap' : case 'stroke-linejoin' : case 'stroke-dasharray' : elem.setAttribute([j], d[1][j]); break; case 'z' : break; case 'fill-display' : if(d[1][j] === false){ elem.setAttribute('fill', 'none'); } break; case 'stroke-display' : if(d[1][j] === false){ elem.setAttribute('stroke', 'none'); } break; case 'fill-active' : case 'stroke-active' : case 'set' : break; } } } return elem; }; var setAttribute = function(){ var d = arguments; for(var i = 1; i < d.length; i = i + 2){ d[0].setAttribute(d[i], d[i + 1]); } }; var setStyle = function(){ var d = arguments; for(var i = 1; i < d.length; i = i + 2){ d[0].style[d[i]] = d[i + 1]; } }; var setProperty = function(){ var d = arguments; for(var i = 1; i < d.length; i = i + 2){ d[0][d[i]] = d[i + 1]; } }; var getD = function(data, type){ var d = 'M' + data[0] + ',' + data[1] + ' ' + type; for(var i = 2; i < data.length; i = i + 2){ d = d + data[i] + ',' + data[i + 1] + ' '; } return d; }; var setGrid = function(o, sp, w, f){ var d = ''; if(f === true){ for(var i = 0, n = -sp; n <= sp + 1; i = n / sp, n = n + 1){ var p = Math.round(w * i) - 0.5; d = d + 'M' + (p) + ',' + (-w) + 'L' + (p) + ',' + (w); d = d + 'M' + (-w) + ',' + (p) + 'L' + (w) + ',' + (p); } } setAttribute(o, 'd', d); }; var setScale = function(e, d){ var naviIcon = _getHtm('NaviIcon'); var naviSVG = _getSvg('NaviSVG'); var naviOffset = _getVal('NaviOffset'); var naviXY = _getVal('NaviXY'); var nb = _getVal('NaviBox') / 2; var ra = naviIcon.getBoundingClientRect(); var sx = e.clientX - ra.left; var sy = e.clientY - ra.top; var p; if(e.type == 'mouseup'){ p = [naviOffset[0], naviOffset[1], naviOffset[2], naviOffset[3]]; } else{ if(naviXY === null){ sx = sx - nb; sy = sy - nb; p = [sx, sy, nb, nb]; } else{ p = [-naviXY[0] + sx, -naviXY[1] + sy, naviXY[0], naviXY[1]]; } } setStyle(naviIcon, 'overflow', d); setStyle(naviSVG, 'left', p[0] + 'px', 'top', p[1] + 'px'); setAttribute(_getSvg('NaviSVG').getElementsByTagName('circle')[0], 'cx', p[2], 'cy', p[3]); }; var setObjIndex = function(o, a, b){ for(var i = 0; i < o.length; i = i + 1){ var obj = o[i].SVGEditor; var z = a !== undefined ? a : i; if(obj === undefined){ obj = {}; o[i].SVGEditor = obj; } obj.INDEX = z; if(b !== undefined){ obj.VALUE = b; } if(o[i].nodeType == 1 && o[i].childNodes.length > 0){ setObjIndex(o[i].childNodes, z); } } }; var getIndex = function(a){ var d = _getVal('Data'); var x = d.length - 1 - a[0]; var y; d = d[x].item; if(d === null || d === undefined || a[1] === null || a[1] === undefined){ y = null; } else{ y = d.length - 1 - a[1]; } return [x, y]; }; var delSpace = function(o){ var a = o.childNodes; for(var i = 0; i < a.length; i = i + 1){ if(a[i].nodeType == 3){ o.removeChild(a[i]); i = i - 1; } } return o; }; var setSlider = function(o, y, g){ var par = o.parentNode; var w = par.offsetWidth; var rgb = _getHtm('RGBA'); var pk = _getHtm('Picker'); var fs = _getHtm('PathFS'); var ck = _get('ColorCheck')(); var ix = o.SVGEditor.INDEX; var iy = o.SVGEditor.VALUE; var x; switch(ix){ case 5: case 4 : if(ix == 5){ x = (w / iy) * y; } else{ x = (w / iy) * y; } par.previousSibling.textContent = Math.floor(x / w * o.SVGEditor.VALUE); setStyle(o, 'left', x + 'px'); break; case 3 : x = (w / iy) * y; rgb[ix].textContent = Math.floor((x / w * o.SVGEditor.VALUE)*100) / 100; rgb = 'rgba(' + rgb[0].textContent + ',' + rgb[1].textContent + ',' + rgb[2].textContent + ',' + rgb[3].textContent + ')'; setStyle(o, 'left', x + 'px'); break; case 2 : x = (w / iy) * y; rgb[ix].textContent = Math.floor(x / w * o.SVGEditor.VALUE); rgb = 'rgba(' + rgb[0].textContent + ',' + rgb[1].textContent + ',' + rgb[2].textContent + ',' + rgb[3].textContent + ')'; setStyle(o, 'left', x + 'px'); break; case 1 : x = (w / iy) * y; rgb[ix].textContent = Math.floor(x / w * o.SVGEditor.VALUE); rgb = 'rgba(' + rgb[0].textContent + ',' + rgb[1].textContent + ',' + rgb[2].textContent + ',' + rgb[3].textContent + ')'; setStyle(o, 'left', x + 'px'); break; case 0 : x = (w / iy) * y; rgb[ix].textContent = Math.floor(x / w * o.SVGEditor.VALUE); rgb = 'rgba(' + rgb[0].textContent + ',' + rgb[1].textContent + ',' + rgb[2].textContent + ',' + rgb[3].textContent + ')'; setStyle(o, 'left', x + 'px'); break; } if(ix < 4){ //if(ck[0] === true){ setStyle(pk[0], 'backgroundColor', (g === undefined ? rgb : g[0])); setStyle(fs[0], 'backgroundColor', (g === undefined ? rgb : g[0])); //} //if(ck[2] === false){ setStyle(pk[1], 'borderColor', (g === undefined ? rgb : g[1])); setStyle(fs[1], 'backgroundColor', (g === undefined ? rgb : g[1])); //} if(ck[1] === false){ setStyle(fs[0], 'display', 'none'); } if(ck[3] === false){ setStyle(fs[1], 'display', 'none'); } } }; var resize = function(){ var grid = _getSvg('Grid'); var guide = _getSvg('Guide'); var offset = _getVal('Offset'); var margin = _getVal('Margin'); var box = _get('Box')(); var scale = _get('Scale')(); setAttribute(_getSvg('SVG'), 'viewBox', '0 0 ' + box + ' ' + box, 'width', box, 'height', box); setAttribute(_getSvg('OffsetItem')[1], 'transform', 'translate(' + (margin + offset) + ',' + (margin + offset) + ')'); setAttribute(_getSvg('OffsetItem')[2], 'transform', 'translate(' + (margin + offset) + ',' + (margin + offset) + ')'); setProperty(_getHtm('SVGBox'), 'scrollLeft', _get('ScrollXY')(), 'scrollTop', _get('ScrollXY')()); setAttribute(guide.getElementsByTagName('rect')[0], 'width', scale, 'height', scale); scale = (scale - scale / 2 - 0.5); setGrid(grid, box / 10, box, _get('GridFlag')()); setAttribute(guide.getElementsByTagName('path')[0], 'd', 'M' + (-box) + ',' + (scale) + 'L' + (box) + ',' + (scale) + 'M' + (scale) + ',' + (-box) + 'L' + (scale) + ',' + (box)); setTimeout(function(){ _setVal('NaviXY', null); }, 100); }; var assasin = function(a){ function copy(o, p){ for(var prop in o){ if(o[prop] !== undefined && o[prop] !== null && o[prop].nodeType === undefined && (typeof o[prop] == 'object')){ copy(o[prop], p[prop] = ((o[prop] instanceof Array) === true) ? [] : {}); } else{ p[prop] = o[prop]; } } return p; } return copy(a, ((a instanceof Array) === true) ? [] : {}); }; var getRect = function(a){ return a.getBoundingClientRect(); }; var _get = function(a){ return _[a]; }; var _set = function(a, b){ _[a] = b; }; var _getVal = function(a){ return _VAL[a]; }; var _setVal = function(a, b){ _VAL[a] = b; }; var _getHtm = function(a){ return _HTM[a]; }; var _setHtm = function(a, b){ _HTM[a] = b; }; var _getSvg = function(a){ return _SVG[a]; }; var _setSvg = function(a, b){ _SVG[a] = b; };<div class="testArea" tabindex="-1"> <div id="topMenu"> <span> 🗨 </span>fesafsa <span> <span class="pop"> 🗨 </span> </span> </div> <div id="content"> <div id="svgBox"> <svg id="SVG" viewBox="0 0 1240 1240" width="1240" height="1240" style="background-color:black;" tabindex="-1"> <g id="svgSpare"> <g></g> <rect></rect> <path d="M0,0 L0,0" fill="none" stroke="white" stroke-width="2" fill="none"></path> </g> <g> <g id="guide"> <rect x="0" y="0" width="600" height="600" fill="#101010" stroke="none"></rect> <path d="M0,199.5 L600,199.5 M199.5,0 L199.5,600" fill="none" stroke="#666" stroke-width="1" fill="none"></path> <path d="M-1,-1800 L-1,1800 M-1800,-1 L1800,-1" fill="none" stroke="white" stroke-width="2" fill="none"></path> </g> <g id="image"></g> <g id="cell"></g> <g> <path id="locus" d="M0,0 L0,0" fill="none" stroke="white" stroke-width="2" fill="none" stroke-opacity="1"></path> </g> <path id="grid" d="M0,0 L0,0" fill="none" stroke="#202020" stroke-width="1" fill="none" opacity="0.5"></path> </g> <rect id="skin" x="0" y="0" width="100%" height="100%" fill="#f00" stroke="none" fill-opacity="0"></rect> <g> <g id="control" style="display:none;"> <g> <path fill="none" stroke="none" stroke-width="1" d="M0,0L20,20"></path> <path fill="none" stroke="none" stroke-width="1" d="M0,0L30,40"></path> <circle cx="0" cy="40" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle> <circle cx="0" cy="60" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle> </g> <g> <path fill="none" stroke="none" stroke-width="1" d="M0,0L20,60"></path> <path fill="none" stroke="none" stroke-width="1" d="M0,0L30,80"></path> <circle cx="0" cy="80" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle> <circle cx="0" cy="100" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle> </g> <g> <path fill="none" stroke="none" stroke-width="1" d="M0,0L20,100"></path> <path fill="none" stroke="none" stroke-width="1" d="M0,0L30,120"></path> <circle cx="0" cy="120" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle> <circle cx="0" cy="140" r="5" fill="none" stroke="none" stroke-width="0" style="cursor:pointer"></circle> </g> </g> <g id="points" style="display:none;"></g> </g> </svg> </div><div> <div id="rightMenu"> <input type="checkbox" id="A" autocomplete="off" checked="checked"> <input type="checkbox" id="B" autocomplete="off" checked="checked"> <input type="checkbox" id="C" autocomplete="off" checked="checked"> <input type="checkbox" id="D" autocomplete="off" checked="checked"> <input type="checkbox" id="E" autocomplete="off" checked="checked"> <input type="checkbox" id="F" autocomplete="off" checked="checked"> <label for="A">Action</label> <div id="action"> <ul> <li><span><label>draw : </label><input type="radio" name="actype"><label>move : </label><input type="radio" name="actype"></span></li> </ul> </div> <label for="B">Layer</label> <div id="layer"> <div> <ul id="layerTable"> <li class="lay"><span class="lay"><span class="pn lay">+</span><input type="checkbox" checked="checked" class="lay"><span class="lay"></span><input type="text" style="display:none;" class="lay"></span><div class="item"><ol class="item"><li class="item"><input type="checkbox" checked="checked" class="item"><input type="text" class="item"></li></ol><div class='itemBorder' style="display:none;"></div></div></li> </ul> <div id='layerBorder' style="display:none;"></div> </div>  <div id='layerNavi'><span title="copy">🗒</span><span title="add">+</span><span title="del">-</span><span title="up">↑</span><span title="down">↓</span></div> </div> <label for="C">Color</label> <div id="color"> <ul> <li><span class="colorCaption">red</span><span class="slider"><span></span></span></li> <li><span class="colorCaption">green</span><span class="slider"><span></span></span></li> <li><span class="colorCaption">blue</span><span class="slider"><span></span></span></li> <li><span class="colorCaption">alpha</span><span class="slider"><span></span></span></li> <li><span class="pickerCaption"><span id="picker"><span></span><span></span></span></span><span>rgba(<span>0</span>,<span>0</span>,<span>0</span>,<span>1</span>)</span></li> <li><span class="colorCaption">fill</span><span class="colorCheck"><span id="fillColor" style="background-color:rgb(0,0,0);"></span><input type="radio" value="x" name="fstype" title="select"><input type="checkbox" title="display"></span></li> <li><span class="colorCaption">stroke</span><span class="colorCheck"><span id="strokeColor" style="background-color:rgb(0,0,0);"></span><input type="radio" value="x" name="fstype" title="select"><input type="checkbox" title="display"></span></li> </ul> </div> <label for="D">Fill</label> <div id="fill"> <ul> <li> <span class="otherCaption">rule</span><span><select autocomplete="off" id="fillRule"> <option value="nonzero">nonzero</option> <option value="evenodd">evenodd</option> </select> </span> </li> </ul> </div> <label for="E">Stroke</label> <div id="stroke"> <ul> <li><span class="strokeCaption">width</span><span id="strokeWidth">0</span><span class="slider"><span></span></span></li> <li><span class="strokeCaption">miterlimit</span><span id="miterLimit">0</span><span class="slider"><span></span></span></li> <li> <span class="strokeCaption">linecap</span><span><select autocomplete="off" id="lineCap"> <option value="butt">butt</option> <option value="round">round</option> <option value="square">square</option> </select> </span> </li> <li> <span class="strokeCaption">linejoin</span><span><select autocomplete="off" id="lineJoin"> <option value="miter">miter</option> <option value="round">round</option> <option value="bevel">bevel</option> </select> </span> </li> <li> <span class="strokeCaption">dasharray</span><span><input type="text" id="dashArray" autocomplete="off"></span> </li> <li><span class="strokeCaption">Z</span><span><input type="checkbox" id="pathZ" autocomplete="off"></span></li> </ul> </div> <label for="F">Other</label> <div id="other"> <ul> <li> <span class="otherCaption">canvas size</span><span><select autocomplete="off"> <option value="600">600</option> <option value="400">400</option> <option value="200">200</option> <option value="100">100</option> </select> </span> </li> <li><span class="otherCaption">grid</span><span class="gridCheck"><span></span><input type="checkbox" autocomplete="off"></span></li> </ul> </div> </div> </div> <div id="naviIcon"> <svg id="naviSVG" viewBox="0 0 100 100" width="100" height="100" style="background-color:transparent;"> <g> <rect x="0" y="0" width="100" height="100" fill="black" stroke="white" stroke-width="2"></rect> <rect x="25" y="25" width="50" height="50" fill="#111" stroke="none" stroke-width="0"></rect> <path d="M49.5,25 L49.5,75 M25,49.5 L75,49.5" fill="none" stroke="#333" stroke-width="1"></path> <circle cx="49.5" cy="49.5" r="4" fill="#111" stroke="white" stroke-width="2"></circle> </g> </svg> </div> </div> </div>body{ background-color:white; visibility:hidden; } *{ padding:0; margin:0; box-sizing:border-box; } *:not(input):not(select){ border:0; outline:none; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; cursor:default; } .testArea{ width:930px; height:800px; color:white; font-family:Consolas; font-size:12px; padding:0px 0px 10px; margin:10px auto; position:relative; background-color:black; outline:none; } #topMenu{ width:100%; height:30px; line-height:30px; font-size:12px; padding:0px 5px; background-color:#000; } #topMenu > span{ color:white; } #topMenu > span > input{ vertical-align:text-bottom; } #topMenu > span:nth-of-type(2){ color:white; position:relative; } #topMenu > span:nth-of-type(2) > .pop{ position:absolute; font-size:18px; top:-20px; left:-15px; } #topMenu > span:nth-of-type(2) > .pop:before{ content:''; width:18px; height:18px; border-top-color:black; border-top-style:dotted; border-top-width:1px; position:absolute; top:14px; left:-0px; color:black; clip:rect(0px 12px 2px 5px); } #content{ display:flex; position:relative; justify-content:space-between; } #svgBox{/*svgBox*/ width:auto; height:auto; max-width:640px; max-height:640px; overflow:scroll; } #svgBox + div{ overflow-y:scroll; } #rightMenu{/*menuBox*/ width:calc(100% - 680px);/*920px*/ width:100%; height:auto; padding-top:0px; padding-right:0px; 0background-color:red; overflow:auto; } #action, #layer > div:nth-of-type(1), #color, #fill, #stroke, #other{/*menuBox item*/ width:100%; height:auto; margin:0px 0px 2px; max-height:0px; overflow-y:scroll; position:relative; } #layer > div:nth-of-type(1){ min-height:34px; } #layer{ position:relative; } #rightMenu > input[type="checkbox"]{ display:none; } #rightMenu > div > div:nth-of-type(1) > ul, #rightMenu > div > ul{ width:100%; height:auto; overflow:hidden; position:relative; } #rightMenu > div > div:nth-of-type(1) > ul > li, #rightMenu > div > ul > li{ padding:0px 10px 0px; height:auto; line-height:30px; font-size:12px; border-bottom:solid 1px #fff; background-color:#111; position:relative; } #rightMenu > div > div:nth-of-type(1) > ul > li:first-child, #rightMenu > div > ul > li:first-child{ border-top:solid 1px #fff; } #layer > div:nth-of-type(1) > ul > li > span{ width:100%; display:inline-block; line-height:normal; vertical-align:text-bottom; } #layer > div:nth-of-type(1) > ul > li > span > span:nth-of-type(1){ background-color:black; display:inline-block; width:14px; height:14px; line-height:11px; font-size:14px; vertical-align:text-bottom;; text-align:center; margin-top:1px; padding-left:0px; border:solid 1px white; } #layer > div:nth-of-type(1) > ul > li > span > span:nth-of-type(2){ font-size:12px; font-family:Consolas; display:inline-block; width:70%; vertical-align:text-bottom; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } #layer > div:nth-of-type(1) > ul > li > span > input[type="checkbox"]{ vertical-align:text-bottom; margin:0px 5px 0px 5px; } #layer > div:nth-of-type(1) > ul > li > span > input[type="text"]{ width:70%; font-size:12px; font-family:Consolas; vertical-align:bottom; } #layerBorder{ width:100%; height:10px; background-color:rgba(0,110,255,0.6); position:absolute; top:-5px; display:none; } #layerBorder:after{ content:''; width:100%; height:0px; border-top-color:white; border-top-style:dashed; border-top-width:4px; display:inline-block; position:absolute; top:3px; } #layerTable li > div > div.itemBorder{ width:100%; height:10px; /*background-color:rgba(255,0,0,0.6);*/ position:absolute; top:-5px; display:none; } #layerTable li > div > div.itemBorder:after{ content:''; width:100%; height:0px; border-top-color:yellow; border-top-style:dotted; border-top-width:4px; display:inline-block; position:absolute; top:2px; } #layer{ overflow:hidden; } #layerNavi{/* layer navi */ text-align:right; padding:0px 0px 0px; position:absolute; bottom:4px; right:17px; /*border-radius:15px;*/ } #layerNavi > span{ display:inline-block; width:18px; height:18px; font-size:12px; font-weight:bold; color:white; line-height:16px; text-align:center; vertical-align:middle; overflow:hidden; margin:0px 2px 0px 0px; cursor:pointer; border-radius:6px 6px 6px 6px; background-color:black; border:solid 1px white; } #layerTable li > div{ overflow-y:scroll; padding:px 0px 0px 0px; position:relative; /*max-height:200px; background-color:#111;*/ 0z-index:-1; overflow:visible; } #layerTable > li > div.item{ margin:0px 0px 5px; display:none; } #layerTable li > div > ol{ width:100%; list-style-type:decimal-leading-zero; list-style-position:inside; /*marker-offse:-5px;*/ } #layerTable > li > div > ol > li{ /*text-align:right;*/ height:auto; line-height:18px; padding:4px 5px 2px; position:relative; /*overflow-y:hidden;*/ } #layerTable > li > div > ol > li > input{ vertical-align:text-bottom; padding:0; margin:0; display:inline-block; } #layerTable > li > div > ol > li > input[type="checkbox"]{ margin:0px 0px 0px 0px; } #layerTable > li > div > ol > li > input[type="text"]{ width:70%; height:16px; font-size:11px; font-family:Consolas; margin:0px 0px 0px 10px; /* bottom:0px;; right:5px; position:absolute; */ right:5px; position:absolute; } #color > ul > li > input[type="text"]{/*#color */ font-size:12px; width:100%; box-sizing:border-box; } #color > ul > li > input[type="checkbox"], #color > ul > li > input[type="radio"]{ vertical-align:text-bottom; } #color > ul > li > span.colorCaption, #color > ul > li > span.pickerCaption{ width:45px; height:auto; display:inline-block; position:relative; } #color > ul > li > span.colorCaption:after, #color > ul > li > span.pickerCaption:after{ content: ':'; position:absolute; right:-5px; } #color > ul > li > span.slider{ width:150px; height:5px; display:inline-block; position:absolute; right:15px; top:calc(50% - 2px); bottom:0px; background-color:black; } #color > ul > li > span.slider > span{ width:6px; height:14px; display:inline-block; cursor:pointer; position:absolute; top:-5px; background-color:white; } #color > ul > li:nth-of-type(4) > span.slider > span{ right:-6px; } #color > ul > li > span.pickerCaption > #picker{ width:14px; height:14px; display:inline-block; position:relative; left:10px; top:0px; vertical-align:text-bottom; } #color > ul > li > span.pickerCaption > #picker > span:nth-of-type(1){ width:8px; height:8px; display:inline-block; background-color:rgba(0,0,0,1);; vertical-align:text-bottom; border:solid 0px white; position:absolute; left:3px; top:3px; } #color > ul > li > span.pickerCaption > #picker > span:nth-of-type(2){ width:14px; height:14px; display:inline-block; vertical-align:text-bottom; border:solid 3px rgba(0,0,0,1);; position:absolute; left:0px; top:0px; } #color > ul > li > span.pickerCaption + span > span{ display:inline-block; width:24px; height:14px; line-height:16px; text-align:right; vertical-align:text-bottom; overflow:hidden; } #color > ul > li > span.pickerCaption + span > span:last-child{ width:30px; } #color > ul > li > span.pickerCaption + span, #color > ul > li > span.colorCaption + span.colorCheck{ display:inline-block; width:calc(100% - 45px); text-align:right; } #color > ul > li > span.colorCheck{ position:relative; } #color > ul > li > span.colorCheck > span{ display:inline-block; width:14px; height:14px; position:absolute; background-color:rgba(0,0,0,1); left:calc(50% - 14px); top:calc(50% - 7px); transform:translate(0%,0%); } #color > ul > li > span.colorCheck > input{ vertical-align:text-bottom; } #color > ul > li > span > input[type="checkbox"]:nth-of-type(1), #color > ul > li > span > input[type="radio"]:nth-of-type(1){ margin-right: 10px; } #fill > ul > li > span:nth-of-type(1){/*#other */ width:45%; height:auto; display:inline-block; position:relative; } #fill > ul > li > span:nth-of-type(1):after{ content: ':'; position:absolute; right:-5px; } #fill > ul > li > span:nth-of-type(2){ width:55%; height:auto; display:inline-block; text-align:right; } #fill > ul > li > span > select{ width:80%; } #stroke > ul > li > span:nth-of-type(1){/*#stroke */ width:45%; height:auto; display:inline-block; position:relative; } #stroke > ul > li:nth-of-type(1) > span:nth-of-type(2), #stroke > ul > li:nth-of-type(2) > span:nth-of-type(2){ width:25px; } #stroke > ul > li > span.slider{ width:80px; height:5px; display:inline-block; position:absolute; right:15px; top:calc(50% - 2px); bottom:0px; background-color:black; } #stroke > ul > li > span.slider > span{ width:6px; height:14px; display:inline-block; cursor:pointer; position:absolute; top:-5px; background-color:white; } #stroke > ul > li > span:nth-of-type(1):after{ content: ':'; position:absolute; right:-5px; } #stroke > ul > li > span:nth-of-type(2){ width:55%; height:auto; display:inline-block; text-align:right; } #stroke > ul > li > span > select{ width:80%; } #stroke > ul > li > span > input[type="text"]{ font-size:12px; font-family:Consolas; width:80%; box-sizing:border-box; text-align:rigth; } #stroke > ul > li > span > input[type="checkbox"]{ vertical-align:text-bottom; text-align:rigth; } #other > ul > li > span:nth-of-type(1){/*#other */ width:45%; height:auto; display:inline-block; position:relative; } #other > ul > li > span:nth-of-type(1):after{ content: ':'; position:absolute; right:-5px; } #other > ul > li > span:nth-of-type(2){ width:55%; height:auto; display:inline-block; text-align:right; } #other > ul > li > span > select{ width:80%; } #other > ul > li > span.gridCheck > input{ vertical-align:text-bottom; } #rightMenu > label{ width:100%; height:28px; line-height:28px; font-size:16px; font-family:Consolas; padding:0px 5px 0px; display:inline-block; overflow:hidden; background-color:dimgray; } #rightMenu > input:nth-of-type(1):checked ~ #action{ max-height:500px; } #rightMenu > input:nth-of-type(2):checked ~ #layer > div:nth-of-type(1){ max-height:500px; } #rightMenu > input:nth-of-type(3):checked ~ #color{ max-height:500px; } #rightMenu > input:nth-of-type(4):checked ~ #fill{ max-height:500px; } #rightMenu > input:nth-of-type(5):checked ~ #stroke{ max-height:500px; } #rightMenu > input:nth-of-type(6):checked ~ #other{ max-height:500px; } #naviIcon{/*scale*/ width:18px; height:18px; overflow:hidden; background-color:black; position:absolute; } #naviIcon > svg{ position:absolute; } svg{ display:block; overflow:hidden; user-select:none; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; outline:none; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

teetteet

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/YpJI/js"></script>

QR Code

Discussion

Questions on this code?

forked: HTML ( SVG ) レイヤーテスト

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags