pageflow-sitemap 0.1.0

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

@@ -0,0 +1,238 @@
+pageflow.sitemap.layout.Grid = function(chaptersGroupedByStorylines, pagesGroupedByChapters, options) {
+  var positions = {};
+  var chapterSizes = {};
+  var heights = {};
+  var size = {x: 0, y: 0};
+
+  var laneWidth = this.laneWidth = options.pageWidth + 2 * options.pageMarginWidth;
+  var rowHeight = this.rowHeight = options.pageHeight + 2 * options.pageMarginHeight;
+
+  this.chaptersGroupedByStorylines = chaptersGroupedByStorylines;
+  this.pagesGroupedByChapters = pagesGroupedByChapters;
+  this.size = size;
+
+  this.position = function(target) {
+    return positions[target.cid];
+  };
+
+  this.linkSource = function(page) {
+    return {
+      x: this.position(page).x,
+      y: this.position(page).y,
+      width: options.pageWidth,
+      height: heights[page.cid] || options.pageHeight
+    };
+  };
+
+  this.linkTarget = function(page, link) {
+    return this.linkSource(page);
+  };
+
+  this.chapterHeight = function(chapter) {
+    return heights[chapter.cid];
+  };
+
+  this.height = function(target) {
+    if (!heights[target.cid]) {
+      debugger;
+    }
+
+    return heights[target.cid];
+  };
+
+  this.isAbovePage = function(page, position) {
+    var pagePosition = this.position(page);
+
+    return (Math.abs(position.x - pagePosition.x) < laneWidth / 2 &&
+            Math.abs(position.y - pagePosition.y) <= rowHeight / 2 &&
+            position.y < pagePosition.y + rowHeight / 2);
+  };
+
+  this.isAboveChapter = function(chapter, position) {
+    var chapterPosition = this.position(chapter);
+
+    return (Math.abs(position.x - chapterPosition.x) < laneWidth / 2 &&
+            Math.abs(position.y - chapterPosition.y) <= rowHeight / 2 &&
+            position.y < chapterPosition.y + rowHeight / 2);
+  };
+
+  this.pointInsidePage = function(page, position) {
+    var pagePosition = this.position(page);
+
+    return (Math.abs(position.x - pagePosition.x) <= (options.pageWidth + options.pageMarginWidth) / 2 &&
+            Math.abs(position.y - pagePosition.y) <= (options.pageHeight + options.pageMarginHeight) / 2);
+  };
+
+  this.pointInsideChapter = function(chapter, position) {
+    var chapterPosition = this.position(chapter);
+    var chapterHeight = this.chapterHeight(chapter);
+
+    return (Math.abs(position.x - chapterPosition.x) < laneWidth / 2 &&
+            position.y >= chapterPosition.y - rowHeight / 2 &&
+            position.y < chapterPosition.y + chapterHeight);
+  };
+
+  this.pointInsideStoryline = function(storyline, position) {
+    var storylinePosition = this.position(storyline);
+    var height = this.height(storyline);
+
+    return (Math.abs(position.x - storylinePosition.x) < laneWidth / 2 &&
+            position.y >= storylinePosition.y - rowHeight * 1.5 &&
+            position.y < storylinePosition.y + height);
+  };
+
+  this.isBelowChapter = function(chapter, position) {
+    var chapterPosition = this.position(chapter);
+    var chapterBottom =
+      this.position(chapter).y +
+      this.chapterHeight(chapter) +
+      2 * options.pageMarginHeight;
+
+    return (Math.abs(position.x - chapterPosition.x) < laneWidth / 2 &&
+            Math.abs(position.y - chapterBottom) <= rowHeight / 2 &&
+            position.y < chapterBottom + rowHeight / 2);
+  };
+
+  this.isBelowStoryline = function(storyline, position) {
+    var storylinePosition = this.position(storyline);
+    var storylineBottom =
+      this.position(storyline).y +
+      this.height(storyline) +
+      2 * options.pageMarginHeight;
+
+    return (Math.abs(position.x - storylinePosition.x) < laneWidth / 2 &&
+            Math.abs(position.y - storylineBottom) <= rowHeight / 2 &&
+            position.y < storylineBottom + rowHeight / 2);
+  };
+
+  this.laneAndRowFromPoint = function(position) {
+    return {
+      lane: Math.round(position.x / laneWidth),
+      row: Math.round(position.y / rowHeight)
+    };
+  };
+
+  this.freeGridCellFromPoint = function(position) {
+    if (!this.storylineFromPoint(position) &&
+        !this.chapterFromPoint(position) &&
+        !this.pageFromPoint(position)) {
+
+      return this.gridCellFromPoint(position);
+    }
+  };
+
+  this.gridCellFromPoint = function(position) {
+    var laneAndRow = this.laneAndRowFromPoint(position);
+
+    if (laneAndRow.lane >= 0 && laneAndRow.row >= 0) {
+      return {
+        laneAndRow: laneAndRow,
+        x: laneAndRow.lane * laneWidth,
+        y: laneAndRow.row * rowHeight,
+        width: options.pageWidth,
+        height: options.pageHeight
+      };
+    }
+  };
+
+  this.storylineFromPoint = function(position) {
+    var that = this;
+
+    return _(chaptersGroupedByStorylines).reduce(function(result, group) {
+      return result || (group.storyline &&
+                        that.pointInsideStoryline(group.storyline, position));
+    }, null);
+  };
+
+  this.chapterFromPoint = function(position) {
+    var that = this;
+
+    return _(pagesGroupedByChapters).reduce(function(result, group) {
+      return result || (group.chapter &&
+                        that.pointInsideChapter(group.chapter, position));
+    }, null);
+  };
+
+  this.pageFromPoint = function(position) {
+    var that = this;
+
+    return _(pagesGroupedByChapters).reduce(function(result, group) {
+      return result || _(group.pages).find(function(page) {
+        return that.pointInsidePage(page, position);
+      });
+    }, null);
+  };
+
+  this.isLegal = function() {
+  };
+
+  _.each(pagesGroupedByChapters, function(group) {
+    var chapter = group.chapter;
+
+    if (chapter) {
+      var chapterSize = Math.max(1, group.pages.length);
+      chapterSizes[chapter.cid] = chapterSize + 0.5;
+      heights[chapter.cid] = chapterSize * rowHeight - 2 * options.pageMarginHeight;
+    }
+  });
+
+  _.each(chaptersGroupedByStorylines, function(group) {
+    var storyline = group.storyline;
+
+    if (storyline) {
+      positions[storyline.cid] = {
+        x: lane(storyline) * laneWidth,
+        y: row(storyline) * rowHeight
+      };
+
+      var storylineSize = _.reduce(group.chapters, function(offset, chapter) {
+        var chapterSize = chapterSizes[chapter.cid];
+
+      var storylineLane = lane(storyline);
+        var storylineRow = row(storyline) + offset;
+
+        positions[chapter.cid] = {
+          _lane: storylineLane,
+          _row: storylineRow,
+          x: storylineLane * laneWidth,
+          y: storylineRow * rowHeight
+        };
+
+        return offset + chapterSize;
+      }, 0);
+
+      heights[storyline.cid] = Math.max(1, storylineSize) * rowHeight;
+
+      if (!heights[storyline.cid]) {
+        debugger;
+      }
+    }
+  });
+
+  _.each(pagesGroupedByChapters, function(group) {
+    var chapter = group.chapter;
+
+    if (chapter && positions[chapter.cid]) {
+      var chapterLane = positions[chapter.cid]._lane;
+      var chapterRow = positions[chapter.cid]._row;
+
+      _.each(group.pages, function(page, index) {
+        positions[page.cid] = {
+          x: chapterLane * laneWidth,
+          y: (chapterRow + index) * rowHeight
+        };
+
+        size.x = Math.max(size.x, positions[page.cid].x + laneWidth);
+        size.y = Math.max(size.y, positions[page.cid].y + rowHeight);
+      });
+    }
+  });
+
+  function lane(storyline) {
+    return storyline.configuration.get('lane') || 0;
+  }
+
+  function row(storyline) {
+    return storyline.configuration.get('row') || 0;
+  }
+};

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

