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

progress on localization

master
JFH 2021-05-14 23:16:27 +02:00
parent 327a4bdc67
commit 1bad5b9037
16 changed files with 239 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/editor/ConfigObj.js
View File

@ -170,11 +170,12 @@ export default class ConfigObj {
// 'ext-markers',
'ext-overview_window',
'ext-panning',
'ext-polygon',
'ext-shapes',
'ext-star',
'ext-polygon',
'ext-storage',
'ext-opensave'
'ext-opensave',
'ext-helloworld',
];
this.curConfig = {
// We do not put on defaultConfig to simplify object copying

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

@ -4,27 +4,19 @@
* @license MIT
*
* @copyright 2010 Jeff Schiller
* @copyright 2021 OptimistikSAS
*
*/
const loadExtensionTranslation = async function (lang) {
let translationModule;
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.error(`Missing translation (${lang}) - using 'en'`);
translationModule = await import(`./locale/en.js`);
}
return translationModule.default;
};
import { loadExtensionTranslation } from '../../locale.js';
const name = "eyedropper";
export default {
name: 'eyedropper',
name,
async init(S) {
const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
await loadExtensionTranslation(svgEditor, name);
const { ChangeElementCommand } = S, // , svgcontent,
// svgdoc = S.svgroot.parentNode.ownerDocument,
{ svgCanvas } = svgEditor,
@ -74,12 +66,15 @@ export default {
};
return {
name: strings.name,
name: svgEditor.i18next.t(`${name}:name`),
callback() {
// Add the button and its handler(s)
const buttonTemplate = document.createElement("template");
const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
const key = svgEditor.i18next.t(`${name}:buttons.0.key`);
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
<se-button id="tool_eyedropper" title="${title}" src="./images/eye_dropper.svg" shortcut=${key}></se-button>
`;
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
$id('tool_eyedropper').addEventListener("click", () => {

9
src/editor/extensions/ext-eyedropper/locale/fr.js Normal file
View File

@ -0,0 +1,9 @@
export default {
name: 'pipette',
buttons: [
{
title: 'Outil pipette',
key: 'I'
}
]
};

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

@ -7,24 +7,15 @@
*
*/
const loadExtensionTranslation = async function (lang) {
let translationModule;
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.error(`Missing translation (${lang}) - using 'en'`);
translationModule = await import(`./locale/en.js`);
}
return translationModule.default;
};
import { loadExtensionTranslation } from '../../locale.js';
const name = "grid";
export default {
name: 'grid',
name,
async init ({ NS, getTypeMap }) {
const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
await loadExtensionTranslation(svgEditor, name);
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
const svgdoc = document.getElementById('svgcanvas').ownerDocument;
@ -152,15 +143,18 @@ export default {
document.getElementById('view_grid').pressed = showGrid;
};
return {
name: strings.name,
name: svgEditor.i18next.t(`${name}:name`),
zoomChanged (zoom) {
if (showGrid) { updateGrid(zoom); }
},
callback () {
// Add the button and its handler(s)
const buttonTemplate = document.createElement("template");
const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="view_grid" title="Show grid" src="./images/grid.svg"></se-button>
<se-button id="view_grid" title="${title}" src="./images/grid.svg"></se-button>
`;
$id('editor_panel').append(buttonTemplate.content.cloneNode(true));
$id('view_grid').addEventListener("click", () => {

8
src/editor/extensions/ext-grid/locale/fr.js Normal file
View File

@ -0,0 +1,8 @@
export default {
name: 'Grille',
buttons: [
{
title: 'Afficher/Cacher Grille'
}
]
};

54
src/editor/extensions/ext-helloworld/ext-helloworld.js
View File

@ -13,39 +13,32 @@
* will show the user the point on the canvas that was clicked on.
*/
const loadExtensionTranslation = async function (lang) {
let translationModule;
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.error(`Missing translation (${lang}) - using 'en'`);
translationModule = await import(`./locale/en.js`);
}
return translationModule.default;
};
import { loadExtensionTranslation } from '../../locale.js';
const name = "helloworld";
export default {
name: 'helloworld',
name,
async init ({ _importLocale }) {
const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
await loadExtensionTranslation(svgEditor, name);
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
return {
name: strings.name,
events: [ {
// Must match the icon ID in helloworld-icon.xml
id: 'hello_world',
// Tooltip text
title: strings.buttons[0].title,
click () {
// The action taken when the button is clicked on.
// For "mode" buttons, any other button will
// automatically be de-pressed.
name: svgEditor.i18next.t(`${name}:name`),
callback() {
// Add the button and its handler(s)
const buttonTemplate = document.createElement("template");
const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="hello_world" title="${title}" src="./images/hello_world.svg"></se-button>
`;
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
$id('hello_world').addEventListener("click", () => {
svgCanvas.setMode('hello_world');
}
} ],
});
},
// This is triggered when the main mouse button is pressed down
// on the editor canvas (not the tool panels)
mouseDown () {
@ -70,14 +63,7 @@ export default {
const y = opts.mouse_y / zoom;
// We do our own formatting
let { text } = strings;
[
[ 'x', x ],
[ 'y', y ]
].forEach(([ prop, val ]) => {
text = text.replace('{' + prop + '}', val);
});
let text = svgEditor.i18next.t(`${name}:text`, { x, y });
// Show the text using the custom alert function
alert(text);
}

2
src/editor/extensions/ext-helloworld/locale/en.js
View File

@ -1,6 +1,6 @@
export default {
name: 'Hello World',
text: 'Hello World!\n\nYou clicked here: {x}, {y}',
text: 'Hello World!\n\nYou clicked here: {{x}}, {{y}}',
buttons: [
{
title: "Say 'Hello World'"

9
src/editor/extensions/ext-helloworld/locale/fr.js Normal file
View File

@ -0,0 +1,9 @@
export default {
name: 'Bonjour le Monde',
text: 'Bonjour le Monde!\n\nVous avez cliqué ici: {{x}}, {{y}}',
buttons: [
{
title: "Dire 'Bonjour le Monde'"
}
]
};

2
src/editor/extensions/ext-helloworld/locale/zh-CN.js
View File

@ -1,6 +1,6 @@
export default {
name: 'Hello World',
text: 'Hello World!\n\n 请点击: {x}, {y}',
text: 'Hello World!\n\n 请点击: {{x}}, {{y}}',
buttons: [
{
title: "输出 'Hello World'"

175
src/editor/extensions/ext-polygon/ext-polygon.js
View File

@ -6,119 +6,114 @@
*
*/
const loadExtensionTranslation = async function (lang) {
let translationModule;
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.error(`Missing translation (${lang}) - using 'en'`);
translationModule = await import(`./locale/en.js`);
}
return translationModule.default;
};
import { loadExtensionTranslation } from "../../locale.js";
const name = "polygon";
export default {
name: 'polygon',
async init (_S) {
name,
async init(_S) {
const svgEditor = this;
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
// const editingitex = false;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
await loadExtensionTranslation(svgEditor, name);
let selElems;
let started;
let newFO;
/**
* @param {boolean} on
* @returns {void}
*/
const showPanel = (on) => {
$id('polygon_panel').style.display = (on) ? 'block' : 'none';
* @param {boolean} on
* @returns {void}
*/
const showPanel = on => {
$id("polygon_panel").style.display = on ? "block" : "none";
};
/**
* @param {string} attr
* @param {string|Float} val
* @returns {void}
*/
* @param {string} attr
* @param {string|Float} val
* @returns {void}
*/
const setAttr = (attr, val) => {
svgCanvas.changeSelectedAttribute(attr, val);
svgCanvas.call('changed', selElems);
svgCanvas.call("changed", selElems);
};
/**
* @param {Float} n
* @returns {Float}
*/
const cot = (n) => (1 / Math.tan(n));
* @param {Float} n
* @returns {Float}
*/
const cot = n => 1 / Math.tan(n);
/**
* @param {Float} n
* @returns {Float}
*/
const sec = (n) => (1 / Math.cos(n));
* @param {Float} n
* @returns {Float}
*/
const sec = n => 1 / Math.cos(n);
return {
name: strings.name,
name: svgEditor.i18next.t(`${name}:name`),
// The callback should be used to load the DOM with the appropriate UI items
callback () {
// Add the button and its handler(s)
// Note: the star extension may also add the same flying button so we check first
if ($id('tools_polygon') === null) {
const buttonTemplate = document.createElement("template");
buttonTemplate.innerHTML = `
<se-flyingbutton id="tools_polygon" title="Polygone/Star Tool">
<se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
<se-button id="tool_star" title="Star Tool" src="./images/star.svg"></se-button>
</se-flyingbutton>
`;
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
callback() {
if ($id("tools_polygon") === null) {
console.error(
"this polygon extension must be added after the star extension"
);
}
$id('tool_polygon').addEventListener("click", () => {
if (this.leftPanel.updateLeftPanel('tool_polygon')) {
svgCanvas.setMode('polygon');
const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
const buttonTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-button id="tool_polygon" title="${title}" src="./images/polygon.svg">
</se-button>
`;
$id("tools_polygon").append(buttonTemplate.content.cloneNode(true));
$id("tool_polygon").addEventListener("click", () => {
if (this.leftPanel.updateLeftPanel("tool_polygon")) {
svgCanvas.setMode("polygon");
showPanel(true);
}
});
const label0 = svgEditor.i18next.t(`${name}:contextTools.0.label`);
const title0 = svgEditor.i18next.t(`${name}:contextTools.0.title`);
// Add the context panel and its handler(s)
const panelTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property
panelTemplate.innerHTML = `
<div id="polygon_panel">
<se-spin-input size="3" id="polySides" min=1 step=1 value=5 label="sides">
<se-spin-input size="3" id="polySides" min=1 step=1 value=5 label="${label0}" title="${title0}">
</se-spin-input>
</div>
`;
$id('tools_top').appendChild(panelTemplate.content.cloneNode(true));
$id("polygon_panel").style.display = 'none';
$id("polySides").addEventListener("change", (event) => {
setAttr('sides', event.target.value);
$id("tools_top").appendChild(panelTemplate.content.cloneNode(true));
$id("polygon_panel").style.display = "none";
$id("polySides").addEventListener("change", event => {
setAttr("sides", event.target.value);
});
},
mouseDown (opts) {
if (svgCanvas.getMode() !== 'polygon') {
mouseDown(opts) {
if (svgCanvas.getMode() !== "polygon") {
return undefined;
}
// const e = opts.event;
const rgb = svgCanvas.getColor('fill');
const rgb = svgCanvas.getColor("fill");
// const ccRgbEl = rgb.substring(1, rgb.length);
const sRgb = svgCanvas.getColor('stroke');
const sRgb = svgCanvas.getColor("stroke");
// ccSRgbEl = sRgb.substring(1, rgb.length);
const sWidth = svgCanvas.getStrokeWidth();
started = true;
newFO = svgCanvas.addSVGElementFromJson({
element: 'polygon',
element: "polygon",
attr: {
cx: opts.start_x,
cy: opts.start_y,
id: svgCanvas.getNextId(),
shape: 'regularPoly',
sides: document.getElementById('polySides').value,
orient: 'x',
shape: "regularPoly",
sides: document.getElementById("polySides").value,
orient: "x",
edge: 0,
fill: rgb,
strokecolor: sRgb,
@ -130,67 +125,67 @@ export default {
started: true
};
},
mouseMove (opts) {
if (!started || svgCanvas.getMode() !== 'polygon') {
mouseMove(opts) {
if (!started || svgCanvas.getMode() !== "polygon") {
return undefined;
}
const cx = Number(newFO.getAttribute('cx'));
const cy = Number(newFO.getAttribute('cy'));
const sides = Number(newFO.getAttribute('sides'));
const cx = Number(newFO.getAttribute("cx"));
const cy = Number(newFO.getAttribute("cy"));
const sides = Number(newFO.getAttribute("sides"));
// const orient = newFO.getAttribute('orient');
const fill = newFO.getAttribute('fill');
const strokecolor = newFO.getAttribute('strokecolor');
const strokeWidth = Number(newFO.getAttribute('strokeWidth'));
const fill = newFO.getAttribute("fill");
const strokecolor = newFO.getAttribute("strokecolor");
const strokeWidth = Number(newFO.getAttribute("strokeWidth"));
let x = opts.mouse_x;
let y = opts.mouse_y;
const edg = (Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy))) / 1.5;
newFO.setAttribute('edge', edg);
const edg = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5;
newFO.setAttribute("edge", edg);
const inradius = (edg / 2) * cot(Math.PI / sides);
const circumradius = inradius * sec(Math.PI / sides);
let points = '';
let points = "";
for (let s = 0; sides >= s; s++) {
const angle = 2.0 * Math.PI * s / sides;
x = (circumradius * Math.cos(angle)) + cx;
y = (circumradius * Math.sin(angle)) + cy;
const angle = (2.0 * Math.PI * s) / sides;
x = circumradius * Math.cos(angle) + cx;
y = circumradius * Math.sin(angle) + cy;
points += x + ',' + y + ' ';
points += x + "," + y + " ";
}
// const poly = newFO.createElementNS(NS.SVG, 'polygon');
newFO.setAttribute('points', points);
newFO.setAttribute('fill', fill);
newFO.setAttribute('stroke', strokecolor);
newFO.setAttribute('stroke-width', strokeWidth);
newFO.setAttribute("points", points);
newFO.setAttribute("fill", fill);
newFO.setAttribute("stroke", strokecolor);
newFO.setAttribute("stroke-width", strokeWidth);
return {
started: true
};
},
mouseUp () {
if (svgCanvas.getMode() !== 'polygon') {
mouseUp() {
if (svgCanvas.getMode() !== "polygon") {
return undefined;
}
const edge = newFO.getAttribute('edge');
const keep = (edge !== '0');
const edge = newFO.getAttribute("edge");
const keep = edge !== "0";
// svgCanvas.addToSelection([newFO], true);
return {
keep,
element: newFO
};
},
selectedChanged (opts) {
selectedChanged(opts) {
// Use this to update the current selected elements
selElems = opts.elems;
let i = selElems.length;
while (i--) {
const elem = selElems[i];
if (elem && elem.getAttribute('shape') === 'regularPoly') {
if (elem && elem.getAttribute("shape") === "regularPoly") {
if (opts.selectedElement && !opts.multiselected) {
$id('polySides').value = elem.getAttribute('sides');
$id("polySides").value = elem.getAttribute("sides");
showPanel(true);
} else {
@ -201,7 +196,7 @@ export default {
}
}
},
elementChanged () {
elementChanged() {
// const elem = opts.elems[0];
}
};

14
src/editor/extensions/ext-polygon/locale/fr.js Normal file
View File

@ -0,0 +1,14 @@
export default {
name: 'polygone',
buttons: [
{
title: 'Outil Polygone'
}
],
contextTools: [
{
title: 'Nombre de côtés',
label: 'côtés'
}
]
};

56
src/editor/extensions/ext-star/ext-star.js
View File

@ -6,21 +6,12 @@
*
*/
const loadExtensionTranslation = async function (lang) {
let translationModule;
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.error(`Missing translation (${lang}) - using 'en'`);
translationModule = await import(`./locale/en.js`);
}
return translationModule.default;
};
import { loadExtensionTranslation } from '../../locale.js';
export default {
name: 'star',
const name = "star";
export default {
name,
async init (_S) {
const svgEditor = this;
const { svgCanvas } = svgEditor;
@ -28,7 +19,7 @@ export default {
let selElems;
let started;
let newFO;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
await loadExtensionTranslation(svgEditor, name);
/**
*
@ -51,21 +42,23 @@ export default {
};
return {
name: strings.name,
name: svgEditor.i18next.t(`${name}:name`),
// The callback should be used to load the DOM with the appropriate UI items
callback () {
// Add the button and its handler(s)
// Note: the star extension may also add the same flying button so we check first
if ($id('tools_polygon') === null) {
const buttonTemplate = document.createElement("template");
buttonTemplate.innerHTML = `
<se-flyingbutton id="tools_polygon" title="Polygone/Star Tool">
<se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
<se-button id="tool_star" title="Star Tool" src="./images/star.svg"></se-button>
// Note: the star extension needs to be loaded before the polygon extension
const fbtitle = svgEditor.i18next.t(`${name}:title`);
const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
const buttonTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property
buttonTemplate.innerHTML = `
<se-flyingbutton id="tools_polygon" title="${fbtitle}">
<se-button id="tool_star" title="${title}" src="./images/star.svg">
</se-button>
</se-flyingbutton>
`;
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
}
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
// handler
$id('tool_star').addEventListener("click", () => { showPanel(true);
if (this.leftPanel.updateLeftPanel('tool_polygon')) {
svgCanvas.setMode('star');
@ -73,15 +66,22 @@ export default {
}
});
const label0 = svgEditor.i18next.t(`${name}:contextTools.0.label`);
const title0 = svgEditor.i18next.t(`${name}:contextTools.0.title`);
const label1 = svgEditor.i18next.t(`${name}:contextTools.1.label`);
const title1 = svgEditor.i18next.t(`${name}:contextTools.1.title`);
const label2 = svgEditor.i18next.t(`${name}:contextTools.2.label`);
const title2 = svgEditor.i18next.t(`${name}:contextTools.2.title`);
// Add the context panel and its handler(s)
const panelTemplate = document.createElement("template");
// eslint-disable-next-line no-unsanitized/property
panelTemplate.innerHTML = `
<div id="star_panel">
<se-spin-input id="starNumPoints" label="points" min=1 step=1 value=5 title="Change rotation angle">
<se-spin-input id="starNumPoints" label="${label0}" min=1 step=1 value=5 title="${title0}">
</se-spin-input>
<se-spin-input id="RadiusMultiplier" label="Radis multiplier" min=1 step=2.5 value=5 title="Change rotation angle">
<se-spin-input id="RadiusMultiplier" label="${label1}" min=1 step=2.5 value=5 title="${title1}">
</se-spin-input>
<se-spin-input id="radialShift" min=0 step=1 value=0 label="radial shift" title="Change rotation angle">
<se-spin-input id="radialShift" min=0 step=1 value=0 label="${label2}" title="${title2}">
</se-spin-input>
</div>
`;

1
src/editor/extensions/ext-star/locale/en.js
View File

@ -1,5 +1,6 @@
export default {
name: 'star',
title: 'Polygone/Star Tool',
buttons: [
{
title: 'Star Tool'

23
src/editor/extensions/ext-star/locale/fr.js Normal file
View File

@ -0,0 +1,23 @@
export default {
name: 'etoile',
title: 'Outil Polygone/Etoile',
buttons: [
{
title: 'Outil Etoile'
}
],
contextTools: [
{
title: 'Nombre de côtés',
label: 'points'
},
{
title: 'Précision',
label: 'Précision'
},
{
title: 'Torsion Etoile',
label: 'Décalage Radial'
}
]
};

1
src/editor/extensions/ext-star/locale/zh-CN.js
View File

@ -1,5 +1,6 @@
export default {
name: '星形',
title: 'Polygone/Star Tool',
buttons: [
{
title: '星形工具'

15
src/editor/locale.js
View File

@ -86,3 +86,18 @@ export const putLocale = async function (givenParam, goodLangs) {
console.log(`Lang: ${i18next.t('lang')}`);
return { langParam, i18next };
};
export const loadExtensionTranslation = async function (svgEditor, name) {
let translationModule;
const lang = svgEditor.configObj.pref('lang');
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./extensions/ext-${name}/locale/${lang}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./extensions/ext-${name}/locale/en.js`);
}
svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
};