hcengineering · GeneralGDA · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025
diff --git a/packages/presentation/lang/cs.json b/packages/presentation/lang/cs.json
@@ -49,10 +49,13 @@
     "Undo": "Zpět",
     "Redo": "Znovu",
     "ClearCanvas": "Vyčistit plátno",
-    "PenTool": "Nástroj pero",
-    "EraserTool": "Nástroj guma",
-    "PanTool": "Nástroj posun",
-    "TextTool": "Nástroj text",
+    "PenTool": "Pero",
+    "EraserTool": "Guma",
+    "PanTool": "Posun",
+    "TextTool": "Text",
+    "LineTool": "Čára",
+    "RectangleTool": "Obdélník",
+    "EllipseTool": "Elipsa",
     "PaletteManagementMenu": "Spravovat barevné předvolby"
   },
   "status": {

diff --git a/packages/presentation/lang/de.json b/packages/presentation/lang/de.json
@@ -49,10 +49,13 @@
     "Undo": "Rückgängig",
     "Redo": "Wiederholen",
     "ClearCanvas": "Leinwand löschen",
-    "PenTool": "Stift-Werkzeug",
-    "EraserTool": "Radiergummi-Werkzeug",
-    "PanTool": "Verschieben-Werkzeug",
-    "TextTool": "Text-Werkzeug",
+    "PenTool": "Stift",
+    "EraserTool": "Radiergummi",
+    "PanTool": "Verschieben",
+    "TextTool": "Text",
+    "LineTool": "Linie",
+    "RectangleTool": "Rechteck",
+    "EllipseTool": "Ellipse",
     "PaletteManagementMenu": "Farbpresets verwalten"
   },
   "status": {

diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json
@@ -49,10 +49,13 @@
     "Undo": "Undo",
     "Redo": "Redo",
     "ClearCanvas": "Clear canvas",
-    "PenTool": "Pen tool",
-    "EraserTool": "Eraser tool",
-    "PanTool": "Pan tool",
-    "TextTool": "Text tool",
+    "PenTool": "Pen",
+    "EraserTool": "Eraser",
+    "PanTool": "Pan",
+    "TextTool": "Text",
+    "LineTool": "Line",
+    "RectangleTool": "Rectangle",
+    "EllipseTool": "Ellipse",
     "PaletteManagementMenu": "Manage color presets"
   },
   "status": {

diff --git a/packages/presentation/lang/es.json b/packages/presentation/lang/es.json
@@ -49,10 +49,13 @@
     "Undo": "Deshacer",
     "Redo": "Rehacer",
     "ClearCanvas": "Limpiar lienzo",
-    "PenTool": "Herramienta lápiz",
-    "EraserTool": "Herramienta borrador",
-    "PanTool": "Herramienta mover",
-    "TextTool": "Herramienta texto",
+    "PenTool": "Lápiz",
+    "EraserTool": "Borrador",
+    "PanTool": "Mover",
+    "TextTool": "Texto",
+    "LineTool": "Línea",
+    "RectangleTool": "Rectángulo",
+    "EllipseTool": "Elipse",
     "PaletteManagementMenu": "Gestionar preajustes de color"
   },
   "status": {

diff --git a/packages/presentation/lang/fr.json b/packages/presentation/lang/fr.json
@@ -49,10 +49,13 @@
     "Undo": "Annuler",
     "Redo": "Rétablir",
     "ClearCanvas": "Effacer la toile",
-    "PenTool": "Outil stylo",
-    "EraserTool": "Outil gomme",
-    "PanTool": "Outil déplacement",
-    "TextTool": "Outil texte",
+    "PenTool": "Stylo",
+    "EraserTool": "Gomme",
+    "PanTool": "Déplacement",
+    "TextTool": "Texte",
+    "LineTool": "Ligne",
+    "RectangleTool": "Rectangle",
+    "EllipseTool": "Ellipse",
     "PaletteManagementMenu": "Gérer les préréglages de couleur"
   },
   "status": {

diff --git a/packages/presentation/lang/it.json b/packages/presentation/lang/it.json
@@ -49,10 +49,13 @@
     "Undo": "Annulla",
     "Redo": "Ripristina",
     "ClearCanvas": "Cancella la tela",
-    "PenTool": "Strumento penna",
-    "EraserTool": "Strumento gomma",
-    "PanTool": "Strumento sposta",
-    "TextTool": "Strumento testo",
+    "PenTool": "Penna",
+    "EraserTool": "Gomma",
+    "PanTool": "Sposta",
+    "TextTool": "Testo",
+    "LineTool": "Linea",
+    "RectangleTool": "Rettangolo",
+    "EllipseTool": "Ellisse",
     "PaletteManagementMenu": "Gestisci i preset di colore"
   },
   "status": {

diff --git a/packages/presentation/lang/ja.json b/packages/presentation/lang/ja.json
@@ -49,10 +49,13 @@
     "Undo": "元に戻す",
     "Redo": "やり直し",
     "ClearCanvas": "キャンバスをクリア",
-    "PenTool": "ペンツール",
-    "EraserTool": "消しゴムツール",
-    "PanTool": "パンツール",
-    "TextTool": "テキストツール",
+    "PenTool": "ペン",
+    "EraserTool": "消しゴム",
+    "PanTool": "パン",
+    "TextTool": "テキスト",
+    "LineTool": "直線",
+    "RectangleTool": "長方形",
+    "EllipseTool": "楕円",
     "PaletteManagementMenu": "カラープリセットを管理"
   },
   "status": {

diff --git a/packages/presentation/lang/pt.json b/packages/presentation/lang/pt.json
@@ -49,10 +49,13 @@
     "Undo": "Desfazer",
     "Redo": "Refazer",
     "ClearCanvas": "Limpar tela",
-    "PenTool": "Ferramenta caneta",
-    "EraserTool": "Ferramenta borracha",
-    "PanTool": "Ferramenta mover",
-    "TextTool": "Ferramenta texto",
+    "PenTool": "Caneta",
+    "EraserTool": "Borracha",
+    "PanTool": "Mover",
+    "TextTool": "Texto",
+    "LineTool": "Linha",
+    "RectangleTool": "Retângulo",
+    "EllipseTool": "Elipse",
     "PaletteManagementMenu": "Gerenciar predefinições de cor"
   },
   "status": {

diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json
@@ -49,10 +49,13 @@
     "Undo": "Отменить",
     "Redo": "Повторить",
     "ClearCanvas": "Очистить холст",
-    "PenTool": "Инструмент перо",
-    "EraserTool": "Инструмент ластик",
-    "PanTool": "Инструмент перемещения",
-    "TextTool": "Инструмент текст",
+    "PenTool": "Перо",
+    "EraserTool": "Ластик",
+    "PanTool": "Перемещение",
+    "TextTool": "Текст",
+    "LineTool": "Линия",
+    "RectangleTool": "Прямоугольник",
+    "EllipseTool": "Эллипс",
     "PaletteManagementMenu": "Управление цветовыми пресетами"
   },
   "status": {

diff --git a/packages/presentation/lang/tr.json b/packages/presentation/lang/tr.json
@@ -49,10 +49,13 @@
     "Undo": "Geri al",
     "Redo": "Yinele",
     "ClearCanvas": "Tuvali temizle",
-    "PenTool": "Kalem aracı",
-    "EraserTool": "Silgi aracı",
-    "PanTool": "Kaydırma aracı",
-    "TextTool": "Metin aracı",
+    "PenTool": "Kalem",
+    "EraserTool": "Silgi",
+    "PanTool": "Kaydırma",
+    "TextTool": "Metin",
+    "LineTool": "Çizgi",
+    "RectangleTool": "Dikdörtgen",
+    "EllipseTool": "Elips",
     "PaletteManagementMenu": "Renk önayarlarını yönet"
   },
   "status": {

diff --git a/packages/presentation/lang/zh.json b/packages/presentation/lang/zh.json
@@ -49,10 +49,13 @@
     "Undo": "撤销",
     "Redo": "重做",
     "ClearCanvas": "清除画布",
-    "PenTool": "画笔工具",
-    "EraserTool": "橡皮擦工具",
-    "PanTool": "移动工具",
-    "TextTool": "文字工具",
+    "PenTool": "画笔",
+    "EraserTool": "橡皮擦",
+    "PanTool": "移动",
+    "TextTool": "文字",
+    "LineTool": "直线",
+    "RectangleTool": "矩形",
+    "EllipseTool": "椭圆",
     "PaletteManagementMenu": "管理颜色预设"
   },
   "status": {

diff --git a/packages/presentation/src/components/DrawingBoardToolbar.svelte b/packages/presentation/src/components/DrawingBoardToolbar.svelte
@@ -26,17 +26,37 @@
     eventToHTMLElement,
     showPopup
   } from '@hcengineering/ui'
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { ComponentType, createEventDispatcher, onMount } from 'svelte'
   import IconEraser from './icons/Eraser.svelte'
   import IconMove from './icons/Move.svelte'
   import IconText from './icons/Text.svelte'