@@ -0,0 +1,42 @@
+pageflow.sitemap.layout.LinkDraggingDecorator = function(selection, layout, options) {
+  var decorator = function() {
+    var targetPage, targetChapter;
+
+    if (options.dragPosition) {
+      targetPage = layout.pageFromPoint(options.dragPosition);
+
+      this.chapterPlaceholder = layout.freeGridCellFromPoint(options.dragPosition);
+    }
+
+    this.linkTarget = function(page, link) {
+      if (selection.contains(link) && options.dragPosition) {
+        if (targetPage) {
+          return layout.linkTarget(targetPage, link);
+        }
+
+        if (this.chapterPlaceholder) {
+          return this.chapterPlaceholder;
+        }
+
+        return {
+          x: options.dragPosition.x,
+          y: options.dragPosition.y,
+          width: 0,
+          height: 0
+        };
+      }
+      else {
+        return layout.linkTarget(page, link);
+      }
+    };
+
+    this.isDragging = function(target) {
+      return (options.dragPosition && selection.contains(target)) ||
+        layout.isDragging(target);
+    };
+
+  };
+
+  decorator.prototype = layout;
+  return new decorator();
+};

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

@@ -0,0 +1,94 @@
+//= require_self
+//= require ./layout/grid
+//= require ./layout/dragging_decorator
+//= require ./layout/link_dragging_decorator
+//= require ./layout/collision
+
+(function() {
+  var s = pageflow.sitemap;
+
+  s.layout = {
+    defaultGrid: {
+      pageWidth: 125,
+      pageHeight: 70,
+      pageMarginWidth: 30,
+      pageMarginHeight: 12
+    },
+
+    create: function(entry, selection, options) {
+      options = _.extend({
+        grid: this.defaultGrid
+      }, options || {});
+
+      // We begin by layouting chapters and pages in a grid.
+
+      var originalLayout =
+        new s.layout.Grid(chaptersGroupedByStorylines(entry),
+                          pagesGroupedByChapters(entry),
+                          options.grid);
+
+      // Then we create a layout in which the selected pages are
+      // translated by the dragDelta.
+
+      var draggingLayout =
+        new s.layout.DraggingDecorator(selection,
+                                       originalLayout,
+                                       originalLayout,
+                                       {delta: options.dragDelta});
+      // When dragging pages, the reset of the layout collapses as if
+      // the dragged pages were removed. This is the layout we want to
+      // consider when we check collision with dragged pages.
+
+      var collapsedLayout =
+        new s.layout.Grid(draggingLayout.nonDraggedChaptersGroupedByStorylines,
+                          draggingLayout.nonDraggedPagesGroupedByChapters,
+                          options.grid);
+
+      // Group pages as if they already had been dropped into a target
+      // new chapters. This allows us to calculate a grid layout with
+      // free spaces where pages would be dropped.
+
+      var collision =
+        new s.layout.Collision(draggingLayout, collapsedLayout);
+
+      var spacingLayout =
+        new s.layout.Grid(collision.chaptersGroupedByDragTargetStorylines(),
+                          collision.pagesGroupedByDragTargetChapters(),
+                          options.grid);
+
+      // The final layout that we want to draw is split into two
+      // parts: For the selected pages, we want to use the position
+      // from the original layout translated by the dragDelta. For all
+      // other pages we want to use the positions from the spacing
+      // layout which already contains placeholder positions for the
+      // dragged pages.
+
+      var layout = new s.layout.DraggingDecorator(selection,
+                                                  spacingLayout,
+                                                  originalLayout,
+                                                  {delta: options.dragDelta});
+
+      return new s.layout.LinkDraggingDecorator(selection,
+                                                layout,
+                                                {dragPosition: options.dragPosition});
+    }
+  };
+
+  function chaptersGroupedByStorylines(entry) {
+    return entry.storylines.map(function(storyline) {
+      return {
+        storyline: storyline,
+        chapters: storyline.chapters.toArray()
+      };
+    });
+  }
+
+  function pagesGroupedByChapters(entry) {
+    return entry.chapters.map(function(chapter) {
+      return {
+        chapter: chapter,
+        pages: chapter.pages.toArray()
+      };
+    });
+  }
+}());

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

