Разметка — работа скриптов внутри SVG

[manjey73]

Ни в Разметке на мнемосхеме, ни внутри фейсплейта не работают скрипты внутри svg

Вообще возможно запустит скрипт в Разметке, обрамленный <script>
А так же <script>//<![CDATA[

? и если возможно, то что для этого надо сделать ?

• Тема изменена 2 недели, 6 дней назад пользователем Mikhail.

[manjey73]

поставим вопросы иначе, раз скрипты внутри svg не хотят работать
1. как из скрипта faceplate узнать его ширину и высоту на мнемосхеме. (даже больше, из скрипта компонента, установленного на faceplate)
2. как ограничить размер по высоте и ширине минимально заданной? чтобы нельзя было сжать меньше указанных?

• Ответ изменён 3 недели, 4 дня назад пользователем manjey73.

[manjey73]

По поводу ширины и высоты вроде нашел.
Пункт 2 надо как-то понять как сделать. Чтобы на мнемосхеме, уменьшая компонент faceplate с Разметкой внутри, поставить ограничение на ширину и высоту, меньше которых оно не сожмется.

[manjey73]

Ограничение ширины

Суть, при помощи min-width мы ограничиваем ширину элемента, сама картинка у меня перестает сжиматься. Но вот зеленая окантовка так же уменьшается до минимума 15 пикселей при действии мышкой.

То есть в стили фейсплейта я добавил еще один параметр min-width

.fp-heatexchanger {
  width: 100% !important;
  height: 100% !important;
  min-width: 100px;
}

[manjey73]

В скриптах не работает такая комбинация

args.component.dom.find('#${idPrefix}sym1').append('<line id="${idPrefix}ln1" x1="0" y1="50%" x2="${ln1x2}" y2="50%" stroke="black" stroke-width="2" />');

То есть линию то оно пытается добавлять, и это есть, если посмотреть код элемента.
Но отрисовки линии нет никакой, при изменении размеров тоже реакции на скрипты нет.

sym1 здесь id группы <g> в svg, чтобы линия попадала куда надо.

Что в скрипте надо сделать, чтобы это отрисовалось?

Если же линию прописать изначально, и целой кучей строк менять ее атрибуты, то работать будет.
заменил внутри строки апострофы, чтобы правильно в CODE обернулось….

• Ответ изменён 3 недели, 3 дня назад пользователем manjey73.
• Ответ изменён 3 недели, 3 дня назад пользователем manjey73.

[manjey73]

Как заставить выполняться скрипт при Resize компонента?
То есть Разметка, вставлена в фейсплейт, скрипт внутри Разметки.
На мнемосхеме выполняю изменение размера фейсплейта. Нужно, чтобы отрабатывал скрипт
domCreated, Updated….

а то фигня получается. Меняешь Размер, потом должен сохранить, потом обновить, чтобы запустились скрипты

[manjey73]

И если обновить страницу, то получаем нет данных по размерам ширины, высоты и переменной от формулы расчета.

Облом-с

[manjey73]

а, и на мнемосхеме это в принципе не работает. Облом-с номер 2, только в Редакторе и можно посмотреть к сожалению.
Думал хоть на мнемосхеме будет работать 🙁

[manjey73]

🙁 в общем лажа лажовая.

1. При редактировани faceplate скрипты отключены, не видишь и не понимаешь что есть правильно, а что нет.
2. При ресайзе и обновлении страницы скрипты не отрабатывают, а нужно получать размеры родителя и это должно работать — так что 1-й вопрос остался в силе.

Все это связано с тем, что применить стили CSS и расчет необходимых точек при помощи calc() невозможно в принципе.

Ну по крайней мере к <line> и <path> в svg. Возможно еще к чему-то, пока уперся в эти две вещи. Возможно либо менять атрибуты, что частично работает. Либо создавать скриптом <line> и <path>, что не работает вообще.

[manjey73]

Error: <line> attribute x2: Expected length, "NaN".
attr @ jquery.min.js:2
VM206:21 Ширина undefined  высота undefined  ln1x2 NaN

это при загрузке мнемосхемы с данным FP.

Примитивный fp, где пытаюсь менять атрибуты линии TestLine.fp

Должно быть так screen

[Mikhail]

1. как из скрипта faceplate узнать его ширину и высоту на мнемосхеме. (даже больше, из скрипта компонента, установленного на faceplate)

С помощью jQuery или методами JavaScript для работы с DOM.

Но вот зеленая окантовка так же уменьшается до минимума 15 пикселей при действии мышкой.

Редактор не анализирует минимальный размер элемента. Это было бы полезно добавить. Записал пожелание.

[manjey73]

С помощью jQuery или методами JavaScript для работы с DOM.

так вот либо это хромает, либо я не тот способ применяю, что перестает работать при обновлении страницы.

Я использовал const wwidth = $('#${idPrefix}heatex').width();

(обратные апострофы так же заменил на простые для работы CODE)

heatex здесь id вставленного SVG. Можете попробовать, скачав TestLine.fp

Скорее всего нужно получать ширину и высоту родителя, а не вставленного кода svg. Но я не знаю как это делать для фейсплейта.

• Ответ изменён 3 недели, 3 дня назад пользователем manjey73.

[manjey73]

args.component.dom.createElementNS is not a function

или методами JavaScript для работы с DOM

Вот нифига не понимаю, как чистый javascript применять к обертке jQuery.
Сколько не пытался, получал всегда ошибки разного рода.

[manjey73]

Почему это работает без createElementNS?
Раньше (во времена старых браузеров) jQuery при создании элементов через строку
($(‘<line>’)) помещал их в пространство имен HTML, и SVG-линии не отображались.
Сейчас все современные браузеры (Chrome, Firefox, Safari, Edge) автоматически распознают, что тег <line> находится внутри <svg>,
и корректно применяют к нему SVG-пространство имен даже при вставке через обычную строку jQuery.

а вот нифига не работает такой метод, при этом строка добавляется, но при этом не отображается никак.

• Ответ изменён 3 недели, 2 дня назад пользователем manjey73.

[manjey73]

Потому что браузеры продолжают не распознавать 🤣

[Автор]

Записи