pageflow-sitemap 0.1.0

data/app/assets/javascripts/pageflow/sitemap/editor/d3/graph_view.js

@@ -0,0 +1,277 @@
+(function() {
+  var s = pageflow.sitemap;
+
+  s.GraphView = function(svgElement, controller, options) {
+    options = options || {};
+
+    var svg = d3.select(svgElement)
+      .attr('width', '100%')
+      .attr('height', '100%');
+
+    var svgGroup = svg.select('g.all');
+    var svgStorylines = svg.select('g.lines');
+    var svgChapters = svg.select('g.chapters');
+    var svgPages = svg.select('g.pages');
+    var svgLinks = svg.select('g.links');
+
+    var scrollAndZoom = s.behavior.scrollAndZoom({
+      margin: 50,
+      change: function(event) {
+        svgGroup.attr('transform', 'translate(' + event.translate + ')scale(' + event.scale + ')');
+      }
+    });
+
+    var selectionRect = s.behavior.selectionRect({
+      container: 'g.all',
+      targets: '.storyline',
+      selected: function(storylines) {
+        controller.storylinesSelected(_(storylines).pluck('storyline'));
+      }
+    });
+
+    this.resize = function() {
+      scrollAndZoom.updateSize(parseInt(svg.style('width'), 10),
+                               parseInt(svg.style('height'), 10));
+    };
+
+    d3.rebind(this, scrollAndZoom,
+              'on',
+              'getViewport',
+              'scrollBy',
+              'getScale', 'setScale',
+              'getScrollX', 'setScrollX',
+              'getScrollY', 'setScrollY',
+              'getScrollWindowProportionX',
+              'getScrollWindowProportionY');
+
+    svg
+      .call(scrollAndZoom)
+      .call(selectionRect);
+
+    controller.addUpdateHandler(update);
+
+    function updateScrollAndZoom(session, layout) {
+      var selection = session.selection;
+
+      scrollAndZoom.updateConstraints({
+        minX: -(layout.size.x + layout.laneWidth / 2),
+        minY: -(layout.size.y + layout.rowHeight / 2),
+        maxX: layout.laneWidth / 2,
+        maxY: layout.rowHeight / 2,
+      });
+
+      var centerTarget = session.highlightedPage ||
+        selection.get('pages')[0] ||
+        selection.get('chapters')[0];
+
+      scrollAndZoom.ensureViewport({
+        centerAt: centerTarget && layout.position(centerTarget),
+        defaultViewport: options.defaultViewport
+      });
+    }
+
+    function update(session, layoutOptions) {
+      var entry = session.entry;
+      var selection = session.selection;
+
+      var layout =
+        s.layout.create(entry, selection, layoutOptions);
+
+      var viewModel =
+        new s.ViewModel(session, layout);
+
+      updateScrollAndZoom(session, layout);
+
+      svg
+        .on('dblclick', function() {
+          if (d3.event.target !== svg.node()) {
+            return;
+          }
+
+          controller.addStoryline(layout.laneAndRowFromPoint(scrollAndZoom.pointTo({
+            x: d3.event.clientX,
+            y: d3.event.clientY,
+          })));
+        });
+
+      svgStorylines.call(s.storylinesView(viewModel.storylines, {
+        mousedown: function(source) {
+          controller.storylineSelected(source.storyline, d3.event);
+        },
+
+        dblclick: function(source) {
+          controller.storylineDblClick(source.storyline, d3.event);
+        },
+
+        drag: function(options) {
+          update(session, {dragDelta: {x: options.dx, y: options.dy}});
+        },
+
+        dragend: function(options) {
+          var layout = s.layout.create(entry, selection, {
+            dragDelta: {
+              x: options.dx,
+              y: options.dy
+            }
+          });
+
+          controller.storylinesPositioned(_.map(selection.get('storylines'), function(storyline) {
+            var coordinates = layout.laneAndRowFromPoint(layout.position(storyline));
+
+            return {
+              storyline: storyline,
+              lane: coordinates.lane,
+              row: coordinates.row
+            };
+          }));
+
+          update(session);
+        },
+      }));
+
+      svgChapters.call(s.chaptersView(viewModel.chapters, {
+        mousedown: function(source) {
+          controller.chapterSelected(source.chapter, d3.event);
+        },
+
+        drag: function(options) {
+          update(session, {dragDelta: {x: options.dx, y: options.dy}});
+        },
+
+        dragend: function(options) {
+          var layout = s.layout.create(entry, selection, {
+            dragDelta: {
+              x: options.dx,
+              y: options.dy
+            }
+          });
+
+          controller.chaptersMoved(layout.chaptersGroupedByStorylines,
+                                   layout.laneAndRowFromPoint(scrollAndZoom.pointTo({
+                                     x: d3.event.sourceEvent.clientX,
+                                     y: d3.event.sourceEvent.clientY
+                                   })));
+
+          update(session);
+        },
+
+        addChapterButtonClick: function(d) {
+          controller.insertChapterAfter(d.chapter);
+        }
+      }));
+
+      svgPages.call(s.pagesView(viewModel.nodes, {
+        mousedown: function(source) {
+          controller.pageSelected(source.page, d3.event);
+        },
+
+        dblclick: function(source) {
+          controller.pageDblClick(source.page, d3.event);
+        },
+
+        drag: function(options) {
+          update(session, {dragDelta: {x: options.dx, y: options.dy}});
+        },
+
+        dragend: function(options) {
+          if (Math.abs(options.dx) > 10 || Math.abs(options.dy) > 10) {
+            var layout = s.layout.create(entry, selection, {
+              dragDelta: {
+                x: options.dx,
+                y: options.dy
+              }
+            });
+
+            controller.pagesMoved(layout.pagesGroupedByChapters,
+                                  layout.laneAndRowFromPoint(scrollAndZoom.pointTo({
+                                    x: d3.event.sourceEvent.clientX,
+                                    y: d3.event.sourceEvent.clientY
+                                  })));
+          }
+
+          update(session);
+        },
+
+        addPageButtonClick: function(d) {
+          controller.insertPageAfter(d.page);
+        }
+      }));
+
+      svgLinks.call(s.pageLinksView(viewModel.links, {
+        click: function (d) {
+          controller.pageLinkSelected(d.link, d3.event);
+        },
+
+        drag: function(options) {
+          update(session, {dragPosition: options.position});
+        },
+
+        dragend: function(options) {
+          var layout = s.layout.create(entry, selection, {
+            dragPosition: options.position
+          });
+
+          var page = layout.pageFromPoint(options.position);
+
+          if (page) {
+            if (options.data.link.placeholder) {
+              controller.newPageLinkDroppedOnPage(options.data.links,
+                                                  page);
+            }
+            else {
+              controller.pageLinkDroppedOnPage(options.data.links,
+                                               options.data.link,
+                                               page);
+            }
+          }
+          else if (layout.chapterPlaceholder) {
+            if (options.data.link.placeholder) {
+              controller.newPageLinkDroppedOnPlaceholder(options.data.sourcePage,
+                                                         options.data.links,
+                                                         layout.chapterPlaceholder.laneAndRow);
+            }
+            else {
+              controller.pageLinkDroppedOnPlaceholder(options.data.sourcePage,
+                                                      options.data.links,
+                                                      options.data.link,
+                                                      layout.chapterPlaceholder.laneAndRow);
+            }
+          }
+
+          update(session);
+        }
+      }));
+
+      svgLinks.call(s.successorLinksView(viewModel.successorLinks, {
+        click: function (d) {
+          controller.successorLinkSelected(d.link, d3.event);
+        },
+
+        drag: function(options) {
+          update(session, {dragPosition: options.position});
+        },
+
+        dragend: function(options) {
+          var layout = s.layout.create(entry, selection, {
+            dragPosition: options.position
+          });
+
+          var targetPage = layout.pageFromPoint(options.position);
+
+          if (targetPage) {
+            controller.successorLinkDroppedOnPage(options.data.storyline,
+                                                  targetPage);
+          }
+          else if (layout.chapterPlaceholder) {
+            controller.successorLinkDroppedOnPlaceholder(options.data.storyline,
+                                                         layout.chapterPlaceholder.laneAndRow);
+          }
+
+          update(session);
+        }
+      }));
+
+      svgChapters.call(s.chapterPlaceholdersView(viewModel.chapterPlaceholders));
+    }
+  };
+}());

