* #85 javascript convertion changes * #85 package json updated * #85 extension context_tools code again added * #85 lint issue fixed * #84 path tool draw issue fixedmaster
parent
325720f7c8
commit
18ec805fab
File diff suppressed because it is too large
Load Diff
|
@ -181,8 +181,8 @@
|
|||
"nyc": "15.1.0",
|
||||
"open-cli": "6.0.1",
|
||||
"promise-fs": "2.1.1",
|
||||
"qr-manipulation": "github:brettz9/qr-manipulation",
|
||||
"query-result": "github:WebReflection/query-result",
|
||||
"qr-manipulation": "^0.7.0",
|
||||
"query-result": "^1.0.5",
|
||||
"remark-cli": "9.0.0",
|
||||
"remark-lint-ordered-list-marker-value": "2.0.1",
|
||||
"requirejs": "2.3.6",
|
||||
|
|
|
@ -359,8 +359,8 @@ class Editor extends EditorStartup {
|
|||
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');
|
||||
$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];
|
||||
|
@ -793,7 +793,8 @@ class Editor extends EditorStartup {
|
|||
async extAdded (win, ext) {
|
||||
|
||||
const self = this;
|
||||
const btnSelects = [];
|
||||
// eslint-disable-next-line sonarjs/no-unused-collection
|
||||
let btnSelects = [];
|
||||
if (!ext) {
|
||||
return undefined;
|
||||
}
|
||||
|
@ -815,6 +816,95 @@ class Editor extends EditorStartup {
|
|||
}
|
||||
};
|
||||
|
||||
if (ext.context_tools) {
|
||||
$.each(ext.context_tools, function (i, tool) {
|
||||
// Add select tool
|
||||
const contId = tool.container_id ? (' id="' + tool.container_id + '"') : '';
|
||||
|
||||
let panel = $('#' + tool.panel);
|
||||
// create the panel if it doesn't exist
|
||||
if (!panel.length) {
|
||||
panel = $('<div>', {id: tool.panel}).appendTo('#tools_top');
|
||||
}
|
||||
|
||||
let html;
|
||||
// TODO: Allow support for other types, or adding to existing tool
|
||||
switch (tool.type) {
|
||||
case 'tool_button': {
|
||||
html = '<div class="tool_button">' + tool.id + '</div>';
|
||||
const div = $(html).appendTo(panel);
|
||||
if (tool.events) {
|
||||
$.each(tool.events, function (evt, func) {
|
||||
$(div).bind(evt, func);
|
||||
});
|
||||
}
|
||||
break;
|
||||
} case 'select': {
|
||||
html = '<label' + contId + '>' +
|
||||
'<select id="' + tool.id + '">';
|
||||
$.each(tool.options, function (val, text) {
|
||||
const sel = (val === tool.defval) ? ' selected' : '';
|
||||
html += '<option value="' + val + '"' + sel + '>' + text + '</option>';
|
||||
});
|
||||
html += '</select></label>';
|
||||
// Creates the tool, hides & adds it, returns the select element
|
||||
const sel = $(html).appendTo(panel).find('select');
|
||||
|
||||
$.each(tool.events, function (evt, func) {
|
||||
$(sel).bind(evt, func);
|
||||
});
|
||||
break;
|
||||
} case 'button-select': {
|
||||
html = '<div id="' + tool.id + '" class="dropdown toolset" title="' + tool.title + '">' +
|
||||
'<div id="cur_' + tool.id + '" class="icon_label"></div><button></button></div>';
|
||||
|
||||
const list = $('<ul id="' + tool.id + '_opts"></ul>').appendTo('#option_lists');
|
||||
|
||||
if (tool.colnum) {
|
||||
list.addClass('optcols' + tool.colnum);
|
||||
}
|
||||
|
||||
// Creates the tool, hides & adds it, returns the select element
|
||||
/* const dropdown = */ $(html).appendTo(panel).children();
|
||||
|
||||
btnSelects.push({
|
||||
elem: ('#' + tool.id),
|
||||
list: ('#' + tool.id + '_opts'),
|
||||
title: tool.title,
|
||||
callback: tool.events.change,
|
||||
cur: ('#cur_' + tool.id)
|
||||
});
|
||||
|
||||
break;
|
||||
} case 'input': {
|
||||
html = '<label' + contId + '>' +
|
||||
'<span id="' + tool.id + '_label">' +
|
||||
tool.label + ':</span>' +
|
||||
'<input id="' + tool.id + '" title="' + tool.title +
|
||||
'" size="' + (tool.size || '4') +
|
||||
'" value="' + (tool.defval || '') + '" type="text"/></label>';
|
||||
|
||||
// Creates the tool, hides & adds it, returns the select element
|
||||
|
||||
// Add to given tool.panel
|
||||
const inp = $(html).appendTo(panel).find('input');
|
||||
|
||||
if (tool.spindata) {
|
||||
inp.SpinButton(tool.spindata);
|
||||
}
|
||||
|
||||
if (tool.events) {
|
||||
$.each(tool.events, function (evt, func) {
|
||||
inp.bind(evt, func);
|
||||
});
|
||||
}
|
||||
break;
|
||||
} default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (ext.events) {
|
||||
this.leftPanel.add(ext.events.id, ext.events.click);
|
||||
}
|
||||
|
|
|
@ -30,8 +30,8 @@ class LayersPanel {
|
|||
*/
|
||||
changeSidePanelWidth(delta) {
|
||||
const rulerX = document.querySelector("#ruler_x");
|
||||
$("#sidepanels").width("+=" + delta);
|
||||
$("#layerpanel").width("+=" + delta);
|
||||
$id("sidepanels").style.width = (parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")) + delta) + "px";
|
||||
$id("layerpanel").style.width = (parseFloat(getComputedStyle($id("layerpanel"), null).width.replace("px", "")) + delta) + "px";
|
||||
rulerX.style.right =
|
||||
parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
|
||||
delta +
|
||||
|
@ -247,8 +247,12 @@ class LayersPanel {
|
|||
// This matches what this.editor.svgCanvas does
|
||||
// TODO: make this behavior less brittle (svg-editor should get which
|
||||
// layer is selected from the canvas and then select that one in the UI)
|
||||
$("#layerlist tr.layer").removeClass("layersel");
|
||||
$("#layerlist tr.layer:first").addClass("layersel");
|
||||
const elements = document.querySelectorAll('#layerlist tr.layer');
|
||||
Array.prototype.forEach.call(elements, function(el, i){
|
||||
el.classList.remove('layersel');
|
||||
});
|
||||
document.querySelector('#layerlist tr.layer').classList.add('layersel');
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -276,13 +280,22 @@ class LayersPanel {
|
|||
this.populateLayers();
|
||||
}
|
||||
|
||||
index(el) {
|
||||
if (!el) return -1;
|
||||
var i = 0;
|
||||
do {
|
||||
i++;
|
||||
} while (el = el.previousElementSibling);
|
||||
return i;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
mergeLayer() {
|
||||
if (
|
||||
$("#layerlist tr.layersel").index() ===
|
||||
(this.index(document.querySelector("#layerlist tr.layersel"))-1) ===
|
||||
this.editor.svgCanvas.getCurrentDrawing().getNumLayers() - 1
|
||||
) {
|
||||
return;
|
||||
|
@ -299,7 +312,7 @@ class LayersPanel {
|
|||
moveLayer(pos) {
|
||||
const total = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
|
||||
|
||||
let curIndex = $("#layerlist tr.layersel").index();
|
||||
let curIndex = (this.index(document.querySelector("#layerlist tr.layersel"))-1);
|
||||
if (curIndex > 0 || curIndex < total - 1) {
|
||||
curIndex += pos;
|
||||
this.editor.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
|
||||
|
@ -312,7 +325,7 @@ class LayersPanel {
|
|||
*/
|
||||
layerRename() {
|
||||
// const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
|
||||
const oldName = $("#layerlist tr.layersel td.layername").text();
|
||||
const oldName = document.querySelector("#layerlist tr.layersel td.layername").textContent;
|
||||
const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
|
||||
if (!newName) {
|
||||
return;
|
||||
|
|
Loading…
Reference in New Issue