Changed post notes to work with %-based coords

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

public_html/css/post.css

@@ -187,11 +187,9 @@
 	z-index: 1;
 }
 .post-notes {
-	position: absolute;
+	position: relative;
-	left: 0;
+	width: 100%;
-	top: 0;
+	height: 100%;
-	right: 0;
-	bottom: 0;
 }
 
 .post-note-edit {

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());
+			updatePostNotesSize();
-			$target.find('.post-notes-target').height($target.find('.image-wrapper').outerHeight());
 		}
+
+		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',

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.left = (postNote.$element.offset().left - $target.offset().left) * 100.0 / $target.outerWidth();
-		postNote.top = postNote.$element.offset().top - $target.offset().top;
+		postNote.top = (postNote.$element.offset().top - $target.offset().top) * 100.0 / $target.outerHeight();
-		postNote.width = postNote.$element.width();
+		postNote.width = postNote.$element.width() * 100.0 / $target.outerWidth();
-		postNote.height = postNote.$element.height();
+		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 x = e.clientX + deltaX - $parent.offset().left;
-				var y = e.clientY + deltaY;
+				var y = e.clientY + deltaY - $parent.offset().top;
-				x = Math.min(Math.max(x, minX), maxX);
+				x = Math.min(Math.max(x, 0), $parent.outerWidth() - $element.outerWidth());
-				y = Math.min(Math.max(y, minY), maxY);
+				y = Math.min(Math.max(y, 0), $parent.outerHeight() - $element.outerHeight());
-				$element.offset({left: x, top: y});
+				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 w = e.clientX + deltaX;
-				var h = Math.max(20, e.clientY + deltaY);
+				var h = e.clientY + deltaY;
-				$element.width(w);
+				w = Math.min(Math.max(w, 20), $parent.outerWidth() + $parent.offset().left - $element.offset().left);
-				$element.height(h);
+				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) {

public_html/templates/post-notes.tpl

@@ -1,10 +1,10 @@
 <div class="post-notes">
 	<% _.each(notes, function(note) { %>
 		<div class="post-note"
-			style="left: <%= note.left %>px;
+			style="left: <%= note.left %>%;
-				top: <%= note.top %>px;
+				top: <%= note.top %>%;
-				width: <%= note.width %>px;
+				width: <%= note.width %>%;
-				height: <%= note.height %>px">
+				height: <%= note.height %>%">
 
 			<div class="text-wrapper">
 				<div class="text">

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->setLeft(floatval($array['x']));
-		$entity->setTop(intval($array['y']));
+		$entity->setTop(floatval($array['y']));
-		$entity->setWidth(intval($array['width']));
+		$entity->setWidth(floatval($array['width']));
-		$entity->setHeight(intval($array['height']));
+		$entity->setHeight(floatval($array['height']));
 		$entity->setText($array['text']);
 		return $entity;
 	}

src/FormData/PostNoteFormData.php

@@ -15,10 +15,10 @@ class PostNoteFormData implements IValidatable
 	{
 		if ($inputReader !== null)
 		{
-			$this->left = intval($inputReader->left);
+			$this->left = floatval($inputReader->left);
-			$this->top = intval($inputReader->top);
+			$this->top = floatval($inputReader->top);
-			$this->width = intval($inputReader->width);
+			$this->width = floatval($inputReader->width);
-			$this->height = intval($inputReader->height);
+			$this->height = floatval($inputReader->height);
 			$this->text = trim($inputReader->text);
 		}
 	}

src/Services/PostSnapshotProvider.php

@@ -43,10 +43,10 @@ class PostSnapshotProvider
 			'notes' => array_values(array_map(function (PostNote $note)
 				{
 					return [
-						'x' => intval($note->getLeft()),
+						'x' => round(floatval($note->getLeft()), 2),
-						'y' => intval($note->getTop()),
+						'y' => round(floatval($note->getTop()), 2),
-						'w' => intval($note->getWidth()),
+						'w' => round(floatval($note->getWidth()), 2),
-						'h' => intval($note->getHeight()),
+						'h' => round(floatval($note->getHeight()), 2),
 						'text' => trim($note->getText()),
 					];
 				},

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,
+				x DECIMAL(6,2) NOT NULL,
-				y INTEGER NOT NULL,
+				y DECIMAL(6,2) NOT NULL,
-				height INTEGER NOT NULL,
+				height DECIMAL(6,2) NOT NULL,
-				width INTEGER NOT NULL,
+				width DECIMAL(6,2) NOT NULL,
 				text TEXT NOT NULL
 			)');
 	}