data/app/assets/javascripts/pageflow/sitemap/editor/d3/layout/chapter_collision.js

@@ -0,0 +1,33 @@
+pageflow.sitemap.layout.ChapterCollision = function(pagesGroupedByChapters) {
+  this.pagesGroupedByChapters = function() {
+    var laneHeights = {};
+
+    return _(pagesGroupedByChapters).map(function(group) {
+      var chapter = group.chapter;
+
+      if (!chapter) {
+        return group;
+      }
+
+      var lane = chapter.configuration.get('lane') || 0;
+      var row = chapter.configuration.get('row') || 0;
+
+      return {
+        chapter: chapter,
+        pages: group.pages,
+        lane: lane,
+        row: freeRow(lane, row, group.pages.length)
+      };
+
+      function freeRow(lane, row, pagesCount) {
+        var laneHeight = laneHeights[lane] || 0;
+        var result;
+
+        result = Math.max(laneHeight, row);
+        laneHeights[lane] = result + pagesCount + 1;
+
+        return result;
+      }
+    }, []);
+  };
+};

data/app/assets/javascripts/pageflow/sitemap/editor/d3/layout/collision.js

@@ -0,0 +1,116 @@
+pageflow.sitemap.layout.Collision = function(draggedLayout, targetLayout) {
+  this.pagesGroupedByDragTargetChapters = function() {
+    return this._pagesGroupedByDragTargetChapters;
+  };
+
+  this.chaptersGroupedByDragTargetStorylines = function() {
+    return this._chaptersGroupedByDragTargetStorylines;
+  };
+
+  var fff = false;
+
+  this._chaptersGroupedByDragTargetStorylines = (function() {
+    var found = false;
+    var result = [];
+
+    _(targetLayout.chaptersGroupedByStorylines).each(function(group) {
+      var chapters = [];
+
+      result.push({
+        storyline: group.storyline,
+        chapters: chapters
+      });
+
+      _(group.chapters).each(function(chapter) {
+        if (draggedLayout.draggedChapters.length) {
+          if (targetLayout.isAboveChapter(chapter, draggedLayout.position(draggedLayout.draggedChapters[0]))) {
+            pushAll(draggedLayout.draggedChapters);
+          }
+        }
+
+        chapters.push(chapter);
+      });
+
+      if (draggedLayout.draggedChapters.length) {
+        if (targetLayout.isBelowStoryline(group.storyline, draggedLayout.position(draggedLayout.draggedChapters[0]))) {
+          pushAll(draggedLayout.draggedChapters);
+        }
+      }
+
+      function pushAll(addedChapters) {
+        found = true;
+
+        _.each(addedChapters, function(chapter) {
+          chapters.push(chapter);
+        });
+      }
+    }, []);
+
+    if (!found) {
+      result.push({
+        storyline: null,
+        chapters: draggedLayout.draggedChapters
+      });
+
+      fff = true;
+    }
+
+    return result;
+  }());
+
+
+  this._pagesGroupedByDragTargetChapters = (function() {
+    var found = false;
+    var result = [];
+
+    _(targetLayout.pagesGroupedByChapters).each(function(group) {
+      var pages = [];
+
+      result.push({
+        chapter: group.chapter,
+        pages: pages
+      });
+
+      _(group.pages).each(function(page) {
+        if (draggedLayout.draggedPages.length) {
+          if (targetLayout.isAbovePage(page, draggedLayout.position(draggedLayout.draggedPages[0]))) {
+            pushAll(draggedLayout.draggedPages);
+          }
+        }
+
+        pages.push(page);
+      });
+
+      if (draggedLayout.draggedPages.length) {
+        if (targetLayout.isBelowChapter(group.chapter, draggedLayout.position(draggedLayout.draggedPages[0]))) {
+          pushAll(draggedLayout.draggedPages);
+        }
+      }
+
+      function pushAll(addedPages) {
+        found = true;
+
+        _.each(addedPages, function(page) {
+          pages.push(page);
+        });
+      }
+    }, []);
+
+    if (draggedLayout.draggedChapters.length) {
+      _.each(draggedLayout.draggedChapters, function(chapter) {
+        result.push({
+          chapter: chapter,
+          pages: chapter.pages.toArray()
+        });
+      });
+    }
+    else if (!found) {
+      result.push({
+        chapter: null,
+        pages: draggedLayout.draggedPages
+      });
+    }
+
+    return result;
+  }());
+};

