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

93
src/editor/EditorStartup.js
View File

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

3
src/editor/MainMenu.js
View File

@ -119,8 +119,7 @@ class MainMenu {
this.editor.configObj.curConfig.snappingStep = gridsnappingstep;
this.editor.configObj.curConfig.gridColor = gridcolor;
this.editor.configObj.curConfig.showRulers = showrulers;
$("#rulers").toggle(this.editor.configObj.curConfig.showRulers);
$id('rulers').style.display = (this.editor.configObj.curConfig.showRulers) ? 'block' : 'none';
if (this.editor.configObj.curConfig.showRulers) {
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 + ') ' : '';
if (scaleX === 1 && scaleY === 1) {
curGradient.removeAttribute('gradientTransform');
// $wc('#ang').addClass('dis');
} else {
const x = -cX * (scaleX - 1);
const y = -cY * (scaleY - 1);
@ -759,7 +758,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
rot + 'translate(' + x + ',' + y + ') scale(' +
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,
popup = win.expandable ? nexts.querySelector('#Container') : null;
container = win.expandable ? document.createElement('div') : that;
// container.addClass('jPicker Container');
container.classList.add('jPicker');
container.classList.add('Container');
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');
newDiv.classList.add('square');
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.style.width = "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.
for (var i = 0; i < _callbacks.length; i++) {
for (let i = 0; i < _callbacks.length; i++) {
_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';
}
$('#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',
strokeLinejoin: 'miter'
};
const {$id} = svgCanvas;
/**
*
@ -47,14 +48,14 @@ export default {
const mode = svgCanvas.getMode();
if (mode === 'eyedropper') { return; }
const tool = $('#tool_eyedropper');
const tool = $id('tool_eyedropper');
// enable-eye-dropper if one element is selected
let elem = null;
if (!opts.multiselected && opts.elems[0] &&
!['svg', 'g', 'use'].includes(opts.elems[0].nodeName)
) {
elem = opts.elems[0];
tool.removeClass('disabled');
tool.classList.remove('disabled');
// grab the current style
currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
@ -67,7 +68,7 @@ export default {
currentStyle.opacity = elem.getAttribute('opacity') || 1.0;
// disable eye-dropper tool
} 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 () {
// TODO: remove magic numbers here and get values from CSS
const height = $('#svg_source_container').height() - 80;
$('#svg_source_textarea').css('height', height);
const height = parseFloat(getComputedStyle($id(svg_source_container), null).height.replace("px", "")) - 80;
$id('svg_source_textarea').style.height = height + "px";
};
/**

52
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 + ')';
}
if (curMeta) {
preview.children().each(function () {
$(preview).children().each(function () {
if ($(this).data('id') === id) {
if (curMeta.preview_url) {
$(this).html(
@ -321,22 +321,48 @@ export default {
// Receive `postMessage` data
window.addEventListener('message', onMessage, true);
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
/**
* @param {boolean} show
* @returns {void}
*/
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) {
preview = $('<div id=imglib_preview>').css({
position: 'absolute',
top: 45,
right: 10,
width: 180,
bottom: 45,
background: '#fff',
overflow: 'auto'
}).insertAfter('#lib_framewrap');
preview = document.createElement('div');
preview.setAttribute('id', 'imglib_preview');
// eslint-disable-next-line max-len
preview.setAttribute('style', `position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;`);
insertAfter($id('lib_framewrap'), preview);
/* submit = document.createElement('button');
submit.setAttribute('content', 'Import selected');
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>')
.appendTo('#imgbrowse')
@ -351,7 +377,7 @@ export default {
}
svgCanvas.moveSelectedElements(i * 20, i * 20, false);
});
preview.empty();
$(preview).empty();
multiArr = [];
$id("imgbrowse_holder").style.display = 'none';
}).css({
@ -361,7 +387,7 @@ export default {
});
}
preview.toggle(show);
preview.style.display = (show) ? 'block' : 'none';
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.
$('body').addClass('tex2jax_ignore');
document.body.classList.add("tex2jax_ignore");
try {
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);
break;
}
default: {
this.editor.bottomPanel.updateColorpickers(true);
$("#stroke_width").val(
this.selectedElement.getAttribute("stroke-width") || 1
);
$("#stroke_style").val(
this.selectedElement.getAttribute("stroke-dasharray") || "none"
);
$id("stroke_width").value = this.selectedElement.getAttribute("stroke-width") || 1;
$id("stroke_style").value = this.selectedElement.getAttribute("stroke-dasharray") || "none";
let attr =
this.selectedElement.getAttribute("stroke-linejoin") || "miter";
if ($("#linejoin_" + attr).length) {
this.setStrokeOpt($("#linejoin_" + attr)[0]);
if ($id("linejoin_" + attr).length) {
this.setStrokeOpt($id("linejoin_" + attr));
}
attr = this.selectedElement.getAttribute("stroke-linecap") || "butt";
if ($("#linecap_" + attr).length) {
this.setStrokeOpt($("#linecap_" + attr)[0]);
if ($id("linecap_" + attr).length) {
this.setStrokeOpt($id("linecap_" + attr));
}
}
}
@ -311,7 +307,7 @@ class TopPanel {
$("#tool_make_link, #tool_make_link_multi").toggle(!linkHref);
if (linkHref) {
$("#link_url").val(linkHref);
$id("link_url").value = linkHref;
}
if (panels[tagName]) {
@ -329,7 +325,6 @@ class TopPanel {
if (tagName === "text") {
$id("text_panel").style.display = "inline-block";
$id("tool_font_size").style.display = "inline";
$id("tool_italic").pressed = this.editor.svgCanvas.getItalic();
$id("tool_bold").pressed = this.editor.svgCanvas.getBold();
$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();
$(curtext).css('cursor', 'text');
curtext.style.cursor = 'text';
// if (supportsEditableText()) {
// curtext.setAttribute('editable', 'simple');
@ -420,11 +420,11 @@ export const textActionsMethod = (function () {
blinker = null;
if (selblock) { $(selblock).attr('display', 'none'); }
if (cursor) { $(cursor).attr('visibility', 'hidden'); }
$(curtext).css('cursor', 'move');
curtext.style.cursor = 'move';
if (selectElem) {
textActionsContext_.getCanvas().clearSelection();
$(curtext).css('cursor', 'move');
curtext.style.cursor = 'move';
textActionsContext_.call('selected', [curtext]);
textActionsContext_.getCanvas().addToSelection([curtext], true);