Mimic — скрипты для SVG

[Mikhail]

Понятна общая цель. Спасибо, что написали на примерах.

[manjey73]

mimic-bundle.js?v=LG…cGL4Axei1pJGbk:2011 Error creating script for the component with ID 53: Unexpected token ')'

Или получаю ошибку, что типа нет такой функции.

Как использовать функции внутри скриптов?
Как при этом не создавать одинаковых функций, если планируется их использовать в разных фейсплейтах?

[manjey73]

Error creating script for the component with ID 53: Unexpected identifier 'getUniqueId'

И куда вставлять функции, чтобы ими можно было пользоваться?

[manjey73]

и главное как правильно вставлять?

А еще самое интересное, как изменить ссылки в самом скрипте ?
Ну вот поменял я в svg id c «bodyvn» на «bodyvn-11»

дальше то что? как поменять ссылки в самом svg с «#bodyvn» на «#bodyvn-11»

и как поменять в скрипте то же самое ????????

domUpdated(args) {
args.component.dom.find(«#bodyvn-11«).attr(«fill», fon1);

в скрипте можно что-то поменять ?

[manjey73]

пример не помешал бы, как выполнять подобные манипуляции.

[manjey73]

И сразу еще упреждающий вопрос 🙂

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

В идеале какую-то кнопку выбора функций из списка, когда создаешь скрипт в том же фейсплейте.

[Mikhail]

Свои функции нужно добавлять внутрь класса скрипта, используя синтаксис методов класса. Такие функции есть в примерах схем, которые я выкладывал.

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

как поменять ссылки в самом svg

Я попробую, напишу.

[manjey73]

Например у меня вызывало ошибку добавление функции с document.getElementById

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

[manjey73]

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" width="48" height="48">
  <desc>Выключатель мощности ВН</desc>
  <defs>
    <g id="vn">
      <rect id="bodyvn" x="10" y="10" width="28" height="28"  fill="#ff0000" stroke="#ffff00" stroke-width="2" />
      <line id="line1" x1="24" y1="10" x2="24" y2="0" stroke="#ff00ff" stroke-width="2" />
      <line id="line2" x1="24" y1="38" x2="24" y2="48" stroke="#ff00ff" stroke-width="2" />
    </g>
  </defs>
  <!-- используем определенные ранее группы -->
  <use xlink:href="#vn" x="0" y="0" />
</svg>

Пробовал вчера поменять id=»vn» в группе <g
const test = args.component.dom.find(«#vn»);

в test я получаю [object Object]
и например такая комбинация, которой менял цвета на id не срабатывает, хотя и ошибок не вызывает
args.component.dom.find("#vn").attr("id", "vn-5"); попытка поменять id на vn-5

[manjey73]

То есть технически id вроде как является атрибутом, но такое ощущение, что он защищен что ли? непонятно.

[manjey73]

Я извиняюсь, а domCreated вообще работает ?

class extends ComponentScript {

  domCreated(args) {
  const fon1 = args.component.properties.fon;
  const str1 = args.component.properties.stroke;
  args.component.dom.find("#bodyvn").attr("fill", fon1);
  args.component.dom.find("#bodyvn").attr("stroke", str1);
  args.component.dom.find("#line1").attr("stroke", str1);      
  args.component.dom.find("#line2").attr("stroke", str1);
  }
}
 

никаких изменений, вообще при загрузке страницы, хотя из экспортируемых данных вроде как цвета должны новые прийти

[manjey73]

Провел эксперимент.

Оставил только domCreated — воздействия на svg НЕТ
оставил только domUpdated — svg управляется даже без dataUpdated

class extends ComponentScript {

  domCreated(args) {
  const fon1 = args.component.properties.fon;
  const str1 = args.component.properties.stroke;
  args.component.dom.find("#bodyvn-10").attr("fill", fon1);
  args.component.dom.find("#bodyvn-10").attr("stroke", str1);
  args.component.dom.find("#line1-10").attr("stroke", str1);      
  args.component.dom.find("#line2-10").attr("stroke", str1); 
  }

  domUpdated(args) { 
    const fon1 = args.component.properties.fon;
    const str1 = args.component.properties.stroke;
    args.component.dom.find("#bodyvn-10").attr("fill", fon1);
    args.component.dom.find("#bodyvn-10").attr("stroke", str1);
    args.component.dom.find("#line1-10").attr("stroke", str1);      
    args.component.dom.find("#line2-10").attr("stroke", str1); 
  }

  dataUpdated(args) {
  const fon1 = args.component.properties.fon;
  const str1 = args.component.properties.stroke;
  args.component.dom.find("#bodyvn-10").attr("fill", fon1);
  args.component.dom.find("#bodyvn-10").attr("stroke", str1);
  args.component.dom.find("#line1-10").attr("stroke", str1);      
  args.component.dom.find("#line2-10").attr("stroke", str1); 
  } 
 }

вот полный скрипт, только в svg выше надо добавить индексы -10 ко всем id
Перенос domCreated непосредственно в ExtraMarkup результата не дал.

Вообще какая последовательность выполнения скриптов для faceplate и вставленному в него ExtraMarkup? и почему скрипт в ExtraMarkup тоже не работает ?

[manjey73]

а собственно как оно в ExtraMarkup будет работать, если нужно вытащить данные из экспортируемых свойств, которых у него просто нет…

[manjey73]

Либо domCreated выполняется слишком рано и в доме еще нет ничего от слова совсем, что скорее всего и происходит.

цвета при этом меняются по скрипту в domUpdated а dataUpdated даже не используется

[Mikhail]

Я извиняюсь, а domCreated вообще работает ?

Используйте функцию console.log, чтобы это проверить.

[Автор]

Сообщения