First draft for docs

This commit is contained in:
Syrus Akbary 2015-11-21 10:33:29 -08:00
parent 4677677ee9
commit 0cf6cd65c7
27 changed files with 3338 additions and 3 deletions

View File

@ -6,13 +6,23 @@ python:
- 3.4
- 3.5
- pypy
cache: pip
cache:
- pip
- directories:
- .cache/pip/
- docs/node_modules
install:
- pip install --cache-dir $HOME/.cache/pip pytest pytest-cov coveralls flake8 six blinker pytest-django
- pip install --cache-dir $HOME/.cache/pip -e .[django]
- pip install --download-cache .cache/pip/ pytest pytest-cov coveralls flake8 six
blinker pytest-django
- pip install --download-cache .cache/pip/ -e .[django]
- python setup.py develop
script:
- py.test --cov=graphene
- flake8
after_success:
- coveralls
- cd docs && npm run deploy
env:
matrix:
secure: e0iu1FvUcGNcsKEDsGQiGTJZMJ8tJMAQ+c+KCuh7I11likoJbninI9FX85efMglG93Xu4GtND1rUwKWnANM94Cz5IrLrT9ga62Cg1sinbzD+JUOG9EobtmcYcLbfNvA1ybkZf4K0KvkYfH1XUxtL3v6jFI6lLjZ1vKa2M6i5t/38pjgUOOh9KlVGi+rqSp2TUsCyjZkMxE2Wwceen5N/B1yZJDn9yHPA+kiV2ScOMgZOuVMqQd0IAPcjhqTbNdaW2VjNQFtS8CQ8FOjJh9NepRAyA42oII7Aq65YzZbifzYL1eSPKKfUHHdc7Bs+vq1kGuaWz+XBqByZAQvw7OtpkecG+KrcO7XDV38y6z33vgCC5MPu9e0BZwITIvyuUOKmFA9vTAx/w963vBDSzHgskgqYtYswxzOoE55TS9tHsc5rgoSatEGW2VXyI8ytWpgkuluCNwT+/ZvNaQ33SCPTwN7mQGWx+DC+eyMBjI1sP9s4aYCaTggCSFNtwhRpQqqM/0HFa7hHDksK/zJhl4fhFUrbmyrJo6wm6Z7/s/WiSulk+zZkrLC9eBs1+XNtU7PzcmgfFmcsJnPGBmBF8WOa8WiX9hOn9DutBT4mLtlOod3YvU22U0Vwj2TjzhDvx8uyYCpDA03a/q9QjE4+klcI2Mw5UNhJsmTpCZQE06aHDKg=

3
docs/.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"stage": 0
}

29
docs/.gitignore vendored Normal file
View File

@ -0,0 +1,29 @@
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
public/

16
docs/README.md Normal file
View File

@ -0,0 +1,16 @@
# Graphene Docs
Docs for Graphene
## Installation
For running locally this docs. You have to execute
```bash
npm install -g gatsby && npm install
```
And then
```bash
gatsby develop
```

11
docs/app.js Normal file
View File

@ -0,0 +1,11 @@
exports.loadContext = function(callback) {
var context;
context = require.context('./pages', true);
if (module.hot) {
module.hot.accept(context.id, function() {
context = require.context('./pages', true);
return callback(context);
});
}
return callback(context);
};

7
docs/assets/icon.js Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
export default class Icon extends React.Component {
render() {
return <span {...this.props} src={null} dangerouslySetInnerHTML={{__html:this.props.src}} />
}
}

10
docs/assets/logo.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="logo"><g fill="none" fill-rule="evenodd"><path class="logo-path" d="M49.17 10.915L15.415 30.29l.058 39.252 34.633 20.082 33.345-18.95-.023-39.79-34.185 19.238" stroke="white" stroke-width="4.987"/>
<g transform="translate(41.5 3)"><ellipse cx="7.934" cy="7.97" rx="7.934" ry="7.97" fill="white"/></g>
<g transform="translate(8 22.482)"><ellipse cx="7.934" cy="7.97" rx="7.934" ry="7.97" fill="white"/></g>
<g transform="translate(8 62.33)"><ellipse cx="7.934" cy="7.97" rx="7.934" ry="7.97" fill="white"/></g>
<g transform="translate(42.382 81.813)"><ellipse cx="7.934" cy="7.97" rx="7.934" ry="7.97" fill="white"/></g>
<g transform="translate(75.882 62.33)"><ellipse cx="7.934" cy="7.97" rx="7.934" ry="7.97" fill="white"/></g>
<g transform="translate(75.882 22.482)"><ellipse cx="7.934" cy="7.97" rx="7.934" ry="7.97" fill="white"/></g>
<g transform="translate(42.382 41.964)"><ellipse cx="7.934" cy="7.97" rx="7.934" ry="7.97" fill="white"/></g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

1
docs/config.toml Normal file
View File

@ -0,0 +1 @@
siteTitle="Graphene"

212
docs/css/main.styl Normal file
View File

@ -0,0 +1,212 @@
@import 'nib'
@import 'jeet'
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,200,100&.css'
normalize-css()
$wrapper
center(960px, pad:20px)
.wrapper
@extend $wrapper
position relative
a, a:hover
text-decoration none
html, body
font-family "Helvetica Neue", Helvetica, Arial, sans-serif
font-weight 300
font-size 16px
color #606060
line-height 1.5
.header
clearfix()
position relative
text-align center
background: #DB594C;
background-image: radial-gradient(95% 101%, #E46643 5%, rgba(226,91,72,0.00) 100%)
.logo
width 42px
height @width
vertical-align middle
h1
max-width 380px
font-family 'Raleway', sans-serif
font-weight 200
font-size 42px
color #FFFFFF
line-height 49px
margin 80px auto 40px
z-index 110
.get-started
font-family 'Raleway'
display inline-block
margin 0 auto
font-size 13px
color #FFFFFF
padding 0 18px
text-transform uppercase
font-weight 600
line-height 15px
border 1px solid #FFFFFF
border-radius 2px
padding 12px 18px
z-index 111
position relative
&:hover
background white
color #E05B49
text-decoration none
.header-wrapper
@extend $wrapper
text-align left
padding-top 32px
padding-bottom 32px
position relative
z-index 100
.header-extended
padding-bottom 100px
.header-nav
margin-top 8px
a
font-family 'Raleway'
font-size 13px
color #FFFFFF
margin 0 16px
padding 0 2px
text-transform uppercase
font-weight 600
line-height 15px
.header-logo
font-family 'Raleway'
font-size 22px
color #FFFFFF
float left
font-weight 500
text-transform uppercase
text-decoration none
.header-nav
float right
.logo
path
stroke-dasharray 250
stroke-dashoffset 250
animation logo-dash .9s ease-in-out forwards
animation-delay .12s
g
ellipse
animation logo-dot .3s ease forwards
animation-fill-mode both
transform-origin 50% 50%
&:nth-child(2)
ellipse
animation-delay .1s
&:nth-child(3)
ellipse
animation-delay .2s
&:nth-child(4)
ellipse
animation-delay .3s
&:nth-child(5)
ellipse
animation-delay .4s
&:nth-child(6)
ellipse
animation-delay .5s
&:nth-child(7)
ellipse
animation-delay .6s
&:nth-child(8)
ellipse
animation-delay .7s
@keyframes logo-dash
to
stroke-dashoffset 0
@keyframes logo-dot
from
opacity 0.5
transform scale(0)
to
opacity 1
transform scale(1)
#header-background
z-index 0
display block
position absolute
width 100%
top 0
bottom 0
right 0
left 0
.particles-js-canvas-el
display block
opacity 0
position absolute
.starwars-example
background: #3C3C3C
display inline-block
position absolute
right 20px
top -100px
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
border-radius: 100px
font-size 13px
padding 17px 17px 17px 71px
width 226px
box-sizing border-box
color white
font-family 'Raleway'
font-weight 500
&:before
content: ''
display block
position absolute
left 0
top 0
height 32px
width 32px
image '../assets/starwars-icon.png'
.improve-document-link
@extend $wrapper
.markdown
.wrapper
margin-top 60px
h1, h2, h3, h4, h5, h6
font-family: 'Raleway';
font-weight 600
color #4A4A4A
strong
font-weight 500
margin-bottom 40px
.title
background: #F9F9F9;
padding 30px 0
h1
@extend $wrapper
font-family: 'Raleway';
font-size: 42px;
font-weight 200
color: #585858;
line-height: 49px;

26
docs/gatsby.config.js Normal file
View File

@ -0,0 +1,26 @@
var nib = require("nib");
var jeet = require("jeet");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = function(config, env) {
var IS_STATIC = env === 'static';
config.merge({
stylus: {
use: [nib(), jeet()]
}
});
if (IS_STATIC) {
config.plugin('extract-css', ExtractTextPlugin, ["app.css"]);
}
config.loader('stylus', function(cfg) {
cfg.test = /\.styl$/;
if (IS_STATIC) {
cfg.loader = ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader', { allChunks: true });
}
else {
cfg.loader = 'style-loader!css-loader!stylus-loader';
}
return cfg
});
return config;
};

25
docs/html.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import DocumentTitle from 'react-document-title';
export default class Html extends React.Component {
render() {
var title = this.props.title || DocumentTitle.rewind();
return (
<html lang={this.props.lang}>
<head>
<meta charSet="utf-8"/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
<meta name='viewport' content='width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
<title>{title}</title>
<link rel="shortcut icon" href={this.props.favicon}/>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600,200,100' rel='stylesheet' type='text/css' />
<link href='/app.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
<script src="/bundle.js"/>
</body>
</html>
);
}
}

25
docs/package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "graphene-docs",
"version": "1.0.0",
"description": "Graphene docs",
"main": "n/a",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm install -g gatsby && npm install",
"deploy": "npm run build"
},
"keywords": [
"graphene"
],
"license": "MIT",
"dependencies": {
"extract-text-webpack-plugin": "^0.9.1",
"jeet": "^6.1.2",
"nib": "^1.1.0",
"react": "^0.14.3",
"react-document-title": "^2.0.1",
"react-router": "^0.13.5",
"stylus-loader": "^1.4.2",
"webpack": "^1.12.9"
}
}

