js-draw 0.2.0 → 0.2.1

package/dist/src/localizations/de.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/src/localizations/de.js

@@ -0,0 +1,4 @@
+import { defaultEditorLocalization } from '../localization';
+// German localization
+const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectObjectType: 'Objekt-Typ: ', freehandPen: 'Freihand', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', dropdownShown: t => `Dropdown-Menü für ${t} angezeigt`, dropdownHidden: t => `Dropdown-Menü für ${t} versteckt`, zoomLevel: t => `Vergößerung: ${t}%`, colorChangedAnnouncement: t => `Farbe zu ${t} geändert`, penTool: t => `Stift ${t}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', toolEnabledAnnouncement: t => `${t} aktiviert`, toolDisabledAnnouncement: t => `${t} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: t => `${t} Element${1 === t ? '' : 'e'} transformiert`, resizeOutputCommand: t => `Bildgröße auf ${t.w}x${t.h} geändert`, addElementAction: t => `${t} hinzugefügt`, eraseAction: (t, e) => `${e} ${t} gelöscht`, duplicateAction: (t, e) => `${e} ${t} dupliziert`, inverseOf: t => `Umkehrung von ${t}`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: t => `${Math.abs(t)} Grad ${t < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: t => `${t} Element${1 === t ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: t => `Text-Objekt: ${t}`, pathNodeCount: t => `Es gibt ${t} sichtbare Pfad-Objekte.`, textNodeCount: t => `Es gibt ${t} sichtbare Text-Knotenpunkte.`, textNode: t => `Text: ${t}`, rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: t => `Laden ${t}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: t => `Rückgangig gemacht ${t}`, redoAnnouncement: t => `Wiederholt ${t}` });
+export default localization;

package/dist/src/localizations/getLocalizationTable.js

@@ -1,7 +1,9 @@
 import { defaultEditorLocalization } from '../localization';
