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

#89 extension modification (#91)

Browse Source 
* #89 
extension modification cahnges
console log removed
extension changes
extension modification
This commit is contained in:
Agriya Dev5
2021-04-20 13:57:09 +05:30
committed by GitHub
parent 8af2882bce
commit 699721ea16
5 changed files with 293 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/editor/MainMenu.js
View File

@@ -308,7 +308,6 @@ class MainMenu {
<se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item> <se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
<se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item> <se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item> <se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
<se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg"> <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg">
</se-menu-item> </se-menu-item>
<se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item> <se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>

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

@@ -21,12 +21,12 @@ const loadExtensionTranslation = async function (lang) {
export default { export default {
name: 'eyedropper', name: 'eyedropper',
async init (S) { async init(S) {
const svgEditor = this; const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {$, ChangeElementCommand} = S, // , svgcontent, const { $, ChangeElementCommand } = S, // , svgcontent,
// svgdoc = S.svgroot.parentNode.ownerDocument, // svgdoc = S.svgroot.parentNode.ownerDocument,
{svgCanvas} = svgEditor, { svgCanvas } = svgEditor,
addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); }, addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); },
currentStyle = { currentStyle = {
fillPaint: 'red', fillOpacity: 1.0, fillPaint: 'red', fillOpacity: 1.0,
@@ -36,14 +36,14 @@ export default {
strokeLinecap: 'butt', strokeLinecap: 'butt',
strokeLinejoin: 'miter' strokeLinejoin: 'miter'
}; };
const {$id} = svgCanvas; const { $id } = svgCanvas;
/** /**
* *
* @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts * @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts
* @returns {void} * @returns {void}
*/ */
function getStyle (opts) { const getStyle = (opts) => {
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool // if we are in eyedropper mode, we don't want to disable the eye-dropper tool
const mode = svgCanvas.getMode(); const mode = svgCanvas.getMode();
if (mode === 'eyedropper') { return; } if (mode === 'eyedropper') { return; }
@@ -66,30 +66,33 @@ export default {
currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap'); currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap');
currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin'); currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin');
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.classList.add('disabled'); tool.classList.add('disabled');
} }
} }
const events = {
id: 'tool_eyedropper',
click () {
svgCanvas.setMode('eyedropper');
}
};
return { return {
name: strings.name, name: strings.name,
events, callback() {
// Add the button and its handler(s)
const buttonTemplate = document.createElement("template");
buttonTemplate.innerHTML = `
<se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
`
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
$id('tool_eyedropper').addEventListener("click", () => {
svgCanvas.setMode('eyedropper');
});
},
// if we have selected an element, grab its paint and enable the eye dropper button // if we have selected an element, grab its paint and enable the eye dropper button
selectedChanged: getStyle, selectedChanged: getStyle,
elementChanged: getStyle, elementChanged: getStyle,
mouseDown (opts) { mouseDown(opts) {
const mode = svgCanvas.getMode(); const mode = svgCanvas.getMode();
if (mode === 'eyedropper') { if (mode === 'eyedropper') {
const e = opts.event; const e = opts.event;
const {target} = e; const { target } = e;
if (!['svg', 'g', 'use'].includes(target.nodeName)) { if (!['svg', 'g', 'use'].includes(target.nodeName)) {
const changes = {}; const changes = {};

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

@@ -23,14 +23,14 @@ const loadExtensionTranslation = async function (lang) {
export default { export default {
name: 'imagelib', name: 'imagelib',
async init ({$, decode64, dropXMLInternalSubset}) { async init({ $, decode64, dropXMLInternalSubset }) {
const svgEditor = this; const svgEditor = this;
const {$id} = svgEditor.svgCanvas; const { $id } = svgEditor.svgCanvas;
const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {uiStrings, canvas: svgCanvas} = svgEditor; const { uiStrings, canvas: svgCanvas } = svgEditor;
const allowedImageLibOrigins = imagelibStrings.imgLibs.map(({url}) => { const allowedImageLibOrigins = imagelibStrings.imgLibs.map(({ url }) => {
try { try {
return new URL(url).origin; return new URL(url).origin;
} catch (err) { } catch (err) {
@@ -42,7 +42,7 @@ export default {
* *
* @returns {void} * @returns {void}
*/ */
function closeBrowser () { const closeBrowser = () => {
$id("imgbrowse_holder").style.display = 'none'; $id("imgbrowse_holder").style.display = 'none';
document.activeElement.blur(); // make sure focus is the body to correct issue #417 document.activeElement.blur(); // make sure focus is the body to correct issue #417
} }
@@ -51,7 +51,7 @@ export default {
* @param {string} url * @param {string} url
* @returns {void} * @returns {void}
*/ */
function importImage (url) { const importImage = (url) => {
const newImage = svgCanvas.addSVGElementFromJson({ const newImage = svgCanvas.addSVGElementFromJson({
element: 'image', element: 'image',
attr: { attr: {
@@ -111,7 +111,7 @@ export default {
* @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage` * @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage`
* @returns {void} * @returns {void}
*/ */
async function onMessage ({origin, data: response}) { async function onMessage({ origin, data: response }) {
if (!response || !['string', 'object'].includes(typeof response)) { if (!response || !['string', 'object'].includes(typeof response)) {
// Do nothing // Do nothing
return; return;
@@ -128,7 +128,7 @@ export default {
} }
if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) { if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) {
// Todo: Surface this error to user? // Todo: Surface this error to user?
console.log(`Origin ${origin} not whitelisted for posting to ${window.origin}`); console.log(`Origin ${origin} not whitelisted for posting to ${window.origin}`);
return; return;
} }
const hasName = 'name' in response; const hasName = 'name' in response;
@@ -173,165 +173,165 @@ export default {
let entry, curMeta, svgStr, imgStr; let entry, curMeta, svgStr, imgStr;
switch (type) { switch (type) {
case 'meta': { case 'meta': {
// Metadata // Metadata
transferStopped = false; transferStopped = false;
curMeta = response; curMeta = response;
// Should be safe to add dynamic property as passed metadata // Should be safe to add dynamic property as passed metadata
pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection] pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection]
const name = (curMeta.name || 'file'); const name = (curMeta.name || 'file');
const message = uiStrings.notification.retrieving.replace('%s', name); const message = uiStrings.notification.retrieving.replace('%s', name);
if (mode !== 'm') { if (mode !== 'm') {
await seConfirm(message); await seConfirm(message);
transferStopped = true; transferStopped = true;
} else { } else {
entry = document.createElement('div'); entry = document.createElement('div');
entry.textContent = message; entry.textContent = message;
entry.dataset.id = curMeta.id; entry.dataset.id = curMeta.id;
preview.appendChild(entry); preview.appendChild(entry);
curMeta.entry = entry; curMeta.entry = entry;
}
return;
} }
case '<':
return;
}
case '<':
svgStr = true;
break;
case 'd': {
if (response.startsWith('data:image/svg+xml')) {
const pre = 'data:image/svg+xml;base64,';
const src = response.substring(pre.length);
response = decode64(src);
svgStr = true; svgStr = true;
break; break;
} else if (response.startsWith('data:image/')) { case 'd': {
imgStr = true; if (response.startsWith('data:image/svg+xml')) {
break; const pre = 'data:image/svg+xml;base64,';
const src = response.substring(pre.length);
response = decode64(src);
svgStr = true;
break;
} else if (response.startsWith('data:image/')) {
imgStr = true;
break;
}
} }
} // Else fall through
// Else fall through default:
default: // TODO: See if there's a way to base64 encode the binary data stream
// TODO: See if there's a way to base64 encode the binary data stream // const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
// Assume it's raw image data // Assume it's raw image data
// importImage(str); // importImage(str);
// Don't give warning as postMessage may have been used by something else // Don't give warning as postMessage may have been used by something else
if (mode !== 'm') { if (mode !== 'm') {
closeBrowser(); closeBrowser();
} else { } else {
pending[id].entry.remove(); pending[id].entry.remove();
} }
// await alert('Unexpected data was returned: ' + response, function() { // await alert('Unexpected data was returned: ' + response, function() {
// if (mode !== 'm') { // if (mode !== 'm') {
// closeBrowser(); // closeBrowser();
// } else { // } else {
// pending[id].entry.remove(); // pending[id].entry.remove();
// } // }
// }); // });
return; return;
} }
switch (mode) { switch (mode) {
case 's': case 's':
// Import one // Import one
if (svgStr) { if (svgStr) {
svgEditor.svgCanvas.importSvgString(response); svgEditor.svgCanvas.importSvgString(response);
} else if (imgStr) { } else if (imgStr) {
importImage(response); importImage(response);
}
closeBrowser();
break;
case 'm': {
// Import multiple
multiArr.push([(svgStr ? 'svg' : 'img'), response]);
curMeta = pending[id];
let title;
if (svgStr) {
if (curMeta && curMeta.name) {
title = curMeta.name;
} else {
// Try to find a title
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb]
title = xml.querySelector('title').textContent || '(SVG #' + response.length + ')';
} }
if (curMeta) { closeBrowser();
Array.from(preview.children).forEach(function(element) { break;
if (element.dataset.id === id) { case 'm': {
if (curMeta.preview_url) { // Import multiple
const img = document.createElement("img"); multiArr.push([(svgStr ? 'svg' : 'img'), response]);
img.src = curMeta.preview_url; curMeta = pending[id];
const span = document.createElement("span"); let title;
span.appendChild(img); if (svgStr) {
element.append(span); if (curMeta && curMeta.name) {
} else { title = curMeta.name;
element.textContent = title; } else {
// Try to find a title
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb]
title = xml.querySelector('title').textContent || '(SVG #' + response.length + ')';
}
if (curMeta) {
Array.from(preview.children).forEach(function (element) {
if (element.dataset.id === id) {
if (curMeta.preview_url) {
const img = document.createElement("img");
img.src = curMeta.preview_url;
const span = document.createElement("span");
span.appendChild(img);
element.append(span);
} else {
element.textContent = title;
}
submit.removeAttribute('disabled');
} }
submit.removeAttribute('disabled'); });
} } else {
}); const div = document.createElement("div");
div.textContent = title;
preview.appendChild(div);
submit.removeAttribute('disabled');
}
} else { } else {
const div = document.createElement("div"); if (curMeta && curMeta.preview_url) {
div.textContent = title; title = curMeta.name || '';
preview.appendChild(div); entry = document.createElement('span');
submit.removeAttribute('disabled'); const img = document.createElement("img");
} img.src = curMeta.preview_url;
} else { entry.appendChild(img);
if (curMeta && curMeta.preview_url) { entry.appendChild(document.createTextNode(title))
title = curMeta.name || ''; } else {
entry = document.createElement('span'); entry = document.createElement("img");
const img = document.createElement("img"); entry.src = response;
img.src = curMeta.preview_url; }
entry.appendChild(img);
entry.appendChild(document.createTextNode(title))
} else {
entry = document.createElement("img");
entry.src = response;
}
if (curMeta) { if (curMeta) {
Array.from(preview.children).forEach(function(element) { Array.from(preview.children).forEach(function (element) {
if (element.dataset.id === id) { if (element.dataset.id === id) {
element.appendChild(entry); element.appendChild(entry);
submit.removeAttribute('disabled'); submit.removeAttribute('disabled');
} }
}); });
} else { } else {
const div = document.createElement("div"); const div = document.createElement("div");
div.appendChild(entry); div.appendChild(entry);
preview.appendChild(div); preview.appendChild(div);
submit.removeAttribute('disabled'); submit.removeAttribute('disabled');
}
} }
break;
} case 'o': {
// Open
if (!svgStr) { break; }
closeBrowser();
const ok = await svgEditor.openPrep();
if (!ok) { return; }
svgCanvas.clear();
svgCanvas.setSvgString(response);
// updateCanvas();
break;
} }
break;
} case 'o': {
// Open
if (!svgStr) { break; }
closeBrowser();
const ok = await svgEditor.openPrep();
if (!ok) { return; }
svgCanvas.clear();
svgCanvas.setSvgString(response);
// updateCanvas();
break;
}
} }
} }
// Receive `postMessage` data // Receive `postMessage` data
window.addEventListener('message', onMessage, true); window.addEventListener('message', onMessage, true);
function insertAfter(referenceNode, newNode) { const insertAfter = (referenceNode, newNode) => {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
} }
function toggleMultiLoop() { const toggleMultiLoop = () => {
$.each(multiArr, function (i) { $.each(multiArr, function (i) {
const type = this[0]; const type = this[0];
const data = this[1]; const data = this[1];
@@ -342,8 +342,8 @@ export default {
} }
svgCanvas.moveSelectedElements(i * 20, i * 20, false); svgCanvas.moveSelectedElements(i * 20, i * 20, false);
}); });
while(preview.firstChild) while (preview.firstChild)
preview.removeChild(preview.firstChild); preview.removeChild(preview.firstChild);
multiArr = []; multiArr = [];
$id("imgbrowse_holder").style.display = 'none'; $id("imgbrowse_holder").style.display = 'none';
} }
@@ -352,7 +352,7 @@ export default {
* @param {boolean} show * @param {boolean} show
* @returns {void} * @returns {void}
*/ */
function toggleMulti (show) { const toggleMulti = (show) => {
$id('lib_framewrap').style.right = (show ? 200 : 10); $id('lib_framewrap').style.right = (show ? 200 : 10);
$id('imglib_opts').style.right = (show ? 200 : 10); $id('imglib_opts').style.right = (show ? 200 : 10);
if (!preview) { if (!preview) {
@@ -361,26 +361,26 @@ export default {
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
preview.setAttribute('style', `position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;`); preview.setAttribute('style', `position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;`);
insertAfter($id('lib_framewrap'), preview); insertAfter($id('lib_framewrap'), preview);
submit = document.createElement('button'); submit = document.createElement('button');
submit.setAttribute('content', 'Import selected'); submit.setAttribute('content', 'Import selected');
submit.setAttribute('disabled', true); submit.setAttribute('disabled', true);
submit.textContent = 'Import selected'; submit.textContent = 'Import selected';
submit.setAttribute('style', `position: absolute;bottom: 10px;right: -10px;`); submit.setAttribute('style', `position: absolute;bottom: 10px;right: -10px;`);
$id('imgbrowse').appendChild(submit); $id('imgbrowse').appendChild(submit);
submit.addEventListener('click', toggleMultiLoop); submit.addEventListener('click', toggleMultiLoop);
submit.addEventListener('touchend', toggleMultiLoop); submit.addEventListener('touchend', toggleMultiLoop);
} }
submit.style.display = (show) ? 'block' : 'none'; submit.style.display = (show) ? 'block' : 'none';
preview.style.display = (show) ? 'block' : 'none'; preview.style.display = (show) ? 'block' : 'none';
} }
/** /**
* *
* @returns {void} * @returns {void}
*/ */
function showBrowser () { const showBrowser = () => {
let browser = $id('imgbrowse'); let browser = $id('imgbrowse');
if (!browser) { if (!browser) {
const div = document.createElement('div'); const div = document.createElement('div');
@@ -410,7 +410,7 @@ export default {
const button = document.createElement('button'); const button = document.createElement('button');
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
button.innerHTML = '<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />' + uiStrings.common.cancel ; button.innerHTML = '<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />' + uiStrings.common.cancel;
browser.appendChild(button); browser.appendChild(button);
button.addEventListener('click', function () { button.addEventListener('click', function () {
$id("imgbrowse_holder").style.display = 'none'; $id("imgbrowse_holder").style.display = 'none';
@@ -419,11 +419,11 @@ export default {
$id("imgbrowse_holder").style.display = 'none'; $id("imgbrowse_holder").style.display = 'none';
}); });
button.setAttribute('style', `position: absolute;top: 5;right: -10;`); button.setAttribute('style', `position: absolute;top: 5;right: -10;`);
const leftBlock = document.createElement('span'); const leftBlock = document.createElement('span');
leftBlock.setAttribute('style', `position: absolute;top: 5;left: 10;`); leftBlock.setAttribute('style', `position: absolute;top: 5;left: 10;`);
browser.appendChild(leftBlock); browser.appendChild(leftBlock);
const back = document.createElement('button'); const back = document.createElement('button');
back.style.visibility = "hidden"; back.style.visibility = "hidden";
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
@@ -448,27 +448,27 @@ export default {
const select = document.createElement('select'); const select = document.createElement('select');
select.innerHTML = '<select><option value=s>' + select.innerHTML = '<select><option value=s>' +
imagelibStrings.import_single + '</option><option value=m>' + imagelibStrings.import_single + '</option><option value=m>' +
imagelibStrings.import_multi + '</option><option value=o>' + imagelibStrings.import_multi + '</option><option value=o>' +
imagelibStrings.open + '</option>'; imagelibStrings.open + '</option>';
leftBlock.appendChild(select); leftBlock.appendChild(select);
select.addEventListener('change', function () { select.addEventListener('change', function () {
mode = this.value; mode = this.value;
switch (mode) { switch (mode) {
case 's': case 's':
case 'o': case 'o':
toggleMulti(false); toggleMulti(false);
break; break;
case 'm': case 'm':
// Import multiple // Import multiple
toggleMulti(true); toggleMulti(true);
break; break;
} }
}); });
select.setAttribute('style', `margin-top: 10px;`); select.setAttribute('style', `margin-top: 10px;`);
imagelibStrings.imgLibs.forEach(function ({name, url, description}) { imagelibStrings.imgLibs.forEach(function ({ name, url, description }) {
const li = document.createElement('li'); const li = document.createElement('li');
libOpts.appendChild(li); libOpts.appendChild(li);
li.textContent = name; li.textContent = name;
@@ -495,91 +495,93 @@ export default {
} }
} }
const events = {
id: 'tool_imagelib',
click () {
showBrowser();
}
};
return { return {
svgicons: 'ext-imagelib.xml', svgicons: 'ext-imagelib.xml',
events, callback() {
callback () { // Add the button and its handler(s)
const buttonTemplate = document.createElement("template");
buttonTemplate.innerHTML = `
<se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
`;
insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
$id('tool_imagelib').addEventListener("click", () => {
showBrowser();
});
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = '#imgbrowse_holder {' + style.textContent = '#imgbrowse_holder {' +
'position: absolute;' + 'position: absolute;' +
'top: 0;' + 'top: 0;' +
'left: 0;' + 'left: 0;' +
'width: 100%;' + 'width: 100%;' +
'height: 100%;' + 'height: 100%;' +
'background-color: rgba(0, 0, 0, .5);' + 'background-color: rgba(0, 0, 0, .5);' +
'z-index: 5;' + 'z-index: 5;' +
'}' + '}' +
'#imgbrowse {' + '#imgbrowse {' +
'position: absolute;' + 'position: absolute;' +
'top: 25px;' + 'top: 25px;' +
'left: 25px;' + 'left: 25px;' +
'right: 25px;' + 'right: 25px;' +
'bottom: 25px;' + 'bottom: 25px;' +
'min-width: 300px;' + 'min-width: 300px;' +
'min-height: 200px;' + 'min-height: 200px;' +
'background: #B0B0B0;' + 'background: #B0B0B0;' +
'border: 1px outset #777;' + 'border: 1px outset #777;' +
'}' + '}' +
'#imgbrowse h1 {' + '#imgbrowse h1 {' +
'font-size: 20px;' + 'font-size: 20px;' +
'margin: .4em;' + 'margin: .4em;' +
'text-align: center;' + 'text-align: center;' +
'}' + '}' +
'#lib_framewrap,' + '#lib_framewrap,' +
'#imgbrowse > ul {' + '#imgbrowse > ul {' +
'position: absolute;' + 'position: absolute;' +
'top: 45px;' + 'top: 45px;' +
'left: 10px;' + 'left: 10px;' +
'right: 10px;' + 'right: 10px;' +
'bottom: 10px;' + 'bottom: 10px;' +
'background: white;' + 'background: white;' +
'margin: 0;' + 'margin: 0;' +
'padding: 0;' + 'padding: 0;' +
'}' + '}' +
'#imgbrowse > ul {' + '#imgbrowse > ul {' +
'overflow: auto;' + 'overflow: auto;' +
'}' + '}' +
'#imgbrowse > div {' + '#imgbrowse > div {' +
'border: 1px solid #666;' + 'border: 1px solid #666;' +
'}' + '}' +
'#imglib_preview > div {' + '#imglib_preview > div {' +
'padding: 5px;' + 'padding: 5px;' +
'font-size: 12px;' + 'font-size: 12px;' +
'}' + '}' +
'#imglib_preview img {' + '#imglib_preview img {' +
'display: block;' + 'display: block;' +
'margin: 0 auto;' + 'margin: 0 auto;' +
'max-height: 100px;' + 'max-height: 100px;' +
'}' + '}' +
'#imgbrowse li {' + '#imgbrowse li {' +
'list-style: none;' + 'list-style: none;' +
'padding: .5em;' + 'padding: .5em;' +
'background: #E8E8E8;' + 'background: #E8E8E8;' +
'border-bottom: 1px solid #B0B0B0;' + 'border-bottom: 1px solid #B0B0B0;' +
'line-height: 1.2em;' + 'line-height: 1.2em;' +
'font-style: sans-serif;' + 'font-style: sans-serif;' +
'}' + '}' +
'#imgbrowse li > span {' + '#imgbrowse li > span {' +
'color: #666;' + 'color: #666;' +
'font-size: 15px;' + 'font-size: 15px;' +
'display: block;' + 'display: block;' +
'}' + '}' +
'#imgbrowse li:hover {' + '#imgbrowse li:hover {' +
'background: #FFC;' + 'background: #FFC;' +
'cursor: pointer;' + 'cursor: pointer;' +
'}' + '}' +
'#imgbrowse iframe {' + '#imgbrowse iframe {' +
'width: 100%;' + 'width: 100%;' +
'height: 100%;' + 'height: 100%;' +
'border: 0;' + 'border: 0;' +
'}'; '}';
document.head.appendChild(style); document.head.appendChild(style);
} }
}; };

40
src/editor/extensions/ext-panning/ext-panning.js
View File

@@ -24,28 +24,44 @@ const loadExtensionTranslation = async function (lang) {
export default { export default {
name: 'panning', name: 'panning',
async init ({importLocale}) { async init({
importLocale
}) {
const svgEditor = this; const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {svgCanvas} = svgEditor; const {
const events = { svgCanvas
id: 'ext-panning', } = svgEditor;
click () { const {
svgCanvas.setMode('ext-panning'); $id
} } = svgCanvas;
}; const insertAfter = (referenceNode, newNode) => {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
return { return {
newUI: true, newUI: true,
name: strings.name, name: strings.name,
events, callback() {
mouseDown () { // Add the button and its handler(s)
const buttonTemplate = document.createElement("template");
buttonTemplate.innerHTML = `
<se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
`;
insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
$id('ext-panning').addEventListener("click", () => {
svgCanvas.setMode('ext-panning');
});
},
mouseDown() {
if (svgCanvas.getMode() === 'ext-panning') { if (svgCanvas.getMode() === 'ext-panning') {
svgEditor.setPanning(true); svgEditor.setPanning(true);
return {started: true}; return {
started: true
};
} }
return undefined; return undefined;
}, },
mouseUp () { mouseUp() {
if (svgCanvas.getMode() === 'ext-panning') { if (svgCanvas.getMode() === 'ext-panning') {
svgEditor.setPanning(false); svgEditor.setPanning(false);
return { return {

2
src/editor/panels/LeftPanel.js
View File

@@ -200,7 +200,6 @@ class LeftPanel {
<div id="tools_left"> <div id="tools_left">
<se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button> <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
<se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button> <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
<se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
<se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button> <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
<se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button> <se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
<se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button> <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
@@ -216,7 +215,6 @@ class LeftPanel {
</se-flyingbutton> </se-flyingbutton>
<se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button> <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
<se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button> <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
<se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
</div> <!-- tools_left --> </div> <!-- tools_left -->
`; `;
this.editor.$svgEditor.append(template.content.cloneNode(true)); this.editor.$svgEditor.append(template.content.cloneNode(true));