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

remove change image and minor refactoring

master
JFH 2021-08-13 14:37:55 +02:00
parent 57c43e441f
commit b50fe0aee1
12 changed files with 125 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/unit/test1.js
View File

@ -50,7 +50,7 @@ describe('Basic Module', function () {
opacity: 1
},
initOpacity: 1,
imgPath: '../editor/images/',
imgPath: '../editor/images',
langPath: 'locale/',
extPath: 'extensions/',
extensions: [ 'ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js' ],

2
demos/canvas.html
View File

@ -37,7 +37,7 @@ const config = {
initStroke: { color: '000000', opacity: 1, width: 1 },
text: { stroke_width: 0, font_size: 24, font_family: 'serif' },
initOpacity: 1,
imgPath: '../src/editor/images/',
imgPath: '../src/editor/images',
dimensions: [ width, height ],
baseUnit: 'px'
};

2
src/editor/ConfigObj.js
View File

@ -132,7 +132,7 @@ export default class ConfigObj {
no_save_warning: false,
// PATH CONFIGURATION
// The following path configuration items are disallowed in the URL (as should any future path configurations)
imgPath: './images/',
imgPath: './images',
// DOCUMENT PROPERTIES
// Change the following to a preference (already in the Document Properties dialog)?
dimensions: [ 640, 480 ],

48
src/editor/Editor.js
View File

@ -399,46 +399,6 @@ class Editor extends EditorStartup {
}
}
/**
* Set a selected image's URL.
* @function module:SVGthis.setImageURL
* @param {string} url
* @returns {void}
*/
setImageURL(url) {
if (!url) {
url = this.defaultImageURL;
}
this.svgCanvas.setImageURL(url);
$id("image_url").value = url;
if (url.startsWith('data:')) {
// data URI found
$id("image_url").style.display = 'none';
$id("change_image_url").style.display = 'block';
} else {
// regular URL
const self = this;
const promised = this.svgCanvas.embedImage(url);
// eslint-disable-next-line promise/catch-or-return
promised
.then( function (dataURI) {
// eslint-disable-next-line promise/always-return
$id('url_notice').style.display = (!dataURI) ? 'block' : 'none';
// switch into "select" mode if we've clicked on an element
self.svgCanvas.setMode('select');
self.svgCanvas.selectOnly(self.svgCanvas.getSelectedElems(), true);
}, function (error) {
// eslint-disable-next-line no-console
console.log("error =", error);
seAlert(self.i18next.t('tools.no_embed'));
self.svgCanvas.deleteSelectedElements();
});
$id("image_url").style.display = 'block';
$id("change_image_url").style.display = 'none';
}
}
/**
*
* @param {string} color
@ -930,7 +890,7 @@ class Editor extends EditorStartup {
*/
// eslint-disable-next-line class-methods-use-this
hideSourceEditor() {
const $editorDialog = document.getElementById('se-svg-editor-dialog');
const $editorDialog = $id('se-svg-editor-dialog');
$editorDialog.setAttribute('dialog', 'closed');
}
@ -939,7 +899,7 @@ class Editor extends EditorStartup {
* @returns {void} Resolves to `undefined`
*/
async saveSourceEditor(e) {
const $editorDialog = document.getElementById('se-svg-editor-dialog');
const $editorDialog = $id('se-svg-editor-dialog');
if ($editorDialog.getAttribute('dialog') !== 'open') return;
const saveChanges = () => {
this.svgCanvas.clearSelection();
@ -967,7 +927,7 @@ class Editor extends EditorStartup {
*/
cancelOverlays(e) {
if ($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
const $editorDialog = document.getElementById('se-svg-editor-dialog');
const $editorDialog = $id('se-svg-editor-dialog');
const editingsource = $editorDialog.getAttribute('dialog') === 'open';
if (!editingsource && !this.docprops && !this.configObj.preferences) {
if (this.curContext) {
@ -1058,7 +1018,7 @@ class Editor extends EditorStartup {
setLang(lang) {
this.langChanged = true;
this.configObj.pref('lang', lang);
const $editDialog = document.getElementById('se-edit-prefs');
const $editDialog = $id('se-edit-prefs');
$editDialog.setAttribute('lang', lang);
const oldLayerName = ($id('#layerlist')) ? $id('#layerlist').querySelector('tr.layersel td.layername').textContent : "";
const renameLayer = (oldLayerName === this.i18next.t('notification.common.layer') + ' 1');

15
src/editor/EditorStartup.js
View File

@ -262,9 +262,6 @@ class EditorStartup {
addListenerMulti($id('text'), 'keyup input', (evt) => {
this.svgCanvas.setTextContent(evt.currentTarget.value);
});
$id('image_url').addEventListener('change', (evt) => {
this.setImageURL(evt.currentTarget.value);
});
$id('link_url').addEventListener('change', (evt) => {
if (evt.currentTarget.value.length) {
@ -416,10 +413,6 @@ class EditorStartup {
this.rulers.manageScroll();
});
$id('url_notice').addEventListener('click', () => {
seAlert(this.title);
});
$id('stroke_width').value = this.configObj.curConfig.initStroke.width;
$id('opacity').value = this.configObj.curConfig.initOpacity * 100;
const elements = document.getElementsByClassName("push_button");
@ -598,12 +591,12 @@ class EditorStartup {
*/
const editorObj = this;
const importImage = function (e) {
document.getElementById('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
$id('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
e.stopPropagation();
e.preventDefault();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) {
document.getElementById('se-prompt-dialog').setAttribute('close', true);
$id('se-prompt-dialog').setAttribute('close', true);
return;
}
@ -624,7 +617,7 @@ class EditorStartup {
editorObj.svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox
editorObj.svgCanvas.selectOnly([ newElement ]);
document.getElementById('se-prompt-dialog').setAttribute('close', true);
$id('se-prompt-dialog').setAttribute('close', true);
};
reader.readAsText(file);
} else {
@ -654,7 +647,7 @@ class EditorStartup {
editorObj.svgCanvas.alignSelectedElements('m', 'page');
editorObj.svgCanvas.alignSelectedElements('c', 'page');
editorObj.topPanel.updateContextPanel();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
$id('se-prompt-dialog').setAttribute('close', true);
};
// create dummy img so we know the default dimensions
let imgWidth = 100;

10
src/editor/MainMenu.js
View File

@ -45,7 +45,7 @@ class MainMenu {
* @returns {void}
*/
hideDocProperties() {
const $imgDialog = document.getElementById("se-img-prop");
const $imgDialog = $id("se-img-prop");
$imgDialog.setAttribute("dialog", "close");
$imgDialog.setAttribute("save", this.editor.configObj.pref("img_save"));
this.editor.docprops = false;
@ -56,7 +56,7 @@ class MainMenu {
* @returns {void}
*/
hidePreferences() {
const $editDialog = document.getElementById("se-edit-prefs");
const $editDialog = $id("se-edit-prefs");
$editDialog.setAttribute("dialog", "close");
this.editor.configObj.preferences = false;
}
@ -238,7 +238,7 @@ class MainMenu {
return;
}
this.editor.docprops = true;
const $imgDialog = document.getElementById("se-img-prop");
const $imgDialog = $id("se-img-prop");
// update resolution option with actual resolution
const resolution = this.editor.svgCanvas.getResolution();
@ -264,7 +264,7 @@ class MainMenu {
return;
}
this.editor.configObj.preferences = true;
const $editDialog = document.getElementById("se-edit-prefs");
const $editDialog = $id("se-edit-prefs");
// Update background color with current one
const canvasBg = this.editor.configObj.curPrefs.bkgd_color;
const url = this.editor.configObj.pref("bkgd_url");
@ -337,7 +337,7 @@ class MainMenu {
$id("tool_save").addEventListener(
"click",
function() {
const $editorDialog = document.getElementById("se-svg-editor-dialog");
const $editorDialog = $id("se-svg-editor-dialog");
const editingsource = $editorDialog.getAttribute("dialog") === "open";
if (editingsource) {
this.saveSourceEditor();

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

@ -217,7 +217,7 @@ export default {
);
dataStorage.put(ethis, 'c_' + pos, part.id);
dataStorage.put(ethis, pos + '_bb', svgCanvas.getStrokedBBox([ part ]));
} else part = document.getElementById(part);
} else part = $id(part);
parts.push(part);
}, ethis);

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

@ -32,7 +32,7 @@ export default {
await loadExtensionTranslation(svgEditor);
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
const svgdoc = document.getElementById('svgcanvas').ownerDocument;
const svgdoc = $id('svgcanvas').ownerDocument;
const { assignAttributes } = svgCanvas;
const hcanvas = document.createElement('canvas');
const canvBG = $id('canvasBackground');
@ -154,7 +154,7 @@ export default {
updateGrid(svgCanvas.getZoom());
}
$id('canvasGrid').style.display = (showGrid) ? 'block' : 'none';
document.getElementById('view_grid').pressed = showGrid;
$id('view_grid').pressed = showGrid;
};
return {
name: svgEditor.i18next.t(`${name}:name`),

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

@ -71,12 +71,12 @@ export default {
$id("overview_window_view_box").style.top = viewBoxY + 'px';
$id("overview_window_view_box").style.left = viewBoxX + 'px';
};
document.getElementById('workarea').addEventListener('scroll', () => {
$id('workarea').addEventListener('scroll', () => {
if (!(overviewWindowGlobals.viewBoxDragging)) {
updateViewBox();
}
});
document.getElementById('workarea').addEventListener('resize', updateViewBox);
$id('workarea').addEventListener('resize', updateViewBox);
updateViewBox();
// Compensate for changes in zoom and canvas size.

6
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@ -258,9 +258,9 @@ export default {
cy: opts.start_y,
id: svgCanvas.getNextId(),
shape: "star",
point: document.getElementById("starNumPoints").value,
point: $id("starNumPoints").value,
r: 0,
radialshift: document.getElementById("radialShift").value,
radialshift: $id("radialShift").value,
r2: 0,
orient: "point",
fill: rgb,
@ -287,7 +287,7 @@ export default {
cy: opts.start_y,
id: svgCanvas.getNextId(),
shape: "regularPoly",
sides: document.getElementById("polySides").value,
sides: $id("polySides").value,
orient: "x",
edge: 0,
fill: rgb,

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

@ -1,3 +1,5 @@
/* globals seAlert */
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js";
@ -16,6 +18,19 @@ class TopPanel {
constructor(editor) {
this.editor = editor;
}
/**
* @type {module}
*/
displayTool(id) {
// default display is 'none' so removing the property will make the panel visible
$id(id).style.removeProperty('display');
}
/**
* @type {module}
*/
hideTool(id) {
$id(id).style.display = 'none';
}
/**
* @type {module}
*/
@ -50,10 +65,10 @@ class TopPanel {
this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
}
opt.classList.add('current');
const elements = Array.prototype.filter.call(opt.parentNode.children, function(child){
const elements = Array.prototype.filter.call(opt.parentNode.children, function (child) {
return child !== opt;
});
Array.from(elements).forEach(function(element) {
Array.from(elements).forEach(function (element) {
element.classList.remove('current');
});
}
@ -119,10 +134,7 @@ class TopPanel {
(this.selectedElement.getAttribute("opacity") || 1.0) * 100;
$id("opacity").value = opacPerc;
$id("elem_id").value = this.selectedElement.id;
$id("elem_class").value =
this.selectedElement.getAttribute("class") !== null
? this.selectedElement.getAttribute("class")
: "";
$id("elem_class").value = this.selectedElement.getAttribute("class") ?? "";
}
this.editor.bottomPanel.updateToolButtonState();
@ -141,7 +153,7 @@ class TopPanel {
curhref
);
if (url) {
this.editor.setImageURL(url);
this.setImageURL(url);
} else if (cancelDeletes) {
this.editor.svgCanvas.deleteSelectedElements();
}
@ -167,19 +179,19 @@ class TopPanel {
const isNode = currentMode === "pathedit"; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
const menuItems = document.getElementById("se-cmenu_canvas");
$id("selected_panel").style.display = 'none';
$id("multiselected_panel").style.display = 'none';
$id("g_panel").style.display = 'none';
$id("rect_panel").style.display = 'none';
$id("circle_panel").style.display = 'none';
$id("ellipse_panel").style.display = 'none';
$id("line_panel").style.display = 'none';
$id("text_panel").style.display = 'none';
$id("image_panel").style.display = 'none';
$id("container_panel").style.display = 'none';
$id("use_panel").style.display = 'none';
$id("a_panel").style.display = 'none';
if (!isNullish(elem)) {
this.hideTool("selected_panel");
this.hideTool("multiselected_panel");
this.hideTool("g_panel");
this.hideTool("rect_panel");
this.hideTool("circle_panel");
this.hideTool("ellipse_panel");
this.hideTool("line_panel");
this.hideTool("text_panel");
this.hideTool("image_panel");
this.hideTool("container_panel");
this.hideTool("use_panel");
this.hideTool("a_panel");
if (elem) {
const elname = elem.nodeName;
const angle = this.editor.svgCanvas.getRotationAngle(elem);
@ -198,10 +210,10 @@ class TopPanel {
}
if (!isNode && currentMode !== "pathedit") {
$id("selected_panel").style.removeProperty('display');
this.displayTool("selected_panel");
// Elements in this array already have coord fields
if ([ "line", "circle", "ellipse" ].includes(elname)) {
$id("xy_panel").style.display = 'none';
this.hideTool("xy_panel");
} else {
let x; let y;
@ -223,20 +235,26 @@ class TopPanel {
$id("selected_x").value = (x || 0);
$id("selected_y").value = (y || 0);
$id("xy_panel").style.removeProperty('display');
this.displayTool("xy_panel");
}
// Elements in this array cannot be converted to a path
$id("tool_topath").style.display = [
if ([
"image",
"text",
"path",
"g",
"use"
].includes(elname)
? "none"
: "block";
$id("tool_reorient").style.display = (elname === "path") ? "block" : "none";
].includes(elname)) {
this.hideTool("tool_topath");
} else {
this.displayTool("tool_topath");
}
if (elname === "path") {
this.displayTool("tool_reorient");
} else {
this.hideTool("tool_reorient");
}
$id("tool_reorient").disabled = (angle === 0);
} else {
const point = this.path.getNodePoint();
@ -284,30 +302,32 @@ class TopPanel {
let linkHref = null;
if (tagName === "a") {
linkHref = this.editor.svgCanvas.getHref(elem);
$id("g_panel").style.removeProperty('display');
this.displayTool("g_panel");
}
// siblings
if (elem.parentNode) {
const selements = Array.prototype.filter.call(elem.parentNode.children, function(child){
const selements = Array.prototype.filter.call(elem.parentNode.children, function (child) {
return child !== elem;
});
if (elem.parentNode.tagName === "a" && !selements.length) {
$id("a_panel").style.removeProperty('display');
this.displayTool("a_panel");
linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
}
}
// Hide/show the make_link buttons
$id('tool_make_link').style.display = (!linkHref) ? 'block' : 'none';
$id('tool_make_link_multi').style.display = (!linkHref) ? 'block' : 'none';
if (linkHref) {
this.displayTool('tool_make_link');
this.displayTool('tool_make_link_multi');
$id("link_url").value = linkHref;
} else {
this.hideTool('tool_make_link');
this.hideTool('tool_make_link_multi');
}
if (panels[tagName]) {
const curPanel = panels[tagName];
$id(tagName + "_panel").style.removeProperty('display');
this.displayTool(tagName + "_panel");
curPanel.forEach((item) => {
let attrVal = elem.getAttribute(item);
@ -319,7 +339,7 @@ class TopPanel {
});
if (tagName === "text") {
$id("text_panel").style.removeProperty('display');
this.displayTool("text_panel");
$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");
@ -362,7 +382,7 @@ class TopPanel {
);
// image
} else if (tagName === "g" || tagName === "use") {
$id("container_panel").style.removeProperty('display');
this.displayTool("container_panel");
const title = this.editor.svgCanvas.getTitle();
const label = $id("g_title");
label.value = title;
@ -381,7 +401,7 @@ class TopPanel {
// if (!isNullish(elem))
} else if (this.multiselected) {
$id("multiselected_panel").style.removeProperty('display');
this.displayTool("multiselected_panel");
menuItems.setAttribute("enablemenuitems", "#group");
menuItems.setAttribute("disablemenuitems", "#ungroup");
} else {
@ -442,7 +462,7 @@ class TopPanel {
fcRules.setAttribute('id', 'wireframe_rules');
document.getElementsByTagName("head")[0].appendChild(fcRules);
} else {
while(wfRules.firstChild)
while (wfRules.firstChild)
wfRules.removeChild(wfRules.firstChild);
}
this.editor.updateWireFrame();
@ -456,7 +476,7 @@ class TopPanel {
if (undoMgr.getUndoStackSize() > 0) {
undoMgr.undo();
this.editor.layersPanel.populateLayers();
if(this.editor.svgCanvas.getMode() === 'textedit') {
if (this.editor.svgCanvas.getMode() === 'textedit') {
textActions.clear();
}
}
@ -733,6 +753,42 @@ class TopPanel {
this.updateContextPanel();
return false;
}
/**
* Set a selected image's URL.
* @function module:SVGthis.setImageURL
* @param {string} url
* @returns {void}
*/
setImageURL(url) {
const { editor } = this;
if (!url) {
url = editor.defaultImageURL;
}
editor.svgCanvas.setImageURL(url);
$id("image_url").value = url;
if (url.startsWith('data:')) {
// data URI found
this.hideTool("image_url");
} else {
// regular URL
const promised = editor.svgCanvas.embedImage(url);
// eslint-disable-next-line promise/catch-or-return
promised
// eslint-disable-next-line promise/always-return
.then(() => {
// switch into "select" mode if we've clicked on an element
editor.svgCanvas.setMode('select');
editor.svgCanvas.selectOnly(editor.svgCanvas.getSelectedElems(), true);
}, (error) => {
// eslint-disable-next-line no-console
console.log("error =", error);
seAlert(editor.i18next.t('tools.no_embed'));
editor.svgCanvas.deleteSelectedElements();
});
this.displayTool("image_url");
}
}
/**
* @type {module}
@ -866,14 +922,7 @@ class TopPanel {
title="${i18next.t('properties.image_height')}"></se-spin-input>
</div>
<div class="toolset">
<label id="tool_image_url">url:
<input id="image_url" type="text" title="${i18next.t('properties.image_url')}" size="35" />
</label>
<label id="tool_change_image">
<button id="change_image_url" style="display: none;">Change Image</button>
<span id="url_notice"
title="${i18next.t('tools.no_embed')}"></span>
</label>
<se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input>
</div>
</div> <!-- image_panel -->
<div id="circle_panel">
@ -1098,10 +1147,10 @@ class TopPanel {
"click",
this.clickGroup.bind(this)
);
$id("change_image_url").addEventListener(
"click",
this.promptImgURL.bind(this)
);
$id('image_url').addEventListener('change', (evt) => {
this.setImageURL(evt.currentTarget.value);
});
// all top panel attributes
[
"elem_id",

5
src/editor/svgedit.css
View File

@ -520,11 +520,6 @@ input[type=text] {
left: -9999px;
}
#url_notice {
padding-top: 4px;
display: none;
}
.bottom-icon {
width: 22px;
}