From 9dd3887fb4d64a2a1e426f78324e628433a01b20 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Tue, 1 Jun 2021 20:34:33 -0500 Subject: [PATCH] changes --- src/css/color-tool.css | 10 +++----- src/css/draginput.css | 6 +++++ src/css/method-draw.css | 4 ---- src/js/Keyboard.js | 2 +- src/js/Menu.js | 2 +- src/js/Panel.js | 3 +-- src/js/editor.js | 6 +++-- src/js/lib/jquery-draginput.js | 1 - src/js/method-draw.js | 2 +- src/js/svgcanvas.js | 43 +++++++++++++++++++--------------- 10 files changed, 41 insertions(+), 38 deletions(-) diff --git a/src/css/color-tool.css b/src/css/color-tool.css index c74aaff..e372cdd 100644 --- a/src/css/color-tool.css +++ b/src/css/color-tool.css @@ -4,11 +4,7 @@ left: 0; } -.touch #color_tools #tool_fill .color_block > div { - position: relative; -} - - #color_tools #tool_fill .color_block #fill_bg, #color_tools #tool_stroke .color_block #stroke_bg { +#color_tools #tool_fill .color_block #fill_bg, #color_tools #tool_stroke .color_block #stroke_bg { position: absolute; top: 1px; left: 1px; @@ -34,7 +30,7 @@ height: 11px; position: absolute; top: -5px; - right: var(--x3); + right: 0; cursor: nwse-resize } @@ -79,7 +75,7 @@ margin: 12px 6px 0 6px; } -.touch #color_tools { +#color_tools { width: auto; height: auto; } diff --git a/src/css/draginput.css b/src/css/draginput.css index 7e6b0d2..6f28c43 100644 --- a/src/css/draginput.css +++ b/src/css/draginput.css @@ -146,6 +146,12 @@ z-index: 0; } +.draginput.textcontent input { + cursor: text; + text-align: left; + text-indent: var(--x2); +} + .draginput.textcontent input, .draginput.textcontent input:hover, .draginput.textcontent input:active { diff --git a/src/css/method-draw.css b/src/css/method-draw.css index 8711428..9e8e733 100644 --- a/src/css/method-draw.css +++ b/src/css/method-draw.css @@ -268,10 +268,6 @@ input[type=file] { visibility: none; } -.touch .shortcut { - display: none; -} - /* For modern browsers */ .clearfix:before, .clearfix:after { diff --git a/src/js/Keyboard.js b/src/js/Keyboard.js index c12d567..9f8c1f4 100644 --- a/src/js/Keyboard.js +++ b/src/js/Keyboard.js @@ -115,7 +115,7 @@ MD.Keyboard = function(){ if (key === "arrowdown") key = "↓"; if (key === " ") key = "SPACEBAR"; if (key === "shift") key = "⇧"; - if (key === "cmd") key = svgedit.browser.isMac ? "⌘" : "Ctrl"; + if (key === "cmd") key = svgedit.browser.isMac() ? "⌘" : "Ctrl"; shortcutKey.textContent = key; shortcutKeys.appendChild(shortcutKey); shortcut.appendChild(shortcutKeys); diff --git a/src/js/Menu.js b/src/js/Menu.js index c81098c..d27ddc8 100644 --- a/src/js/Menu.js +++ b/src/js/Menu.js @@ -53,7 +53,7 @@ MD.Menu = function(){ } // This puts the correct shortcuts in the menus - if (!svgedit.browser.isMac) { + if (!svgedit.browser.isMac()) { $('.shortcut').each(function(){ var text = $(this).text(); $(this).text(text.split("⌘").join("Ctrl+")) diff --git a/src/js/Panel.js b/src/js/Panel.js index 1022323..9ffbde6 100644 --- a/src/js/Panel.js +++ b/src/js/Panel.js @@ -160,7 +160,6 @@ MD.Panel = function(){ $("#tool_text_on_path").toggle(canTextPath); } else { - console.log("remove multiselectd") $("#panels").removeClass("multiselected"); } @@ -297,7 +296,7 @@ MD.Panel = function(){ $(select).find(`option[value='${cleanFontFamily}']`).prop("selected", true); $('#font_size').val(elem.getAttribute("font-size")); $('#text').val(elem.textContent); - $('#preview_font').text(cleanFontFamily).css('font-family', font_family); + $('#preview_font').text(cleanFontFamily).css('font-family', cleanFontFamily === "default" ? "sans-serif" : cleanFontFamily); const textPath = elem.querySelector("textPath"); document.getElementById("text_panel").classList.toggle("text-path", textPath); $("#textPath_offset").val(textPath ? textPath.getAttribute("startOffset") : 0); diff --git a/src/js/editor.js b/src/js/editor.js index f593322..9ce3d10 100644 --- a/src/js/editor.js +++ b/src/js/editor.js @@ -196,8 +196,10 @@ MD.Editor = function(){ elems: elems }); - if (!svgCanvas.getContext()) - state.set("canvasContent", svgCanvas.getSvgString()) + + if (!svgCanvas.getContext()) { + state.set("canvasContent", svgCanvas.getSvgString()) + } } function changeAttribute(attr, value, completed) { diff --git a/src/js/lib/jquery-draginput.js b/src/js/lib/jquery-draginput.js index f1035c5..4921bf5 100644 --- a/src/js/lib/jquery-draginput.js +++ b/src/js/lib/jquery-draginput.js @@ -199,7 +199,6 @@ $.fn.dragInput.updateCursor = function(el){ var scale = parseFloat(el.getAttribute("data-scale")); var domain = parseFloat(el.getAttribute("data-domain")); var pos = ((value*-1)/scale+domain) + "px"; - console.log(value, pos) var cursor = el.parentNode.lastChild if (cursor.className === "draginput_cursor") cursor.style.top = pos; } diff --git a/src/js/method-draw.js b/src/js/method-draw.js index 2466bff..9e3b63a 100644 --- a/src/js/method-draw.js +++ b/src/js/method-draw.js @@ -1573,7 +1573,7 @@ window.methodDraw = function() { keyval = opts.key; } keyval += ''; - if (svgedit.browser.isMac && keyval.indexOf("+") != -1) { + if (svgedit.browser.isMac() && keyval.indexOf("+") != -1) { var modifier_key = keyval.split("+")[0]; if (modifier_key == "ctrl") keyval.replace("ctrl", "cmd") } diff --git a/src/js/svgcanvas.js b/src/js/svgcanvas.js index fb94c48..2d57342 100644 --- a/src/js/svgcanvas.js +++ b/src/js/svgcanvas.js @@ -1473,22 +1473,6 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) { if (!childTlist) continue; var m = transformListToTransform(childTlist).matrix; - - // Convert a matrix to a scale if applicable -// if(hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) { -// if(m.b==0 && m.c==0 && m.e==0 && m.f==0) { -// childTlist.removeItem(0); -// var translateOrigin = svgroot.createSVGTransform(), -// scale = svgroot.createSVGTransform(), -// translateBack = svgroot.createSVGTransform(); -// translateOrigin.setTranslate(0, 0); -// scale.setScale(m.a, m.d); -// translateBack.setTranslate(0, 0); -// childTlist.appendItem(translateBack); -// childTlist.appendItem(scale); -// childTlist.appendItem(translateOrigin); -// } -// } var angle = getRotationAngle(child); var old_start_transform = start_transform; @@ -3331,7 +3315,9 @@ var getMouseTarget = this.getMouseTarget = function(evt) { }; var dblClick = function(evt) { - var evt_target = evt.target; + var isNested = (evt.target.tagName === "tspan" || evt.target.tagName === "textPath"); + var evt_target = isNested ? evt.target.closest("text") : evt.target; + console.log(evt_target) var parent = evt_target.parentNode; var mouse_target = getMouseTarget(evt); var tagName = mouse_target.tagName; @@ -3339,8 +3325,14 @@ var getMouseTarget = this.getMouseTarget = function(evt) { if(parent === current_group) return; if(tagName === 'text' && current_mode !== 'textedit') { - var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ); - textActions.select(mouse_target, pt.x, pt.y); + if (evt_target.querySelector("textPath")) { + $("#text").focus(); + $("#text").select(); + } + else { + var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ); + textActions.select(mouse_target, pt.x, pt.y); + } } if((tagName === "g" || tagName === "a") && getRotationAngle(mouse_target)) { @@ -5832,6 +5824,19 @@ this.setSvgString = function(xmlString) { // Put all paint elems in defs content.find('linearGradient, radialGradient, pattern').appendTo(findDefs()); + + svgcontent.querySelectorAll('textPath').forEach(function(el){ + const href = svgCanvas.getHref(el); + if (!href) return; + const path = svgcontent.querySelector(href); + const offset = el.getAttribute("startOffset"); + // convert percentage based to absolute + if (offset.includes("%") && path) { + const totalLength = path.getTotalLength(); + const pct = parseFloat(offset) * .01; + el.setAttribute("startOffset", (pct * totalLength).toFixed(0)) + } + }) // Set ref element for elements