Локализация Diagram Editor

По умолчанию все ярлыки Diagram Editor на английском языке. Некоторые из них можно перевести на желаемый язык:

ярлыки инпутов и кнопок
тултипы фигур.

В пакете Diagram Editor присутствует только en-US локаль. Ознакомьтесь с нашим репозиторием. Здесь вы можете найти интересующую вас локаль или же создать свою.

Структура локалей

Названия хранятся в объекте:

export default {
    "Link arrow": "Link arrow",
    "Default link arrow": "Default link arrow",
    "Link mode": "Link mode",
    "Default link mode": "Default link mode",
    Fill: "Fill",
    Size: "Size",
    "Block settings": "Block settings",
    "Default block size": "Default block size",
    Font: "Font",
    "Line style": "Line style",
    "Border style": "Border style",
    Content: "Content",
    None: "None",
    Reset: "Reset",
    Autoplace: "Autoplace",
    Apply: "Apply",
    Background: "Background",
    Transparent: "Transparent",
 
    // Titles of default groups in the list of shapes
    Block: "Block",
    Flow: "Flow",
    Common: "Common",
    Extra: "Extra",
 
    // Built-in shapes: block
    Circle: "Circle",
    Dot: "Dot",
    Ellipse: "Ellipse",
    Head: "Head",
    Heptagon: "Heptagon",
    Join: "Join",
    Junction: "Junction",
    Octagon: "Octagon",
    Pentagon: "Pentagon",
    Plus: "Plus",
    Rrect: "Rounded rectangle",
    Rtriangle: "Right triangle",
    Square: "Square",
    Star: "Star",
    Tail: "Tail",
    Trapezoid: "Trapezoid",
    Triangle: "Triangle",
    // Built-in shapes: flow
    Action: "Action",
    Collate: "Collate",
    Connector: "Connector",
    Data: "Data",
    Database: "Database",
    Decision: "Decision",
    Delay: "Delay",
    Display: "Display",
    Document: "Document",
 
    Input: "Input",
    Internal: "Internal",
    Looplimit: "Loop limit",
    Merge: "Merge",
    Multidoc: "Multiple documents",
    Note: "Note",
    Operation: "Operation",
    Or: "Or",
    Output: "Output",
    Preparation: "Preparation",
    Process: "Process",
 
    Sdata: "Sequential data",
    Sort: "Sort",
    Start: "Start / End",
    Storage: "Storage",
    Subroutine: "Subroutine",
    Tape: "Tape",
    // Built-in shapes: common
    Default: "Default",
    Org: "Organization",
    Text: "Text",
    "Add label": "Add label",
    "Alignment relative to link": "Alignment relative to link",
    "Position shift": "Position shift",
};

Как задать свою локаль

Чтобы изменить локаль по умолчанию, необходимо:

1. Создать локаль с переводами внутри объекта diagram.locales следующим образом:

// Русский перевод
diagram.locales.ru = {
    "Link arrow": "Стрелка линии",
    "Link mode": "Тип линии",
};

2. Задать текущую локаль для Diagram Editor с помощью свойства locale внутри конструктора:

// кастомный скроллбар (необязательно) 
webix.CustomScroll.init();
 
webix.ui({
  view: "diagram-editor",
  locale: {
    lang: "ru",
    webix: {
      // применяем выбранную локаль для всех webix виджетов 
      ru: "ru-RU"
    },
  },
});

Как менять локали динамически

Вы можете менять языки динамически, например, при клике по соответствующим кнопкам на панели инструментов.

1. Сперва создайте локали с переводом желаемых маркеров:

diagram.locales.ru = {  // Русский
  Heptagon: "Гептагон", ...
};
 
diagram.locales.en = {  // Английский
  Heptagon: "Heptagon", ...
};

2. Меняйте языки с помощью метода setLang сервиса "locale":

{
  view: "segmented",
  options: ["en", "ru"],
  width: 250,
  click: function() {
    const locale = $$("editor").getService("locale");
    locale.setLang(this.getValue());
  }
}

Как синхронизировать Diagram Editor и Webix локали

Ярлыки Webix компонентов внутри Diagram Editor, а также локализация дат и чисел зависят от текущей локали Webix. Чтобы синхронизировать локализацию Diagram Editor и Webix, создайте объект webix внутри свойства locale:

{
  view: "diagram-editor",
  locale: {
    lang: "en",
    webix: {
      // смена Webix локалей
      en: "en-US",
      zh: "zh-CN"
    }
  }
}

Наверх