ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changed post notes to work with %-based coords

Browse source
This commit is contained in:
Marcin Kurczewski 2014-10-26 12:39:55 +01:00
parent 03ce73b1a5
commit 42039ddf26
9 changed files with 57 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
TODO
View file

@ -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

8
public_html/css/post.css
View file

@ -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 {

12
public_html/js/Presenters/PostContentPresenter.js
View file

@ -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',

42
public_html/js/Presenters/PostNotesPresenter.js
View file

@ -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) {

8
public_html/templates/post-notes.tpl
View file

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

8
src/Dao/EntityConverters/PostNoteEntityConverter.php
View file

@ -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;
}

8
src/FormData/PostNoteFormData.php
View file

@ -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);
}
}

8
src/Services/PostSnapshotProvider.php
View file

@ -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()),
];
},

8
src/Upgrades/Upgrade27.php
View file

@ -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
)');
}