@@ -0,0 +1,25 @@
+/*global options*/
+  window.options = sitemap.settings = {
+    margin: {
+      top: 60,
+      right: 60,
+      bottom: 60,
+      left: 60
+    },
+    page: {
+      height: 70,
+      width: 125,
+      verticalMargin: 30,
+      horizontalMargin: 30
+    },
+
+    arrowSize: 8,
+
+    radius: 20,
+    duration: 400,
+
+    panSpeed: 200,
+    panBoundary: 20 // Within 20px from edges will pan when dragging.
+  };
+
+  options.boxHeight = options.page.width + options.page.verticalMargin;

data/app/assets/javascripts/pageflow/sitemap/editor/d3/paths/follow_path.js

@@ -0,0 +1,36 @@
+pageflow.sitemap.followPath = function(d) {
+  var points = sitemap.followPath.points(d);
+
+  var p = [points.start, points.p1, points.p2, points.end].map(function(d) {
+    return [d.x, d.y];
+  });
+
+  return "M" + p[0] + "C" + p[1] + " " + p[2] + " " + p[3];
+};
+
+pageflow.sitemap.followPath.points = function(d) {
+  var start, p1, p2, end;
+  var options = pageflow.sitemap.settings;
+
+  start = {
+    x: d.source.x,
+    y: d.source.y + options.page.width / 2
+  };
+  p1 = start;
+
+  p2 = {
+    x: d.target.x,
+    y: d.target.y - options.page.width / 2 - options.arrowSize - 20
+  };
+  end = {
+    x: d.target.x,
+    y: d.target.y - options.page.width / 2 - options.arrowSize
+  };
+
+  return {
+    start: start,
+    p1: p1,
+    p2: p2,
+    end: end
+  };
+};

