{"title":"$:/plugins/tiddlywiki/cecily","name":"Cecily","description":"Zoomable storyview (Cecily)","list":"readme","version":"5.1.22","plugin-type":"plugin","dependents":"","type":"application/json","tiddlers":{"$:/plugins/tiddlywiki/cecily/cecily.js":{"title":"$:/plugins/tiddlywiki/cecily/cecily.js","text":"/*\\\ntitle: $:/plugins/tiddlywiki/cecily/cecily.js\ntype: application/javascript\nmodule-type: storyview\n\nPositions tiddlers on a 2D map\n\n\\*/\n(function(){\n\n/*jslint node: true, browser: true */\n/*global $tw: false */\n\"use strict\";\n\nvar CecilyStoryView = function(listWidget) {\n\tvar self = this;\n\tthis.listWidget = listWidget;\n\t// Load the map\n\tthis.loadMap();\n\t// Position the existing tiddlers\n\t$tw.utils.each(this.listWidget.children,function(itemWidget,index) {\n\t\tvar domNode = itemWidget.findFirstDomNode();\n\t\tdomNode.style.position = \"absolute\";\n\t\tvar title = itemWidget.parseTreeNode.itemTitle;\n\t\tself.positionTiddler(title,domNode);\n\t});\n};\n\nCecilyStoryView.prototype.navigateTo = function(historyInfo) {\n\tvar listElementIndex = this.listWidget.findListItem(0,historyInfo.title);\n\tif(listElementIndex === undefined) {\n\t\treturn;\n\t}\n\tvar listItemWidget = this.listWidget.children[listElementIndex],\n\t\ttargetElement = listItemWidget.findFirstDomNode();\n\t// Scroll the node into view\n\tthis.listWidget.dispatchEvent({type: \"tm-scroll\", target: targetElement});\n};\n\nCecilyStoryView.prototype.insert = function(widget) {\n\tvar domNode = widget.findFirstDomNode(),\n\t\tduration = $tw.utils.getAnimationDuration();\n\t// Make the newly inserted node position absolute\n\t$tw.utils.setStyle(domNode,[\n\t\t{position: \"absolute\"},\n\t\t{transition: \"\"},\n\t\t{opacity: \"0.0\"}\n\t]);\n\t// Position it\n\tvar title = widget.parseTreeNode.itemTitle;\n\tthis.positionTiddler(title,domNode);\n\t$tw.utils.forceLayout(domNode);\n\t// Animate it in\n\t$tw.utils.setStyle(domNode,[\n\t\t{transition: \"opacity \" + duration + \"ms ease-out\"},\n\t\t{opacity: \"1.0\"}\n\t]);\n};\n\nCecilyStoryView.prototype.remove = function(widget) {\n\tvar targetElement = widget.findFirstDomNode(),\n\t\tduration = $tw.utils.getAnimationDuration();\n\t// Remove the widget at the end of the transition\n\tsetTimeout(function() {\n\t\twidget.removeChildDomNodes();\n\t},duration);\n\t// Animate the closure\n\t$tw.utils.setStyle(targetElement,[\n\t\t{transition: \"none\"},\n\t\t{opacity: \"1.0\"}\n\t]);\n\t$tw.utils.forceLayout(targetElement);\n\t$tw.utils.setStyle(targetElement,[\n\t\t{transition: $tw.utils.roundTripPropertyName(\"transform\") + \" \" + duration + \"ms ease-in-out, \" +\n\t\t\t\t\t\"opacity \" + duration + \"ms ease-in-out\"},\n\t\t{transform: \"scale(0.01)\"},\n\t\t{opacity: \"0.0\"}\n\t]);\n};\n\n/*\nLoad the current map\n*/\nCecilyStoryView.prototype.loadMap = function() {\n\tthis.map = this.listWidget.wiki.getTiddlerData(this.getMapTiddlerTitle(),{\n\t\tpositions: {},\n\t\tnewTiddlerPosition: {x: 0, y: 0},\n\t\twidth: parseInt(this.listWidget.getAttribute(\"cecily-width\",\"600\"),10)\n\t});\n};\n\nCecilyStoryView.prototype.getMapTiddlerTitle = function() {\n\treturn this.listWidget.getAttribute(\"cecily-map\",\"$:/TiddlerMap\");\n};\n\n/*\nPosition a tiddler according to the map\n*/\nCecilyStoryView.prototype.positionTiddler = function(title,domNode) {\n\tvar pos = this.lookupTiddlerInMap(title,domNode),\n\t\tscale = pos.w/domNode.offsetWidth;\n\t$tw.utils.setStyle(domNode,[\n\t\t{width: this.map.width + \"px\"},\n\t\t{transformOrigin: \"0% 0%\"},\n\t\t{transform: \"translateX(\" + pos.x + \"px) translateY(\" + pos.y + \"px) scale(\" + scale + \") translateX(-50%) rotate(\" + (pos.r || 0) + \"deg) translateX(50%)\"}\n\t]);\n};\n\n// Get the position of a particular tiddler\nCecilyStoryView.prototype.lookupTiddlerInMap = function(title,domNode) {\n\t// If this is a draft tiddler then look for the position of the original tiddler\n\tvar tiddler = this.listWidget.wiki.getTiddler(title);\n\tif(tiddler) {\n\t\tvar draftOf = tiddler.fields[\"draft.of\"];\n\t\tif(draftOf && this.map.positions[draftOf]) {\n\t\t\treturn this.map.positions[draftOf];\n\t\t}\n\t}\n\t// Try looking the target tiddler up in the map\n\tif(this.map.positions[title]) {\n\t\treturn this.map.positions[title];\n\t}\n\t// If the tiddler wasn't in the map we'll have to compute it\n\tvar newPosition;\n\tswitch(this.map.positionNew) {\n\t\tdefault: // \"right\"\n\t\t\tnewPosition = {\n\t\t\t\tx: this.map.newTiddlerPosition.x,\n\t\t\t\ty: this.map.newTiddlerPosition.y,\n\t\t\t\tw: 200,\n\t\t\t\th: 200\n\t\t\t};\n\t\t\tthis.map.newTiddlerPosition.x += newPosition.w * 1.1;\n\t\t\tbreak;\n\t}\n\t// A default position\n\tnewPosition = newPosition || {x: 0,y: 0,w: 100,h: 100};\n\t// Save the position back to the map\n\tthis.map.positions[title] = newPosition;\n\treturn newPosition;\n};\n\nexports.cecily = CecilyStoryView;\n\n})();\n","type":"application/javascript","module-type":"storyview"},"$:/plugins/tiddlywiki/cecily/readme":{"title":"$:/plugins/tiddlywiki/cecily/readme","text":"This experimental plugin provides a new story visualisation that displays individual tiddlers as resizable tiles on an infinite canvas.\n\nCecily is based on an earlier plugin for TiddlyWiki Classic: http://jermolene.com/cecily\n\nCecily is currently in the early stages of development with little functionality yet implemented.\n\n[[Source code|https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/cecily]]\n"},"$:/core/images/storyview-cecily":{"title":"$:/core/images/storyview-cecily","tags":"$:/tags/Image","text":"\n \n \n \n"}}}