+import de from './de';
 import en from './en';
 import es from './es';
 const allLocales = {
+    de,
     en,
     es,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/localizations/de.ts

@@ -0,0 +1,98 @@
+import { defaultEditorLocalization, EditorLocalization } from '../localization';
+
+// German localization
+const localization: EditorLocalization = {
+	...defaultEditorLocalization,
+
+	pen: 'Stift',
+	eraser: 'Radierer',
+	select: 'Auswahl',
+	handTool: 'Verschieben',
+
+	zoom: 'Vergrößerung',
+	resetView: 'Ansicht zurücksetzen',
+
+	thicknessLabel: 'Dicke: ',
+	colorLabel: 'Farbe: ',
+	fontLabel: 'Schriftart: ',
+
+	resizeImageToSelection: 'Bildgröße an Auswahl anpassen',
+	deleteSelection: 'Auswahl löschen',
+	duplicateSelection: 'Auswahl duplizieren',
+
+	undo: 'Rückgängig',
+	redo: 'Wiederholen',
+
+	pickColorFromScreen: 'Farbe von Bildschirm auswählen',
+	clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen',
+	selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.',
+	touchPanning: 'Ansicht mit Touchscreen verschieben',
+	anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
+
+	selectObjectType: 'Objekt-Typ: ',
+	freehandPen: 'Freihand',
+	arrowPen: 'Pfeil',
+	linePen: 'Linie',
+	outlinedRectanglePen: 'Umrissenes Rechteck',
+	filledRectanglePen: 'Ausgefülltes Rechteck',
+
+	dropdownShown: t=>`Dropdown-Menü für ${t} angezeigt`,
+	dropdownHidden: t=>`Dropdown-Menü für ${t} versteckt`,
+	zoomLevel: t=>`Vergößerung: ${t}%`,
+	colorChangedAnnouncement: t=>`Farbe zu ${t} geändert`,
+	penTool: t=>`Stift ${t}`,
+
+	selectionTool: 'Auswahl',
+	eraserTool: 'Radiergummi',
+	touchPanTool: 'Ansicht mit Touchscreen verschieben',
+	twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern',
+	undoRedoTool: 'Rückgängig/Wiederholen',
+	rightClickDragPanTool: 'Rechtsklick-Ziehen',
+	pipetteTool: 'Farbe von Bildschirm auswählen',
+	keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht',
+	textTool: 'Text',
+	enterTextToInsert: 'Einzufügender Text',
+
+	toolEnabledAnnouncement: t=>`${t} aktiviert`,
+	toolDisabledAnnouncement: t=>`${t} deaktiviert`,
+	updatedViewport: 'Transformierte Ansicht',
+	transformedElements: t=>`${t} Element${1===t?'':'e'} transformiert`,
+	resizeOutputCommand: t=>`Bildgröße auf ${t.w}x${t.h} geändert`,
+	addElementAction: t=>`${t} hinzugefügt`,
+	eraseAction: (t,e)=>`${e} ${t} gelöscht`,
+	duplicateAction: (t,e)=>`${e} ${t} dupliziert`,
+	inverseOf: t=>`Umkehrung von ${t}`,
+
+	elements: 'Elemente',
+	erasedNoElements: 'Nichts entfernt',
+	duplicatedNoElements: 'Nichts dupliziert',
+	rotatedBy: t=>`${Math.abs(t)} Grad ${t<0?'im Uhrzeigersinn':'gegen den Uhrzeigersinn'} gedreht`,
+
+	movedLeft: 'Nacht links bewegt',
+	movedUp: 'Nacht oben bewegt',
+	movedDown: 'Nacht unten bewegt',
+	movedRight: 'Nacht rechts bewegt',
+	zoomedOut: 'Ansicht verkleinert',
+	zoomedIn: 'Ansicht vergrößert',
+
+	selectedElements: t=>`${t} Element${ 1===t ? '' : 'e' } ausgewählt`,
+	stroke: 'Strich',
+	svgObject: 'SVG-Objekt',
+
+	text: t=>`Text-Objekt: ${t}`,
+	pathNodeCount: t=>`Es gibt ${t} sichtbare Pfad-Objekte.`,
+	textNodeCount: t=>`Es gibt ${t} sichtbare Text-Knotenpunkte.`,
+	textNode: t=>`Text: ${t}`,
+
+	rerenderAsText: 'Als Text darstellen',
+	accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.',
+
+	loading: t=>`Laden ${t}%...`,
+	doneLoading: 'Laden fertig',
+
+	imageEditor: 'Bild-Editor',
+	undoAnnouncement: t=>`Rückgangig gemacht ${t}`,
+	redoAnnouncement: t=>`Wiederholt ${t}`,
+};
+
+export default localization;

package/src/localizations/getLocalizationTable.ts

@@ -1,9 +1,11 @@
 
 import { defaultEditorLocalization, EditorLocalization } from '../localization';
+import de from './de';
 import en from './en';
 import es from './es';
 
 const allLocales: Record<string, EditorLocalization> = {
+	de,
 	en,
 	es,
 };

package/src/styles.js

@@ -1,3 +1,7 @@
+/**
+ * Applies the editor's styles to the document.
+ * @packageDocumentation
+ */
 
 import './Editor.css';
 import '@melloware/coloris/dist/coloris.css';

package/src/toolbar/toolbar.css

@@ -24,6 +24,7 @@
 .toolbar-root > .toolbar-toolContainer > * > button,
 .toolbar-root > .toolbar-buttonGroup > button {
 	width: min-content;
+	white-space: pre;
 	height: min(20vh, 60px);
 }
 
@@ -64,8 +65,13 @@
 	margin-right: 3px;
 
 	min-width: 40px;
-	max-width: 70px;
-	font-size: 11pt;
+	width: min-content;
+	font-size: 1em;
+}
+
+.toolbar-dropdown > .toolbar-toolContainer > button,
+.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {
+	width: 6em;
 }
 
 .toolbar-button:hover, .toolbar-root button:not(:disabled):hover {