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

#631 seButton web component image path load from config

master
agriyadev5 2021-09-21 13:25:07 +05:30
parent 648e9cd26c
commit 4bacd1fd66
9 changed files with 77 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/editor/components/seButton.js
View File

@ -55,6 +55,18 @@ export class ToolButton extends HTMLElement {
// locate the component
this.$div = this._shadowRoot.querySelector('div');
this.$img = this._shadowRoot.querySelector('img');
this.editor = null;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
}
/**
* @function observedAttributes
@ -71,7 +83,7 @@ export class ToolButton extends HTMLElement {
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return;
if (oldValue === newValue && name !== 'src') return;
switch (name) {
case 'title':
{
@ -83,7 +95,12 @@ export class ToolButton extends HTMLElement {
this.$div.style = newValue;
break;
case 'src':
this.$img.setAttribute('src', (newValue.indexOf("data:") === -1) ? './images/' + newValue : newValue);
if (newValue.indexOf("data:") !== -1) {
this.$img.setAttribute('src', newValue);
} else if(this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
this.$img.setAttribute('src', imgPath + "/" + newValue);
}
break;
case 'pressed':
if (newValue === null) {

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

@ -364,6 +364,7 @@ export default {
svgCanvas.setMode('connector');
}
});
$id('mode_connect').init(svgEditor);
},
/* async */ addLangData({ _lang }) { // , importLocale: importLoc
return {

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

@ -94,6 +94,7 @@ export default {
svgCanvas.setMode('eyedropper');
}
});
$id('tool_eyedropper').init(svgEditor);
},
// if we have selected an element, grab its paint and enable the eye dropper button
selectedChanged: getStyle,

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

@ -174,6 +174,7 @@ export default {
svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
gridUpdate();
});
$id('view_grid').init(svgEditor);
if (showGrid) {
gridUpdate();
}

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

@ -57,6 +57,7 @@ export default {
svgCanvas.setMode('ext-panning');
}
});
$id('ext-panning').init(svgEditor);
},
mouseDown() {
if (svgCanvas.getMode() === 'ext-panning') {

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

@ -108,6 +108,8 @@ export default {
showPanel(false, "star");
}
});
$id("tool_star").init(svgEditor);
$id("tool_polygon").init(svgEditor);
const label0 = `${name}:contextTools.0.label`;
const title0 = `${name}:contextTools.0.title`;

39
src/editor/panels/LayersPanel.js
View File

@ -89,31 +89,20 @@ class LayersPanel {
menuLayerBox.setAttribute("leftclick", false);
this.editor.$container.append(menuLayerBox);
menuLayerBox.init(i18next);
document
.getElementById("layer_new")
.addEventListener("click", this.newLayer.bind(this));
document
.getElementById("layer_delete")
.addEventListener("click", this.deleteLayer.bind(this));
document
.getElementById("layer_up")
.addEventListener("click", () => this.moveLayer.bind(this)(-1));
document
.getElementById("layer_down")
.addEventListener("click", () => this.moveLayer.bind(this)(1));
document
.getElementById("layer_rename")
.addEventListener("click", this.layerRename.bind(this));
$id("se-cmenu-layers-more").addEventListener(
"change",
this.lmenuFunc.bind(this)
);
$id("se-cmenu-layers-list").addEventListener("change", (e) => {
this.lmenuFunc(e);
});
$id("sidepanel_handle").addEventListener(
"click", () => this.toggleSidePanel()
);
$id("layer_new").addEventListener("click", this.newLayer.bind(this));
$id("layer_delete").addEventListener("click", this.deleteLayer.bind(this));
$id("layer_up").addEventListener("click", () => this.moveLayer.bind(this)(-1));
$id("layer_down").addEventListener("click", () => this.moveLayer.bind(this)(1));
$id("layer_rename").addEventListener("click", this.layerRename.bind(this));
$id("se-cmenu-layers-more").addEventListener("change", this.lmenuFunc.bind(this));
$id("se-cmenu-layers-list").addEventListener("change", (e) => { this.lmenuFunc(e); });
$id("sidepanel_handle").addEventListener("click", () => this.toggleSidePanel());
$id("layer_new").init(this.editor);
$id("layer_delete").init(this.editor);
$id("layer_up").init(this.editor);
$id("layer_down").init(this.editor);
$id("layer_rename").init(this.editor);
$id("layer_moreopts").init(this.editor);
this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
}
toggleSidePanel(displayFlag) {

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

@ -267,9 +267,11 @@ class LeftPanel {
$id("tool_fhrect").addEventListener("click", this.clickFHRect.bind(this));
$id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this));
$id("tool_circle").addEventListener("click", this.clickCircle.bind(this));
$id("tool_fhellipse").addEventListener(
"click",
this.clickFHEllipse.bind(this)
$id("tool_fhellipse").addEventListener("click", this.clickFHEllipse.bind(this));
// eslint-disable-next-line max-len
[ "tool_rect", "tool_square", "tool_fhrect", "tool_ellipse", "tool_circle", "tool_fhellipse", "tool_select", "tool_fhpath", "tool_text", "tool_image", "tool_zoom", "tool_path", "tool_line" ].forEach((attrId) =>
$id(attrId).init(this.editor)
);
}
}

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