data/app/assets/javascripts/pageflow/sitemap/editor/d3/paths/linkpath.js

@@ -0,0 +1,64 @@
+/*global options, sitemap*/
+
+// path generator to be used in d3 attrib function for path element
+// path.attr('d', sitemap.linkpath);
+sitemap.linkpath = function(d) {
+  var points = sitemap.linkpath.points(d);
+
+  var p = [points.start, points.p1, points.p2, points.end].map(function(d) {
+    return [d.x, d.y];
+  });
+
+  return "M" + p[0] + "C" + p[1] + " " + p[2] + " " + p[3];
+};
+
+sitemap.linkpath.points = function(d) {
+  var deltaX = d.source.x - d.target.x;
+  var deltaY = d.source.y - d.target.y;
+
+  var start = { x: d.source.x, y: d.source.y + 5},
+      p1 = { x: d.source.x, y: d.source.y + 5},
+      p2 = { x: d.target.x, y: d.target.y - 5},
+      end = { x: d.target.x, y: d.target.y - 5};
+
+  var horizontalMargin = options.page.horizontalMargin * 2;
+
+  var offsetStart = d.source.width / 2,
+      offsetEnd = d.target.width / 2 + options.arrowSize;
+
+  // start of path
+  if (deltaX > options.page.width) {
+    // path from left to right
+    start.x -= offsetStart;
+    p1.x -= offsetStart + horizontalMargin;
+
+  }
+  else {
+    // path from right to left
+    start.x += offsetStart;
+    p1.x += offsetStart + horizontalMargin;
+  }
+
+  if (deltaX === 0 && deltaY === 0) {
+    p1 = p2 = end = start;
+  }
+  else {
+    if (deltaX < -options.page.width) {
+      // path from right to left
+      end.x -= offsetEnd;
+      p2.x -= offsetEnd + horizontalMargin;
+    }
+    else {
+      // path from left to right
+      p2.x += offsetEnd + horizontalMargin;
+      end.x += offsetEnd;
+    }
+  }
+
+  return {
+    start: start,
+    p1: p1,
+    p2: p2,
+    end: end
+  };
+};

data/app/assets/javascripts/pageflow/sitemap/editor/d3/paths/successor_path.js

@@ -0,0 +1,49 @@
+pageflow.sitemap.successorPath = function(d) {
+  var points = sitemap.successorPath.points(d);
+
+  var p = [points.start, points.p1, points.p2, points.end].map(function(d) {
+    return [d.x, d.y];
+  });
+
+  return "M" + p[0] + "C" + p[1] + " " + p[2] + " " + p[3];
+};
+
+pageflow.sitemap.successorPath.points = function(d) {
+  var deltaX = d.source.x - d.target.x;
+  var deltaY = d.source.y - d.target.y;
+
+  var start = { x: d.source.x, y: d.source.y},
+      p1 = { x: d.source.x, y: d.source.y + 40},
+      p2 = { x: d.target.x, y: d.target.y - 40},
+      end = { x: d.target.x, y: d.target.y};
+
+  var offsetStart = d.source.height - pageflow.sitemap.settings.page.height / 2 - 25,
+      offsetEnd = d.target.height / 2 + pageflow.sitemap.settings.arrowSize;
+
+  start.y += offsetStart;
+  p1.y += offsetStart;
+
+  if (deltaX === 0 && deltaY === 0) {
+    p1 = p2 = end = start;
+  }
+  else {
+    end.y -= offsetEnd;
+    p2.y -= offsetEnd;
+
+    if (deltaX > 0) {
+      end.x += 15;
+      p2.x += 15;
+    }
+    else {
+      end.x -= 15;
+      p2.x -= 15;
+    }
+  }
+
+  return {
+    start: start,
+    p1: p1,
+    p2: p2,
+    end: end
+  };
+};

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

@@ -0,0 +1,33 @@
+pageflow.sitemap.utils = {
+  size: function(selection, w, h) {
+    selection
+      .attr('width', w)
+      .attr('height', h);
+  },
+
+  translate: function(x, y) {
+    return 'translate(' + x + ',' + y + ')';
+  },
+
+  fn: {
+    d: function(property) {
+      return function(d) {
+        return d[property];
+      };
+    },
+
+    translate: function(x, y) {
+      return function(d) {
+        return 'translate(' + d[x] + ',' + d[y] + ')';
+      };
+    },
+
+    trigger: function(fn) {
+      return function(d) {
+        if (typeof fn === 'function') {
+          fn.apply(this, arguments);
+        }
+      };
+    }
+  }
+};