From 42039ddf26d6119079b21326ee8cc4876417c3f4 Mon Sep 17 00:00:00 2001 From: Marcin Kurczewski Date: Sun, 26 Oct 2014 12:39:55 +0100 Subject: [PATCH] Changed post notes to work with %-based coords --- TODO | 1 - public_html/css/post.css | 8 ++-- .../js/Presenters/PostContentPresenter.js | 12 +++++- .../js/Presenters/PostNotesPresenter.js | 42 +++++++++++-------- public_html/templates/post-notes.tpl | 8 ++-- .../PostNoteEntityConverter.php | 8 ++-- src/FormData/PostNoteFormData.php | 8 ++-- src/Services/PostSnapshotProvider.php | 8 ++-- src/Upgrades/Upgrade27.php | 8 ++-- 9 files changed, 57 insertions(+), 46 deletions(-) diff --git a/TODO b/TODO index 6b16c056..6dc9b627 100644 --- a/TODO +++ b/TODO @@ -10,7 +10,6 @@ first major release. - tags: add tag descriptions - tags: add tag edit snapshots (backed-only) - add /history -- fix post notes on scaled posts refactors: - add enum validation in IValidatables (needs refactors of enums and diff --git a/public_html/css/post.css b/public_html/css/post.css index 9ba01f46..25ec84ff 100644 --- a/public_html/css/post.css +++ b/public_html/css/post.css @@ -187,11 +187,9 @@ z-index: 1; } .post-notes { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; + position: relative; + width: 100%; + height: 100%; } .post-note-edit { diff --git a/public_html/js/Presenters/PostContentPresenter.js b/public_html/js/Presenters/PostContentPresenter.js index 8bd9b17d..7cfe1a62 100644 --- a/public_html/js/Presenters/PostContentPresenter.js +++ b/public_html/js/Presenters/PostContentPresenter.js @@ -2,6 +2,7 @@ var App = App || {}; App.Presenters = App.Presenters || {}; App.Presenters.PostContentPresenter = function( + jQuery, util, promise, presenterManager, @@ -31,9 +32,10 @@ App.Presenters.PostContentPresenter = function( if (post.contentType === 'image') { loadPostNotes(); - $target.find('.post-notes-target').width($target.find('.image-wrapper').outerWidth()); - $target.find('.post-notes-target').height($target.find('.image-wrapper').outerHeight()); + updatePostNotesSize(); } + + jQuery(window).resize(updatePostNotesSize); } function loadPostNotes() { @@ -42,6 +44,11 @@ App.Presenters.PostContentPresenter = function( function() {}); } + function updatePostNotesSize() { + $target.find('.post-notes-target').width($target.find('.image-wrapper').outerWidth()); + $target.find('.post-notes-target').height($target.find('.image-wrapper').outerHeight()); + } + function addNewPostNote() { postNotesPresenter.addNewPostNote(); } @@ -55,6 +62,7 @@ App.Presenters.PostContentPresenter = function( }; App.DI.register('postContentPresenter', [ + 'jQuery', 'util', 'promise', 'presenterManager', diff --git a/public_html/js/Presenters/PostNotesPresenter.js b/public_html/js/Presenters/PostNotesPresenter.js index 50ce00a9..546b6012 100644 --- a/public_html/js/Presenters/PostNotesPresenter.js +++ b/public_html/js/Presenters/PostNotesPresenter.js @@ -35,7 +35,7 @@ App.Presenters.PostNotesPresenter = function( } function addNewPostNote() { - notes.push({left: 50, top: 50, width: 50, height: 50, text: '…'}); + notes.push({left: 10.0, top: 10.0, width: 10.0, height: 10.0, text: '…'}); } function addNewPostNoteAndRender() { @@ -72,10 +72,10 @@ App.Presenters.PostNotesPresenter = function( var sender = $button.val(); var postNote = $form.data('postNote'); - postNote.left = postNote.$element.offset().left - $target.offset().left; - postNote.top = postNote.$element.offset().top - $target.offset().top; - postNote.width = postNote.$element.width(); - postNote.height = postNote.$element.height(); + postNote.left = (postNote.$element.offset().left - $target.offset().left) * 100.0 / $target.outerWidth(); + postNote.top = (postNote.$element.offset().top - $target.offset().top) * 100.0 / $target.outerHeight(); + postNote.width = postNote.$element.width() * 100.0 / $target.outerWidth(); + postNote.height = postNote.$element.height() * 100.0 / $target.outerHeight(); postNote.text = $form.find('textarea').val(); if (sender === 'cancel') { @@ -161,17 +161,17 @@ App.Presenters.PostNotesPresenter = function( var $parent = $element.parent(); var deltaX = $element.offset().left - e.clientX; var deltaY = $element.offset().top - e.clientY; - var minX = $parent.offset().left; - var minY = $parent.offset().top; - var maxX = minX + $parent.outerWidth() - $element.outerWidth(); - var maxY = minY + $parent.outerHeight() - $element.outerHeight(); var update = function(e) { - var x = e.clientX + deltaX; - var y = e.clientY + deltaY; - x = Math.min(Math.max(x, minX), maxX); - y = Math.min(Math.max(y, minY), maxY); - $element.offset({left: x, top: y}); + var x = e.clientX + deltaX - $parent.offset().left; + var y = e.clientY + deltaY - $parent.offset().top; + x = Math.min(Math.max(x, 0), $parent.outerWidth() - $element.outerWidth()); + y = Math.min(Math.max(y, 0), $parent.outerHeight() - $element.outerHeight()); + x *= 100.0 / $parent.outerWidth(); + y *= 100.0 / $parent.outerHeight(); + $element.css({ + left: x + '%', + top: y + '%'}); }; jQuery(window).bind('mousemove.elemmove', function(e) { @@ -195,14 +195,20 @@ App.Presenters.PostNotesPresenter = function( e.stopPropagation(); $element.addClass('resizing'); + var $parent = $element.parent(); var deltaX = $element.width() - e.clientX; var deltaY = $element.height() - e.clientY; var update = function(e) { - var w = Math.max(20, e.clientX + deltaX); - var h = Math.max(20, e.clientY + deltaY); - $element.width(w); - $element.height(h); + var w = e.clientX + deltaX; + var h = e.clientY + deltaY; + w = Math.min(Math.max(w, 20), $parent.outerWidth() + $parent.offset().left - $element.offset().left); + h = Math.min(Math.max(h, 20), $parent.outerHeight() + $parent.offset().top - $element.offset().top); + w *= 100.0 / $parent.outerWidth(); + h *= 100.0 / $parent.outerHeight(); + $element.css({ + width: w + '%', + height: h + '%'}); }; jQuery(window).bind('mousemove.elemsize', function(e) { diff --git a/public_html/templates/post-notes.tpl b/public_html/templates/post-notes.tpl index b37c565d..fe886500 100644 --- a/public_html/templates/post-notes.tpl +++ b/public_html/templates/post-notes.tpl @@ -1,10 +1,10 @@
<% _.each(notes, function(note) { %>
+ style="left: <%= note.left %>%; + top: <%= note.top %>%; + width: <%= note.width %>%; + height: <%= note.height %>%">
diff --git a/src/Dao/EntityConverters/PostNoteEntityConverter.php b/src/Dao/EntityConverters/PostNoteEntityConverter.php index a0116cbf..0a8cfddd 100644 --- a/src/Dao/EntityConverters/PostNoteEntityConverter.php +++ b/src/Dao/EntityConverters/PostNoteEntityConverter.php @@ -23,10 +23,10 @@ class PostNoteEntityConverter extends AbstractEntityConverter implements IEntity { $entity = new PostNote($array['id']); $entity->setPostId($array['postId']); - $entity->setLeft(intval($array['x'])); - $entity->setTop(intval($array['y'])); - $entity->setWidth(intval($array['width'])); - $entity->setHeight(intval($array['height'])); + $entity->setLeft(floatval($array['x'])); + $entity->setTop(floatval($array['y'])); + $entity->setWidth(floatval($array['width'])); + $entity->setHeight(floatval($array['height'])); $entity->setText($array['text']); return $entity; } diff --git a/src/FormData/PostNoteFormData.php b/src/FormData/PostNoteFormData.php index 77944764..b84e51bf 100644 --- a/src/FormData/PostNoteFormData.php +++ b/src/FormData/PostNoteFormData.php @@ -15,10 +15,10 @@ class PostNoteFormData implements IValidatable { if ($inputReader !== null) { - $this->left = intval($inputReader->left); - $this->top = intval($inputReader->top); - $this->width = intval($inputReader->width); - $this->height = intval($inputReader->height); + $this->left = floatval($inputReader->left); + $this->top = floatval($inputReader->top); + $this->width = floatval($inputReader->width); + $this->height = floatval($inputReader->height); $this->text = trim($inputReader->text); } } diff --git a/src/Services/PostSnapshotProvider.php b/src/Services/PostSnapshotProvider.php index 7e2df45c..272907e0 100644 --- a/src/Services/PostSnapshotProvider.php +++ b/src/Services/PostSnapshotProvider.php @@ -43,10 +43,10 @@ class PostSnapshotProvider 'notes' => array_values(array_map(function (PostNote $note) { return [ - 'x' => intval($note->getLeft()), - 'y' => intval($note->getTop()), - 'w' => intval($note->getWidth()), - 'h' => intval($note->getHeight()), + 'x' => round(floatval($note->getLeft()), 2), + 'y' => round(floatval($note->getTop()), 2), + 'w' => round(floatval($note->getWidth()), 2), + 'h' => round(floatval($note->getHeight()), 2), 'text' => trim($note->getText()), ]; }, diff --git a/src/Upgrades/Upgrade27.php b/src/Upgrades/Upgrade27.php index 4e3b022c..9161c729 100644 --- a/src/Upgrades/Upgrade27.php +++ b/src/Upgrades/Upgrade27.php @@ -13,10 +13,10 @@ class Upgrade27 implements IUpgrade 'CREATE TABLE postNotes ( id INTEGER PRIMARY KEY ' . ($driver === 'mysql' ? 'AUTO_INCREMENT' : 'AUTOINCREMENT') . ', postId INTEGER NOT NULL, - x INTEGER NOT NULL, - y INTEGER NOT NULL, - height INTEGER NOT NULL, - width INTEGER NOT NULL, + x DECIMAL(6,2) NOT NULL, + y DECIMAL(6,2) NOT NULL, + height DECIMAL(6,2) NOT NULL, + width DECIMAL(6,2) NOT NULL, text TEXT NOT NULL )'); }