Mike
Здравствуйте! Прошу вас дочитать вопрос до конца, он не короткий, но это по тому, что я постарался как можно понятнее описать проблему.
Я пишу сложное приложение на Vue.js + Vuex: работа с текстом, изображениями и другими графическими объектами на canvas'e, для этого еще использую библиотеку fabric.js.
Так как библиотека fabric.js не как не связана с Vue.js то реактивности в ней нет, и я использую для обновление элементов watch.
Так вот, вопрос в том, что я столкнулся с проблемой управления объектов fabric.js в других компонентах кроме как в том, где инициализируется fabric.js. Мой вопрос связан с хранилищем, не важно Vuex или Redux, правда с Redux я почти толком и не работал, но принцип думаю пойму.
В моем случае я использую библиотеку fabric.js, но это не имеет значения, так как всяких библиотек для работы с элементами много, но суть я постараюсь понятно донести затрагивая fabric.js.
Кратко о моей реализации вывода объектов:
В компоненте TheCanvas, в хуке mounted, инициализируется объект canvas (new fabric.Canvas) и вызывается метод render, где идет цикл по объектам из хранилища. Пример упрощен, я не пишу код, который не имеет отношения к вопросу и не хочу сделать простыню на 3к пикселей в высоту)
mounted () {
this.canvas = new fabric.Canvas(this.$el, {
selectionColor: 'rgba(0, 112, 224, 0.02)',
selectionBorderColor: 'rgba(0, 112, 224, 0.3)'
})
this.render(this.elems)
},
methods: {
render (elems) {
elems.forEach(elem => {
if (elem.type === 'image') {
fabric.Image.fromURL(elem.url, imgObj => {
imgObj.set(elem.attrs)
this.canvas.add(imgObj)
})
} else if (elem.type === 'text') {
const textObj = new fabric.Textbox(elem.content, elem.attrs)
this.canvas.add(textObj)
}
})
}
}
Новые объекты я добавляю в хранилище вручную, иначе их ни как не добавить, так как какую-либо информацию о объекте fabric, можно получить только после создания объекта через new fabric
// вызов мутации добавления нового элемента
this.addElem({
type: 'image',
url: urls.regular,
attrs: {
top,
left
}
})
// а вот сама мутация, очень простая
addElem (state, payload) {
state.elems.push(payload)
}
И получается у меня такая структура объектов:
// пример с 2 типами элементов, очень просто.
store: {
elems: [
{
type: 'image',
url: 'someUrl',
attrs: {
top,
left
}
},
{
type: 'text',
content: 'Текст',
attrs: {
top: this.canvasSize.height / 2 - 14,
left: this.canvasSize.width / 2 - 40,
padding: 4,
width: 80,
fontFamily: 'Arial',
fontSize: 24,
textAlign: 'center'
}
}
]
}
Так вот, такой способ хранения объектов в хранилище вообще не рабочий, потому, что в других компонентах я не могу получить данные о объекте, такие как выделенный текст и стиль каждого символа, так как эти данные можно получить только методом объекта fabric, который создается к примеру как в рендере (код render'a выше):
const textObj = new fabric.Textbox(elem.content, elem.attrs)
this.canvas.add(textObj)
// и уже у объекта texObj я могу вызвать метод и получить нужные стили:
textObj.getSelectionStyles()
// или же установить новые стили для выделенных символов текста
textObt.setSelectionStyles({ color: 'red' })
Подведу итоги:
Способ которым я добавляю объекты - не рабочий, хотя для большинства случаев годен.
У объекта созданного через вызов new fabric есть метод toJson , который возвращает json объекта.
Я думал добавлять в хранилище json объекта fabric (сам объект нельзя передать, иначе выдает ошибку maximum call stack...), но смысла от json я не вижу, ведь в других компонентах, где нужно получать информацию о конкретном объекте (к примеру как я писал выше со стилями: textObj.getSelectionStyles()) я не смогу обратиться к этому методу, потому, что при вызове метода toJson, у объекта фабрики, в json просто свойства попадают.
Mike
Еще раз уточню вопрос:
Вопрос довольно не простой, по этому прошу профессионалов, которые уже имеют опыт в разработке сложных приложений, поделиться как лучше реализовать хранение объектов в хранилище и работы с ними.
Юрий
окаг
D
Народ, JavaScript написан на jQuery а angular тогда чем?
Alexeii
Я, наоборот, читал, что пхп написан на ангуляре ☹️
Defragmented
Какой самый производительный 3д движок? Сравнимый с юнити но для жс
🗡
Xaxashutkin
@igorz
Спам
Igor
Evgeniy 🍀
Еще раз уточню вопрос:
Вопрос довольно не простой, по этому прошу профессионалов, которые уже имеют опыт в разработке сложных приложений, поделиться как лучше реализовать хранение объектов в хранилище и работы с ними.
Любой способ хранения объектов fabric в redux/vuex сторе не будет рабочим. Да и смысла в этом особого нет, я думаю
Evgeniy 🍀
Судя по всему там рекурсивные вызовы в полях объектов
Evgeniy 🍀
Я как-то решал похожую задачу, в итоге остановился на кастомном хранилище. Если очень нужно прикрутить это к flux-паттерну, нужна какая-то обертка
Mike
Evgeniy 🍀
можно пример?
Ну смотри, пилишь кастомный объект в который пихаешь ссылки на fabric-объекты в виде {someId: fabricObject}, а в redux store делаешь массив myFabricObjects: [someId, otherId.....randomId]
Потом надо скрестить ежа с ужом при помощи некой миддлвари
Mike
Ну смотри, пилишь кастомный объект в который пихаешь ссылки на fabric-объекты в виде {someId: fabricObject}, а в redux store делаешь массив myFabricObjects: [someId, otherId.....randomId]
Потом надо скрестить ежа с ужом при помощи некой миддлвари
ахха) но я не понимаю как это сделать, есть может примеры рабочие или файлы?
Evgeniy 🍀
Ну там собственно можно даже тупо сагу для этих целей использовать. В смысле для синхронизации твоего кастомного стора с флаксовым.
Max
Всем привет, интересен вопрос про Push уведомления, а именно подписку, ее каждый раз нужно запрашивать и отправлять Post запрос на сервер, или это сделать можно как-то один раз и все?
Oleg
“сократить” особо не получится, но не писать один и тот же код вполне можно:
<div>
<div class="js-sysParent">
<button class="sys" data-sumValue="25">25</button>
<button class="sys" data-sumValue="26">26</button>
<button class="sys" data-sumValue="27">27</button>
</div>
<input class="js-addSum" type="text" value="" />
</div>
const sysParentNode = document.querySelector('.js-sysParent');
const addSumInput = document.querySelector('.js-addSum');
sysParentNode.addEventListener('click', event => {
if (event.target.classList.contains('sys')) {
addSumInput.value = event.target.getAttribute('data-sumValue')
}
})
Ma
ребят, а toggle это jquery чтоли?
Dmitriy
Всем привет, есть возможность расшарить github аккаунт, что бы разработчик мог сам создавать репозиториии?
Kevin
Всем привет, подскажите пожалуйста, может есть боты готовые для имитации действий человека на сайте, или чем это можно побыстрее написать, а именно: регистрация нового пользователя(она не сложная: имя, почта, пароль), нажатие кнопки, выход из учётной записи и всё по новой
Svetlana
Это дарк?
Anonymous
Anonymous
Валентин
Дмитрий
Всем привет, подскажите пожалуйста, может есть боты готовые для имитации действий человека на сайте, или чем это можно побыстрее написать, а именно: регистрация нового пользователя(она не сложная: имя, почта, пароль), нажатие кнопки, выход из учётной записи и всё по новой
imacros - это расширение для firefox. скрипты можно писать на js
Avin
Всем привет, есть возможность расшарить github аккаунт, что бы разработчик мог сам создавать репозиториии?
нет, только расшарить свою репу другому человеку. Если надо создавать репы - делай организацию - там можно
Avin
Всем привет, подскажите пожалуйста, может есть боты готовые для имитации действий человека на сайте, или чем это можно побыстрее написать, а именно: регистрация нового пользователя(она не сложная: имя, почта, пароль), нажатие кнопки, выход из учётной записи и всё по новой
этот бот называется puppeteer 😄
Anonymous
через request interceptor?
Anonymous
Всем привет, подскажите пожалуйста, может есть боты готовые для имитации действий человека на сайте, или чем это можно побыстрее написать, а именно: регистрация нового пользователя(она не сложная: имя, почта, пароль), нажатие кнопки, выход из учётной записи и всё по новой
скорее всего можно обойтись без браузера
обычными запросами👌
Anonymous
класс
перезапускать инстансы чтобы проксю сменить
Anonymous
это же так быстро)
Avin
тебе дудосить чтоли надо им?))
Avin
нарегить аков или лайки накрутить и так нормально
Anonymous
нарегить аков или лайки накрутить и так нормально
а чому нельзя просто get/post нужные отправить?
Avin
не всегда это так просто
Avin
народ, кто знает, если я сделал yarn add shit-lib, а потом руками в package.json перенесу из раздела dependencies в devDependencies - этого достаточно?? или будет кешица зависимость в yarn.lock?
Roman
Sergey
Товарищи, есть шарящие в регулярках? Нужно составить выражение, которе находит в тексте email не обернутый в <a> тег.
Sergey
или ткните где посмотреть можно
Eugene
Товарищи, есть шарящие в регулярках? Нужно составить выражение, которе находит в тексте email не обернутый в <a> тег.
все, у кого есть интернет и доступ к https://regexr.com/ автоматом шарят в регулярках
Сергей
+++
Sergey
все, у кого есть интернет и доступ к https://regexr.com/ автоматом шарят в регулярках
Позволю с вами не согласиться
Eugene
именно
Lev
Есть у меня старенький Galaxy Tab Active , который первой версии. 1280 на 800. И какой то ратио 1,3
И я замучился, я никак не могу заставить хром показывать сайт в точности как на планшете.
Yนrΐΐ
Всем привет, подскажите пожалуйста, может есть боты готовые для имитации действий человека на сайте, или чем это можно побыстрее написать, а именно: регистрация нового пользователя(она не сложная: имя, почта, пароль), нажатие кнопки, выход из учётной записи и всё по новой
Прога: clickermann, записываешь действия, потом немного дорабатываешь алгоритм подключением бд логинов/паролей, и запускаешь цикл.
Anonymous
🙄
🇻🕷
Привет, есть математики?
Как сделать генератор случайных чисел, который основывался бы на seed?
типа rand(min, max, seed);
При одинаковом seed нужно всегда получать одно и тоже число от min до max
Dima
привет всем! надеюсь не спамлю. Ищу профи, который может написать хорошие скрипты для pop-up и pop-under для iOS и Android. Если не по адресу, подскажите где можно найти специалистов по этой теме.
Xaxashutkin
🇻🕷
ну да, но, к примеру, seed меняется всего на 1, а возвращаемое значение меняется рандомно
D
привет всем! надеюсь не спамлю. Ищу профи, который может написать хорошие скрипты для pop-up и pop-under для iOS и Android. Если не по адресу, подскажите где можно найти специалистов по этой теме.
Можете попытаться найти такого в @reactnative_ru
Avin
ну да, но, к примеру, seed меняется всего на 1, а возвращаемое значение меняется рандомно
это больше на хеширование похоже а не на рандом - гуглите в эту сторону
🇻🕷
@avin, именно
🇻🕷
ниче нагуглить не могу
Anton
Товарищи, есть шарящие в регулярках? Нужно составить выражение, которе находит в тексте email не обернутый в <a> тег.
<a>email</a> или <a>text email text</a>?
Avin
ниче нагуглить не могу
((from, to, seed) => {
return (to-from) * Math.abs(Math.sin(seed++)) + from;
})(10, 20, 1)
Держми мой крипто-шедевр 😂
Avin
seed должно быть числом
🇻🕷
Во, спасибо, скоро попробую :)
🇻🕷
Это, слава богу не для криптографии надо :)
Avin
я правдо не уверен что там энтропия будет равномерная)) чета мне нутро подсказывает что будет перевес в какуюто сторону - но если че там можно навернуть сверху какихнить чудо костылей
🇻🕷
Нормально :) спасибо!
Sergey
<a>email</a> или <a>text email text</a>?
нужно найти в тексте все которые не <a href='test@mail.ru'>test@mail.ru</a>, т.е. не являются email гипперссылкой.
Anton
нужно найти в тексте все которые не <a href='test@mail.ru'>test@mail.ru</a>, т.е. не являются email гипперссылкой.
прям совсем правильного решения не вижу
но можно сократить количество вариантов через
[^>]\w+@\w+
krn
господа. не хотелось бы поднимать очередной срач, хотелось бы услышать пару-тройку мнений вот по какому вопросу.
для именования полей в базе используется snake_case. во всех остальных случаях используется camelCase.
как вы боретесь с этим? ремапить все значения, приходящие из базы, естественно, не вариант. есть ли смысл переписывать базу на camelCase ?
или с этим лучше не бороться вообще ? ибо для sql баз например характерен snake_case