150
docs/pages/_header.js Normal file
View File

@ -0,0 +1,150 @@
var IN_BROWSER = typeof window != 'undefined';
import React from 'react';
if (IN_BROWSER) {
var glfx = require('../vendor/glfx.optim')
var particlesJS = require('../vendor/particles.js')
}
class Header extends React.Component {
update() {
if (!this.mounted) return;
var w = this.video.width;
var h = this.video.height;
if (window.devicePixelRatio > 1) {
w = w/2;
h = h/2;
}
this.texture._.initFromCanvas(w, h, this.video);
this.canvas.draw(this.texture).tiltShift(0, h*2/3, 10, h*2/3, 15, 200).update();
requestAnimationFrame(this.update.bind(this));
}
componentWillUnmount() {
this.mounted = false;
}
componentDidMount() {
if (!IN_BROWSER) return;
this.mounted = true;
new particlesJS('header-background', {
"particles": {
"number": {
"value": 36,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 8
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": .1,
"opacity_min": .1,
"sync": true
}
},
"size": {
"value": 2.2,
"random": false,
"anim": {
"enable": false,
"speed": .2,
"size_min": 2.44,
"sync": true
}
},
"line_linked": {
"enable": true,
"distance": 240,
"color": "#ffffff",
"opacity": .2,
"width": 3
},
"move": {
"enable": true,
"speed": 1.1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "bounce",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 73.08694910712113,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
var header_background = document.getElementById('header-background');
this.canvas = glfx.canvas();
this.video = header_background.children[0];
this.context = window.pJSDom[0].pJS.canvas.ctx;
this.texture = this.canvas.texture(this.video);
header_background.appendChild(this.canvas);
requestAnimationFrame(this.update.bind(this));
}
render() {
return (
<div id="header-background">
</div>
);
}
}
module.exports = Header;

44
docs/pages/_template.js Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import { RouteHandler, Link, State } from 'react-router';
import Icon from 'assets/icon'
import Header from './_header'
import logo from '!raw!assets/logo.svg'
import styles from '../css/main.styl'
class Template extends React.Component {
render() {
var path = this.props.page.path;
var isIndex = path == '/';
return (
<div>
<header className="header">
<div className="header-wrapper">
<Link className="header-logo" to="/">
<Icon src={logo} />
Graphene
</Link>
<nav className="header-nav">
<Link to="/docs/quickstart/">Get started</Link>
<Link to="/">Playground</Link>
<Link to="/">Docs</Link>
<Link to="/community/">Community</Link>
</nav>
</div>
{isIndex?
<div className="header-extended">
<h1>
GraphQL in Python<br />
made <strong>simple</strong>
</h1>
<Link to="/docs/quickstart/" className="get-started">Get Started</Link>
<Header />
</div>:null}
</header>
<RouteHandler {...this.props}/>
</div>
);
}
}
module.exports = Template;

25
docs/pages/community.md Normal file
View File

@ -0,0 +1,25 @@
---
layout: page
title: Community
active_tab: community
description: The biggest GraphQL Community in Python
---
Graphene is constantly developing thanks to an active volunteer community, There are many different places where you discuss Graphene, share your experiences or ask for help. Your feedback and participation are very welcome!
If you think working with Graphene is fun, there are many ways you can contribute to it. Please join us in the Slack community and help us shape the next generation APIs.
[![Public Slack Discussion](https://graphql-slack.herokuapp.com/badge.svg)](https://graphql-slack.herokuapp.com/)
## Our Repositories
- **GraphQL Core**: [Source Code] - [PyPI package]
- **GraphQL Relay**: [Source Code][1] - [PyPI package][2]
- **Graphene**: [Source Code][3] - [PyPI package][4]
[Source Code]: https://github.com/graphql-python/graphql-core
[PyPI package]: https://pypi.python.org/pypi/graphql-core
[1]: https://github.com/graphql-python/graphql-relay
[2]: https://pypi.python.org/pypi/graphql-relay
[3]: https://github.com/graphql-python/graphene
[4]: https://pypi.python.org/pypi/graphene

View File

@ -0,0 +1,125 @@
---
title: Django Quickstart Guide
active_tab: quickstart
description: A Quick guide to Graphene in Django
---
## Django Quickstart
In our previous quickstart page we created a very simple schema.
Now we will adapt the schema for our Django models.
## Project setup
```bash
# Create the project directory
mkdir tutorial
cd tutorial
# Create a virtualenv to isolate our package dependencies locally
virtualenv env
source env/bin/activate # On Windows use `env\Scripts\activate`
# Install Django and Graphene with Django support
pip install django
pip install graphene[django]
pip install django-graphiql
# Set up a new project with a single application
django-admin.py startproject tutorial . # Note the trailing '.' character
cd tutorial
django-admin.py startapp quickstart
```
Now sync your database for the first time:
```bash
python manage.py migrate
```
We'll also create an initial user named `admin` with a password of `password`.
```bash
python manage.py createsuperuser
```
Once you've set up a database and initial user created and ready to go, open up the app's directory and we'll get coding...
## Schema
Right, we'd better write some types then. Open `tutorial/quickstart/schema.py` and get typing.
```python
import graphene
from graphene.contrib.django import DjangoObjectType
from django.contrib.auth.models import User, Group
# Graphene will map automaticall the User model to UserType with
# the specified fields
class UserType(DjangoObjectType):
class Meta:
model = User
only_fields = ('username', 'email', 'groups')
class GroupType(DjangoObjectType):
class Meta:
model = User
only_fields = ('name', )
class Query(graphene.ObjectType):
all_users = graphene.List(UserType)
get_user = graphene.Field(UserType
id=graphene.String(required=True))
def resolve_all_users(self, args, info):
return User.objects.all()
def resolve_get_user(self, args, info):
return User.objects.get(id=args.get('id'))
schema = graphene.Schema(query=Query)
```
## Creating GraphQL and GraphiQL views
Okay, now let's wire up the GraphQL and GraphiQL urls. On to `tutorial/urls.py`...
```python
from django.conf.urls import url, include
from django.views.decorators.csrf import csrf_exempt
from graphene.contrib.django.views import GraphQLView
from tutorial.quickstart.schema import schema
# Wire up our GraphQL schema in /graphql.
# Additionally, we include GraphiQL view for querying easily our schema.
urlpatterns = [
url(r'^graphql', csrf_exempt(GraphQLView.as_view(schema=schema))),
url(r'^graphiql', include('django_graphiql.urls')),
]
```
## Testing our GraphQL schema
We're now ready to test the API we've built. Let's fire up the server from the command line.
```bash
python ./manage.py runserver
```
Go to [localhost:8080/graphiql](http://localhost:8080/graphiql) and type your first query!
```graphql
myQuery {
getUser(id:"1") {
username
}
}
```

View File

@ -0,0 +1,58 @@
---
title: Quickstart Guide
active_tab: quickstart
description: A Quick guide to Graphene
---
Graphene is a powerful framework for creating GraphQL schemas easily in Python.
## Requirements
- Python (2.6.5+, 2.7, 3.2, 3.3, 3.4, 3.5, pypy)
- Graphene (0.4+)
## Project setup
```bash
# Create the project directory
mkdir tutorial
cd tutorial
# Create a virtualenv to isolate our package dependencies locally
virtualenv env
source env/bin/activate # On Windows use `env\Scripts\activate`
pip install graphene
```
## Creating a basic Schema
A GraphQL schema describes your data model, and provides a GraphQL server with an associated set of resolve methods that know how to fetch data.
We are going to create a very simple schema, with a `Query` with only one field: `hello`. And when we query it should return 'World'.
```python
import graphene
class Query(graphene.ObjectType):
hello = graphene.String()
def resolve_hello(self, args, info):
return 'World'
schema = graphene.Schema(query=Query)
```
## Querying
Then, we can start querying our schema:
```python
result = schema.execute('{ hello }')
print result.data['hello'] # "World"
```
Congrats! You got your first graphene schema working!

View File

@ -0,0 +1,49 @@
# Interfaces
An Interface contains the essential fields that will be shared among multiple ObjectTypes.
The basics:
- Each Interface is a Python class that inherits from graphene.Interface.
- Each attribute of the Interface represents a GraphQL field.
## Quick example
This example model defines a Character, which has a name. `Human` and `Droid` inherit from it.
```python
import graphene
# Character is an Interface
class Character(graphene.Interface):
name = graphene.String()
# Human is an ObjectType, as inherits an interface
class Human(Character):
born_in = graphene.String()
# Droid is an ObjectType, as inherits an interface
class Droid(Character):
function = graphene.String()
```
**name** is a field in the `Character` interface that will be in both `Human` and `Droid` ObjectTypes (as those inherit from Character). Each ObjectType also define extra fields at the same time.
The above types would have the following representation in a schema:
```graphql
interface Character {
name: String
}
type Droid implements Character {
name: String
function: String
}
type Human implements Character {
name: String
bornIn: String
}
```

View File

@ -0,0 +1,67 @@
# Mutations
A Mutation is a special ObjectType that define also an Input.
## Quick example
This example model defines a Mutation:
```python
import graphene
class CreatePerson(graphene.Mutation):
class Input:
name = graphene.String()
ok = graphene.String()
person = graphene.Field('Person')
@classmethod
def mutate(cls, args, info):
person = Person(name=args.get('name'))
ok = True
return CreatePerson(person=person, ok=ok)
```
**person** and **ok** are the output fields of the Mutation when is resolved.
**Input** attributes are the arguments that the Mutation needs for resolving. **mutate** is the function that will be applied once the mutation is called.
So, we can finish our schema like this:
```python
# ... the Mutation Class
class Person(graphene.ObjectType):
name = graphene.String()
class MyMutations(graphene.ObjectType):
create_person = graphene.Field(CreatePerson)
schema = graphene.Schema(mutation=MyMutations)
```
## Executing the Mutation
Then, if we query (`schema.execute(query_str)`) the following:
```graphql
mutation myFirstMutation {
createPerson(name:"Peter") {
person {
name
}
ok
}
}
```
We should receive:
```json
{
"createPerson": {
"person" : {
name: "Peter"
},
"ok": true
}
}

View File

@ -0,0 +1,45 @@
# ObjectTypes
An ObjectType is the single, definitive source of information about your data. It contains the essential fields and behaviors of the data youre querying.
The basics:
- Each ObjectType is a Python class that inherits graphene.ObjectType or inherits an implemented [interface](/docs/interface).
- Each attribute of the ObjectType represents a GraphQL field.
## Quick example
This example model defines a Person, which has a first_name and last_name:
```python
import graphene
class Person(graphene.ObjectType):
first_name = graphene.String()
last_name = graphene.String()
full_name = graphene.String()
def resolve_full_name(self, args, info):
return '{} {}'.format(self.first_name, self.last_name)
```
**first_name** and **last_name** are fields of the ObjectType. Each field is specified as a class attribute, and each attribute maps to a GraphQL field.
The above `Person` ObjectType would have the following representation in a schema:
```graphql
type Person {
firstName: String
lastName: String
fullName: String
}
```
## Instances as containers
Graphene `ObjectType`s could act as containers too.
So with the previous example you could do.
```python
peter = Person(first_name='Peter', last_name='Griffin')
```

14
docs/pages/index.md Normal file
View File

@ -0,0 +1,14 @@
---
path: /
---
<a class="starwars-example" href="http://swapi.graphene-python.org/">Check our starwars API example!</a>
## About Graphene
Graphene is a Python library for building GraphQL schemas/types fast and easily.
**What is GraphQL?** A GraphQL query is a string interpreted by a server that returns data in a specified format.
- **Easy to use:** Graphene helps you use GraphQL in Python without effort.
- **Relay:** Graphene has builtin support for Relay
- **Django:** Automatic *Django model* mapping to Graphene Types.

796
docs/vendor/glfx.optim.js vendored Normal file
View File

@ -0,0 +1,796 @@
/*
* glfx.js
* http://evanw.github.com/glfx.js/
*
* Copyright 2011 Evan Wallace
* Released under the MIT license
*/
module.exports = function() {
function q(a, d, c) {
return Math.max(a, Math.min(d, c))
}
function w(b) {
return {
_: b,
loadContentsOf: function(b) {
a = this._.gl;
this._.loadContentsOf(b)
},
destroy: function() {
a = this._.gl;
this._.destroy()
}
}
}
function A(a) {
return w(r.fromElement(a))
}
function B(b, d) {
var c = a.UNSIGNED_BYTE;
if (a.getExtension("OES_texture_float") && a.getExtension("OES_texture_float_linear")) {
var e = new r(100, 100, a.RGBA, a.FLOAT);
try {
e.drawTo(function() {
c = a.FLOAT
})
} catch (g) {}
e.destroy()
}
this._.texture && this._.texture.destroy();
this._.spareTexture && this._.spareTexture.destroy();
this.width = b;
this.height = d;
this._.texture = new r(b, d, a.RGBA, c);
this._.spareTexture = new r(b, d, a.RGBA, c);
this._.extraTexture = this._.extraTexture || new r(0, 0, a.RGBA, c);
this._.flippedShader = this._.flippedShader || new h(null, "uniform sampler2D texture;varying vec2 texCoord;void main(){gl_FragColor=texture2D(texture,vec2(texCoord.x,1.0-texCoord.y));}");
this._.isInitialized = !0
}
function C(a, d, c) {
this._.isInitialized &&
a._.width == this.width && a._.height == this.height || B.call(this, d ? d : a._.width, c ? c : a._.height);
a._.use();
this._.texture.drawTo(function() {
h.getDefaultShader().drawRect()
});
return this
}
function D() {
this._.texture.use();
this._.flippedShader.drawRect();
return this
}
function f(a, d, c, e) {
(c || this._.texture).use();
this._.spareTexture.drawTo(function() {
a.uniforms(d).drawRect()
});
this._.spareTexture.swapWith(e || this._.texture)
}
function E(a) {
a.parentNode.insertBefore(this, a);
a.parentNode.removeChild(a);
return this
}
function F() {
var b = new r(this._.texture.width, this._.texture.height, a.RGBA, a.UNSIGNED_BYTE);
this._.texture.use();
b.drawTo(function() {
h.getDefaultShader().drawRect()
});
return w(b)
}
function G() {
var b = this._.texture.width,
d = this._.texture.height,
c = new Uint8Array(4 * b * d);
this._.texture.drawTo(function() {
a.readPixels(0, 0, b, d, a.RGBA, a.UNSIGNED_BYTE, c)
});
return c
}
function k(b) {
return function() {
a = this._.gl;
return b.apply(this, arguments)
}
}
function x(a, d, c, e, g, l, n, p) {
var m = c - g,
h = e - l,
f = n - g,
k = p - l;
g = a - c + g - n;
l =
d - e + l - p;
var q = m * k - f * h,
f = (g * k - f * l) / q,
m = (m * l - g * h) / q;
return [c - a + f * c, e - d + f * e, f, n - a + m * n, p - d + m * p, m, a, d, 1]
}
function y(a) {
var d = a[0],
c = a[1],
e = a[2],
g = a[3],
l = a[4],
n = a[5],
p = a[6],
m = a[7];
a = a[8];
var f = d * l * a - d * n * m - c * g * a + c * n * p + e * g * m - e * l * p;
return [(l * a - n * m) / f, (e * m - c * a) / f, (c * n - e * l) / f, (n * p - g * a) / f, (d * a - e * p) / f, (e * g - d * n) / f, (g * m - l * p) / f, (c * p - d * m) / f, (d * l - c * g) / f]
}
function z(a) {
var d = a.length;
this.xa = [];
this.ya = [];
this.u = [];
this.y2 = [];
a.sort(function(a, b) {
return a[0] - b[0]
});
for (var c = 0; c < d; c++) this.xa.push(a[c][0]), this.ya.push(a[c][1]);
this.u[0] = 0;
this.y2[0] = 0;
for (c = 1; c < d - 1; ++c) {
a = this.xa[c + 1] - this.xa[c - 1];
var e = (this.xa[c] - this.xa[c - 1]) / a,
g = e * this.y2[c - 1] + 2;
this.y2[c] = (e - 1) / g;
this.u[c] = (6 * ((this.ya[c + 1] - this.ya[c]) / (this.xa[c + 1] - this.xa[c]) - (this.ya[c] - this.ya[c - 1]) / (this.xa[c] - this.xa[c - 1])) / a - e * this.u[c - 1]) / g
}
this.y2[d - 1] = 0;
for (c = d - 2; 0 <= c; --c) this.y2[c] = this.y2[c] * this.y2[c + 1] + this.u[c]
}
function u(a, d) {
return new h(null, a + "uniform sampler2D texture;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 coord=texCoord*texSize;" +
d + "gl_FragColor=texture2D(texture,coord/texSize);vec2 clampedCoord=clamp(coord,vec2(0.0),texSize);if(coord!=clampedCoord){gl_FragColor.a*=max(0.0,1.0-length(coord-clampedCoord));}}")
}
function H(b, d) {
a.brightnessContrast = a.brightnessContrast || new h(null, "uniform sampler2D texture;uniform float brightness;uniform float contrast;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color.rgb+=brightness;if(contrast>0.0){color.rgb=(color.rgb-0.5)/(1.0-contrast)+0.5;}else{color.rgb=(color.rgb-0.5)*(1.0+contrast)+0.5;}gl_FragColor=color;}");
f.call(this, a.brightnessContrast, {
brightness: q(-1, b, 1),
contrast: q(-1, d, 1)
});
return this
}
function t(a) {
a = new z(a);
for (var d = [], c = 0; 256 > c; c++) d.push(q(0, Math.floor(256 * a.interpolate(c / 255)), 255));
return d
}
function I(b, d, c) {
b = t(b);
1 == arguments.length ? d = c = b : (d = t(d), c = t(c));
for (var e = [], g = 0; 256 > g; g++) e.splice(e.length, 0, b[g], d[g], c[g], 255);
this._.extraTexture.initFromBytes(256, 1, e);
this._.extraTexture.use(1);
a.curves = a.curves || new h(null, "uniform sampler2D texture;uniform sampler2D map;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color.r=texture2D(map,vec2(color.r)).r;color.g=texture2D(map,vec2(color.g)).g;color.b=texture2D(map,vec2(color.b)).b;gl_FragColor=color;}");
a.curves.textures({
map: 1
});
f.call(this, a.curves, {});
return this
}
function J(b) {
a.denoise = a.denoise || new h(null, "uniform sampler2D texture;uniform float exponent;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;void main(){vec4 center=texture2D(texture,texCoord);vec4 color=vec4(0.0);float total=0.0;for(float x=-4.0;x<=4.0;x+=1.0){for(float y=-4.0;y<=4.0;y+=1.0){vec4 sample=texture2D(texture,texCoord+vec2(x,y)/texSize);float weight=1.0-abs(dot(sample.rgb-center.rgb,vec3(0.25)));weight=pow(weight,exponent);color+=sample*weight;total+=weight;}}gl_FragColor=color/total;}");
for (var d = 0; 2 > d; d++) f.call(this, a.denoise, {
exponent: Math.max(0, b),
texSize: [this.width, this.height]
});
return this
}
function K(b, d) {
a.hueSaturation = a.hueSaturation || new h(null, "uniform sampler2D texture;uniform float hue;uniform float saturation;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float angle=hue*3.14159265;float s=sin(angle),c=cos(angle);vec3 weights=(vec3(2.0*c,-sqrt(3.0)*s-c,sqrt(3.0)*s-c)+1.0)/3.0;float len=length(color.rgb);color.rgb=vec3(dot(color.rgb,weights.xyz),dot(color.rgb,weights.zxy),dot(color.rgb,weights.yzx));float average=(color.r+color.g+color.b)/3.0;if(saturation>0.0){color.rgb+=(average-color.rgb)*(1.0-1.0/(1.001-saturation));}else{color.rgb+=(average-color.rgb)*(-saturation);}gl_FragColor=color;}");
f.call(this, a.hueSaturation, {
hue: q(-1, b, 1),
saturation: q(-1, d, 1)
});
return this
}
function L(b) {
a.noise = a.noise || new h(null, "uniform sampler2D texture;uniform float amount;varying vec2 texCoord;float rand(vec2 co){return fract(sin(dot(co.xy,vec2(12.9898,78.233)))*43758.5453);}void main(){vec4 color=texture2D(texture,texCoord);float diff=(rand(texCoord)-0.5)*amount;color.r+=diff;color.g+=diff;color.b+=diff;gl_FragColor=color;}");
f.call(this, a.noise, {
amount: q(0, b, 1)
});
return this
}
function M(b) {
a.sepia = a.sepia || new h(null, "uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float r=color.r;float g=color.g;float b=color.b;color.r=min(1.0,(r*(1.0-(0.607*amount)))+(g*(0.769*amount))+(b*(0.189*amount)));color.g=min(1.0,(r*0.349*amount)+(g*(1.0-(0.314*amount)))+(b*0.168*amount));color.b=min(1.0,(r*0.272*amount)+(g*0.534*amount)+(b*(1.0-(0.869*amount))));gl_FragColor=color;}");
f.call(this, a.sepia, {
amount: q(0, b, 1)
});
return this
}
function N(b, d) {
a.unsharpMask = a.unsharpMask || new h(null, "uniform sampler2D blurredTexture;uniform sampler2D originalTexture;uniform float strength;uniform float threshold;varying vec2 texCoord;void main(){vec4 blurred=texture2D(blurredTexture,texCoord);vec4 original=texture2D(originalTexture,texCoord);gl_FragColor=mix(blurred,original,1.0+strength);}");
this._.extraTexture.ensureFormat(this._.texture);
this._.texture.use();
this._.extraTexture.drawTo(function() {
h.getDefaultShader().drawRect()
});
this._.extraTexture.use(1);
this.triangleBlur(b);
a.unsharpMask.textures({
originalTexture: 1
});
f.call(this, a.unsharpMask, {
strength: d
});
this._.extraTexture.unuse(1);
return this
}
function O(b) {
a.vibrance = a.vibrance || new h(null, "uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;float mx=max(color.r,max(color.g,color.b));float amt=(mx-average)*(-amount*3.0);color.rgb=mix(color.rgb,vec3(mx),amt);gl_FragColor=color;}");
f.call(this, a.vibrance, {
amount: q(-1, b, 1)
});
return this
}
function P(b, d) {
a.vignette = a.vignette || new h(null, "uniform sampler2D texture;uniform float size;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float dist=distance(texCoord,vec2(0.5,0.5));color.rgb*=smoothstep(0.8,size*0.799,dist*(amount+size));gl_FragColor=color;}");
f.call(this, a.vignette, {
size: q(0, b, 1),
amount: q(0, d, 1)
});
return this
}
function Q(b, d, c) {
a.lensBlurPrePass = a.lensBlurPrePass || new h(null, "uniform sampler2D texture;uniform float power;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color=pow(color,vec4(power));gl_FragColor=vec4(color);}");
var e = "uniform sampler2D texture0;uniform sampler2D texture1;uniform vec2 delta0;uniform vec2 delta1;uniform float power;varying vec2 texCoord;" +
s + "vec4 sample(vec2 delta){float offset=random(vec3(delta,151.7182),0.0);vec4 color=vec4(0.0);float total=0.0;for(float t=0.0;t<=30.0;t++){float percent=(t+offset)/30.0;color+=texture2D(texture0,texCoord+delta*percent);total+=1.0;}return color/total;}";
a.lensBlur0 = a.lensBlur0 || new h(null, e + "void main(){gl_FragColor=sample(delta0);}");
a.lensBlur1 = a.lensBlur1 || new h(null, e + "void main(){gl_FragColor=(sample(delta0)+sample(delta1))*0.5;}");
a.lensBlur2 = a.lensBlur2 || (new h(null, e + "void main(){vec4 color=(sample(delta0)+2.0*texture2D(texture1,texCoord))/3.0;gl_FragColor=pow(color,vec4(power));}")).textures({
texture1: 1
});
for (var e = [], g = 0; 3 > g; g++) {
var l = c + 2 * g * Math.PI / 3;
e.push([b * Math.sin(l) / this.width, b * Math.cos(l) / this.height])
}
b = Math.pow(10, q(-1, d, 1));
f.call(this, a.lensBlurPrePass, {
power: b
});
this._.extraTexture.ensureFormat(this._.texture);
f.call(this, a.lensBlur0, {
delta0: e[0]
}, this._.texture, this._.extraTexture);
f.call(this, a.lensBlur1, {
delta0: e[1],
delta1: e[2]
}, this._.extraTexture, this._.extraTexture);
f.call(this, a.lensBlur0, {
delta0: e[1]
});
this._.extraTexture.use(1);
f.call(this, a.lensBlur2, {
power: 1 / b,
delta0: e[2]
});
return this
}
function R(b, d, c, e, g, l) {
a.tiltShift = a.tiltShift || new h(null, "uniform sampler2D texture;uniform float blurRadius;uniform float gradientRadius;uniform vec2 start;uniform vec2 end;uniform vec2 delta;uniform vec2 texSize;varying vec2 texCoord;" + s + "void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);vec2 normal=normalize(vec2(start.y-end.y,end.x-start.x));float radius=smoothstep(0.0,1.0,abs(dot(texCoord*texSize-start,normal))/gradientRadius)*blurRadius;for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta/texSize*percent*radius);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
var n = c - b,
p = e - d,
m = Math.sqrt(n * n + p * p);
f.call(this, a.tiltShift, {
blurRadius: g,
gradientRadius: l,
start: [b, d],
end: [c, e],
delta: [n / m, p / m],
texSize: [this.width, this.height]
});
f.call(this, a.tiltShift, {
blurRadius: g,
gradientRadius: l,
start: [b, d],
end: [c, e],
delta: [-p / m, n / m],
texSize: [this.width, this.height]
});
return this
}
function S(b) {
a.triangleBlur = a.triangleBlur || new h(null, "uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;" + s + "void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta*percent);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
f.call(this, a.triangleBlur, {
delta: [b / this.width, 0]
});
f.call(this, a.triangleBlur, {
delta: [0, b / this.height]
});
return this
}
function T(b, d, c) {
a.zoomBlur = a.zoomBlur || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;" + s + "void main(){vec4 color=vec4(0.0);float total=0.0;vec2 toCenter=center-texCoord*texSize;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=0.0;t<=40.0;t++){float percent=(t+offset)/40.0;float weight=4.0*(percent-percent*percent);vec4 sample=texture2D(texture,texCoord+toCenter*percent*strength/texSize);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
f.call(this, a.zoomBlur, {
center: [b, d],
strength: c,
texSize: [this.width, this.height]
});
return this
}
function U(b, d, c, e) {
a.colorHalftone = a.colorHalftone || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(float angle){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);vec3 cmy=1.0-color.rgb;float k=min(cmy.x,min(cmy.y,cmy.z));cmy=(cmy-k)/(1.0-k);cmy=clamp(cmy*10.0-3.0+vec3(pattern(angle+0.26179),pattern(angle+1.30899),pattern(angle)),0.0,1.0);k=clamp(k*10.0-5.0+pattern(angle+0.78539),0.0,1.0);gl_FragColor=vec4(1.0-cmy-k,color.a);}");
f.call(this, a.colorHalftone, {
center: [b, d],
angle: c,
scale: Math.PI / e,
texSize: [this.width, this.height]
});
return this
}
function V(b, d, c, e) {
a.dotScreen = a.dotScreen || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;gl_FragColor=vec4(vec3(average*10.0-5.0+pattern()),color.a);}");
f.call(this, a.dotScreen, {
center: [b, d],
angle: c,
scale: Math.PI / e,
texSize: [this.width, this.height]
});
return this
}
function W(b) {
a.edgeWork1 = a.edgeWork1 || new h(null, "uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;" + s + "void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec3 sample=texture2D(texture,texCoord+delta*percent).rgb;float average=(sample.r+sample.g+sample.b)/3.0;color.x+=average*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=average*weight;total.y+=weight;}}gl_FragColor=vec4(color/total,0.0,1.0);}");
a.edgeWork2 = a.edgeWork2 || new h(null, "uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;" + s + "void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec2 sample=texture2D(texture,texCoord+delta*percent).xy;color.x+=sample.x*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=sample.y*weight;total.y+=weight;}}float c=clamp(10000.0*(color.y/total.y-color.x/total.x)+0.5,0.0,1.0);gl_FragColor=vec4(c,c,c,1.0);}");
f.call(this, a.edgeWork1, {
delta: [b / this.width, 0]
});
f.call(this, a.edgeWork2, {
delta: [0, b / this.height]
});
return this
}
function X(b, d, c) {
a.hexagonalPixelate = a.hexagonalPixelate || new h(null, "uniform sampler2D texture;uniform vec2 center;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 tex=(texCoord*texSize-center)/scale;tex.y/=0.866025404;tex.x-=tex.y*0.5;vec2 a;if(tex.x+tex.y-floor(tex.x)-floor(tex.y)<1.0)a=vec2(floor(tex.x),floor(tex.y));else a=vec2(ceil(tex.x),ceil(tex.y));vec2 b=vec2(ceil(tex.x),floor(tex.y));vec2 c=vec2(floor(tex.x),ceil(tex.y));vec3 TEX=vec3(tex.x,tex.y,1.0-tex.x-tex.y);vec3 A=vec3(a.x,a.y,1.0-a.x-a.y);vec3 B=vec3(b.x,b.y,1.0-b.x-b.y);vec3 C=vec3(c.x,c.y,1.0-c.x-c.y);float alen=length(TEX-A);float blen=length(TEX-B);float clen=length(TEX-C);vec2 choice;if(alen<blen){if(alen<clen)choice=a;else choice=c;}else{if(blen<clen)choice=b;else choice=c;}choice.x+=choice.y*0.5;choice.y*=0.866025404;choice*=scale/texSize;gl_FragColor=texture2D(texture,choice+center/texSize);}");
f.call(this, a.hexagonalPixelate, {
center: [b, d],
scale: c,
texSize: [this.width, this.height]
});
return this
}
function Y(b) {
a.ink = a.ink || new h(null, "uniform sampler2D texture;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 dx=vec2(1.0/texSize.x,0.0);vec2 dy=vec2(0.0,1.0/texSize.y);vec4 color=texture2D(texture,texCoord);float bigTotal=0.0;float smallTotal=0.0;vec3 bigAverage=vec3(0.0);vec3 smallAverage=vec3(0.0);for(float x=-2.0;x<=2.0;x+=1.0){for(float y=-2.0;y<=2.0;y+=1.0){vec3 sample=texture2D(texture,texCoord+dx*x+dy*y).rgb;bigAverage+=sample;bigTotal+=1.0;if(abs(x)+abs(y)<2.0){smallAverage+=sample;smallTotal+=1.0;}}}vec3 edge=max(vec3(0.0),bigAverage/bigTotal-smallAverage/smallTotal);gl_FragColor=vec4(color.rgb-dot(edge,edge)*strength*100000.0,color.a);}");
f.call(this, a.ink, {
strength: b * b * b * b * b,
texSize: [this.width, this.height]
});
return this
}
function Z(b, d, c, e) {
a.bulgePinch = a.bulgePinch || u("uniform float radius;uniform float strength;uniform vec2 center;", "coord-=center;float distance=length(coord);if(distance<radius){float percent=distance/radius;if(strength>0.0){coord*=mix(1.0,smoothstep(0.0,radius/distance,percent),strength*0.75);}else{coord*=mix(1.0,pow(percent,1.0+strength*0.75)*radius/distance,1.0-percent);}}coord+=center;");
f.call(this, a.bulgePinch, {
radius: c,
strength: q(-1, e, 1),
center: [b, d],
texSize: [this.width, this.height]
});
return this
}
function $(b, d, c) {
a.matrixWarp = a.matrixWarp || u("uniform mat3 matrix;uniform bool useTextureSpace;", "if(useTextureSpace)coord=coord/texSize*2.0-1.0;vec3 warp=matrix*vec3(coord,1.0);coord=warp.xy/warp.z;if(useTextureSpace)coord=(coord*0.5+0.5)*texSize;");
b = Array.prototype.concat.apply([], b);
if (4 == b.length) b = [b[0], b[1], 0, b[2], b[3], 0, 0, 0, 1];
else if (9 != b.length) throw "can only warp with 2x2 or 3x3 matrix";
f.call(this, a.matrixWarp, {
matrix: d ? y(b) : b,
texSize: [this.width, this.height],
useTextureSpace: c | 0
});
return this
}
function aa(a, d) {
var c = x.apply(null, d),
e = x.apply(null, a),
c = y(c);
return this.matrixWarp([c[0] * e[0] + c[1] * e[3] + c[2] * e[6], c[0] * e[1] + c[1] * e[4] + c[2] * e[7], c[0] * e[2] + c[1] * e[5] + c[2] * e[8], c[3] * e[0] + c[4] * e[3] + c[5] * e[6], c[3] * e[1] + c[4] * e[4] + c[5] * e[7], c[3] * e[2] + c[4] * e[5] + c[5] * e[8], c[6] * e[0] + c[7] * e[3] + c[8] * e[6],
c[6] * e[1] + c[7] * e[4] + c[8] * e[7], c[6] * e[2] + c[7] * e[5] + c[8] * e[8]
])
}
function ba(b, d, c, e) {
a.swirl = a.swirl || u("uniform float radius;uniform float angle;uniform vec2 center;", "coord-=center;float distance=length(coord);if(distance<radius){float percent=(radius-distance)/radius;float theta=percent*percent*angle;float s=sin(theta);float c=cos(theta);coord=vec2(coord.x*c-coord.y*s,coord.x*s+coord.y*c);}coord+=center;");
f.call(this, a.swirl, {
radius: c,
center: [b, d],
angle: e,
texSize: [this.width, this.height]
});
return this
}
var v = {};
(function() {
function a(b) {
if (!b.getExtension("OES_texture_float")) return !1;
var c = b.createFramebuffer(),
e = b.createTexture();
b.bindTexture(b.TEXTURE_2D, e);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MAG_FILTER, b.NEAREST);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MIN_FILTER, b.NEAREST);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_S, b.CLAMP_TO_EDGE);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_T, b.CLAMP_TO_EDGE);
b.texImage2D(b.TEXTURE_2D, 0, b.RGBA, 1, 1, 0, b.RGBA, b.UNSIGNED_BYTE, null);
b.bindFramebuffer(b.FRAMEBUFFER, c);
b.framebufferTexture2D(b.FRAMEBUFFER, b.COLOR_ATTACHMENT0, b.TEXTURE_2D, e, 0);
c = b.createTexture();
b.bindTexture(b.TEXTURE_2D, c);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MAG_FILTER, b.LINEAR);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_MIN_FILTER, b.LINEAR);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_S, b.CLAMP_TO_EDGE);
b.texParameteri(b.TEXTURE_2D, b.TEXTURE_WRAP_T, b.CLAMP_TO_EDGE);
b.texImage2D(b.TEXTURE_2D,
0, b.RGBA, 2, 2, 0, b.RGBA, b.FLOAT, new Float32Array([2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]));
var e = b.createProgram(),
d = b.createShader(b.VERTEX_SHADER),
g = b.createShader(b.FRAGMENT_SHADER);
b.shaderSource(d, "attribute vec2 vertex;void main(){gl_Position=vec4(vertex,0.0,1.0);}");
b.shaderSource(g, "uniform sampler2D texture;void main(){gl_FragColor=texture2D(texture,vec2(0.5));}");
b.compileShader(d);
b.compileShader(g);
b.attachShader(e, d);
b.attachShader(e,
g);
b.linkProgram(e);
d = b.createBuffer();
b.bindBuffer(b.ARRAY_BUFFER, d);
b.bufferData(b.ARRAY_BUFFER, new Float32Array([0, 0]), b.STREAM_DRAW);
b.enableVertexAttribArray(0);
b.vertexAttribPointer(0, 2, b.FLOAT, !1, 0, 0);
d = new Uint8Array(4);
b.useProgram(e);
b.viewport(0, 0, 1, 1);
b.bindTexture(b.TEXTURE_2D, c);
b.drawArrays(b.POINTS, 0, 1);
b.readPixels(0, 0, 1, 1, b.RGBA, b.UNSIGNED_BYTE, d);
return 127 === d[0] || 128 === d[0]
}
function d() {}
function c(a) {
"OES_texture_float_linear" === a ? (void 0 === this.$OES_texture_float_linear$ && Object.defineProperty(this,
"$OES_texture_float_linear$", {
enumerable: !1,
configurable: !1,
writable: !1,
value: new d
}), a = this.$OES_texture_float_linear$) : a = n.call(this, a);
return a
}
function e() {
var a = f.call(this); - 1 === a.indexOf("OES_texture_float_linear") && a.push("OES_texture_float_linear");
return a
}
try {
var g = document.createElement("canvas").getContext("experimental-webgl")
} catch (l) {}
if (g && -1 === g.getSupportedExtensions().indexOf("OES_texture_float_linear") && a(g)) {
var n = WebGLRenderingContext.prototype.getExtension,
f = WebGLRenderingContext.prototype.getSupportedExtensions;
WebGLRenderingContext.prototype.getExtension = c;
WebGLRenderingContext.prototype.getSupportedExtensions = e
}
})();
var a;
v.canvas = function() {
var b = document.createElement("canvas");
try {
a = b.getContext("experimental-webgl", {
premultipliedAlpha: !1
})
} catch (d) {
a = null
}
if (!a) throw "This browser does not support WebGL";
b._ = {
gl: a,
isInitialized: !1,
texture: null,
spareTexture: null,
flippedShader: null
};
b.texture = k(A);
b.draw = k(C);
b.update = k(D);
b.replace = k(E);
b.contents = k(F);
b.getPixelArray = k(G);
b.brightnessContrast = k(H);
b.hexagonalPixelate = k(X);
b.hueSaturation = k(K);
b.colorHalftone = k(U);
b.triangleBlur = k(S);
b.unsharpMask = k(N);
b.perspective = k(aa);
b.matrixWarp = k($);
b.bulgePinch = k(Z);
b.tiltShift = k(R);
b.dotScreen = k(V);
b.edgeWork = k(W);
b.lensBlur = k(Q);
b.zoomBlur = k(T);
b.noise = k(L);
b.denoise = k(J);
b.curves = k(I);
b.swirl = k(ba);
b.ink = k(Y);
b.vignette = k(P);
b.vibrance = k(O);
b.sepia = k(M);
return b
};
v.splineInterpolate = t;
var h = function() {
function b(b, c) {
var e = a.createShader(b);
a.shaderSource(e, c);
a.compileShader(e);
if (!a.getShaderParameter(e,
a.COMPILE_STATUS)) throw "compile error: " + a.getShaderInfoLog(e);
return e
}
function d(d, l) {
this.texCoordAttribute = this.vertexAttribute = null;
this.program = a.createProgram();
d = d || c;
l = l || e;
l = "precision highp float;" + l;
a.attachShader(this.program, b(a.VERTEX_SHADER, d));
a.attachShader(this.program, b(a.FRAGMENT_SHADER, l));
a.linkProgram(this.program);
if (!a.getProgramParameter(this.program, a.LINK_STATUS)) throw "link error: " + a.getProgramInfoLog(this.program);
}
var c = "attribute vec2 vertex;attribute vec2 _texCoord;varying vec2 texCoord;void main(){texCoord=_texCoord;gl_Position=vec4(vertex*2.0-1.0,0.0,1.0);}",
e = "uniform sampler2D texture;varying vec2 texCoord;void main(){gl_FragColor=texture2D(texture,texCoord);}";
d.prototype.destroy = function() {
a.deleteProgram(this.program);
this.program = null
};
d.prototype.uniforms = function(b) {
a.useProgram(this.program);
for (var e in b)
if (b.hasOwnProperty(e)) {
var c = a.getUniformLocation(this.program, e);
if (null !== c) {
var d = b[e];
if ("[object Array]" == Object.prototype.toString.call(d)) switch (d.length) {
case 1:
a.uniform1fv(c, new Float32Array(d));
break;
case 2:
a.uniform2fv(c, new Float32Array(d));
break;
case 3:
a.uniform3fv(c, new Float32Array(d));
break;
case 4:
a.uniform4fv(c, new Float32Array(d));
break;
case 9:
a.uniformMatrix3fv(c, !1, new Float32Array(d));
break;
case 16:
a.uniformMatrix4fv(c, !1, new Float32Array(d));
break;
default:
throw "dont't know how to load uniform \"" + e + '" of length ' + d.length;
} else if ("[object Number]" == Object.prototype.toString.call(d)) a.uniform1f(c, d);
else throw 'attempted to set uniform "' + e + '" to invalid value ' + (d || "undefined").toString();
}
}
return this
};
d.prototype.textures = function(b) {
a.useProgram(this.program);
for (var c in b) b.hasOwnProperty(c) && a.uniform1i(a.getUniformLocation(this.program, c), b[c]);
return this
};
d.prototype.drawRect = function(b, c, e, d) {
var f = a.getParameter(a.VIEWPORT);
c = void 0 !== c ? (c - f[1]) / f[3] : 0;
b = void 0 !== b ? (b - f[0]) / f[2] : 0;
e = void 0 !== e ? (e - f[0]) / f[2] : 1;
d = void 0 !== d ? (d - f[1]) / f[3] : 1;
null == a.vertexBuffer && (a.vertexBuffer = a.createBuffer());
a.bindBuffer(a.ARRAY_BUFFER, a.vertexBuffer);
a.bufferData(a.ARRAY_BUFFER, new Float32Array([b,
c, b, d, e, c, e, d
]), a.STATIC_DRAW);
null == a.texCoordBuffer && (a.texCoordBuffer = a.createBuffer(), a.bindBuffer(a.ARRAY_BUFFER, a.texCoordBuffer), a.bufferData(a.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]), a.STATIC_DRAW));
null == this.vertexAttribute && (this.vertexAttribute = a.getAttribLocation(this.program, "vertex"), a.enableVertexAttribArray(this.vertexAttribute));
null == this.texCoordAttribute && (this.texCoordAttribute = a.getAttribLocation(this.program, "_texCoord"), a.enableVertexAttribArray(this.texCoordAttribute));
a.useProgram(this.program);
a.bindBuffer(a.ARRAY_BUFFER, a.vertexBuffer);
a.vertexAttribPointer(this.vertexAttribute, 2, a.FLOAT, !1, 0, 0);
a.bindBuffer(a.ARRAY_BUFFER, a.texCoordBuffer);
a.vertexAttribPointer(this.texCoordAttribute, 2, a.FLOAT, !1, 0, 0);
a.drawArrays(a.TRIANGLE_STRIP, 0, 4)
};
d.getDefaultShader = function() {
a.defaultShader = a.defaultShader || new d;
return a.defaultShader
};
return d
}();
z.prototype.interpolate = function(a) {
for (var d = 0, c = this.ya.length - 1; 1 < c - d;) {
var e = c + d >> 1;
this.xa[e] > a ? c = e : d = e
}
var e = this.xa[c] -
this.xa[d],
g = (this.xa[c] - a) / e;
a = (a - this.xa[d]) / e;
return g * this.ya[d] + a * this.ya[c] + ((g * g * g - g) * this.y2[d] + (a * a * a - a) * this.y2[c]) * e * e / 6
};
var r = function() {
function b(b, c, d, f) {
this.gl = a;
this.id = a.createTexture();
this.width = b;
this.height = c;
this.format = d;
this.type = f;
a.bindTexture(a.TEXTURE_2D, this.id);
a.texParameteri(a.TEXTURE_2D, a.TEXTURE_MAG_FILTER, a.LINEAR);
a.texParameteri(a.TEXTURE_2D, a.TEXTURE_MIN_FILTER, a.LINEAR);
a.texParameteri(a.TEXTURE_2D, a.TEXTURE_WRAP_S, a.CLAMP_TO_EDGE);
a.texParameteri(a.TEXTURE_2D,
a.TEXTURE_WRAP_T, a.CLAMP_TO_EDGE);
b && c && a.texImage2D(a.TEXTURE_2D, 0, this.format, b, c, 0, this.format, this.type, null)
}
function d(a) {
null == c && (c = document.createElement("canvas"));
c.width = a.width;
c.height = a.height;
a = c.getContext("2d");
a.clearRect(0, 0, c.width, c.height);
return a
}
b.fromElement = function(c) {
var d = new b(0, 0, a.RGBA, a.UNSIGNED_BYTE);
d.loadContentsOf(c);
return d
};
b.prototype.loadContentsOf = function(b) {
this.width = b.width || b.videoWidth;
this.height = b.height || b.videoHeight;
a.bindTexture(a.TEXTURE_2D,
this.id);
a.texImage2D(a.TEXTURE_2D, 0, this.format, this.format, this.type, b)
};
b.prototype.initFromBytes = function(b, c, d) {
this.width = b;
this.height = c;
this.format = a.RGBA;
this.type = a.UNSIGNED_BYTE;
a.bindTexture(a.TEXTURE_2D, this.id);
a.texImage2D(a.TEXTURE_2D, 0, a.RGBA, b, c, 0, a.RGBA, this.type, new Uint8Array(d))
};
b.prototype.initFromCanvas = function(b, c, d) {
this.width = b;
this.height = c;
this.format = a.RGB;
this.type = a.UNSIGNED_BYTE;
a.bindTexture(a.TEXTURE_2D, this.id);
// a.texImage2D(a.TEXTURE_2D, 0, a.RGBA, b, c, 0, a.RGBA, this.type, d);
a.texImage2D(a.TEXTURE_2D, 0, a.RGBA, a.RGBA, a.UNSIGNED_BYTE, d);
};
b.prototype.destroy = function() {
a.deleteTexture(this.id);
this.id = null
};
b.prototype.use = function(b) {
a.activeTexture(a.TEXTURE0 + (b || 0));
a.bindTexture(a.TEXTURE_2D, this.id)
};
b.prototype.unuse = function(b) {
a.activeTexture(a.TEXTURE0 +
(b || 0));
a.bindTexture(a.TEXTURE_2D, null)
};
b.prototype.ensureFormat = function(b, c, d, f) {
if (1 == arguments.length) {
var h = arguments[0];
b = h.width;
c = h.height;
d = h.format;
f = h.type
}
if (b != this.width || c != this.height || d != this.format || f != this.type) this.width = b, this.height = c, this.format = d, this.type = f, a.bindTexture(a.TEXTURE_2D, this.id), a.texImage2D(a.TEXTURE_2D, 0, this.format, b, c, 0, this.format, this.type, null)
};
b.prototype.drawTo = function(b) {
a.framebuffer = a.framebuffer || a.createFramebuffer();
a.bindFramebuffer(a.FRAMEBUFFER,
a.framebuffer);
a.framebufferTexture2D(a.FRAMEBUFFER, a.COLOR_ATTACHMENT0, a.TEXTURE_2D, this.id, 0);
if (a.checkFramebufferStatus(a.FRAMEBUFFER) !== a.FRAMEBUFFER_COMPLETE) throw Error("incomplete framebuffer");
a.viewport(0, 0, this.width, this.height);
b();
a.bindFramebuffer(a.FRAMEBUFFER, null)
};
var c = null;
b.prototype.fillUsingCanvas = function(b) {
b(d(this));
this.format = a.RGBA;
this.type = a.UNSIGNED_BYTE;
a.bindTexture(a.TEXTURE_2D, this.id);
a.texImage2D(a.TEXTURE_2D, 0, a.RGBA, a.RGBA, a.UNSIGNED_BYTE, c);
return this
};
b.prototype.toImage = function(b) {
this.use();
h.getDefaultShader().drawRect();
var f = 4 * this.width * this.height,
k = new Uint8Array(f),
n = d(this),
p = n.createImageData(this.width, this.height);
a.readPixels(0, 0, this.width, this.height, a.RGBA, a.UNSIGNED_BYTE, k);
for (var m = 0; m < f; m++) p.data[m] = k[m];
n.putImageData(p, 0, 0);
b.src = c.toDataURL()
};
b.prototype.swapWith = function(a) {
var b;
b = a.id;
a.id = this.id;
this.id = b;
b = a.width;
a.width = this.width;
this.width = b;
b = a.height;
a.height = this.height;
this.height = b;
b = a.format;
a.format =
this.format;
this.format = b
};
return b
}(),
s = "float random(vec3 scale,float seed){return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}";
return v
}();

1545
docs/vendor/particles.js vendored Normal file

File diff suppressed because it is too large Load Diff

15
docs/wrappers/html.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import DocumentTitle from 'react-document-title';
class HTML extends React.Component {
render() {
var page = this.props.page.data;
return (
<div>
<div dangerouslySetInnerHTML={{__html: page}}/>
</div>
);
}
}
module.exports = HTML;

27
docs/wrappers/md.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import DocumentTitle from 'react-document-title';
import { link } from 'gatsby-helpers';
var DOCS_BASEURL = "https://github.com/graphql-python/graphene/edit/master/docs/pages/";
class Markdown extends React.Component {
render() {
var post = this.props.page.data;
var pagePath = this.props.page.requirePath;
var documentUrl = `${DOCS_BASEURL}${pagePath}`;
return (
<DocumentTitle title={`${post.title?post.title+' - ':''}${this.props.config.siteTitle}`}>
<div className="markdown">
{post.title?<div className="title">
<h1>{post.title}</h1>
</div>:null}
<div className="wrapper" dangerouslySetInnerHTML={{__html: post.body}}/>
<a href={documentUrl} className="improve-document-link">Improve this document!</a>
</div>
</DocumentTitle>
);
}
}
module.exports = Markdown;