data/app/assets/javascripts/pageflow/sitemap/editor/d3/layout/dragging_decorator.js

@@ -0,0 +1,58 @@
+pageflow.sitemap.layout.DraggingDecorator = function(selection, layout, selectionLayout, options) {
+  var x = options.delta ? options.delta.x : 0;
+  var y = options.delta ? options.delta.y : 0;
+
+  var decorator = function() {
+    this.position = function(target) {
+      var pos = layout.position(target);
+
+      if (selection.contains(target) ||
+          (target.chapter && selection.contains(target.chapter)) ||
+          (target.chapter && target.chapter.storyline && selection.contains(target.chapter.storyline)) ||
+          (target.storyline && selection.contains(target.storyline))) {
+
+        pos = selectionLayout.position(target);
+
+        return {
+          x: pos.x + x,
+          y: pos.y + y
+        };
+      }
+      else {
+        return layout.position(target);
+      }
+    };
+
+    this.isDragging = isDragging;
+
+    this.draggedChapters = options.delta ? selection.get('chapters') : [];
+
+    this.nonDraggedChaptersGroupedByStorylines = _(layout.chaptersGroupedByStorylines).map(function(group) {
+      return {
+        storyline: group.storyline,
+        chapters: _.reject(group.chapters, isDragging)
+      };
+    });
+
+    this.draggedPages = options.delta ? selection.get('pages') : [];
+
+    this.nonDraggedPagesGroupedByChapters = _.chain(layout.pagesGroupedByChapters)
+      .reject(function(group) {
+        return group.chapter && isDragging(group.chapter);
+      })
+      .map(function(group) {
+        return {
+          chapter: group.chapter,
+          pages: _.reject(group.pages, isDragging)
+        };
+      })
+      .value();
+  };
+
+  decorator.prototype = layout;
+  return new decorator();
+
+  function isDragging(target) {
+    return options.delta && selection.contains(target);
+  }
+};