+  import IconRectangle from './icons/Rectangle.svelte'
+  import IconEllipse from './icons/Ellipse.svelte'
+  import IconLine from './icons/Line.svelte'
   import { DrawingTool } from '../drawing'
   import presentation from '../plugin'
   import { ColorMetaName, ColorMetaNameOrHex } from '../drawingUtils'
   import DrawingBoardToolbarColorIcon from './DrawingBoardToolbarColorIcon.svelte'
   import DrawingBoardColorSelectorIcon from './DrawingBoardColorSelectorIcon.svelte'
   import { ColorsList, DrawingBoardColoringSetup } from '../drawingColors'
   import { Analytics } from '@hcengineering/analytics'
+  import type { IntlString } from '@hcengineering/platform'
+
+  interface ToolPresentation {
+    label: IntlString
+    icon: ComponentType
+    tool: DrawingTool
+  }
+
+  const tools: ToolPresentation[] = [
+    { label: presentation.string.PenTool, icon: IconEdit, tool: 'pen' },
+    { label: presentation.string.EraserTool, icon: IconEraser, tool: 'erase' },
+    { label: presentation.string.PanTool, icon: IconMove, tool: 'pan' },
+    { label: presentation.string.TextTool, icon: IconText, tool: 'text' },
+    { label: presentation.string.LineTool, icon: IconLine, tool: 'shape-line' },
+    { label: presentation.string.RectangleTool, icon: IconRectangle, tool: 'shape-rectangle' },
+    { label: presentation.string.EllipseTool, icon: IconEllipse, tool: 'shape-ellipse' }
+  ]
 
   interface DrawingBoardToolbarEvents {
     undo: undefined
@@ -45,6 +65,7 @@
   }
 
   const dispatch = createEventDispatcher<DrawingBoardToolbarEvents>()
