add flip buttons

also update svgedit.css
2025-12-07 18:26:28 +01:00
parent 370ba56ff0
commit 7ca39b6471
9 changed files with 310 additions and 14 deletions
--- a/src/editor/images/flip_horizontal.svg
+++ b/src/editor/images/flip_horizontal.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="flip_horizontal.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="8.27"
+     inkscape:cx="43.168077"
+     inkscape:cy="50.120919"
+     inkscape:window-width="1920"
+     inkscape:window-height="1008"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     stroke-width="4"
+     stroke="#f9bc01"
+     fill="none"
+     d="M 49.940133,0.25937021 V 100.25936 Z m -10,30.00000079 v 40.000006 l -3.27677,-5.76184 -16.723226,-34.238166 z"
+     id="path2"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     stroke-width="4"
+     stroke="#f9bc01"
+     fill="none"
+     d="M 61.490429,31.147345 V 71.147347 L 67.079935,61.143717 81.49043,31.147345 Z"
+     id="path2-3"
+     sodipodi:nodetypes="ccccc"
+     style="stroke:#f9dab8;stroke-opacity:1" />
+</svg>
--- a/src/editor/images/flip_vertical.svg
+++ b/src/editor/images/flip_vertical.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="flip_vertical.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="8.27"
+     inkscape:cx="43.168077"
+     inkscape:cy="50.120919"
+     inkscape:window-width="1920"
+     inkscape:window-height="1008"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     stroke-width="4"
+     stroke="#f9bc01"
+     fill="none"
+     d="M 0.10978222,43.451827 H 100.10978 Z m 29.99999978,10 H 70.10978 L 64.347943,56.7286 30.109782,73.451827 Z"
+     id="path2"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     stroke-width="4"
+     stroke="#f9bc01"
+     fill="none"
+     d="m 30.216722,33.403103 h 40 L 60.213097,27.813597 30.216722,13.403103 Z"
+     id="path2-3"
+     sodipodi:nodetypes="ccccc"
+     style="stroke:#f9dab8;stroke-opacity:1" />
+</svg>
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -168,6 +168,8 @@ export default {
    set_link_url: 'Set link URL (leave empty to remove)',
    to_path: 'Convert to Path',
    reorient_path: 'Reorient path',
+    flip_horizontal: 'Flip Horizontally',
+    flip_vertical: 'Flip Vertically',
    ungroup: 'Ungroup Elements',
    docprops: 'Document Properties',
    editor_homepage: 'SVG-Edit Home Page',
--- a/src/editor/panels/TopPanel.html
+++ b/src/editor/panels/TopPanel.html
@@ -28,6 +28,9 @@
    <se-button id="tool_topath" title="tools.to_path" src="to_path.svg"></se-button>
    <se-button id="tool_reorient" title="tools.reorient_path" src="reorient.svg"></se-button>
    <se-button id="tool_make_link" title="tools.make_link" src="globe_link.svg"></se-button>
+    <div class="tool_sep"></div>
+    <se-button id="tool_flip_h" title="tools.flip_horizontal" src="flip_horizontal.svg"></se-button>
+    <se-button id="tool_flip_v" title="tools.flip_vertical" src="flip_vertical.svg"></se-button>
  </div>
  <div class="selected_panel">
    <div class="tool_sep"></div>
@@ -219,4 +222,4 @@
    <se-button id="tool_add_subpath" title="tools.add_subpath" src="tool_add_subpath.svg"></se-button>
  </div> <!-- path_node_panel -->
  <div id="cur_context_panel"></div>
-</div>
+</div>
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -667,6 +667,26 @@ class TopPanel {
    }
  }

+  /**
+   * Flip selected element(s) horizontally.
+   * @returns {void}
+   */
+  clickFlipHorizontal () {
+    if (this.editor.selectedElement || this.multiselected) {
+      this.editor.svgCanvas.flipSelectedElements(-1, 1)
+    }
+  }
+
+  /**
+   * Flip selected element(s) vertically.
+   * @returns {void}
+   */
+  clickFlipVertical () {
+    if (this.editor.selectedElement || this.multiselected) {
+      this.editor.svgCanvas.flipSelectedElements(1, -1)
+    }
+  }
+
  /**
   *
   * @returns {void} Resolves to `undefined`
@@ -962,6 +982,8 @@ class TopPanel {
    $click($id('tool_make_link'), this.makeHyperlink.bind(this))
    $click($id('tool_make_link_multi'), this.makeHyperlink.bind(this))
    $click($id('tool_reorient'), this.reorientPath.bind(this))
+    $click($id('tool_flip_h'), this.clickFlipHorizontal.bind(this))
+    $click($id('tool_flip_v'), this.clickFlipVertical.bind(this))
    $click($id('tool_group_elements'), this.clickGroup.bind(this))
    $id('tool_position').addEventListener('change', evt =>
      this.clickAlignEle.bind(this)(evt)
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -10,6 +10,7 @@
  --input-color: #B2B2B2;
  --orange-color: #f9bc01;
  --global-se-spin-input-width: 82px;
+  --top-toolbar-min-height: 80px;
 }

 .svg_editor * {
@@ -18,7 +19,7 @@

 .svg_editor {
  display: grid;
-  grid-template-rows: auto 15px 1fr 40px;
+  grid-template-rows: minmax(var(--top-toolbar-min-height), auto) 15px 1fr 40px;
  grid-template-columns: 40px 15px 50px 1fr 15px;
  grid-template-areas:
    "main main   main top top"
@@ -41,13 +42,6 @@
  font-weight: bold;
 }

-/* on smaller screen, allow 2 lines for the toolbar */
-@media screen and (max-width:1250px) {
-  .svg_editor {
-    grid-template-rows: minmax(80px, auto) 15px 1fr 40px;
-  }
-}
-
 /* class to open the right panel */
 .svg_editor.open {
  grid-template-columns: 34px 15px 50px 1fr 220px;
@@ -311,7 +305,9 @@ hr {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
+  align-content: flex-start;
  background-color: var(--main-bg-color);
+  min-height: var(--top-toolbar-min-height);
 }

 #tools_top>* {
@@ -628,4 +624,4 @@ ul li.current {

 .dropdown li.tool_button {
  width: 24px;
-}
+}