zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#84 JavaScript conversion changes (#85)

master
Agriya Dev5 2021-03-18 11:24:23 +05:30 committed by GitHub
parent c71284391b
commit 325720f7c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 146 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/editor/Editor.js
View File

@ -281,14 +281,17 @@ class Editor extends EditorStartup {
// Misc additional actions // Misc additional actions
// Make 'return' keypress trigger the change event // Make 'return' keypress trigger the change event
$('.attr_changer, #image_url').bind( const elements = document.getElementsByClassName("attr_changer");
'keydown', Array.from(elements).forEach(function(element) {
'return', element.addEventListener('keydown', function(evt) {
function (evt) { evt.currentTarget.dispatchEvent(new Event('change'));
$(this).change();
evt.preventDefault(); evt.preventDefault();
} });
); });
$id('image_url').addEventListener('keydown', function(evt) {
evt.currentTarget.dispatchEvent(new Event('change'));
evt.preventDefault();
});
} }
/** /**
* @returns {void} * @returns {void}
@ -348,11 +351,16 @@ class Editor extends EditorStartup {
* @returns {void} * @returns {void}
*/ */
togglePathEditMode (editmode, elems) { togglePathEditMode (editmode, elems) {
$('#path_node_panel').toggle(editmode); $id('path_node_panel').style.display = (editmode) ? 'block' : 'none';
if (editmode) { if (editmode) {
// Change select icon // Change select icon
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); const elements = document.getElementsByClassName("tool_button_current");
$('#tool_select').addClass('tool_button_current').removeClass('tool_button'); Array.from(elements).forEach(function(element) {
element.classList.add('tool_button_current');
element.classList.remove('tool_button')
});
$id('#tool_select').classList.add('tool_button_current')
$id('#tool_select').classList.remove('tool_button');
this.multiselected = false; this.multiselected = false;
if (elems.length) { if (elems.length) {
this.selectedElement = this.elems[0]; this.selectedElement = this.elems[0];
@ -409,7 +417,7 @@ class Editor extends EditorStartup {
url = this.defaultImageURL; url = this.defaultImageURL;
} }
this.svgCanvas.setImageURL(url); this.svgCanvas.setImageURL(url);
$('#image_url').val(url); $id("image_url").value = url;
if (url.startsWith('data:')) { if (url.startsWith('data:')) {
// data URI found // data URI found
@ -609,8 +617,8 @@ class Editor extends EditorStartup {
switch (mode) { switch (mode) {
case 'rotate': { case 'rotate': {
const ang = this.svgCanvas.getRotationAngle(elem); const ang = this.svgCanvas.getRotationAngle(elem);
$('#angle').val(ang); $id('angle').value = ang;
$('#tool_reorient').toggleClass('disabled', ang === 0); (ang === 0) ? $id('tool_reorient').classList.add('disabled') : $id('tool_reorient').classList.remove('disabled');
break; break;
} }
} }
@ -914,7 +922,7 @@ class Editor extends EditorStartup {
rotateSelected (cw, step) { rotateSelected (cw, step) {
if (isNullish(this.selectedElement) || this.multiselected) { return; } if (isNullish(this.selectedElement) || this.multiselected) { return; }
if (!cw) { step *= -1; } if (!cw) { step *= -1; }
const angle = Number.parseFloat($('#angle').val()) + step; const angle = Number.parseFloat($id('angle').value) + step;
this.svgCanvas.setRotationAngle(angle); this.svgCanvas.setRotationAngle(angle);
this.topPanel.updateContextPanel(); this.topPanel.updateContextPanel();
} }

95
src/editor/EditorStartup.js
View File

@ -58,6 +58,7 @@ class EditorStartup {
* @returns {void} * @returns {void}
*/ */
async init () { async init () {
const self = this;
// allow to prepare the dom without display // allow to prepare the dom without display
this.$svgEditor.style.visibility = 'hidden'; this.$svgEditor.style.visibility = 'hidden';
try { try {
@ -187,20 +188,20 @@ class EditorStartup {
res.w = convertUnit(res.w) + this.configObj.curConfig.baseUnit; res.w = convertUnit(res.w) + this.configObj.curConfig.baseUnit;
res.h = convertUnit(res.h) + this.configObj.curConfig.baseUnit; res.h = convertUnit(res.h) + this.configObj.curConfig.baseUnit;
} }
$('#se-img-prop').attr('dialog', 'close'); $id('se-img-prop').setAttribute('dialog', 'close');
$('#se-img-prop').attr('title', this.svgCanvas.getDocumentTitle()); $id('se-img-prop').setAttribute('title', this.svgCanvas.getDocumentTitle());
$('#se-img-prop').attr('width', res.w); $id('se-img-prop').setAttribute('width', res.w);
$('#se-img-prop').attr('height', res.h); $id('se-img-prop').setAttribute('height', res.h);
$('#se-img-prop').attr('save', this.configObj.pref('img_save')); $id('se-img-prop').setAttribute('save', this.configObj.pref('img_save'));
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better) // Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
$('select').change((evt) => { $(evt.currentTarget).blur(); }); $('select').change((evt) => { $(evt.currentTarget).blur(); });
// fired when user wants to move elements to another layer // fired when user wants to move elements to another layer
let promptMoveLayerOnce = false; let promptMoveLayerOnce = false;
$('#selLayerNames').change((evt) => { $id('selLayerNames').addEventListener('change', function(evt) {
const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value; const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
const confirmStr = this.uiStrings.notification.Qmovethis.elemsToLayer.replace('%s', destLayer); const confirmStr = self.uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);
/** /**
* @param {boolean} ok * @param {boolean} ok
* @returns {void} * @returns {void}
@ -208,9 +209,9 @@ class EditorStartup {
const moveToLayer = (ok) => { const moveToLayer = (ok) => {
if (!ok) { return; } if (!ok) { return; }
promptMoveLayerOnce = true; promptMoveLayerOnce = true;
this.svgCanvas.moveSelectedToLayer(destLayer); self.svgCanvas.moveSelectedToLayer(destLayer);
this.svgCanvas.clearSelection(); self.svgCanvas.clearSelection();
this.layersPanel.populateLayers(); self.layersPanel.populateLayers();
}; };
if (destLayer) { if (destLayer) {
if (promptMoveLayerOnce) { if (promptMoveLayerOnce) {
@ -224,33 +225,31 @@ class EditorStartup {
} }
} }
}); });
$id('tool_font_family').addEventListener('change', function(evt) {
$('#tool_font_family').change((evt) => { self.svgCanvas.setFontFamily(evt.detail.value);
this.svgCanvas.setFontFamily(evt.originalEvent.detail.value);
}); });
$('#seg_type').change((evt) => { $id('seg_type').addEventListener('change', function(evt) {
this.svgCanvas.setSegType($(evt.currentTarget).val()); self.svgCanvas.setSegType(evt.currentTarget.value);
}); });
$('#text').bind('keyup input', (evt) => { $('#text').bind('keyup input', (evt) => {
this.svgCanvas.setTextContent(evt.currentTarget.value); this.svgCanvas.setTextContent(evt.currentTarget.value);
}); });
$id('image_url').addEventListener('change', function(evt) {
$('#image_url').change((evt) => { self.setImageURL(evt.currentTarget.value);
this.setImageURL(evt.currentTarget.value);
}); });
$('#link_url').change((evt) => { $id('link_url').addEventListener('change', function(evt) {
if (evt.currentTarget.value.length) { if (evt.currentTarget.value.length) {
this.svgCanvas.setLinkURL(evt.currentTarget.value); self.svgCanvas.setLinkURL(evt.currentTarget.value);
} else { } else {
this.svgCanvas.removeHyperlink(); self.svgCanvas.removeHyperlink();
} }
}); });
$('#g_title').change((evt) => { $id('g_title').addEventListener('change', function(evt) {
this.svgCanvas.setGroupTitle(evt.currentTarget.value); self.svgCanvas.setGroupTitle(evt.currentTarget.value);
}); });
const wArea = this.workarea; const wArea = this.workarea;
@ -339,7 +338,30 @@ class EditorStartup {
$('#text').focus(); $('#text').focus();
} }
}); });
const winWh = {width: $(window).width(), height: $(window).height()}; // ref: https://stackoverflow.com/a/1038781
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
const winWh = {
width: getWidth(),
height: getHeight()
};
window.addEventListener('resize', (evt) => { window.addEventListener('resize', (evt) => {
Object.entries(winWh).forEach(([type, val]) => { Object.entries(winWh).forEach(([type, val]) => {
@ -360,15 +382,22 @@ class EditorStartup {
$id('stroke_width').value = this.configObj.curConfig.initStroke.width; $id('stroke_width').value = this.configObj.curConfig.initStroke.width;
$id('opacity').value = this.configObj.curConfig.initOpacity * 100; $id('opacity').value = this.configObj.curConfig.initOpacity * 100;
const elements = document.getElementsByClassName("push_button");
$('.push_button').mousedown(() => { Array.from(elements).forEach(function(element) {
if (!$(this).hasClass('disabled')) { element.addEventListener('mousedown', function(event) {
$(this).addClass('push_button_pressed').removeClass('push_button'); if (!event.currentTarget.classList.contains('disabled')) {
} event.currentTarget.classList.add('push_button_pressed')
}).mouseout(() => { event.currentTarget.classList.remove('push_button');
$(this).removeClass('push_button_pressed').addClass('push_button'); }
}).mouseup(() => { });
$(this).removeClass('push_button_pressed').addClass('push_button'); element.addEventListener('mouseout', function(event) {
event.currentTarget.classList.add('push_button')
event.currentTarget.classList.remove('push_button_pressed');
});
element.addEventListener('mouseup', function(event) {
event.currentTarget.classList.add('push_button')
event.currentTarget.classList.remove('push_button_pressed');
});
}); });
this.layersPanel.populateLayers(); this.layersPanel.populateLayers();

3
src/editor/MainMenu.js
View File

@ -119,8 +119,7 @@ class MainMenu {
this.editor.configObj.curConfig.snappingStep = gridsnappingstep; this.editor.configObj.curConfig.snappingStep = gridsnappingstep;
this.editor.configObj.curConfig.gridColor = gridcolor; this.editor.configObj.curConfig.gridColor = gridcolor;
this.editor.configObj.curConfig.showRulers = showrulers; this.editor.configObj.curConfig.showRulers = showrulers;
$id('rulers').style.display = (this.editor.configObj.curConfig.showRulers) ? 'block' : 'none';
$("#rulers").toggle(this.editor.configObj.curConfig.showRulers);
if (this.editor.configObj.curConfig.showRulers) { if (this.editor.configObj.curConfig.showRulers) {
this.editor.rulers.updateRulers(); this.editor.rulers.updateRulers();
} }

2
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@ -750,7 +750,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : ''; const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : '';
if (scaleX === 1 && scaleY === 1) { if (scaleX === 1 && scaleY === 1) {
curGradient.removeAttribute('gradientTransform'); curGradient.removeAttribute('gradientTransform');
// $wc('#ang').addClass('dis');
} else { } else {
const x = -cX * (scaleX - 1); const x = -cX * (scaleX - 1);
const y = -cY * (scaleY - 1); const y = -cY * (scaleY - 1);
@ -759,7 +758,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
rot + 'translate(' + x + ',' + y + ') scale(' + rot + 'translate(' + x + ',' + y + ') scale(' +
scaleX + ',' + scaleY + ')' scaleX + ',' + scaleY + ')'
); );
// $wc('#ang').removeClass('dis');
} }
} }

1
src/editor/components/jgraduate/jQuery.jPicker.js
View File

@ -1310,7 +1310,6 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
const win = settings.window, const win = settings.window,
popup = win.expandable ? nexts.querySelector('#Container') : null; popup = win.expandable ? nexts.querySelector('#Container') : null;
container = win.expandable ? document.createElement('div') : that; container = win.expandable ? document.createElement('div') : that;
// container.addClass('jPicker Container');
container.classList.add('jPicker'); container.classList.add('jPicker');
container.classList.add('Container'); container.classList.add('Container');
if (win.expandable) container.style.display = 'none'; if (win.expandable) container.style.display = 'none';

2
src/editor/components/sePalette.js
View File

@ -99,7 +99,7 @@ export class SEPalette extends HTMLElement {
const newDiv = document.createElement('div'); const newDiv = document.createElement('div');
newDiv.classList.add('square'); newDiv.classList.add('square');
if(rgb === 'none') { if(rgb === 'none') {
var img = document.createElement('img'); const img = document.createElement('img');
img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`; img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`;
img.style.width = "15px"; img.style.width = "15px";
img.style.height = "15px"; img.style.height = "15px";

2
src/editor/dragmove/dragmove.js
View File

@ -17,7 +17,7 @@ export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag
} }
// On mouse move, dispatch the coords to all registered callbacks. // On mouse move, dispatch the coords to all registered callbacks.
for (var i = 0; i < _callbacks.length; i++) { for (let i = 0; i < _callbacks.length; i++) {
_callbacks[i](c.clientX, c.clientY); _callbacks[i](c.clientX, c.clientY);
} }
}); });

2
src/editor/extensions/ext-arrows/ext-arrows.js
View File

@ -113,7 +113,7 @@ export default {
val = 'none'; val = 'none';
} }
$('#arrow_list').val(val); $id('arrow_list').value = val;
} }
} }

7
src/editor/extensions/ext-eyedropper/ext-eyedropper.js
View File

@ -36,6 +36,7 @@ export default {
strokeLinecap: 'butt', strokeLinecap: 'butt',
strokeLinejoin: 'miter' strokeLinejoin: 'miter'
}; };
const {$id} = svgCanvas;
/** /**
* *
@ -47,14 +48,14 @@ export default {
const mode = svgCanvas.getMode(); const mode = svgCanvas.getMode();
if (mode === 'eyedropper') { return; } if (mode === 'eyedropper') { return; }
const tool = $('#tool_eyedropper'); const tool = $id('tool_eyedropper');
// enable-eye-dropper if one element is selected // enable-eye-dropper if one element is selected
let elem = null; let elem = null;
if (!opts.multiselected && opts.elems[0] && if (!opts.multiselected && opts.elems[0] &&
!['svg', 'g', 'use'].includes(opts.elems[0].nodeName) !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)
) { ) {
elem = opts.elems[0]; elem = opts.elems[0];
tool.removeClass('disabled'); tool.classList.remove('disabled');
// grab the current style // grab the current style
currentStyle.fillPaint = elem.getAttribute('fill') || 'black'; currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0; currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
@ -67,7 +68,7 @@ export default {
currentStyle.opacity = elem.getAttribute('opacity') || 1.0; currentStyle.opacity = elem.getAttribute('opacity') || 1.0;
// disable eye-dropper tool // disable eye-dropper tool
} else { } else {
tool.addClass('disabled'); tool.classList.add('disabled');
} }
} }

4
src/editor/extensions/ext-foreignobject/ext-foreignobject.js
View File

@ -35,8 +35,8 @@ export default {
const properlySourceSizeTextArea = function () { const properlySourceSizeTextArea = function () {
// TODO: remove magic numbers here and get values from CSS // TODO: remove magic numbers here and get values from CSS
const height = $('#svg_source_container').height() - 80; const height = parseFloat(getComputedStyle($id(svg_source_container), null).height.replace("px", "")) - 80;
$('#svg_source_textarea').css('height', height); $id('svg_source_textarea').style.height = height + "px";
}; };
/** /**

54
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@ -259,7 +259,7 @@ export default {
title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')'; title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')';
} }
if (curMeta) { if (curMeta) {
preview.children().each(function () { $(preview).children().each(function () {
if ($(this).data('id') === id) { if ($(this).data('id') === id) {
if (curMeta.preview_url) { if (curMeta.preview_url) {
$(this).html( $(this).html(
@ -321,24 +321,50 @@ export default {
// Receive `postMessage` data // Receive `postMessage` data
window.addEventListener('message', onMessage, true); window.addEventListener('message', onMessage, true);
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
/** /**
* @param {boolean} show * @param {boolean} show
* @returns {void} * @returns {void}
*/ */
function toggleMulti (show) { function toggleMulti (show) {
$('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)}); $id('lib_framewrap').style.right = (show ? 200 : 10);
$id('imglib_opts').style.right = (show ? 200 : 10);
if (!preview) { if (!preview) {
preview = $('<div id=imglib_preview>').css({ preview = document.createElement('div');
position: 'absolute', preview.setAttribute('id', 'imglib_preview');
top: 45, // eslint-disable-next-line max-len
right: 10, preview.setAttribute('style', `position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;`);
width: 180, insertAfter($id('lib_framewrap'), preview);
bottom: 45,
background: '#fff', /* submit = document.createElement('button');
overflow: 'auto' submit.setAttribute('content', 'Import selected');
}).insertAfter('#lib_framewrap'); submit.setAttribute('disabled', true);
submit.textContent = 'Import selected';
submit.setAttribute('style', `position: absolute;bottom: 10px;right: -10px;`);
$id('imgbrowse').appendChild(submit);
submit.addEventListener('click', function () {
$.each(multiArr, function (i) {
const type = this[0];
const data = this[1];
if (type === 'svg') {
svgCanvas.importSvgString(data);
} else {
importImage(data);
}
svgCanvas.moveSelectedElements(i * 20, i * 20, false);
});
$(preview).empty();
multiArr = [];
$id("imgbrowse_holder").style.display = 'none';
})
submit.style.display = (show) ? 'block' : 'none';
*/
submit = $('<button disabled>Import selected</button>')
submit = $('<button disabled>Import selected</button>')
.appendTo('#imgbrowse') .appendTo('#imgbrowse')
.on('click touchend', function () { .on('click touchend', function () {
$.each(multiArr, function (i) { $.each(multiArr, function (i) {
@ -351,7 +377,7 @@ export default {
} }
svgCanvas.moveSelectedElements(i * 20, i * 20, false); svgCanvas.moveSelectedElements(i * 20, i * 20, false);
}); });
preview.empty(); $(preview).empty();
multiArr = []; multiArr = [];
$id("imgbrowse_holder").style.display = 'none'; $id("imgbrowse_holder").style.display = 'none';
}).css({ }).css({
@ -361,7 +387,7 @@ export default {
}); });
} }
preview.toggle(show); preview.style.display = (show) ? 'block' : 'none';
submit.toggle(show); submit.toggle(show);
} }

2
src/editor/extensions/ext-mathjax/ext-mathjax.js
View File

@ -190,7 +190,7 @@ export default {
}); });
// MathJax preprocessing has to ignore most of the page. // MathJax preprocessing has to ignore most of the page.
$('body').addClass('tex2jax_ignore'); document.body.classList.add("tex2jax_ignore");
try { try {
await import('./mathjax/MathJax.min.js'); // ?config=TeX-AMS-MML_SVG.js'); await import('./mathjax/MathJax.min.js'); // ?config=TeX-AMS-MML_SVG.js');

21
src/editor/panels/TopPanel.js
View File

@ -83,31 +83,27 @@ class TopPanel {
} }
} }
$("#stroke_width").val(gWidth === null ? "" : gWidth); $id("stroke_width").value = (gWidth === null ? "" : gWidth);
this.editor.bottomPanel.updateColorpickers(true); this.editor.bottomPanel.updateColorpickers(true);
break; break;
} }
default: { default: {
this.editor.bottomPanel.updateColorpickers(true); this.editor.bottomPanel.updateColorpickers(true);
$("#stroke_width").val( $id("stroke_width").value = this.selectedElement.getAttribute("stroke-width") || 1;
this.selectedElement.getAttribute("stroke-width") || 1 $id("stroke_style").value = this.selectedElement.getAttribute("stroke-dasharray") || "none";
);
$("#stroke_style").val(
this.selectedElement.getAttribute("stroke-dasharray") || "none"
);
let attr = let attr =
this.selectedElement.getAttribute("stroke-linejoin") || "miter"; this.selectedElement.getAttribute("stroke-linejoin") || "miter";
if ($("#linejoin_" + attr).length) { if ($id("linejoin_" + attr).length) {
this.setStrokeOpt($("#linejoin_" + attr)[0]); this.setStrokeOpt($id("linejoin_" + attr));
} }
attr = this.selectedElement.getAttribute("stroke-linecap") || "butt"; attr = this.selectedElement.getAttribute("stroke-linecap") || "butt";
if ($("#linecap_" + attr).length) { if ($id("linecap_" + attr).length) {
this.setStrokeOpt($("#linecap_" + attr)[0]); this.setStrokeOpt($id("linecap_" + attr));
} }
} }
} }
@ -311,7 +307,7 @@ class TopPanel {
$("#tool_make_link, #tool_make_link_multi").toggle(!linkHref); $("#tool_make_link, #tool_make_link_multi").toggle(!linkHref);
if (linkHref) { if (linkHref) {
$("#link_url").val(linkHref); $id("link_url").value = linkHref;
} }
if (panels[tagName]) { if (panels[tagName]) {
@ -329,7 +325,6 @@ class TopPanel {
if (tagName === "text") { if (tagName === "text") {
$id("text_panel").style.display = "inline-block"; $id("text_panel").style.display = "inline-block";
$id("tool_font_size").style.display = "inline";
$id("tool_italic").pressed = this.editor.svgCanvas.getItalic(); $id("tool_italic").pressed = this.editor.svgCanvas.getItalic();
$id("tool_bold").pressed = this.editor.svgCanvas.getBold(); $id("tool_bold").pressed = this.editor.svgCanvas.getBold();
$id("tool_font_family").value = elem.getAttribute("font-family"); $id("tool_font_family").value = elem.getAttribute("font-family");

6
src/svgcanvas/text-actions.js
View File

@ -391,7 +391,7 @@ export const textActionsMethod = (function () {
textActionsContext_.getCanvas().textActions.init(); textActionsContext_.getCanvas().textActions.init();
$(curtext).css('cursor', 'text'); curtext.style.cursor = 'text';
// if (supportsEditableText()) { // if (supportsEditableText()) {
// curtext.setAttribute('editable', 'simple'); // curtext.setAttribute('editable', 'simple');
@ -420,11 +420,11 @@ export const textActionsMethod = (function () {
blinker = null; blinker = null;
if (selblock) { $(selblock).attr('display', 'none'); } if (selblock) { $(selblock).attr('display', 'none'); }
if (cursor) { $(cursor).attr('visibility', 'hidden'); } if (cursor) { $(cursor).attr('visibility', 'hidden'); }
$(curtext).css('cursor', 'move'); curtext.style.cursor = 'move';
if (selectElem) { if (selectElem) {
textActionsContext_.getCanvas().clearSelection(); textActionsContext_.getCanvas().clearSelection();
$(curtext).css('cursor', 'move'); curtext.style.cursor = 'move';
textActionsContext_.call('selected', [curtext]); textActionsContext_.call('selected', [curtext]);
textActionsContext_.getCanvas().addToSelection([curtext], true); textActionsContext_.getCanvas().addToSelection([curtext], true);