Манипуляции ротацией

Потратил день на прокачку конструктора дымоходов для Dymunet.ru

Началось с малого: там есть (скоро - были) типовые схемы дымоходов, выдранные из буклетов производителей. Естественно, они разношёрстные. Поступило пожелание привести их в единый вид.

Прорисовывать в Инкскейпе было и в лом, и показалось неумным. Ведь под это дело можно задействовать конструктор дымоходов. Надо только приделать к нему сохранение схем. Помимо элегантности, этот подход принесёт ведь и кучку нового функционала. Можно сделать галерею юзерских дизайнов, например.

Все объекты в конструкторе представлены двумя тегами - div и img с общим классом, то есть не сложно вытащить их из DOM, убрать все другие теги и включенные в div/img яваскрипты (других тегов конструктор не использует и яваскриптов не включает, но кулхацкеры-то на выдумки хитры). Вытащить их из базы и внедрить снова в страницу - тоже не проблема... как казалось.

Когда я открыл Хромом схему, сделанную в Фоксе, детали с вращением это вращение потеряли.

При написании конструктора вращение через назначение класса оказалось неудобным. Вместо этого используется плагин jquery.rotate.3. Он назначает повёрнутому элементу один из вариантов CSS transform: transform, -moz-transform, -o-..., -ms-... Естественно, transform: rotate() из схемы, сделанной Фоксом, не работает в Хроме: там нужен -webkit-transform: rotate().

Ну ё-моё.

Дурной путь состоял в том, чтобы в Яваскрипте находить transform регекспом, вытаскивать значение, удалять transform и применять его заново вызовом .rotate() - и я этот путь прошёл. Во-первых, оказалось, что transform:  rotate() в браузере немедленно превращается в matrix(.....), и восстанавливать угол поворота приходится хитрым исчислением со всякими синусами. Это ладно, это полбеды. Беда в том, что это свойство просто оказывается none, если браузер его сразу не понял. Круг замкнулся.

Не может быть всё так безысходно, подумал я, и это было правильно.

Всё решение заключалось в создании у вращаемого объекта одновременно с браузер-специфическим свойством CSS абстрактного атрибута data-rotate="n". При сохранении свойство в любом его варианте на стороне сервера вырезается регекспом:

 /\s(-.*)?transform:\srotate\(.*\);/

При загрузке/внедрении в DOM надо просто сделать:

$('.canvas_element[data-rotation]').each(function(){
      $(this).rotate(parseInt($(this).attr('data-rotation')));
});

Проверка:

1. Схема, сделанная в Фоксе, правильно открывается Хромом:  http://dymunet.ru/?constructor,load,id=11
   
2. Схема, сделанная в Хроме, правильно открывается Фоксом:  http://dymunet.ru/?constructor,load,id=14

Остальные браузеры: надо проверить.