-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathcompositor.json
142 lines (142 loc) · 18.5 KB
/
compositor.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
{
"name": "zaboco/elm-draggable",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "Elm Draggable",
"branch": "",
"style": {
"name": "Default",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/BannerHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
"fontWeight": 400,
"bold": 600,
"lineHeight": 1.5,
"typeScale": [
72,
48,
24,
20,
16,
14,
12
],
"monospace": "Menlo, monospace",
"heading": {
"fontFamily": null,
"fontStyle": null,
"fontWeight": 600,
"lineHeight": 1.25,
"textTransform": null,
"letterSpacing": null
},
"h0": {},
"h1": {},
"h2": {},
"h3": {},
"h4": {},
"h5": {},
"h6": {},
"alternativeText": {},
"space": [
0,
8,
16,
32,
48,
64,
96
],
"layout": {
"maxWidth": 1024,
"centered": false
},
"colors": {
"text": "#111",
"background": "#fff",
"primary": "#08e",
"secondary": "#059",
"highlight": "#e08",
"border": "#ddd",
"muted": "#eee"
},
"border": {
"width": 1,
"radius": 2
},
"link": {},
"button": {
"hover": {
"boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
}
},
"input": {},
"body": {
"margin": 0
},
"breakpoints": {
"xs": "@media screen and (max-width:40em)",
"sm": "@media screen and (min-width:40em)",
"md": "@media screen and (min-width:52em)",
"lg": "@media screen and (min-width:64em)"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "http://package.elm-lang.org/packages/zaboco/elm-draggable/latest",
"text": "Home"
},
{
"href": "https://github.com/zaboco/elm-draggable",
"text": "GitHub"
}
]
},
{
"component": "header",
"heading": "elm-draggable",
"subhead": "An easy way to make DOM elements draggable",
"children": [
{
"component": "ui/TweetButton",
"text": "elm-draggable: An easy way to make DOM elements draggable",
"url": "http://package.elm-lang.org/packages/zaboco/elm-draggable/latest"
},
{
"component": "ui/GithubButton",
"user": "zaboco",
"repo": "elm-draggable"
}
]
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n\n<p><a href=\"http://elm-lang.org\"><img src=\"https://img.shields.io/badge/elm-v0.19-blue.svg?style=flat-square\"></a>\n<a href=\"https://travis-ci.org/zaboco/elm-draggable\"><img src=\"https://travis-ci.org/zaboco/elm-draggable.svg?branch=master\"></a></p>\n<h2>Install</h2>\n<p>Have <a href=\"https://guide.elm-lang.org/install.html\">elm installed</a>.</p>\n<pre>elm install zaboco/elm-draggable</pre><h2>Live examples</h2>\n<ul>\n<li><a href=\"https://zaboco.github.io/elm-draggable/basic.html\">Basic</a> / <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/BasicExample.elm\">Code</a></li>\n<li><a href=\"https://zaboco.github.io/elm-draggable/custom.html\">Custom events</a> / <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/CustomEventsExample.elm\">Code</a></li>\n<li><a href=\"https://zaboco.github.io/elm-draggable/constraints.html\">Constraints - restrict dragging to one axis at a time</a> / <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/ConstraintsExample.elm\">Code</a></li>\n<li><a href=\"https://zaboco.github.io/elm-draggable/pan-and-zoom.html\">Pan & Zoom - drag to pan & scroll to zoom</a> / <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/PanAndZoomExample.elm\">Code</a></li>\n<li><a href=\"https://zaboco.github.io/elm-draggable/multiple.html\">Multiple Targets</a> / <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/MultipleTargetsExample.elm\">Code</a></li>\n</ul>\n<h2>Usage</h2>\n<p>This library is meant to be easy to use, by keeping its internal details hidden and only communicating to the parent application by emitting <a href=\"http://faq.elm-community.org/#how-do-i-generate-a-new-message-as-a-command\"><code>Event</code> messages</a>. So, each time the internals change and something relevant happens (such as "started dragging", "dragged at", etc.), a new message is sent as a <code>Cmd</code> and handled in the main <code>update</code> function. To better understand how this works, see the snippets below and also the <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/\">working examples</a>.</p>\n<h3>Basic</h3>\n<p>In order to make a DOM element draggable, you'll need to:</p>\n<h4>1. Import this library</h4>\n<pre><span class=\"hljs-keyword\">import</span> Draggable</pre><h4>2. Define your model</h4>\n<p>Include:</p>\n<ul>\n<li>The element's position.</li>\n<li>The internal <code>Drag</code> state. Note that, for simplicity, the model entry holding this state <strong>must</strong> be called <code>drag</code>, since the update function below follows this naming convention. A future update could allow using custom field names. Please note that for the sake of example, we are specifying <code>String</code> as the type to tag draggable elements with. If you have only one such element, <code>()</code> might be a better type.<pre><span class=\"hljs-keyword\">type</span> <span class=\"hljs-keyword\">alias</span> <span class=\"hljs-type\">Model</span> =\n { position : ( <span class=\"hljs-type\">Int</span>, <span class=\"hljs-type\">Int</span> )\n , drag : <span class=\"hljs-type\">Draggable</span>.<span class=\"hljs-type\">State</span> <span class=\"hljs-type\">String</span>\n }</pre></li>\n</ul>\n<h4>3. Initialize the <code>Drag</code> state and the element's position</h4>\n<pre>initModel : Model\ninitModel =\n { position = ( 0, 0 )\n , drag = Draggable.init\n }</pre><h4>4. Define the message types that will be handled by your application</h4>\n<ul>\n<li><code>OnDragBy</code> is for actually updating the position, taking a <code>Draggable.Delta</code> as an argument. <code>Delta</code> is just an alias for a tuple of <code>(Float, Float)</code> and it represents the distance between two consecutive drag points.</li>\n<li><code>DragMsg</code> is for handling internal <code>Drag</code> state updates.<pre><span class=\"hljs-keyword\">type</span> <span class=\"hljs-type\">Msg</span>\n = <span class=\"hljs-type\">OnDragBy</span> <span class=\"hljs-type\">Draggable</span>.<span class=\"hljs-type\">Delta</span>\n | <span class=\"hljs-type\">DragMsg</span> (<span class=\"hljs-type\">Draggable</span>.<span class=\"hljs-type\">Msg</span> <span class=\"hljs-type\">String</span>)</pre></li>\n</ul>\n<h4>5. Setup the config used when updating the <code>Drag</code> state</h4>\n<p>For the simplest case, you only have to provide a handler for <code>onDragBy</code>:</p>\n<pre>dragConfig : Draggable.Config String Msg\ndragConfig =\n Draggable.basicConfig OnDragBy</pre><h4>6. Your update function must handle the messages declared above</h4>\n<ul>\n<li>For <code>OnDragBy</code>, which will be emitted when the user drags the element, the new position will be computed using the <code>Delta</code> <code>(dx, dy)</code></li>\n<li><p><code>DragMsg</code> will be forwarded to <code>Draggable.update</code> which takes care of both updating the <code>Drag</code> state and sending the appropriate event commands. In order to do that, it receives the <code>dragConfig</code>. As mentioned above, this function assumes that the model has a <code>drag</code> field holding the internal <code>Drag</code> state.</p>\n<pre><span class=\"hljs-title\">update</span> : <span class=\"hljs-type\">Msg</span> -> <span class=\"hljs-type\">Model</span> -> ( <span class=\"hljs-type\">Model</span>, <span class=\"hljs-type\">Cmd</span> <span class=\"hljs-type\">Msg</span> )\n<span class=\"hljs-title\">update</span> msg ({ position } <span class=\"hljs-keyword\">as</span> model) =\n <span class=\"hljs-keyword\">case</span> msg <span class=\"hljs-keyword\">of</span>\n <span class=\"hljs-type\">OnDragBy</span> ( dx, dy ) ->\n <span class=\"hljs-keyword\">let</span>\n ( x, y ) =\n position\n <span class=\"hljs-keyword\">in</span>\n { model | position = ( x + dx, y + dy ) } ! []\n\n <span class=\"hljs-type\">DragMsg</span> dragMsg ->\n <span class=\"hljs-type\">Draggable</span>.update dragConfig dragMsg model</pre></li>\n</ul>\n<h4>7. In order to keep track of the mouse events, you must include the relevant subscriptions</h4>\n<pre><span class=\"hljs-title\">subscriptions</span> : <span class=\"hljs-type\">Model</span> -> <span class=\"hljs-type\">Sub</span> <span class=\"hljs-type\">Msg</span>\n<span class=\"hljs-title\">subscriptions</span> { drag } =\n <span class=\"hljs-type\">Draggable</span>.subscriptions <span class=\"hljs-type\">DragMsg</span> drag</pre><h4>8. Triggering drag</h4>\n<p>Inside your <code>view</code> function, you must somehow make the element draggable. You do that by adding a trigger for the <code>mousedown</code> event. You must also specify a <code>key</code> for that element. This can be useful when there are multiple drag targets in the same view.</p>\n<p>Of course, you'll also have to style your DOM element such that it reflects its moving position (with <code>top: x; left: y</code> or <a href=\"http://www.w3schools.com/css/css3_2dtransforms.asp\"><code>transform: translate</code></a>)</p>\n<pre><span class=\"hljs-title\">view</span> : <span class=\"hljs-type\">Model</span> -> <span class=\"hljs-type\">Html</span> <span class=\"hljs-type\">Msg</span>\n<span class=\"hljs-title\">view</span> { position } =\n <span class=\"hljs-type\">Html</span>.div\n [ <span class=\"hljs-type\">Draggable</span>.mouseTrigger <span class=\"hljs-string\">"my-element"</span> <span class=\"hljs-type\">DragMsg</span>\n <span class=\"hljs-comment\">-- , Html.Attributes.style (someStyleThatSetsPosition position)</span>\n ]\n [ <span class=\"hljs-type\">Html</span>.text <span class=\"hljs-string\">"Drag me"</span> ]</pre><p>For working demos, see the <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/BasicExample.elm\">basic example</a> or the <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/MultipleTargetsExample.elm\">examples with multiple targets</a></p>\n<h4>9. Triggering on touch</h4>\n<p>If you want to trigger drags on touch events (i.e. on mobile platforms) as well\nas mouse events, you need to add <code>touchTriggers</code> to your elements. Building on\nthe previous example, it looks like this.</p>\n<pre><span class=\"hljs-title\">view</span> : <span class=\"hljs-type\">Model</span> -> <span class=\"hljs-type\">Html</span> <span class=\"hljs-type\">Msg</span>\n<span class=\"hljs-title\">view</span> { position } =\n <span class=\"hljs-type\">Html</span>.div\n [ <span class=\"hljs-type\">Draggable</span>.mouseTrigger <span class=\"hljs-string\">"my-element"</span> <span class=\"hljs-type\">DragMsg</span>\n <span class=\"hljs-comment\">-- , Html.Attributes.style (someStyleThatSetsPosition position)</span>\n ] ++ (<span class=\"hljs-type\">Draggable</span>.touchTriggers <span class=\"hljs-string\">"my-element"</span> <span class=\"hljs-type\">DragMsg</span>)\n [ <span class=\"hljs-type\">Html</span>.text <span class=\"hljs-string\">"Drag me"</span> ]</pre><p>The\n<a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/BasicExample.elm\">basic example</a> demonstrates\nthis as well.</p>\n<h3>Advanced</h3>\n<h4>Custom config</h4>\n<p>Besides tracking the mouse moves, this library can also track all the other associated events related to dragging. But, before enumerating these events, it's import to note that an element is not considered to be dragging if the mouse was simply clicked (without moving). That allows tracking both <code>click</code> and <code>drag</code> events:</p>\n<ul>\n<li>"mouse down" + "mouse up" = "click"</li>\n<li>"mouse down" + "mouse moves" + "mouse up" = "drag"</li>\n</ul>\n<p>So, the mouse events are:</p>\n<ul>\n<li><code>onMouseDown</code> - on mouse press.</li>\n<li><code>onDragStart</code> - on the first mouse move after pressing.</li>\n<li><code>onDragBy</code> - on every mouse move.</li>\n<li><code>onDragEnd</code> - on releasing the mouse after dragging.</li>\n<li><code>onClick</code> - on releasing the mouse without dragging.</li>\n</ul>\n<p>All of these events are optional, and can be provided to <code>Draggable.customConfig</code> using an API similar to the one used by <code>VirtualDom.node</code> to specify the <code>Attribute</code>s. For example, if we want to handle all the events, we define the <code>config</code> like:</p>\n<pre><span class=\"hljs-keyword\">import</span> Draggable\n<span class=\"hljs-keyword\">import</span> Draggable.Events <span class=\"hljs-keyword\">exposing</span> (onClick, onDragBy, onDragEnd, onDragStart, onMouseDown)\n\n<span class=\"hljs-title\">dragConfig</span> : <span class=\"hljs-type\">Draggable</span>.<span class=\"hljs-type\">Config</span> <span class=\"hljs-type\">String</span> <span class=\"hljs-type\">Msg</span>\n<span class=\"hljs-title\">dragConfig</span> =\n <span class=\"hljs-type\">Draggable</span>.customConfig\n [ onDragStart <span class=\"hljs-type\">OnDragStart</span>\n , onDragEnd <span class=\"hljs-type\">OnDragEnd</span>\n , onDragBy <span class=\"hljs-type\">OnDragBy</span>\n , onClick <span class=\"hljs-type\">CountClick</span>\n , onMouseDown (<span class=\"hljs-type\">SetClicked</span> <span class=\"hljs-type\">True</span>)\n ]</pre><p><strong>Note</strong>: If we need to handle <code>mouseup</code> after either a <code>drag</code> or a <code>click</code>, we can use the <code>DOM</code> event handler <code>onMouseUp</code> from <code>Html.Events</code> or <code>Svg.Events</code>.</p>\n<p>See <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/CustomEventsExample.elm\">the full example</a></p>\n<h4>Custom Delta</h4>\n<p>By default, <code>OnDragBy</code> message will have a <code>Draggable.Delta</code> parameter, which, as we saw, is just an alias for <code>(Float, Float)</code>. However, there are situations when we would like some other data type for representing our <code>delta</code>.</p>\n<p>Luckily, that's pretty easy using function composition. For example, we can use a <a href=\"https://package.elm-lang.org/packages/elm-explorations/linear-algebra/1.0.3/Math-Vector2#Vec2\">Vec2</a> type from the <code>linear-algebra</code> library, which provides handy function like <code>translate</code>, <code>scale</code> and <code>negate</code>.</p>\n<pre><span class=\"hljs-keyword\">import</span> Math.Vector2 <span class=\"hljs-keyword\">as</span> Vector2 <span class=\"hljs-keyword\">exposing</span> (<span class=\"hljs-type\">Vec2</span>)\n\n<span class=\"hljs-keyword\">type</span> <span class=\"hljs-type\">Msg</span>\n = <span class=\"hljs-type\">OnDragBy</span> <span class=\"hljs-type\">Vec2</span>\n<span class=\"hljs-comment\">-- | ...</span>\n\n<span class=\"hljs-title\">dragConfig</span> : <span class=\"hljs-type\">Draggable</span>.<span class=\"hljs-type\">Config</span> <span class=\"hljs-type\">Msg</span>\n<span class=\"hljs-title\">dragConfig</span> =\n <span class=\"hljs-type\">Draggable</span>.basicConfig (<span class=\"hljs-type\">OnDragBy</span> << (\\( dx, dy ) -> <span class=\"hljs-type\">Vector2</span>.vec2 dx dy))</pre><p>There is actually <a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/PanAndZoomExample.elm\">an example right for this use-case</a></p>\n<h4>Custom mouse trigger</h4>\n<p>There are cases when we need some additional information (e.g. mouse offset) about the <code>mousedown</code> event which triggers the drag. For these cases, there is an advanced <code>customMouseTrigger</code> which also takes a JSON <code>Decoder</code> for the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent\"><code>MouseEvent</code></a>.</p>\n<pre><span class=\"hljs-keyword\">import</span> Json.Decode <span class=\"hljs-keyword\">as</span> Decode <span class=\"hljs-keyword\">exposing</span> (<span class=\"hljs-type\">Decoder</span>)\n\n<span class=\"hljs-keyword\">type</span> <span class=\"hljs-type\">Msg</span>\n = <span class=\"hljs-type\">CustomMouseDown</span> <span class=\"hljs-type\">Draggable</span>.<span class=\"hljs-type\">Msg</span> (<span class=\"hljs-type\">Float</span>, <span class=\"hljs-type\">Float</span>)\n<span class=\"hljs-comment\">-- | ...</span>\n\n<span class=\"hljs-title\">update</span> msg model =\n <span class=\"hljs-keyword\">case</span> msg <span class=\"hljs-keyword\">of</span>\n <span class=\"hljs-type\">CustomMouseDown</span> dragMsg startPoint ->\n { model | startPoint = startPoint }\n |> <span class=\"hljs-type\">Draggable</span>.update dragConfig dragMsg\n\n<span class=\"hljs-title\">view</span> { scene } =\n <span class=\"hljs-type\">Svg</span>.svg\n [ <span class=\"hljs-type\">Draggable</span>.customMouseTrigger mouseOffsetDecoder <span class=\"hljs-type\">CustomMouseDown</span>\n<span class=\"hljs-comment\">-- , ...</span>\n ]\n []\n\n<span class=\"hljs-title\">mouseOffsetDecoder</span> : <span class=\"hljs-type\">Decoder</span> (<span class=\"hljs-type\">Float</span>, <span class=\"hljs-type\">Float</span>)\n<span class=\"hljs-title\">mouseOffsetDecoder</span> =\n <span class=\"hljs-type\">Decode</span>.map2 (,)\n (<span class=\"hljs-type\">Decode</span>.field <span class=\"hljs-string\">"offsetX"</span> <span class=\"hljs-type\">Decode</span>.float)\n (<span class=\"hljs-type\">Decode</span>.field <span class=\"hljs-string\">"offsetY"</span> <span class=\"hljs-type\">Decode</span>.float)</pre><p><a href=\"https://github.com/zaboco/elm-draggable/blob/master/examples/FreeDrawingExample.elm\">Full example</a></p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/zaboco/elm-draggable",
"text": "GitHub"
},
{
"href": "https://github.com/zaboco",
"text": "zaboco"
}
]
}
]
}