How do I import various modules from the JointJS+ library?

[makleo2002]

Introduction

I'm making a schematic and diagram editor. Initially, I had all the code in the form of functions in the Index.js. I decided to divide everything into classes, but there was a problem with imports.

Uncaught TypeError: The "@joint/plus" specifier was a bare specifier, but was not reassigned to anything. The associated module specifiers must start with "./", "../" or "/".

When I write the entire relative path to the joint-plus file.js, then writes Uncaught SyntaxError: The requested module 'http://127.0.0.1:5500/node_modules/@joint/plus/joint-plus.js' doesn't provide an export named: 'shapes'

How do I import the library correctly?

AbstractDiagram.js:

`import { dia, shapes, ui } from '@joint/plus';

class AbstractDiagram {
title;
graph;
paper;
paperSmall;
commandManager;
selection;
clipboard;
currentElement;
snaplines;
link;
canvas;

constructor() {
    if (new.target === AbstractDiagram) {
        throw new TypeError("Cannot construct AbstractDiagram instances directly");
    }
    this.namespace = shapes;
    this.title = document.getElementById('title');
    this.title.textContent = "diagram.json";
    this.graph = new dia.Graph({}, { cellNamespace: this.namespace });
    this.link = new this.namespace.standard.Link({
        labels: { attrs: { text: { text: 'Hello, World!' } } },
        router: { name: 'manhattan' },
        connector: { name: 'normal' },
        attrs: {
            line: {
                stroke: 'black',
                strokeWidth: 1,
                targetMarker: { type: 'path', d: 'M 10 -5 0 0 10 5 Z' },
            },
        },
    });
    this.commandManager = new dia.CommandManager({ graph: this.graph });
    this.currentElement = null;
    
}

initializePaper(canvas){
    this.paper = new dia.Paper({
        el: canvas,
        model: this.graph,
        width: canvas.clientWidth,
        height: canvas.clientHeight,
        gridSize: 10,
        drawGrid: true,
        background: { color: '#FFF' },
        cellViewNamespace: this.namespace,
        defaultLink: this.link,
        linkPinning: false,
    });
    this.selection = new ui.Selection({
        paper: this.paper
    });
    this.clipboard = new ui.Clipboard({
        paper: this.paper
    });         
    this.snaplines = new ui.Snaplines({ paper: this.paper });

    // Событие нажатия на любое место в paper
    this.paper.on('blank:pointerdown', this.selection.startSelecting);
}

initializeKeyboardShortcuts() {
    this.keyboard = new joint.ui.Keyboard();
    this.keyboard.on({
        'ctrl+c': () => this.clipboard.copyElements(this.selection.collection, this.graph),
        'ctrl+v': () => {
            const pastedCells = this.clipboard.pasteCells(this.graph);
            const elements = pastedCells.filter(cell => cell.isElement());
            this.selection.collection.reset(elements);
        },
        'ctrl+x shift+delete': () => this.clipboard.cutElements(this.selection.collection, this.graph),
        'delete backspace': () => this.graph.removeCells(this.selection.collection.toArray()),
        'ctrl+z': () => {
            this.commandManager.undo();
            this.selection.collection.reset([]);
        },
        'ctrl+y': () => {
            this.commandManager.redo();
            this.selection.collection.reset([]);
        },
    });
    return this.keyboard;
}

}

export default AbstractDiagram;
`

index.html:

