Add Alt + Wheel Zoom Shortcut & Fix Localization for Panning & Update zh-CN locale (#1067)

* Add a new shortcut( Alt + wheels ) for zoom in/out

* update zh-CN locale

* Fix a ext-panning problem cound not fit locale

* Style for passing linter

src/editor/EditorStartup.js

@@ -362,6 +362,16 @@ class EditorStartup {
       }
     })
 
+    // Add a new shortcut for zoom in/out : Alt + Wheels
+    this.workarea.addEventListener('wheel', (e) => {
+      if (e.altKey) {
+        e.preventDefault()
+        this.svgCanvas.setZoom(e.deltaY > 0 ? this.svgCanvas.getZoom() * 0.9 : this.svgCanvas.getZoom() * 1.1, true)
+        this.updateCanvas(true)
+        $id('zoom').value = (this.svgCanvas.getZoom() * 100).toFixed(1)
+      }
+    })
+
     document.addEventListener('keyup', (e) => {
       if (e.target.nodeName !== 'BODY') return
       if (e.code.toLowerCase() === 'space') {

src/editor/extensions/ext-layer_view/locale/zh-CN.js

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * @module
+ * @author Qscy qscy2011@sina.com
+ * @LastEditors Qscy qscy2011@sina.com
+ */
+export default {
+  name: '图层视图',
+  buttons: [
+    {
+      title: '打开/关闭 图层视图',
+      key: 'Ctrl+Shift+L'
+    }
+  ]
+}

src/editor/extensions/ext-panning/ext-panning.js

@@ -39,7 +39,7 @@ export default {
     return {
       name: svgEditor.i18next.t(`${name}:name`),
       callback () {
-        const btitle = `${name} [Space / mouse wheel + drag]`
+        const btitle = `${svgEditor.i18next.t(`${name}:buttons.0.title`)} ${svgEditor.i18next.t(`${name}:buttons.0.key`)}`
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement('template')
         buttonTemplate.innerHTML = `

src/editor/extensions/ext-panning/locale/en.js

@@ -2,7 +2,8 @@ export default {
   name: 'Extension Panning',
   buttons: [
     {
-      title: 'Panning'
+      title: 'Panning',
+      key: '[Space / mouse wheel + drag]'
     }
   ]
 }

src/editor/extensions/ext-panning/locale/sv.js

@@ -2,7 +2,8 @@ export default {
   name: 'Panorering av tillägg',
   buttons: [
     {
-      title: 'Panorering'
+      title: 'Panorering',
+      key: '[Blanksteg / mushjul + dra]'
     }
   ]
 }

src/editor/extensions/ext-panning/locale/tr.js

@@ -2,7 +2,8 @@ export default {
   name: 'Kaydırma Aracı ',
   buttons: [
     {
-      title: 'Kaydırma'
+      title: 'Kaydırma',
+      key: '[Boşluk / fare tekerleği + sürükle]'
     }
   ]
 }

src/editor/extensions/ext-panning/locale/uk.js

@@ -2,7 +2,8 @@ export default {
   name: 'Розширення: Малювання',
   buttons: [
     {
-      title: 'Малювання'
+      title: 'Малювання',
+      key: '[Пробіл / колесо миші + перетягування]'
     }
   ]
 }

src/editor/extensions/ext-panning/locale/zh-CN.js

@@ -2,7 +2,8 @@ export default {
   name: '移动',
   buttons: [
     {
-      title: '移动'
+      title: '移动工具',
+      key: '[空格 / 按下滚轮拖动]'
     }
   ]
 }

src/editor/extensions/ext-polystar/locale/zh-CN.js

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

src/editor/locale/lang.zh-CN.js

@@ -20,14 +20,14 @@ export default {
     toggle_stroke_tools: '显示/隐藏更式边线工具',
     palette_info: '点击更改填充颜色，按住Shift键单击更改线条颜色',
     zoom_level: '更改缩放级别',
-    panel_action: 'Click to open side panel',
-    quality: 'Quality:',
-    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
-    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
-    pick_stroke_paint_opacity: 'Pick a Stroke Paint and Opacity',
-    pick_fill_paint_opacity: 'Pick a Fill Paint and Opacity',
-    group_identify_label: 'Group identification label',
-    export_type_label: 'Select an image type for export:'
+    panel_action: '点击打开侧边栏',
+    quality: '质量:',
+    pathNodeTooltip: '拖动节点可移动位置，双击节点可切换线段类型',
+    pathCtrlPtTooltip: '拖动控制点以调整曲线形态',
+    pick_stroke_paint_opacity: '请选择描边颜色和不透明度',
+    pick_fill_paint_opacity: '请选择填充颜色和不透明度',
+    group_identify_label: '分组标识标签',
+    export_type_label: '选择导出格式:'
   },
   properties: {
     id: '元素ID',
@@ -73,19 +73,19 @@ export default {
     font_family: '更改字体样式',
     font_size: '更改字体大小',
     bold: '粗体',
-    text_decoration_underline: 'Underline',
-    text_decoration_linethrough: 'Line-Through',
-    text_decoration_overline: 'Overline',
+    text_decoration_underline: '下划线',
+    text_decoration_linethrough: '删除线',
+    text_decoration_overline: '上划线',
     italic: '斜体',
-    text_anchor_start: 'Align the text in start',
-    text_anchor_middle: 'Align the text in middle',
-    text_anchor_end: 'Align the text in end',
-    text_letter_spacing: 'Change the letter spacing',
-    text_word_spacing: 'Change the word spacing',
-    text_length: 'Lets you specify the width of the space into which the text will draw',
-    text_length_adjust: 'Length adjust',
-    text_length_adjust_spacing: 'Spacing',
-    text_length_adjust_spacing_and_glyphs: 'Spacing & Glyphs',
+    text_anchor_start: '左侧对齐',
+    text_anchor_middle: '居中对齐',
+    text_anchor_end: '右侧对齐',
+    text_letter_spacing: '改变字母间距',
+    text_word_spacing: '改变文本间距',
+    text_length: '允许你指定文本将绘制到的区域宽度',
+    text_length_adjust: '调整长度',
+    text_length_adjust_spacing: '间距',
+    text_length_adjust_spacing_and_glyphs: '间距和字形',
     class: 'Element class',
     serif: 'Serif',
     sans_serif: 'Sans-serif',
@@ -95,12 +95,12 @@ export default {
     courier: 'Courier',
     helvetica: 'Helvetica',
     times: 'times',
-    prefs_and_content: 'Store preferences and SVG content locally',
-    prefs_only: 'Only store preferences locally',
-    no_prefs_or_content: 'Do not store my preferences or SVG content locally',
-    jgraduate_pad: 'Pad',
-    jgraduate_reflect: 'Reflect',
-    jgraduate_repeat: 'Repeat'
+    prefs_and_content: '将偏好设置和 SVG 内容本地保存',
+    prefs_only: '仅本地保存偏好设置',
+    no_prefs_or_content: '不在本地保存我的偏好设置或 SVG 内容',
+    jgraduate_pad: '填充间距',
+    jgraduate_reflect: '镜像',
+    jgraduate_repeat: '重复'
   },
   tools: {
     main_menu: '主菜单',
@@ -175,11 +175,12 @@ export default {
     move_up: '向上移动',
     move_down: '向下移动',
     move_back: '移至底部',
-    tool_unlink_use: 'Break link to reference element (make unique)',
-    ellipse_circle_tool: 'Ellipse/Circle Tool',
-    square_rect_tool: 'Square/Rect Tool',
-    remember_this_choice: 'Remember this choice?',
-    remember_this_choice_title: 'If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.'
+    tool_unlink_use: '断开元素连接',
+    ellipse_circle_tool: '椭圆/圆形工具',
+    square_rect_tool: '矩形工具',
+    remember_this_choice: '记住我的选择',
+    remember_this_choice_title:
+      '如果你允许了本地存储并记住本次选择，页面将会刷新并且不再显示该提示'
   },
   layers: {
     layer: '图层',
@@ -215,59 +216,59 @@ export default {
     snapping_onoff: '吸附开/关',
     snapping_stepsize: '吸附步长:',
     grid_color: '网格颜色',
-    done: 'Done',
-    change_xxx_color: 'Change xxx color',
-    pick_paint_opavity: 'Pick a {{newValue}} Paint and Opacity',
-    open_color_picker: 'Click To Open Color Picker',
-    jpicker_title: 'Drag Markers To Pick A Color',
-    jpicker_new_color: 'new',
-    jpicker_current_color: 'current',
-    jpicker_tooltip_colors_new_color: 'New Color - Press “OK” To Commit',
-    jpicker_tooltip_colors_current_color: 'Click To Revert To Original Color',
-    jpicker_tooltip_buttons_ok: 'Commit To This Color Selection',
-    jpicker_tooltip_buttons_cancel: 'Cancel And Revert To Original Color',
-    jpicker_tooltip_hue_radio: 'Set To “Hue” Color Mode',
-    jpicker_tooltip_hue_textbox: 'Enter A “Hue” Value (0-360°)',
-    jpicker_tooltip_saturation_radio: 'Set To “Saturation” Color Mode',
-    jpicker_tooltip_saturation_textbox: 'Enter A “Saturation” Value (0-100%)',
-    jpicker_tooltip_value_radio: 'Set To “Value” Color Mode',
-    jpicker_tooltip_value_textbox: 'Enter A “Value” Value (0-100%)',
-    jpicker_tooltip_red_radio: 'Set To “Red” Color Mode',
-    jpicker_tooltip_red_textbox: 'Enter A “Red” Value (0-255)',
-    jpicker_tooltip_green_radio: 'Set To “Green” Color Mode',
-    jpicker_tooltip_green_textbox: 'Enter A “Green” Value (0-255)',
-    jpicker_tooltip_blue_radio: 'Set To “Blue” Color Mode',
-    jpicker_tooltip_blue_textbox: 'Enter A “Blue” Value (0-255)',
-    jpicker_tooltip_alpha_radio: 'Set To “Alpha” Color Mode',
-    jpicker_tooltip_alpha_textbox: 'Enter A “Alpha” Value (0-100)',
-    jpicker_tooltip_hex_textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
-    jpicker_tooltip_hex_alpha: 'Enter A “Alpha” Value (#00-#ff)',
-    jgraduate_solid_color: 'Solid Color',
-    jgraduate_linear_gradient: 'Linear Gradient',
-    jgraduate_radial_gradient: 'Radial Gradient',
-    jgraduate_begin_point: 'Begin Point',
-    jgraduate_enter_starting_x: 'Enter starting x value between 0.0 and 1.0',
-    jgraduate_enter_starting_y: 'Enter starting y value between 0.0 and 1.0',
-    jgraduate_end_point: 'End Point',
-    jgraduate_enter_ending_x: 'Enter ending x value between 0.0 and 1.0',
-    jgraduate_enter_ending_y: 'Enter ending y value between 0.0 and 1.0',
-    jgraduate_center_point: 'Center Point',
-    jgraduate_enter_value_x: 'Enter x value between 0.0 and 1.0',
-    jgraduate_enter_value_y: 'Enter y value between 0.0 and 1.0',
-    jgraduate_focal_point: 'Focal Point',
-    jgraduate_match_center: 'Match center:',
-    jgraduate_enter_focal_x: 'Enter x value between 0.0 and 1.0',
-    jgraduate_enter_focal_y: 'Enter y value between 0.0 and 1.0',
-    jgraduate_spread_method: 'Spread method',
-    jgraduate_radius: 'Radius:',
-    jgraduate_set_radius: 'Click to set radius',
-    jgraduate_ellip: 'Ellip:',
-    jgraduate_set_ellip: 'Click to set Ellip',
-    jgraduate_angle: 'Angle:',
-    jgraduate_set_angle: 'Click to set Angle',
-    jgraduate_deg: 'deg:',
-    jgraduate_opac: 'Opac:',
-    jgraduate_set_opac: 'Click to set Opac'
+    done: '完成',
+    change_xxx_color: '改变 xxx 颜色',
+    pick_paint_opavity: '请选择 {{newValue}} 颜色和不透明度',
+    open_color_picker: '点击打开取色器',
+    jpicker_title: '拖动标记选择颜色',
+    jpicker_new_color: '新',
+    jpicker_current_color: '当前',
+    jpicker_tooltip_colors_new_color: '新颜色 — 点击“确定”应用此颜色',
+    jpicker_tooltip_colors_current_color: '点击恢复为原始颜色',
+    jpicker_tooltip_buttons_ok: '确认并应用此颜色选择',
+    jpicker_tooltip_buttons_cancel: '取消并恢复为原始颜色',
+    jpicker_tooltip_hue_radio: '切换为“色相”颜色模式',
+    jpicker_tooltip_hue_textbox: '输入“色相”值（0–360°）',
+    jpicker_tooltip_saturation_radio: '切换为“饱和度”颜色模式',
+    jpicker_tooltip_saturation_textbox: '输入“饱和度”值（0–100%）',
+    jpicker_tooltip_value_radio: '切换为“明度”颜色模式',
+    jpicker_tooltip_value_textbox: '输入“明度”值（0–100%）',
+    jpicker_tooltip_red_radio: '切换为“红色”颜色模式',
+    jpicker_tooltip_red_textbox: '输入“红色”值（0–255）',
+    jpicker_tooltip_green_radio: '切换为“绿色”颜色模式',
+    jpicker_tooltip_green_textbox: '输入“绿色”值（0–255）',
+    jpicker_tooltip_blue_radio: '切换为“蓝色”颜色模式',
+    jpicker_tooltip_blue_textbox: '输入“蓝色”值（0–255）',
+    jpicker_tooltip_alpha_radio: '切换为“透明度”颜色模式',
+    jpicker_tooltip_alpha_textbox: '输入“透明度”值（0–100）',
+    jpicker_tooltip_hex_textbox: '输入“十六进制”颜色值（#000000–#ffffff）',
+    jpicker_tooltip_hex_alpha: '输入“Alpha”值（#00–#ff）',
+    jgraduate_solid_color: '纯色',
+    jgraduate_linear_gradient: '线性渐变',
+    jgraduate_radial_gradient: '径向渐变',
+    jgraduate_begin_point: '起始点',
+    jgraduate_enter_starting_x: '请输入起始 X 值（0.0 到 1.0 之间）',
+    jgraduate_enter_starting_y: '请输入起始 Y 值（0.0 到 1.0 之间）',
+    jgraduate_end_point: '结束点',
+    jgraduate_enter_ending_x: '请输入结束 X 值（0.0 到 1.0 之间）',
+    jgraduate_enter_ending_y: '请输入结束 Y 值（0.0 到 1.0 之间）',
+    jgraduate_center_point: '中心点',
+    jgraduate_enter_value_x: '请输入 X 值（0.0 到 1.0 之间）',
+    jgraduate_enter_value_y: '请输入 Y 值（0.0 到 1.0 之间）',
+    jgraduate_focal_point: '焦点',
+    jgraduate_match_center: '匹配中心：',
+    jgraduate_enter_focal_x: '请输入焦点 X 值（0.0 到 1.0 之间）',
+    jgraduate_enter_focal_y: '请输入焦点 Y 值（0.0 到 1.0 之间）',
+    jgraduate_spread_method: '扩散方式',
+    jgraduate_radius: '半径：',
+    jgraduate_set_radius: '点击设置半径',
+    jgraduate_ellip: '椭圆率：',
+    jgraduate_set_ellip: '点击设置椭圆率',
+    jgraduate_angle: '角度：',
+    jgraduate_set_angle: '点击设置角度',
+    jgraduate_deg: '度：',
+    jgraduate_opac: '不透明度：',
+    jgraduate_set_opac: '点击设置不透明度'
   },
   notification: {
     invalidAttrValGiven: '无效的参数',
@@ -276,28 +277,31 @@ export default {
     enterUniqueLayerName: '请输入一个唯一的图层名称',
     enterNewLayerName: '请输入新的图层名称',
     layerHasThatName: '图层已经采用了该名称',
-    QmoveElemsToLayer: "您确定移动所选元素到图层'%s'吗?",
+    QmoveElemsToLayer: '您确定移动所选元素到图层\'%s\'吗?',
     QwantToClear: '您希望清除当前绘制的所有图形吗?\n该操作将无法撤消!',
     QwantToOpen: '您希望打开一个新文档吗?\n该操作将无法撤消!',
     QerrorsRevertToSource: 'SVG文件解析错误.\n是否还原到最初的SVG文件?',
     QignoreSourceChanges: '忽略对SVG文件所作的更改么?',
     featNotSupported: '不支持该功能',
     enterNewImgURL: '请输入新图像的URLL',
-    defsFailOnSave: '注意: 由于您所使用的浏览器存在缺陷, 该图像无法正确显示 (不支持渐变或相关元素). 修复该缺陷后可正确显示.',
+    defsFailOnSave:
+      '注意: 由于您所使用的浏览器存在缺陷, 该图像无法正确显示 (不支持渐变或相关元素). 修复该缺陷后可正确显示.',
     loadingImage: '正在加载图像, 请稍候...',
-    saveFromBrowser: "Select 'Save As...' in your browser (possibly via file menu or right-click context-menu) to save this image as a {{type}} file.",
+    saveFromBrowser: '在浏览器中右键点击“另存为” ，可将图像保存为{{type}}文件',
     noteTheseIssues: '同时注意以下几点: ',
     unsavedChanges: '存在未保存的修改.',
     enterNewLinkURL: '输入新建链接的URL地址',
     errorLoadingSVG: '错误: 无法加载SVG数据',
     URLLoadFail: '无法从URL中加载',
     retrieving: '检索 \'%s\'...',
-    popupWindowBlocked: 'Popup window may be blocked by browser',
-    exportNoBlur: 'Blurred elements will appear as un-blurred',
-    exportNoforeignObject: 'foreignObject elements will not appear',
-    exportNoDashArray: 'Strokes will appear filled',
-    exportNoText: 'Text may not appear as expected',
-    editorPreferencesMsg: 'By default and where supported, SVG-Edit can store your editor preferences and SVG content locally on your machine so you do not need to add these back each time you load SVG-Edit. If, for privacy reasons, you do not wish to store this information on your machine, you can change away from the default option below.',
-    source_dialog_note: 'Copy the contents of this box into a text editor, then save the file with a .svg extension.'
+    popupWindowBlocked: '弹出窗口可能被浏览器阻止',
+    exportNoBlur: '模糊的元素将显示为未模糊状态',
+    exportNoforeignObject: 'foreignObject 元素将不会显示',
+    exportNoDashArray: '描边将显示为填充效果',
+    exportNoText: '文字显示可能与预期不符',
+    editorPreferencesMsg:
+      '默认情况下，只要您的设备支持，SVG-Edit 会将您的编辑偏好设置和 SVG 内容本地保存在您的电脑上，这样您每次重新打开 SVG-Edit 时，就无需再费力重新设置或导入内容了。但如果您出于隐私考虑，不希望这些信息留在您的设备上，只需在下方切换选项，轻松关闭这一默认功能即可！',
+    source_dialog_note:
+      '将此框中的内容复制到文本编辑器中，然后以 .svg 为扩展名保存该文件。'
   }
 }

src/editor/panels/LeftPanel.html

@@ -1,6 +1,6 @@
 <div id="tools_left">
     <se-button id="tool_select" title="tools.mode_select" src="select.svg"></se-button>
-    <se-button id="tool_zoom" title="tools.mode_zoom" src="zoom.svg" shortcut="Z"></se-button>
+    <se-button id="tool_zoom" title="tools.mode_zoom" src="zoom.svg" shortcut="Z / Alt + wheels"></se-button>
     <se-button id="tool_fhpath" title="tools.mode_fhpath" src="pencil.svg" shortcut="Q"></se-button>
     <se-button id="tool_line" title="tools.mode_line" src="pen.svg" shortcut="L"></se-button>
     <se-button id="tool_path" title="tools.mode_path" src="path.svg" shortcut="P"></se-button>