Merge pull request #2 from CSSHoudini/worklet/lines

Worklet/lines

Author: nucliweb

src/connections/test/js/controls.js

@@ -1,5 +1,4 @@
 const element = document.querySelector('.connections')
-console.log(element)
 const PARAMS = {
   particleColor: {r: 150, g: 180, b: 200},
   lineColor: {r: 150, g: 180, b: 200},

src/lines/README.md

@@ -0,0 +1,70 @@
+# CSS Houdini Lines
+
+A CSS Houdini Worklet to show connected nodes.
+
+![CSS Houdini Lines](https://github.com/CSSHoudini/css-houdini/blob/main/src/lines/assets/lines.png)
+
+## Getting started
+
+### 1. Load the worklet
+
+Using CDN is the easiest way to add the library:
+
+```js
+if ('paintWorklet' in CSS) {
+  CSS.paintWorklet.addModule('...');
+}
+```
+
+Or, download the latest [lines Worklet](https://github.com/CSSHoudini/css-houdini/tree/main/src/lines/dist) and import it to your web page:
+
+```js
+if ('paintWorklet' in CSS) {
+  CSS.paintWorklet.addModule('path/to/lines.js');
+}
+```
+
+#### You can use the polyfill
+
+To add support for all moder browsers, you can load the worklet with [css-paint-polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill) fallback.
+
+```html
+<script>
+  ;(async function() {
+    if (CSS['paintWorklet'] === undefined)
+      await import('https://unpkg.com/css-paint-polyfill')
+
+    CSS.paintWorklet.addModule('./lines.js')
+  })()
+</script>
+```
+
+### 3. Ready to use it in your CSS!
+
+To use **Lines** worlet you need define some custom properties with values and add the value `paint(lines)` on `background-image` property.
+
+> The worklet has default values if you don't define these
+
+```css
+.element {
+  --lines-colors: #f94144, #f3722c, #f8961e, #f9844a;
+  --lines-widths: 10, 2, 3, 8;
+  --lines-gaps: 20, 4, 3, 7;
+  --lines-rotate: 0; /* In degrees */
+
+  background-image: paint(lines);
+}
+```
+
+| property | description | default value |
+| -------- | ----------- | ------------- |
+| --lines-colors | **Color lines**, you can define one or more hexadecimal colors comma separated | `#71a7ee, #7940c1` |
+| --lines-widths | **Width lines**, you can define one or more line widths comma separated | `6, 2` |
+| --lines-gaps | **Gap lines**, you can define one or more gaps comma separated | `8` |
+| --lines-rotate | **Rotation lines**, with an interger | `0` |
+
+## License
+
+MIT License
+
+Copyright (c) 2020 CSS Houdini

src/lines/assets/lines.png

@@ -0,0 +1,54 @@
+{
+  "name": "css-houdini-lines",
+  "version": "1.0.1",
+  "description": "CSS Houdini Background Lines",
+  "source": "src/index.js",
+  "main": "dist/lines.js",
+  "module": "dist/lines.module.js",
+  "unpkg": "dist/lines.umd.js",
+  "scripts": {
+    "build": "rimraf dist && microbundle --no-sourcemap",
+    "prepublish": "npm run build",
+    "test": "npm run test:copy && npm run test:server",
+    "test:copy": "cp -fv ./src/index.js ./test/lines.js",
+    "test:server": "node ./server.js"
+  },
+  "keywords": [
+    "houdini",
+    "css",
+    "css-houdini",
+    "PaintWorklet",
+    "paint",
+    "worklet"
+  ],
+  "author": {
+    "name": "Joan León",
+    "email": "joan.leon@gmail.com",
+    "twitter": "@nucliweb",
+    "web": "https://joanleon.dev"
+  },
+  "license": "MIT",
+  "eslintConfig": {
+    "extends": [
+      "./node_modules/@s-ui/lint/eslintrc.js"
+    ]
+  },
+  "prettier": "./node_modules/@s-ui/lint/.prettierrc.js",
+  "stylelint": {
+    "extends": "./node_modules/@s-ui/lint/stylelint.config.js"
+  },
+  "devDependencies": {
+    "@s-ui/lint": "^3.25.0",
+    "express": "^4.17.1",
+    "microbundle": "^0.12.4",
+    "rimraf": "^3.0.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CSSHoudini/css-houdini.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CSSHoudini/css-houdini/issues"
+  },
+  "homepage": "https://github.com/CSSHoudini/css-houdini/tree/main/src/lines"
+}

src/lines/package.json

@@ -0,0 +1,14 @@
+/* eslint-env node */
+/* eslint no-console: "off" */
+
+const path = require('path')
+const express = require('express')
+const app = express()
+const htdocs = path.join(__dirname, 'test')
+
+// Run static server
+app.use(express.static(htdocs))
+app.listen(8080)
+
+console.log('🚀 Paint worklet test up and running at http://localhost:8080/')
+console.log('ℹ️  Press Ctrl+C to return to the real world.')

src/lines/server.js

@@ -0,0 +1,76 @@
+/* global registerPaint */
+const LINES_PROPS = [
+  '--lines-colors',
+  '--lines-widths',
+  '--lines-gaps',
+  '--lines-rotate'
+]
+
+registerPaint(
+  'lines',
+  class {
+    static get inputProperties() {
+      return LINES_PROPS
+    }
+
+    parseProps(props) {
+      return LINES_PROPS.map(
+        prop =>
+          props
+            .get(prop)
+            .toString()
+            .trim() || undefined
+      )
+    }
+
+    paint(ctx, geometry, props) {
+      const {width: w, height: h} = geometry
+      const [
+        colors = '#71a7ee, #7940c1',
+        widths = '6, 2',
+        gaps = '8',
+        rotate = 0
+      ] = this.parseProps(props)
+
+      const sqrtArea = Math.floor(Math.sqrt(Math.pow(w, 2) + Math.pow(h, 2)))
+      const saveArea = sqrtArea * 2
+      const colorLines = colors.split(',').map(color => color)
+      const maxColors = colorLines.length
+      let indexColor = 0
+
+      const widthLines = widths.split(',').map(width => +width)
+      const maxWidth = Math.min(...widthLines)
+      const maxLines = widthLines.length
+      let indexLine = 0
+
+      const gapLines = gaps.split(',').map(gap => +gap)
+      const maxGaps = gapLines.length
+      let indexGap = 0
+
+      if (rotate !== 0) {
+        ctx.rotate((rotate * Math.PI) / 180)
+        ctx.translate(-saveArea, -saveArea)
+      }
+
+      let posY = 0
+
+      for (let i = 0; i < saveArea / maxWidth; i++) {
+        const lineGap = +widthLines[indexLine] + gapLines[indexGap]
+        ctx.fillStyle = colorLines[indexColor]
+
+        ctx.fillRect(
+          -saveArea * 0.5,
+          posY,
+          saveArea * 2,
+          +widthLines[indexLine]
+        )
+
+        indexLine >= maxLines - 1 ? (indexLine = 0) : indexLine++
+        indexGap >= maxGaps - 1 ? (indexGap = 0) : indexGap++
+        indexColor >= maxColors - 1 ? (indexColor = 0) : indexColor++
+
+        posY += lineGap
+      }
+    }
+  }
+)

src/lines/src/index.js

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Houdini Lines</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div class="css-houdini lines"></div>
+    <script>
+      ;(async function() {
+        if (CSS['paintWorklet'] === undefined)
+          await import('https://unpkg.com/css-paint-polyfill')
+
+        CSS.paintWorklet.addModule('./lines.js')
+      })()
+    </script>
+    <script src="./js/tweakpane-1.5.6.min.js"></script>
+    <script src="./js/controls.js"></script>
+  </body>
+</html>

src/lines/test/index.html

@@ -0,0 +1,67 @@
+/* global Tweakpane */
+const element = document.querySelector('.lines')
+const PARAMS = {
+  colors:
+    '#f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #577590, #277da1',
+  widths: '10, 2, 3, 8',
+  gaps: '20, 4, 3, 7',
+  rotate: 0
+}
+
+const pane = new Tweakpane()
+const f1 = pane.addFolder({title: 'Lines Parameters'})
+const f2 = pane.addFolder({title: 'Information'})
+f2.expanded = false
+
+f1.addInput(PARAMS, 'colors', {
+  label: 'Line colors',
+  options: {
+    Palette1:
+      '#f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #577590, #277da1',
+    Palette2: '#2a9d8f, #e76f51',
+    Palette3: '#583d72, #9f5f80, #ffba93, #ff8e71',
+    Palette4: '#fc00ff, #ff67e2, #ff95f9, #bd42ff, #6100ff'
+  }
+}).on('change', value => {
+  element.style.setProperty('--lines-colors', value)
+})
+
+f1.addInput(PARAMS, 'widths', {
+  label: 'Line widths',
+  options: {
+    '10, 2, 3, 8': '10, 2, 3, 8',
+    '10': '10',
+    '13, 2, 8, 4, 1': '13, 2, 8, 4, 1',
+    '35, 12, 5': '35, 12, 5'
+  }
+}).on('change', value => {
+  element.style.setProperty('--lines-widths', value)
+})
+
+f1.addInput(PARAMS, 'gaps', {
+  label: 'Line gaps',
+  options: {
+    '20, 4, 3, 7': '20, 4, 3, 7',
+    '8': '8',
+    '5, 3': '5, 3',
+    '6, 7, 1, 3': '6, 7, 1, 3'
+  }
+}).on('change', value => {
+  element.style.setProperty('--lines-gaps', value)
+})
+
+f1.addInput(PARAMS, 'rotate', {
+  label: 'Rotation (Degrees)',
+  step: 1,
+  min: 0,
+  max: 360
+}).on('change', value => {
+  element.style.setProperty('--lines-rotate', value)
+})
+
+f2.addButton({title: 'Source Code'}).on('click', () =>
+  window.open('https://github.com/CSSHoudini/css-houdini', 'CSS Houdini Lines')
+)
+f2.addButton({title: '@csshoudini'}).on('click', () =>
+  window.open('https://twitter.com/csshoudini', 'CSS Houdini')
+)

src/lines/test/js/controls.js

@@ -0,0 +1,42 @@
+:root {
+  --size: 300px;
+}
+
+@media (min-width: 600px) {
+  :root {
+    --size: 600px;
+  }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  align-items: center;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  justify-content: center;
+  padding-top: 1em;
+}
+
+.css-houdini {
+  height: var(--size);
+  padding: 1em;
+  box-sizing: content-box;
+  width: var(--size);
+}
+
+.lines {
+  --lines-colors: #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #577590, #277da1;
+  --lines-widths: 10, 2, 3, 8;
+  --lines-gaps: 20, 4, 3, 7;
+  --lines-rotate: 0; /* In degrees */
+
+  background-image: paint(lines);
+}