`

<title>Diagram Editor</title>

        <div class="geMenubar">
            <a class="geItem">Файл
                <div id="file" class="geDropdown">
                    <div class="geDropdownItem" id="open-option">Открыть</div>
                    <div class="geDropdownItem" id="save-option">Сохранить</div>
                    <div class="geDropdownItem" id="exit-option">Выход</div>
                </div>
            </a>
            <a class="geItem">Правка
                <div class="geDropdown">
                    <div id="undo" class="geDropdownItem">Отменить</div>
                    <div id="redo" class="geDropdownItem">Повторить</div>
                    <div id="cut" class="geDropdownItem">Вырезать</div>
                    <div id="copy" class="geDropdownItem">Копировать</div>
                    <div id="paste" class="geDropdownItem">Вставить</div>
                    <div id="delete" class="geDropdownItem">Удалить</div>
                </div>
            </a>
            <a class="geItem">Вид
                <div class="geDropdown">
                    <div id="zoom" class="geDropdownItem">Увеличить</div>
                    <div id="zoom out" class="geDropdownItem">Уменьшить</div>
                </div>
            </a>
            <a class="geItem">Положение
                <div class="geDropdown">
                    <div class="geDropdownItem">Вверх</div>
                    <div class="geDropdownItem">Вниз</div>
                    <div class="geDropdownItem">Влево</div>
                    <div class="geDropdownItem">Вправо</div>
                </div>
            </a>
            <a class="geItem">Дополнительно
                <div class="geDropdown">
                    <div class="geDropdownItem">Настройки</div>
                    <div class="geDropdownItem">Справка</div>
                </div>
            </a>
            <a class="geItem">Помощь
                <div class="geDropdown">
                    <div class="geDropdownItem">О программе</div>
                    <div class="geDropdownItem">Поддержка</div>
                </div>
            </a>
        </div>
    </div>
    <div class="geToolbarContainer">
        <div class="geToolbar">

            <a id="zoom-scale" class="geLabel" title="Масштаб (Alt+Mousewheel)">
                100%
                <img src="../icons/arrow.gif">
                <div id="scale-dropdown">
                    <a class="scale-option" data-scale="0.25">25%</a>
                    <a class="scale-option" data-scale="0.5">50%</a>
                    <a class="scale-option" data-scale="0.75">75%</a>
                    <a class="scale-option" data-scale="1">100%</a>
                    <a class="scale-option" data-scale="1.25">125%</a>
                    <a class="scale-option" data-scale="1.5">150%</a>
                    <a class="scale-option" data-scale="1.75">175%</a>
                </div>
            </a>

            <div class="geSeparator"></div>
            <a id="zoom-button" class="geLabel" title="Увеличить">
                <img src="../icons/glass1.png"></img>
            </a>
            <a id="unzoom-button" class="geLabel" title="Уменьшить">
                <img src="../icons/glass2.png"></img>
            </a>
            <div class="geSeparator"></div>
            <a id='undo-button'class="geLabel" title="Отменить (Ctrl+Z)">
                <img src="../icons/undo.png"></img>
            </a>
            <a id='redo-button' class="geLabel" title="Вернуть (Ctrl+Y)">
                <img src="../icons/revert.png"></img>
            </a>
            <div class="geSeparator"></div>
            <a id='delete-button' class="geLabel" title="Удалить (Delete)">
                <img src="../icons/delete.png"></img>
            </a>
            <div class="geSeparator"></div>

            <input type="color" id="color-pick-input" title="Цвет сетки" value="#ffffff">
            <input type="range" id="line-width-input" title="Размер сетки" min="1" max="100" value="20">
            <span id="range-value"></span>
            <a id="textBox" class="geLabel" title="Добавить текст">
                <img src="../icons/text.png"></img>
            </a>
            <div class="geSeparator"></div>
            <a id="clear-button" class="geLabel" title="очистить">
                <img src="../icons/clear.png"></img>
            </a>
            <a id="save-button" class="geLabel" title="сохранить">
                <img src="../icons/save.png"></img>
            </a>
            <a id="open-button" class="geLabel" title="открыть">
                <img src="../icons/open.png"></img>
            </a>
            <div class="geSeparator"></div>
            <select id="line-connection-type">
                <option value="">Тип соединения</option>
                <option value="manhattan">Manhattan</option>
                <option value="metro">Metro</option>
                <option value="normal">Normal</option>
                <option value="orthogonal">Orthogonal</option>
                <option value="rightAngle">Orthogonal Router with Given Direction (Right Angle)</option>
            </select>   
            <select id="saveSelect">
                <option value="">Сохранить как</option>
                <option value="json">JSON</option>
                <option value="svg">SVG</option>
                <option value="png">PNG</option>
                <option value="jpg">JPG</option>
            </select>   
        </div>
       
    </div>

<div id="sidebar">
    <img id="btn-toggle-menu" src="../icons/next.png"></img>
    <h3>Фигуры</h3>
    
    <a class="geTitle" >Избранное</a>
    <a class="geTitle" >Общие
    </a>   
    <div class="geSidebar">
            
        <a class="geItem" title="прямая линия" data-shape="line">
            <img src="../mainFigures/line.png" ></img>
        </a>
        <a class="geItem" title="прямоугольник" data-shape="rectangle">
            <img src="../mainFigures/rectangle.png" ></img>
        </a>
        <a class="geItem" title="закругленный прямоугольник" data-shape="rounded-rectangle">
            <img src="../mainFigures/rounded-rectangle.png" ></img>
        </a>
        <a class="geItem" title="круг" data-shape="circle">
            <img src="../mainFigures/circle.png" ></img>
        </a>
        <a class="geItem" title="эллипс" data-shape="ellipse">
            <img src="../mainFigures/ellipse.png" ></img>
        </a>
        <a class="geItem" title="треугольник" data-shape="triangle">
            <img src="../mainFigures/triangle.png" ></img>
        </a>
        <a class="geItem" title="трапеция" data-shape="trapezium">
            <img src="../mainFigures/trapezium.png" ></img>
        </a>
        <a class="geItem" title="комментарий" data-shape="90trapezium">
            <img src="../mainFigures/90trapezium.png" ></img>
        </a>
        <a class="geItem" title="ромб" data-shape="rhomb">
            <img src="../mainFigures/rhomb.png" ></img>
        </a>
        <a class="geItem" title="параллелограмм" data-shape="parallelogram">
            <img src="../mainFigures/parallelogram.png" ></img>
        </a>
        <a class="geItem" title="пятиугольник" data-shape="pentagon">
            <img src="../mainFigures/pentagon.png" ></img>
        </a>
        <a class="geItem" title="шестиугольник" data-shape="hexagon">
            <img src="../mainFigures/hexagon.png" ></img>
        </a>
        <a class="geItem" title="цилиндр" data-shape="cylinder">
            <img src="../mainFigures/cylinder.png" ></img>
        </a>
        <a class="geItem" title="односторонняя стрелка" data-shape="arrow">
            <img src="../mainFigures/arrows.png" ></img>
        </a>
        <a class="geItem" title="двусторонняя стрелка" data-shape="double-arrow">
            <img src="../mainFigures/double-arrow.png" ></img>
        </a>
        <a class="geItem" title="криволинейная стрелка" data-shape="curved-arrow" >
            <img src="../mainFigures/curve-arrow.png" ></img>
        </a>
        <a class="geItem" title="изображение" data-shape="image" >
            <img src="/icons/image-icon1.svg" ></img>
        </a>
    </div>  
    <a class="geTitle" >Блок-схема</a>
    <div class="geSidebar">          
        <a class="geItem" title="процесс" data-shape="process">
            <img src="../mainFigures/rectangle.png" ></img>
        </a>
        <a class="geItem" title="альтернативный процесс" data-shape="alternative process">
            <img src="../block diagram/alternative process.png" ></img>
        </a>
        <a class="geItem" title="решение/условие" data-shape="decision/condition">
            <img src="../mainFigures/rhomb.png" ></img>
        </a>
        <a class="geItem" title="вход/выход" data-shape="inOutput">
            <img src="../mainFigures/parallelogram.png" ></img>
        </a>
        <a class="geItem" title="определенный процесс" data-shape="predefined process">
            <img src="../block diagram/predefined process.png" ></img>
        </a>
        <a class="geItem" title="эллипс" data-shape="internal storage">
            <img src="../block diagram/internal data.png" ></img>
        </a>
        <a class="geItem" title="документ" data-shape="document">
            <img src="../block diagram/document.png" ></img>
        </a>
        <a class="geItem" title="мульти-документ" data-shape="multi-document">
            <img src="../block diagram/multi-document.png" ></img>
        </a>
        <a class="geItem" title="начало/конец" data-shape="start/end">
            <img src="../mainFigures/rounded-rectangle.png" ></img>
        </a>
        <a class="geItem" title="подготовка" data-shape="preparation">
            <img src="../block diagram/preparation.png" ></img>
        </a>
        <a class="geItem" title="сортировка" data-shape="sort">
            <img src="../block diagram/sort.png" ></img>
        </a>
        <a class="geItem" title="ручной ввод" data-shape="manual input">
            <img src="../block diagram/manual input.png" ></img>
        </a>
        <a class="geItem" title="ручная операция" data-shape="manual operation">
            <img src="../block diagram/manual operation.png" ></img>
        </a>
        <a class="geItem" title="узел" data-shape="node">
            <img src="../mainFigures/circle.png" ></img>
        </a>
        <a class="geItem" title="ссылка" data-shape="link">
            <img src="../block diagram/link.png" ></img>
        </a>
        <a class="geItem" title="карточка" data-shape="card">
            <img src="../block diagram/card.png" ></img>
        </a>
        <a class="geItem" title="перфолента" data-shape="tape">
            <img src="../block diagram/tape.png" ></img>
        </a>
        <a class="geItem" title="узел суммирования" data-shape="summing junction">
            <img src="../block diagram/summing junction.png" ></img>
        </a>
        <a class="geItem" title="узел или" data-shape="or" >
            <img src="../block diagram/or.png" ></img>
        </a>
        <a class="geItem" title="сопоставление" data-shape="collate" >
            <img src="../block diagram/collate.png" ></img>
        </a>
        <a class="geItem" title="извлечение" data-shape="exctract/measurement" >
            <img src="../mainFigures/triangle.png" ></img>
        </a>
        <a class="geItem" title="объединение" data-shape="merge/storage" >
            <img src="../mainFigures/triangle.png" style="transform: rotate(180deg);" ></img>
        </a>
        <a class="geItem" title="сохраненные данные" data-shape="stored data" >
            <img src="../block diagram/stored data.png" ></img>
        </a>
        <a class="geItem" title="память с последовательным доступом" data-shape="sequantional data" >
            <img src="../block diagram/sequantional data.png" ></img>
        </a>
        <a class="geItem" title="база данных" data-shape="database" >
            <img src="../block diagram/database.png" ></img>
        </a>
        <a class="geItem" title="память с прямым доступом" data-shape="direct data" >
            <img src="../block diagram/direct data.png" ></img>
        </a>
        <a class="geItem" title="дисплей" data-shape="display" >
            <img src="../block diagram/display.png" ></img>
        </a>
        <a class="geItem" title="annotation1" data-shape="annotation1" >
            <img src="../block diagram/annotation1.png" ></img>
        </a>
        <a class="geItem" title="комментарий2" data-shape="annotation2" >
            <img src="../block diagram/annotation2.png" ></img>
        </a>
    </div>
    <a class="geTitle" >UML</a>
    <div class="geSidebar">
            
        <a class="geItem" title="класс" data-shape="class">
            <img src="../mainFigures/line.png" ></img>
        </a>
        <a class="geItem" title="интерфейс" data-shape="interface">
            <img src="../mainFigures/rectangle.png" ></img>
        </a>
        <a class="geItem" title="обьект" data-shape="rounded-rectangle">
            <img src="../mainFigures/rounded-rectangle.png" ></img>
        </a>
        <a class="geItem" title="круг" data-shape="circle">
            <img src="../mainFigures/circle.png" ></img>
        </a>
        <a class="geItem" title="эллипс" data-shape="ellipse">
            <img src="../mainFigures/ellipse.png" ></img>
        </a>
        <a class="geItem" title="треугольник" data-shape="triangle">
            <img src="../mainFigures/triangle.png" ></img>
        </a>
        <a class="geItem" title="трапеция" data-shape="trapezium">
            <img src="../mainFigures/trapezium.png" ></img>
        </a>
        <a class="geItem" title="комментарий" data-shape="90trapezium">
            <img src="../mainFigures/90trapezium.png" ></img>
        </a>
        <a class="geItem" title="ромб" data-shape="rhomb">
            <img src="../mainFigures/rhomb.png" ></img>
        </a>
        <a class="geItem" title="параллелограмм" data-shape="parallelogram">
            <img src="../mainFigures/parallelogram.png" ></img>
        </a>
        <a class="geItem" title="пятиугольник" data-shape="pentagon">
            <img src="../mainFigures/pentagon.png" ></img>
        </a>
        <a class="geItem" title="шестиугольник" data-shape="hexagon">
            <img src="../mainFigures/hexagon.png" ></img>
        </a>
        <a class="geItem" title="цилиндр" data-shape="cylinder">
            <img src="../mainFigures/cylinder.png" ></img>
        </a>

        <a class="geItem" title="односторонняя стрелка" data-shape="arrow">
            <img src="../mainFigures/arrows.png" ></img>
        </a>
        <a class="geItem" title="двусторонняя стрелка" data-shape="double-arrow">
            <img src="../mainFigures/double-arrow.png" ></img>
        </a>
        <a class="geItem" title="криволинейная стрелка" data-shape="curved-arrow" >
            <img src="../mainFigures/curve-arrow.png" ></img>
        </a>
    </div>
</div>
<div id="diagram-container">
    <div id="canvas" >
    </div>
    <div id="radar" >
    </div>
</div>


<div id="properties-panel">
    <h2>Стили элемента</h2>
    <label for="stroke-color">Цвет контура:</label>
    <input type="color" id="stroke-color"><br>

    <label for="fill-color">Цвет заливки:</label>
    <input type="color" id="fill-color"><br>

    <label for="line-width">Толщина линии:</label>
    <input type="number" id="line-width" min="1" max="10" value="1"><br>
    <label for="width">Длина:</label>
    <input type="number" id="width" min="1" max="1000" ><br>
    <label for="height">Ширина:</label>
    <input type="number" id="height" min="1" max="1000" ><br>

    <label for="line-style">Тип линии:</label>
    <select id="line-style">
        <option value="solid">Сплошная</option>
        <option value="dashed">Пунктирная</option>
        <option value="dotted">Точечная</option>
    </select><br>

    <label for="text-content">Текст:</label>
    <input type="text" id="text-content"><br>

    <label for="text-size">Размер текста:</label>
    <input type="number" id="text-size" min="8" max="24" value="12"><br>

    <label for="text-font">Шрифт текста:</label>
    <select id="text-font">
        <option value="Arial">Arial</option>
        <option value="Helvetica">Helvetica</option>
        <option value="Times New Roman">Times New Roman</option>
        <!-- Добавьте другие варианты шрифтов по вашему усмотрению -->
    </select><br>

    <label for="text-weight">Жирность текста:</label>
    <select id="text-weight">
        <option value="normal">Обычный</option>
        <option value="bold">Жирный</option>
    </select><br>

    <button id="apply-styles">Применить стили</button>
</div>

<script src="../node_modules/@joint/plus/joint-plus.js"></script>

<script type="module" src="../js/index.js"></script>
<script src="../js/script.js"></script>

`

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

Have you tried the importmap?

<script type="importmap">
  {
    "imports": {
      "@joint/plus": "../node_modules/@joint/plus/joint-plus.mjs"
    }
  }
</script>