+
   const maxColors = 8
   const minColors = 0
   const defaultColor: ColorMetaName = 'alpha'
@@ -58,6 +79,21 @@
   }
 
   export let tool: DrawingTool = 'pen'
+
+  function evaluateToolPresentation (tool: DrawingTool): ToolPresentation {
+    const found = tools.find((t) => t.tool === tool)
+    if (found == null) {
+      return tools[0]
+    }
+    return found
+  }
+
+  let toolPresentation: ToolPresentation = evaluateToolPresentation(tool)
+
+  $: {
+    toolPresentation = evaluateToolPresentation(tool)
+  }
+
   export let penColor: ColorMetaNameOrHex
   export let penWidth: number
   export let eraserWidth: number
@@ -150,6 +186,25 @@
     localStorage.setItem(storageKey.color, penColor)
   }
 
+  function showToolSelectionMenu (ev: MouseEvent): void {
+    const items: Array<Omit<SelectPopupValueType, 'id'> & { id: DrawingTool }> = []
+    for (const toolPresentation of tools) {
+      if (toolPresentation.tool === 'pan' && !showPanTool) {
+        continue
+      }
+      items.push({
+        id: toolPresentation.tool,
+        label: toolPresentation.label,
+        icon: toolPresentation.icon
+      })
+    }
+    showPopup(SelectPopup, { value: items }, eventToHTMLElement(ev), (id: DrawingTool | undefined) => {
+      if (id != null) {
+        tool = id
+      }
+    })
+  }
+
   onMount(() => {
     try {
       const savedColors = localStorage.getItem(storageKey.colors)
@@ -210,61 +265,23 @@
     }}
   />
   <div class="divider buttons-divider" />
+  <Button kind="icon" showTooltip={{ label: toolPresentation.label }} noFocus on:click={showToolSelectionMenu}>
+    <div class="tool-button-with-indicator" slot="content">
+      <svelte:component this={toolPresentation.icon} size="small" />
+      <div class="tool-indicator" />
+    </div>
+  </Button>
   <Button
     icon={IconDelete}
     kind="icon"
     showTooltip={{ label: presentation.string.ClearCanvas }}
     noFocus
     on:click={() => {
-      tool = 'pen'
       dispatch('clear')
     }}
   />
   <div class="divider buttons-divider" />
-  <Button
-    icon={IconEdit}
-    kind="icon"
-    showTooltip={{ label: presentation.string.PenTool }}
-    noFocus
-    selected={tool === 'pen'}
-    on:click={() => {
-      tool = 'pen'
-    }}
-  />
-  <Button
-    icon={IconEraser}
-    kind="icon"
-    showTooltip={{ label: presentation.string.EraserTool }}
-    noFocus
-    selected={tool === 'erase'}
-    on:click={() => {
-      tool = 'erase'
-    }}
-  />
-  {#if showPanTool}
-    <Button
-      icon={IconMove}
-      kind="icon"
-      showTooltip={{ label: presentation.string.PanTool }}
-      noFocus
-      selected={tool === 'pan'}
-      on:click={() => {
-        tool = 'pan'
-      }}
-    />
-  {/if}
-  <Button
-    icon={IconText}
-    kind="icon"
-    showTooltip={{ label: presentation.string.TextTool }}
-    noFocus
-    selected={tool === 'text'}
-    on:click={() => {
-      tool = 'text'
-    }}
-  />
-  <div class="divider buttons-divider" />
-  {#if tool === 'pen'}
+  {#if tool !== 'erase' && tool !== 'pan' && tool !== 'text'}
     <input
       class="widthSelector"
       type="range"
@@ -336,7 +353,12 @@
     &.inside {
       left: 0.5rem;
       top: 0.5rem;
+      right: auto;
       bottom: unset;
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      max-width: calc(100% - 1rem);
       background-color: var(--theme-popup-header);
       border-radius: var(--small-BorderRadius);
       border: 1px solid var(--theme-popup-divider);
@@ -360,4 +382,23 @@
   .widthSelector {
     width: 80px;
   }
+
+  .tool-button-with-indicator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tool-indicator {
+    position: absolute;
+    bottom: -0.125rem;
+    right: -0.125rem;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 0 0.25rem 0.25rem;
+    border-color: transparent transparent currentColor transparent;
+    opacity: 0.7;
+  }
 </style>