@ -1001,121 +1001,50 @@ class TopPanel {
this.editor.$container.append(newSeEditorDialog);
newSeEditorDialog.init(i18next);
// register action to top panel buttons
$id("tool_source").addEventListener(
"click",
this.showSourceEditor.bind(this)
);
$id("tool_wireframe").addEventListener(
"click",
this.clickWireframe.bind(this)
);
$id("tool_source").addEventListener("click", this.showSourceEditor.bind(this));
$id("tool_wireframe").addEventListener("click", this.clickWireframe.bind(this));
$id("tool_undo").addEventListener("click", this.clickUndo.bind(this));
$id("tool_redo").addEventListener("click", this.clickRedo.bind(this));
$id("tool_clone").addEventListener("click", this.clickClone.bind(this));
$id("tool_clone_multi").addEventListener(
"click",
this.clickClone.bind(this)
);
$id("tool_delete").addEventListener(
"click",
this.deleteSelected.bind(this)
);
$id("tool_delete_multi").addEventListener(
"click",
this.deleteSelected.bind(this)
);
$id("tool_move_top").addEventListener(
"click",
this.moveToTopSelected.bind(this)
);
$id("tool_move_bottom").addEventListener(
"click",
this.moveToBottomSelected.bind(this)
);
$id("tool_clone_multi").addEventListener("click", this.clickClone.bind(this));
$id("tool_delete").addEventListener("click", this.deleteSelected.bind(this));
$id("tool_delete_multi").addEventListener("click", this.deleteSelected.bind(this));
$id("tool_move_top").addEventListener("click", this.moveToTopSelected.bind(this));
$id("tool_move_bottom").addEventListener("click", this.moveToBottomSelected.bind(this));
$id("tool_topath").addEventListener("click", this.convertToPath.bind(this));
$id("tool_make_link").addEventListener(
"click",
this.makeHyperlink.bind(this)
);
$id("tool_make_link_multi").addEventListener(
"click",
this.makeHyperlink.bind(this)
);
$id("tool_reorient").addEventListener(
"click",
this.reorientPath.bind(this)
);
$id("tool_group_elements").addEventListener(
"click",
this.clickGroup.bind(this)
);
$id("tool_position").addEventListener("change", (evt) =>
this.clickAlignEle.bind(this)(evt)
);
$id("tool_align_left").addEventListener("click", () =>
this.clickAlign.bind(this)("left")
);
$id("tool_align_right").addEventListener("click", () =>
this.clickAlign.bind(this)("right")
);
$id("tool_align_center").addEventListener("click", () =>
this.clickAlign.bind(this)("center")
);
$id("tool_align_top").addEventListener("click", () =>
this.clickAlign.bind(this)("top")
);
$id("tool_align_bottom").addEventListener("click", () =>
this.clickAlign.bind(this)("bottom")
);
$id("tool_align_middle").addEventListener("click", () =>
this.clickAlign.bind(this)("middle")
);
$id("tool_node_clone").addEventListener(
"click",
this.clonePathNode.bind(this)
);
$id("tool_node_delete").addEventListener(
"click",
this.deletePathNode.bind(this)
);
$id("tool_openclose_path").addEventListener(
"click",
this.opencloseSubPath.bind(this)
);
$id("tool_add_subpath").addEventListener(
"click",
this.addSubPath.bind(this)
);
$id("tool_node_link").addEventListener(
"click",
this.linkControlPoints.bind(this)
);
$id("angle").addEventListener(
"change",
this.changeRotationAngle.bind(this)
);
$id("tool_make_link").addEventListener("click", this.makeHyperlink.bind(this));
$id("tool_make_link_multi").addEventListener("click", this.makeHyperlink.bind(this));
$id("tool_reorient").addEventListener("click", this.reorientPath.bind(this));
$id("tool_group_elements").addEventListener("click", this.clickGroup.bind(this));
$id("tool_position").addEventListener("change", (evt) => this.clickAlignEle.bind(this)(evt));
$id("tool_align_left").addEventListener("click", () => this.clickAlign.bind(this)("left"));
$id("tool_align_right").addEventListener("click", () => this.clickAlign.bind(this)("right"));
$id("tool_align_center").addEventListener("click", () => this.clickAlign.bind(this)("center"));
$id("tool_align_top").addEventListener("click", () => this.clickAlign.bind(this)("top"));
$id("tool_align_bottom").addEventListener("click", () => this.clickAlign.bind(this)("bottom"));
$id("tool_align_middle").addEventListener("click", () => this.clickAlign.bind(this)("middle"));
$id("tool_node_clone").addEventListener("click", this.clonePathNode.bind(this));
$id("tool_node_delete").addEventListener("click", this.deletePathNode.bind(this));
$id("tool_openclose_path").addEventListener("click", this.opencloseSubPath.bind(this));
$id("tool_add_subpath").addEventListener("click", this.addSubPath.bind(this));
$id("tool_node_link").addEventListener("click", this.linkControlPoints.bind(this));
$id("angle").addEventListener("change", this.changeRotationAngle.bind(this));
$id("blur").addEventListener("change", this.changeBlur.bind(this));
$id("rect_rx").addEventListener("change", this.changeRectRadius.bind(this));
$id("font_size").addEventListener("change", this.changeFontSize.bind(this));
$id("tool_ungroup").addEventListener("click", this.clickGroup.bind(this));
$id("tool_bold").addEventListener("click", this.clickBold.bind(this));
$id("tool_italic").addEventListener("click", this.clickItalic.bind(this));
$id("tool_text_anchor_start").addEventListener("click", () =>
this.clickTextAnchor.bind(this)("start")
$id("tool_text_anchor_start").addEventListener("click", () => this.clickTextAnchor.bind(this)("start"));
$id("tool_text_anchor_middle").addEventListener("click", () => this.clickTextAnchor.bind(this)("middle"));
$id("tool_text_anchor_end").addEventListener("click", () => this.clickTextAnchor.bind(this)("end"));
$id("tool_unlink_use").addEventListener("click", this.clickGroup.bind(this));
$id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value);});
// eslint-disable-next-line max-len
[ "tool_add_subpath", "tool_openclose_path", "tool_node_delete", "tool_node_clone", "tool_node_link", "tool_ungroup", "tool_unlink_use", "tool_text_anchor_start", "tool_text_anchor_middle", "tool_text_anchor_end", "tool_bold", "tool_italic", "tool_align_bottom", "tool_align_middle", "tool_align_top", "tool_align_left", "tool_align_center", "tool_align_right", "tool_make_link_multi", "tool_group_elements", "tool_delete_multi", "tool_make_link", "tool_reorient", "tool_topath", "tool_move_bottom", "tool_move_top", "tool_delete", "tool_clone", "tool_redo", "tool_undo", "tool_wireframe", "tool_source", "tool_clone_multi" ].forEach((attrId) =>
$id(attrId).init(this.editor)
);
$id("tool_text_anchor_middle").addEventListener("click", () =>
this.clickTextAnchor.bind(this)("middle")
);
$id("tool_text_anchor_end").addEventListener("click", () =>
this.clickTextAnchor.bind(this)("end")
);
$id("tool_unlink_use").addEventListener(
"click",
this.clickGroup.bind(this)
);
$id('image_url').addEventListener('change', (evt) => {
this.setImageURL(evt.currentTarget.value);
});
// all top panel attributes
[