diff --git a/docs/README.md b/docs/README.md index 127e720..3d1b756 100644 --- a/docs/README.md +++ b/docs/README.md @@ -22,11 +22,11 @@ React packages such as Redux still work. ## Features -- Same syntax as React Native -- Works with existing React libraries such as Redux -- Cross platform -- Native components. No more Electron -- Compatible with all normal Node.js packages +* Same syntax as React Native +* Works with existing React libraries such as Redux +* Cross platform +* Native components. No more Electron +* Compatible with all normal Node.js packages ## Examples diff --git a/docs/_coverpage.md b/docs/_coverpage.md index 9157755..d943dac 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -40,7 +40,7 @@ text-decoration: none; transition: all 0.15s ease; } - + Github Get Started @@ -53,4 +53,4 @@
  • Compatible with all normal Node.js packages
  • -![color](linear-gradient(to left bottom, #2e4466 0%, #afc1e0 100%)) \ No newline at end of file +![color](linear-gradient(to left bottom, #2e4466 0%, #afc1e0 100%)) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index f67a2d8..a6fe45b 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -10,13 +10,14 @@ * [App](component_APIs/app.md) * [Area](component_APIs/area.md) * [Props](component_APIs/area_props.md) - * [Area.Group](component_APIs/area_group.md) - * [Area.Rectangle](component_APIs/area_rectangle.md) - * [Area.Line](component_APIs/area_line.md) - * [Area.Circle](component_APIs/area_circle.md) - * [Area.Arc](component_APIs/area_bezier.md) + * [Area.Arc](component_APIs/area_arc.md) * [Area.Bezier](component_APIs/area_bezier.md) + * [Area.Circle](component_APIs/area_circle.md) + * [Area.Group](component_APIs/area_group.md) + * [Area.Line](component_APIs/area_line.md) * [Area.Path](component_APIs/area_path.md) + * [Area.Rectangle](component_APIs/area_rectangle.md) + * [Area.Text](component_APIs/area_text.md) * [Box](component_APIs/box.md) * [Button](component_APIs/button.md) * [Checkbox](component_APIs/checkbox.md) @@ -33,6 +34,7 @@ * [Separator](component_APIs/separator.md) * [Slider](component_APIs/slider.md) * [Spinbox](component_APIs/spinbox.md) + * [StyledText](component_APIs/styledtext.md) * [Tab](component_APIs/tab.md) * [Text](component_APIs/text.md) * [TextInput](component_APIs/textinput.md) diff --git a/docs/about.md b/docs/about.md index 6ff3be6..37e878b 100644 --- a/docs/about.md +++ b/docs/about.md @@ -6,14 +6,16 @@ technologies, Proton Native allows you to use native widgets cross platform, all Electron. **Advantages** - * Use native OS widgets - * All widgets are created and handled in C, making for generally better performance (YMMV, especially in smaller apps) - * Simple React components very similar to React Native components - * Constantly being improved and added to + +* Use native OS widgets +* All widgets are created and handled in C, making for generally better performance (YMMV, especially in smaller apps) +* Simple React components very similar to React Native components +* Constantly being improved and added to **Disadvantages** - * Smaller selection of widgets than Electron - * Smaller community since Proton Native is newer + +* Smaller selection of widgets than Electron +* Smaller community since Proton Native is newer If you've been using Qt or frameworks like that successfully, then you may do so. But if you love working with React like I do, then Proton Native may be your best alternate to a full Electron app. @@ -33,9 +35,9 @@ As your projects get bigger and bigger, you're going to notice more memory usage Under the hood, there are two main libraries that are being used. * [Libui](https://github.com/andlabs/libui)/[Libui-node](https://github.com/parro-it/libui-node) - * Creates the native widgets using GTK3, Cocoa, or Windows API + * Creates the native widgets using GTK3, Cocoa, or Windows API * [React-reconciler](https://github.com/facebook/react/tree/master/packages/react-reconciler) - * Manages state, rerendering, etc. + * Manages state, rerendering, etc. Each libui widget has a corresponding component in `src/components`. All of these are classes, which extend `DesktopComponent`, which defines many common functions such as adding children, removing them, updating props, etc. Then, in `src/index.js`, we give diff --git a/docs/component_APIs/area_arc.md b/docs/component_APIs/area_arc.md index 4fb212f..61d55b8 100644 --- a/docs/component_APIs/area_arc.md +++ b/docs/component_APIs/area_arc.md @@ -46,38 +46,38 @@ render(); The x coordinate of the center of the arc. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### y The y coordinate of the center of the arc. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### r The arc's radius. Percentage values use the Area's width. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### start The start angle of the arc in degrees. Value increases clockwise with `0` meaning the rightmost point ("east") of the imaginary circle. -| **Type** | **Required** | **Default** | -| ------------------------- | ------------ | ----------- | -| number \| string (number) | false | 0 | +| **Type** | **Required** | **Default** | +| ----------------------------- | ------------ | ----------- | +| number | string (number) | false | 0 | ### sweep The sweep angle of the arc in degrees. Value increases clockwise. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | diff --git a/docs/component_APIs/area_bezier.md b/docs/component_APIs/area_bezier.md index 9a2f068..319798e 100644 --- a/docs/component_APIs/area_bezier.md +++ b/docs/component_APIs/area_bezier.md @@ -53,62 +53,62 @@ render(); The x coordinate of the curve's start point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### y1 The y coordinate of the curve's start point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### cx1 The x coordinate of the curve's control point at the start. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### cy1 The y coordinate of the curve's control point at the start. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### x2 The x coordinate of the curve's end point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### y2 The y coordinate of the curve's end point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### cx2 The x coordinate of the curve's control point at the end. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### cy2 The y coordinate of the curve's control point at the end. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | diff --git a/docs/component_APIs/area_circle.md b/docs/component_APIs/area_circle.md index d1e33b8..7226a51 100644 --- a/docs/component_APIs/area_circle.md +++ b/docs/component_APIs/area_circle.md @@ -37,22 +37,22 @@ render(); The x coordinate of the center of the cirle. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### y The y coordinate of the center of the cirle. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### r The circle's radius. Percentage values use the Area's width. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | diff --git a/docs/component_APIs/area_line.md b/docs/component_APIs/area_line.md index 8f3ed1b..f136160 100644 --- a/docs/component_APIs/area_line.md +++ b/docs/component_APIs/area_line.md @@ -38,30 +38,30 @@ render(); The x coordinate of the line's start point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### y1 The y coordinate of the line's start point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### x2 The x coordinate of the line's end point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### y2 The y coordinate of the line's end point. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | diff --git a/docs/component_APIs/area_props.md b/docs/component_APIs/area_props.md index 9263076..a2f3cb1 100644 --- a/docs/component_APIs/area_props.md +++ b/docs/component_APIs/area_props.md @@ -31,9 +31,9 @@ The fill color for the component. The opacity of the fill (between 0 and 1). Gets multiplied with the fill colors alpha value. -| **Type** | **Required** | **Default** | -| ------------------------- | ------------ | ----------- | -| number \| string (number) | false | 1 | +| **Type** | **Required** | **Default** | +| ----------------------------- | ------------ | ----------- | +| number | string (number) | false | 1 | ## stroke @@ -47,15 +47,15 @@ The stroke (line) color for the component. The opacity of the stroke (between 0 and 1). Gets multiplied with the stroke colors alpha value. -| **Type** | **Required** | **Default** | -| ------------------------- | ------------ | ----------- | -| number \| string (number) | false | 1 | +| **Type** | **Required** | **Default** | +| ----------------------------- | ------------ | ----------- | +| number | string (number) | false | 1 | ## strokeWidth -| **Type** | **Required** | **Default** | -| ------------------------- | ------------ | ----------- | -| number \| string (number) | false | 1 | +| **Type** | **Required** | **Default** | +| ----------------------------- | ------------ | ----------- | +| number | string (number) | false | 1 | ## strokeLinecap @@ -73,9 +73,9 @@ The opacity of the stroke (between 0 and 1). Gets multiplied with the stroke col How far to extend the stroke at a sharp corner when using `strokeLinejoin='miter'`, see [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit) for a more detailed explanation. -| **Type** | **Required** | **Default** | -| ------------------------- | ------------ | ----------- | -| number \| string (number) | false | 10 | +| **Type** | **Required** | **Default** | +| ----------------------------- | ------------ | ----------- | +| number | string (number) | false | 10 | ## transform diff --git a/docs/component_APIs/area_rectangle.md b/docs/component_APIs/area_rectangle.md index cadae0b..4170bf5 100644 --- a/docs/component_APIs/area_rectangle.md +++ b/docs/component_APIs/area_rectangle.md @@ -44,30 +44,30 @@ render(); The x coordinate of the rectangles top left corner. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### y The y coordinate of the rectangles top left corner. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### width The width of the rectangle. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | ### height The height of the rectangle. -| **Type** | **Required** | -| ------------------------- | ------------ | -| number \| string (number) | true | +| **Type** | **Required** | +| ----------------------------- | ------------ | +| number | string (number) | true | diff --git a/docs/component_APIs/area_text.md b/docs/component_APIs/area_text.md new file mode 100644 index 0000000..57ebc23 --- /dev/null +++ b/docs/component_APIs/area_text.md @@ -0,0 +1,128 @@ +# Area.Text + +A (possibly styled) text to be displayed in an Area component. Nested `Area.Text` components inheirit the parent's style. + +```jsx +import React, { Component } from 'react'; + +import { render, Window, App, Area, Box } from 'proton-native'; + +class Example extends Component { + render() { + return ( + + + + + + This is some text drawn onto an{' '} + Area! + + + + + + ); + } +} + +render(); +``` + +## Props + +_Not all fonts support all possible options_ + +* [fontSize](#fontsize) +* [fontFamily](#fontfamily) +* [color](#color) +* [backgroundColor](#backgroundcolor) +* [fontStyle](#fontstyle) +* [fontWeight](#fontweight) +* [textStretch](#textstretch) +* [textUnderline](#textunderline) +* [textUnderlineColor](#textunderlinecolor) +* [textAlign](#textalign) +* transform (only in a top level text component, see [Area Props](area_props.md)) + +## Reference + +### fontSize + +The font size (in pt). + +| **Type** | **Required** | **Default** | +| -------- | ------------ | ----------- | +| number | false | 12 | + +### fontFamily + +The font family (only if available on the system). + +| **Type** | **Required** | **Default** | +| -------- | ------------ | ----------- | +| string | false | 'Arial' | + +### color + +The text color, specified as a CSS color string. + +| **Type** | **Required** | +| -------- | ------------ | +| string | false | + +### backgroundColor + +The background color, specified as a CSS color string. + +| **Type** | **Required** | +| -------- | ------------ | +| string | false | + +### fontStyle + +Whether an italic font should be used. + +| **Type** | **Required** | **Default** | +| ----------------------------------- | ------------ | ----------- | +| enum('normal', 'oblique', 'italic') | false | 'normal' | + +### fontWeight + +Whether a bold font should be used (and the amount). + +| **Type** | **Required** | **Default** | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- | +| enum('minimum', 'thin', 'ultraLight', 'light', 'book', 'normal', 'medium', 'semiBold', 'bold', 'ultraBold', 'heavy', 'ultraHeavy', 'maximum') | number (0-1000) | false | 'normal' | + +### textStretch + +How wide or narrow the characters should be. + +| **Type** | **Required** | **Default** | +| ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ----------- | +| enum('ultraCondensed', 'extraCondensed', 'condensed', 'semiCondensed', 'normal', 'semiExpanded', 'expanded', 'extraExpanded', 'ultraExpanded') | false | 'normal' | + +### textUnderline + +The text underline style. + +| **Type** | **Required** | +| ---------------------------------------------- | ------------ | +| enum('none', 'single', 'double', 'suggestion') | false | + +### textUnderlineColor + +The text underline color. + +| **Type** | **Required** | +| ------------------------------------------------------------- | ------------ | +| string(color) | enum('spelling', 'grammar', 'auxiliary') | false | + +### textAlign + +Wheter the text should be aligned to the left, center or right. **Works only on a top level text component, not it's children!** + +| **Type** | **Required** | +| ------------------------------- | ------------ | +| enum('left', 'center', 'right') | false | diff --git a/docs/component_APIs/styledtext.md b/docs/component_APIs/styledtext.md new file mode 100644 index 0000000..818f593 --- /dev/null +++ b/docs/component_APIs/styledtext.md @@ -0,0 +1,32 @@ +# Styled + +A wrapper around Area.Text without the need to explicitly create an Area component. + +```jsx +import React, { Component } from 'react'; + +import { render, Window, App, StyledText, Box } from 'proton-native'; + +class Example extends Component { + render() { + return ( + + + + + This is some text drawn onto an{' '} + Area! + + + + + ); + } +} + +render(); +``` + +## Props + +For props, see [Area.Text](component_APIs/area_text.md#Props) diff --git a/docs/manual_install.md b/docs/manual_install.md index 365e431..3118308 100644 --- a/docs/manual_install.md +++ b/docs/manual_install.md @@ -8,7 +8,7 @@ If you get an error about Python on Windows, install the build tools: You also need to have babel-cli and these babel-presets prepared in devDependencies -```npm install --save-dev babel-cli babel-preset-env babel-preset-stage-0 babel-preset-react``` +`npm install --save-dev babel-cli babel-preset-env babel-preset-stage-0 babel-preset-react` Then create `.babelrc`: @@ -36,17 +36,19 @@ Now you can just run `npm run start` to run your script. A usual example starts with the following, just like any other React Native app. Most props can be set to their defaults and not be mentioned, as shown above. The Window component actually accepts many props, but only 4 have to be specified. -``` javascript +```javascript import React, { Component } from 'react'; // import from react import { render, Window, App } from 'proton-native'; // import the proton-native components class Example extends Component { - render() { // all Components must have a render method + render() { + // all Components must have a render method return ( - // you must always include App around everything - - // all your other components go here + + // you must always include App around everything + + // all your other components go here ); diff --git a/examples/font.js b/examples/font.js new file mode 100644 index 0000000..b3e146f --- /dev/null +++ b/examples/font.js @@ -0,0 +1,122 @@ +import React, { Component } from 'react'; +import { + render, + Window, + App, + Picker, + Box, + Area, + FontButton, + ColorButton, + Checkbox, +} from '../src'; + +class Example extends Component { + state = { align: 'left', color: 'blue', useFont: false, font: {} }; + + render() { + return ( + + + + + this.setState({ font: v })} + /> + + this.setState({ + color: `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})`, + }) + } + /> + { + switch (v) { + case 0: + return this.setState({ align: 'left' }); + case 1: + return this.setState({ align: 'center' }); + case 2: + return this.setState({ align: 'right' }); + } + }} + > + Left + Center + Right + + this.setState({ useFont: v })} + > + {'Use Georgia (20pt) instead\nof font button'} + + + + + + Hi! + + {'\n'} + + Test + ing + + {'\n'} + Serif + {'\n'} + + Console + + {'\n'} + + A very bold statement! + + {'\n'} + + This is an{' '} + + error + + + + + + + + ); + } +} + +render(); diff --git a/package-lock.json b/package-lock.json index ee9fcb0..8714e16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,24 +1,26 @@ { "name": "proton-native", - "version": "1.1.5", + "version": "1.1.6", "lockfileVersion": 1, "requires": true, "dependencies": { "@babel/code-frame": { - "version": "7.0.0-beta.49", + "version": "7.0.0-beta.46", "resolved": - "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.49.tgz", - "integrity": "sha1-vs2AVIJzREDJ0TfkbXc0DmTX9Rs=", + "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.46.tgz", + "integrity": + "sha512-7BKRkmYaPZm3Yff5HGZJKCz7RqZ5jUjknsXT6Gz5YKG23J3uq9hAj0epncCB0rlqmnZ8Q+UUpQB2tCR5mT37vw==", "dev": true, "requires": { - "@babel/highlight": "7.0.0-beta.49" + "@babel/highlight": "7.0.0-beta.46" } }, "@babel/highlight": { - "version": "7.0.0-beta.49", + "version": "7.0.0-beta.46", "resolved": - "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.49.tgz", - "integrity": "sha1-lr3GtD4TSCASumaRsQGEktOWIsw=", + "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.46.tgz", + "integrity": + "sha512-r4snW6Q8ICL3Y8hGzYJRvyG/+sc+kvkewXNedG9tQjoHmUFMwMSv/o45GWQUQswevGnWghiGkpRPivFfOuMsOA==", "dev": true, "requires": { "chalk": "^2.0.0", @@ -73,10 +75,10 @@ } }, "@types/node": { - "version": "8.10.17", - "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.17.tgz", + "version": "8.10.18", + "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.18.tgz", "integrity": - "sha512-3N3FRd/rA1v5glXjb90YdYUa+sOB7WrkU2rAhKZnF4TKD86Cym9swtulGuH0p9nxo7fP5woRNa8b0oFTpCO1bg==", + "sha512-WoepSz+wJlU5Bjq5oK6cO1oXe2FgPcjMtQPgKPS8fVaTAD0lxkScMCCbMimdkVCsykqaA4lvHWz3cmj28yimhA==", "dev": true }, "abab": { @@ -198,8 +200,7 @@ "anymatch": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz", - "integrity": - "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==", + "integrity": "sha1-VT3Lj5HjyImEXf26NMd3IbkLnXo=", "dev": true, "optional": true, "requires": { @@ -254,8 +255,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", - "integrity": - "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==", + "integrity": "sha1-NgSLv/TntH4TZkQxbJlmnqWukfE=", "dev": true }, "arr-union": { @@ -382,9 +382,10 @@ "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=" }, "aws4": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz", - "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", + "integrity": + "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, "babel-cli": { "version": "6.26.0", @@ -1435,8 +1436,7 @@ "babylon": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", - "integrity": - "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", + "integrity": "sha1-ry87iPpvXB5MY00aD46sT1WzleM=", "dev": true }, "balanced-match": { @@ -1931,8 +1931,7 @@ "version": "1.9.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", - "integrity": - "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", + "integrity": "sha1-wSYRB66y8pTr/+ye2eytUppgl+0=", "requires": { "color-name": "^1.1.1" } @@ -1954,10 +1953,10 @@ } }, "combined-stream": { - "version": "1.0.5", + "version": "1.0.6", "resolved": - "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", - "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=", + "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", + "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", "requires": { "delayed-stream": "~1.0.0" } @@ -2155,8 +2154,7 @@ "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": - "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=", "requires": { "ms": "2.0.0" } @@ -2182,11 +2180,11 @@ "dev": true }, "deep-extend": { - "version": "0.5.1", + "version": "0.6.0", "resolved": - "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz", + "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": - "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==" + "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "deep-is": { "version": "0.1.3", @@ -2595,10 +2593,10 @@ "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" }, "fast-deep-equal": { - "version": "1.0.0", + "version": "1.1.0", "resolved": - "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz", - "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8=" + "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", + "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=" }, "fast-json-stable-stringify": { "version": "2.0.0", @@ -2673,6 +2671,38 @@ "randomatic": "^3.0.0", "repeat-element": "^1.1.2", "repeat-string": "^1.5.2" + }, + "dependencies": { + "kind-of": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": + "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "dev": true + }, + "randomatic": { + "version": "3.0.0", + "resolved": + "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz", + "integrity": + "sha512-VdxFOIEY3mNO5PtSRkkle/hPJDHvQhK21oa73K4yAc9qmp6N429gAyF1gZMOTMeS0/AYzaV/2Trcef+NaIonSA==", + "dev": true, + "requires": { + "is-number": "^4.0.0", + "kind-of": "^6.0.0", + "math-random": "^1.0.1" + }, + "dependencies": { + "is-number": { + "version": "4.0.0", + "resolved": + "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", + "integrity": + "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", + "dev": true + } + } + } } }, "find-parent-dir": { @@ -2714,12 +2744,12 @@ "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=" }, "form-data": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.1.tgz", - "integrity": "sha1-b7lPvXGIUwbXPRXMSX/kzE7NRL8=", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", + "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", "requires": { "asynckit": "^0.4.0", - "combined-stream": "^1.0.5", + "combined-stream": "1.0.6", "mime-types": "^2.1.12" } }, @@ -2760,8 +2790,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", - "integrity": - "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", + "integrity": "sha1-4y/AMKLM7kSmtTcTCNpUvgs5fSc=", "dev": true }, "fs.realpath": { @@ -3408,8 +3437,7 @@ "globals": { "version": "9.18.0", "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", - "integrity": - "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==", + "integrity": "sha1-qjiWs+abSH8X4x7SFD1pqOMMLYo=", "dev": true }, "got": { @@ -3556,9 +3584,10 @@ } }, "home-path": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/home-path/-/home-path-1.0.5.tgz", - "integrity": "sha1-eIspgVsS1Tus9XVkhHbm+QQdEz8=" + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/home-path/-/home-path-1.0.6.tgz", + "integrity": + "sha512-wo+yjrdAtoXt43Vy92a+0IPCYViiyLAHyp0QVS4xL/tfvVz5sXIW1ubLZk3nhVkD92fQpUMKX+fzMjr5F489vw==" }, "hosted-git-info": { "version": "2.6.0", @@ -3622,8 +3651,7 @@ "version": "0.4.19", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", - "integrity": - "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" + "integrity": "sha1-90aPYBNfXl2tM5nAqBvpoWA6CCs=" }, "import-lazy": { "version": "2.1.0", @@ -3666,8 +3694,7 @@ "ini": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": - "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" + "integrity": "sha1-7uJfVtscnsYIXgwid4CD9Zar+Sc=" }, "invariant": { "version": "2.2.2", @@ -3715,8 +3742,7 @@ "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": - "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", + "integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=", "dev": true }, "is-builtin-module": { @@ -4079,6 +4105,27 @@ "supports-color": "^5.3.0" } }, + "jest-jasmine2": { + "version": "22.4.4", + "resolved": + "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-22.4.4.tgz", + "integrity": + "sha512-nK3vdUl50MuH7vj/8at7EQVjPGWCi3d5+6aCi7Gxy/XMWdOdbH1qtO/LjKbqD8+8dUAEH+BVVh7HkjpCWC1CSw==", + "dev": true, + "requires": { + "chalk": "^2.0.1", + "co": "^4.6.0", + "expect": "^22.4.0", + "graceful-fs": "^4.1.11", + "is-generator-fn": "^1.0.0", + "jest-diff": "^22.4.0", + "jest-matcher-utils": "^22.4.0", + "jest-message-util": "^22.4.0", + "jest-snapshot": "^22.4.0", + "jest-util": "^22.4.1", + "source-map-support": "^0.5.0" + } + }, "jest-validate": { "version": "22.4.4", "resolved": @@ -4094,6 +4141,26 @@ "pretty-format": "^22.4.0" } }, + "source-map": { + "version": "0.6.1", + "resolved": + "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": + "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-support": { + "version": "0.5.6", + "resolved": + "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz", + "integrity": + "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, "supports-color": { "version": "5.4.0", "resolved": @@ -4189,83 +4256,6 @@ "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==", "dev": true }, - "jest-jasmine2": { - "version": "22.4.4", - "resolved": - "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-22.4.4.tgz", - "integrity": - "sha512-nK3vdUl50MuH7vj/8at7EQVjPGWCi3d5+6aCi7Gxy/XMWdOdbH1qtO/LjKbqD8+8dUAEH+BVVh7HkjpCWC1CSw==", - "dev": true, - "requires": { - "chalk": "^2.0.1", - "co": "^4.6.0", - "expect": "^22.4.0", - "graceful-fs": "^4.1.11", - "is-generator-fn": "^1.0.0", - "jest-diff": "^22.4.0", - "jest-matcher-utils": "^22.4.0", - "jest-message-util": "^22.4.0", - "jest-snapshot": "^22.4.0", - "jest-util": "^22.4.1", - "source-map-support": "^0.5.0" - }, - "dependencies": { - "ansi-styles": { - "version": "3.2.1", - "resolved": - "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": - "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "requires": { - "color-convert": "^1.9.0" - } - }, - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": - "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", - "dev": true, - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, - "source-map": { - "version": "0.6.1", - "resolved": - "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": - "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - }, - "source-map-support": { - "version": "0.5.6", - "resolved": - "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz", - "integrity": - "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==", - "dev": true, - "requires": { - "buffer-from": "^1.0.0", - "source-map": "^0.6.0" - } - }, - "supports-color": { - "version": "5.4.0", - "resolved": - "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", - "integrity": - "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, "jest-matcher-utils": { "version": "22.4.3", "resolved": @@ -4801,43 +4791,15 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz", "integrity": "sha1-0z65XQ0gAaS+OWWXB8UbDLcc4Ck=" - }, - "request": { - "version": "2.87.0", - "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz", - "integrity": - "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==", - "requires": { - "aws-sign2": "~0.7.0", - "aws4": "^1.6.0", - "caseless": "~0.12.0", - "combined-stream": "~1.0.5", - "extend": "~3.0.1", - "forever-agent": "~0.6.1", - "form-data": "~2.3.1", - "har-validator": "~5.0.3", - "http-signature": "~1.2.0", - "is-typedarray": "~1.0.0", - "isstream": "~0.1.2", - "json-stringify-safe": "~5.0.1", - "mime-types": "~2.1.17", - "oauth-sign": "~0.8.2", - "performance-now": "^2.1.0", - "qs": "~6.5.1", - "safe-buffer": "^5.1.1", - "tough-cookie": "~2.3.3", - "tunnel-agent": "^0.6.0", - "uuid": "^3.1.0" - } } } }, "libui-node": { - "version": "0.2.0", + "version": "0.2.1", "resolved": - "https://registry.npmjs.org/libui-node/-/libui-node-0.2.0.tgz", + "https://registry.npmjs.org/libui-node/-/libui-node-0.2.1.tgz", "integrity": - "sha512-6LRO0y++9kO5RcuODjjwwV9IeZlkYC4mnr9NLlCmm/CT8xKIZ1AWMp4JU+iI41VDNN52kOqh9u4uB9nFdcGa2g==", + "sha512-VVpghzPFPccw7+9PjHEyWUIJ6LszKyT1NZ+bPwL8nEDdH2kV6gAW2HdWPr47OF6sshkUpZL9OqEWSrEMAsCP+w==", "requires": { "@mischnic/async-hooks": "^0.0.4", "autogypi": "^0.2.2", @@ -5397,8 +5359,7 @@ "lodash": { "version": "4.17.5", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz", - "integrity": - "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==", + "integrity": "sha1-maktZcAnLevoyWtgV7yPv6O+1RE=", "dev": true }, "lodash.sortby": { @@ -5497,8 +5458,7 @@ "lru-cache": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", - "integrity": - "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==", + "integrity": "sha1-Yi4y6CSItJJ5EUpPns9F581rulU=", "dev": true, "requires": { "pseudomap": "^1.0.2", @@ -5601,24 +5561,25 @@ } }, "mime-db": { - "version": "1.30.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz", - "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE=" + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", + "integrity": + "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" }, "mime-types": { - "version": "2.1.17", + "version": "2.1.18", "resolved": - "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz", - "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=", + "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", + "integrity": + "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", "requires": { - "mime-db": "~1.30.0" + "mime-db": "~1.33.0" } }, "minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": - "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=", "requires": { "brace-expansion": "^1.1.7" } @@ -5713,9 +5674,7 @@ "version": "2.10.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz", "integrity": - "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==", - "dev": true, - "optional": true + "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==" }, "nanomatch": { "version": "1.2.9", @@ -5777,14 +5736,6 @@ "emscripten-library-decorator": "~0.2.2", "mkdirp": "~0.5.1", "nan": "^2.9.2" - }, - "dependencies": { - "nan": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz", - "integrity": - "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==" - } } }, "ncp": { @@ -5796,8 +5747,7 @@ "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", - "integrity": - "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "integrity": "sha1-mA9vcthSEaU0fGsrwYxbhMPrR+8=", "requires": { "encoding": "^0.1.11", "is-stream": "^1.0.1" @@ -6349,8 +6299,7 @@ "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", - "integrity": - "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==", + "integrity": "sha1-I4Hts2ifelPWUxkAYPz4ItLzaP8=", "dev": true }, "process-nextick-args": { @@ -6373,8 +6322,7 @@ "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", - "integrity": - "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=", "requires": { "asap": "~2.0.3" } @@ -6403,48 +6351,18 @@ "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=" }, "qs": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", "integrity": - "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" - }, - "randomatic": { - "version": "3.0.0", - "resolved": - "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz", - "integrity": - "sha512-VdxFOIEY3mNO5PtSRkkle/hPJDHvQhK21oa73K4yAc9qmp6N429gAyF1gZMOTMeS0/AYzaV/2Trcef+NaIonSA==", - "dev": true, - "requires": { - "is-number": "^4.0.0", - "kind-of": "^6.0.0", - "math-random": "^1.0.1" - }, - "dependencies": { - "is-number": { - "version": "4.0.0", - "resolved": - "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz", - "integrity": - "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==", - "dev": true - }, - "kind-of": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": - "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", - "dev": true - } - } + "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" }, "rc": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": - "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==", + "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { - "deep-extend": "^0.5.1", + "deep-extend": "^0.6.0", "ini": "~1.3.0", "minimist": "^1.2.0", "strip-json-comments": "~2.0.1" @@ -6506,11 +6424,11 @@ } }, "react-reconciler": { - "version": "0.7.0", + "version": "0.11.0", "resolved": - "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.7.0.tgz", + "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.11.0.tgz", "integrity": - "sha512-50JwZ3yNyMS8fchN+jjWEJOH3Oze7UmhxeoJLn2j6f3NjpfCRbcmih83XTWmzqtar/ivd5f7tvQhvvhism2fgg==", + "sha512-a83YVKKZbE5/aDRN+pZNxckrOZprxa0wr5v+yExpYd8cdv9XfC9ipb7rsN/ztn0kGVBSFqXGwBfg7SBeB6w94g==", "requires": { "fbjs": "^0.8.16", "loose-envify": "^1.1.0", @@ -6544,8 +6462,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", - "integrity": - "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "integrity": "sha1-No8lEtefnUb9/HE0mueHi7weuVw=", "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -6583,8 +6500,7 @@ "version": "1.3.3", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz", - "integrity": - "sha512-jVpo1GadrDAK59t/0jRx5VxYWQEDkkEKi6+HjE3joFVLfDOh9Xrdh0dF1eSq+BI/SwvTQ44gSscJ8N5zYL61sg==", + "integrity": "sha1-DDNtOYBVPXVcObWGrjsgqknIK38=", "dev": true }, "regenerator-runtime": { @@ -6599,8 +6515,7 @@ "version": "0.10.1", "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.10.1.tgz", - "integrity": - "sha512-PJepbvDbuK1xgIgnau7Y90cwaAmO/LCLMI2mPvaXq2heGMR3aWW5/BQvYrhJ8jgmQjXewXvBjzfqKcVOmhjZ6Q==", + "integrity": "sha1-HkmWg3Ix2ot/PPQRTXG1aRoGgN0=", "dev": true, "requires": { "babel-runtime": "^6.18.0", @@ -6612,8 +6527,7 @@ "version": "0.4.4", "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz", - "integrity": - "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==", + "integrity": "sha1-db3FiioUls7EihKDW8VMjVYjNt0=", "dev": true, "requires": { "is-equal-shallow": "^0.1.3" @@ -6851,8 +6765,7 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", - "integrity": - "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" + "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM=" }, "safe-regex": { "version": "1.1.0", @@ -7167,8 +7080,7 @@ "version": "0.4.18", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz", - "integrity": - "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==", + "integrity": "sha1-Aoam3ovkJkEzhZTpfM6nXwosWF8=", "dev": true, "requires": { "source-map": "^0.5.6" @@ -7338,8 +7250,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": - "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=", "requires": { "safe-buffer": "~5.1.0" } @@ -7654,8 +7565,7 @@ "version": "0.7.17", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", - "integrity": - "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" + "integrity": "sha1-6exflJi57JEOeuOsYmqAXE0J7Kw=" }, "ultron": { "version": "1.1.1", @@ -7969,8 +7879,7 @@ "which": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz", - "integrity": - "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==", + "integrity": "sha1-/wS9/AEO5UfXgL7DjhrBwnd9JTo=", "requires": { "isexe": "^2.0.0" } diff --git a/package.json b/package.json index 2fd6378..3570a42 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "scripts": { "demo": "babel-node Demo.js", "prettier": - "prettier --single-quote --trailing-comma es5 --write 'src/**/*.js'", + "prettier --single-quote --trailing-comma es5 --write 'src/**/*.js' 'examples/*.js' ./**/*.md", "build": "babel src -d bin", "pub": "babel src -d bin && npm publish", "precommit": "lint-staged" @@ -30,10 +30,10 @@ "dependencies": { "color": "^3.0.0", "fbjs": "^0.8.16", - "libui-node": "^0.2.0", + "libui-node": "^0.2.1", "prop-types": "^15.6.1", "react": "^16.3.2", - "react-reconciler": "^0.7.0", + "react-reconciler": "^0.11.0", "svg-path-parser": "^1.1.0" }, "devDependencies": { diff --git a/src/components/Area.js b/src/components/Area.js index 4c2e56d..2788748 100644 --- a/src/components/Area.js +++ b/src/components/Area.js @@ -2,11 +2,12 @@ import DesktopComponent, { universalPropTypes, universalDefaultProps, } from './DesktopComponent'; -import { Component } from 'react'; +import React, { Component } from 'react'; import libui from 'libui-node'; import PropTypes from 'prop-types'; import Color from 'color'; import parseSVG from 'svg-path-parser'; +import { StyledText } from '..'; const onMouse = component => (area, evt) => { const down = evt.getDown(); @@ -176,14 +177,19 @@ function fallback(...vals) { } } -function createBrush(color, alpha) { - const brush = new libui.DrawBrush(); - brush.color = new libui.Color( +function toLibuiColor(color) { + return new libui.Color( color.red() / 255, color.green() / 255, color.blue() / 255, - color.alpha() * alpha + color.alpha() ); +} + +function createBrush(color, alpha) { + const brush = new libui.DrawBrush(); + brush.color = toLibuiColor(color); + brush.color.alpha = brush.color.alpha * alpha; brush.type = libui.brushType.solid; return brush; @@ -194,6 +200,7 @@ class AreaComponent { this.root = root; this.props = { ...props }; this.setDefaults(props); + this.element = {}; } setDefaults(props) { @@ -284,108 +291,105 @@ class AreaComponent { }; } + applyTransforms(p) { + p.getContext().save(); + + const mat = new libui.UiDrawMatrix(); + mat.setIdentity(); + + for (const transform of this.props.transform.match(/\w+\([^)]+\)/g)) { + // rotate(deg [,x, y]) + // default x: 50%, y: 50% + const rotate = transform.match( + /rotate\s*\(\s*([-0-9.]+)(?:\s*,\s*([-0-9.%]+)\s*,\s*([-0-9.%]+))?\s*\)/ + ); + if (rotate) { + const xy = this.selfToParent( + fallback(rotate[2], '50%', v => v), + fallback(rotate[3], '50%', v => v), + p + ); + const rad = Number(rotate[1]) * (Math.PI / 180); + mat.rotate(xy.x, xy.y, rad); + } + + // translate(x [y]) + // default y: x + const translate = transform.match( + /translate\s*\(\s*([-0-9.%]+)(?:\s*,\s*([-0-9.%]+))?\s*\)/ + ); + if (translate) { + mat.translate( + this.parseSelf(translate[1], p), + fallback(translate[2], translate[1], v => this.parseSelf(v, p, true)) + ); + } + + // 1: scale(x) + // 2: scale(x, y) + // 3: scale(x, xCenter, yCenter) + // 4: scale(x, y, xCenter, yCenter) + // default y: x, xCenter=yCenter: 50% + const scale = transform.match( + /scale\s*\(([-0-9.]+)(?:(?:\s*,\s*([-0-9.]+))?(?:\s*,\s*([-0-9.%]+)\s*,\s*([-0-9.%]+))?)?\)/ + ); + if (scale) { + const xy = this.selfToParent( + fallback(scale[3], '50%', v => v), + fallback(scale[4], '50%', v => v), + p + ); + if (process.platform === 'win32') { + mat.scale(xy.x, xy.y, Number(scale[1]), fallback(scale[2], scale[1])); + } else { + // https://github.com/andlabs/libui/issues/331: + mat.translate(xy.x, xy.y); + mat.scale(0, 0, Number(scale[1]), fallback(scale[2], scale[1])); + mat.translate(-xy.x, -xy.y); + } + } + + // skew(a, b [,x, y]) + // a, b: x/y angle + // default x=y: 50% + const skew = transform.match( + /skew\s*\(\s*([-0-9.]+)\s*,\s*([-0-9.]+)(?:,\s*([-0-9.%]+),\s*([-0-9.%]+))?\)/ + ); + if (skew) { + const rad1 = Number(skew[1]) * (Math.PI / 180); + const rad2 = Number(skew[2]) * (Math.PI / 180); + mat.skew( + fallback(skew[2], '50%', v => this.parseSelf(v, p)), + fallback(skew[3], '50%', v => this.parseSelf(v, p, true)), + rad1, + rad2 + ); + } + + // matrix(a, b, c, d, e, f, g) + const matrix = transform.match( + /matrix\s*\(\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*\)/ + ); + if (matrix) { + mat.setM11(matrix[1]); + mat.setM12(matrix[2]); + mat.setM21(matrix[3]); + mat.setM22(matrix[4]); + mat.setM31(matrix[5]); + mat.setM32(matrix[6]); + } + } + + p.getContext().transform(mat); + } + render(parent, area, p, props) { this.parent = parent; const { children, ...appendProps } = this.props; props = { ...props, ...appendProps }; if (this.props.transform) { - p.getContext().save(); - - const mat = new libui.UiDrawMatrix(); - mat.setIdentity(); - - for (const transform of this.props.transform.match(/\w+\([^)]+\)/g)) { - // rotate(deg [,x, y]) - // default x: 50%, y: 50% - const rotate = transform.match( - /rotate\s*\(\s*([-0-9.]+)(?:\s*,\s*([-0-9.%]+)\s*,\s*([-0-9.%]+))?\s*\)/ - ); - if (rotate) { - const xy = this.selfToParent( - fallback(rotate[2], '50%', v => v), - fallback(rotate[3], '50%', v => v), - p - ); - const rad = Number(rotate[1]) * (Math.PI / 180); - mat.rotate(xy.x, xy.y, rad); - } - - // translate(x [y]) - // default y: x - const translate = transform.match( - /translate\s*\(\s*([-0-9.%]+)(?:\s*,\s*([-0-9.%]+))?\s*\)/ - ); - if (translate) { - mat.translate( - this.parseSelf(translate[1], p), - fallback(translate[2], translate[1], v => - this.parseSelf(v, p, true) - ) - ); - } - - // 1: scale(x) - // 2: scale(x, y) - // 3: scale(x, xCenter, yCenter) - // 4: scale(x, y, xCenter, yCenter) - // default y: x, xCenter=yCenter: 50% - const scale = transform.match( - /scale\s*\(([-0-9.]+)(?:(?:\s*,\s*([-0-9.]+))?(?:\s*,\s*([-0-9.%]+)\s*,\s*([-0-9.%]+))?)?\)/ - ); - if (scale) { - const xy = this.selfToParent( - fallback(scale[3], '50%', v => v), - fallback(scale[4], '50%', v => v), - p - ); - if (process.platform === 'win32') { - mat.scale( - xy.x, - xy.y, - Number(scale[1]), - fallback(scale[2], scale[1]) - ); - } else { - // https://github.com/andlabs/libui/issues/331: - mat.translate(xy.x, xy.y); - mat.scale(0, 0, Number(scale[1]), fallback(scale[2], scale[1])); - mat.translate(-xy.x, -xy.y); - } - } - - // skew(a, b [,x, y]) - // a, b: x/y angle - // default x=y: 50% - const skew = transform.match( - /skew\s*\(\s*([-0-9.]+)\s*,\s*([-0-9.]+)(?:,\s*([-0-9.%]+),\s*([-0-9.%]+))?\)/ - ); - if (skew) { - const rad1 = Number(skew[1]) * (Math.PI / 180); - const rad2 = Number(skew[2]) * (Math.PI / 180); - mat.skew( - fallback(skew[2], '50%', v => this.parseSelf(v, p)), - fallback(skew[3], '50%', v => this.parseSelf(v, p, true)), - rad1, - rad2 - ); - } - - // matrix(a, b, c, d, e, f, g) - const matrix = transform.match( - /matrix\s*\(\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*,\s*([-0-9.]+)\s*\)/ - ); - if (matrix) { - mat.setM11(matrix[1]); - mat.setM12(matrix[2]); - mat.setM21(matrix[3]); - mat.setM22(matrix[4]); - mat.setM31(matrix[5]); - mat.setM32(matrix[6]); - } - } - - p.getContext().transform(mat); + this.applyTransforms(p); } const path = this.draw(area, p, props); @@ -734,4 +738,168 @@ Area.Path.defaultProps = { fillRule: 'nonzero', }; +Area.Text = class AreaText extends AreaComponent { + constructor(root, props) { + super(root, props); + this.children = []; + + this.str = new libui.AttributedString(''); + } + + appendChild(child) { + this.children.push(child); + } + + appendText(t, ...attr) { + if (this.parent instanceof AreaText) { + this.parent.appendText(t, ...attr); + } else { + if (attr) { + this.str.appendAttributed(t, ...attr); + } else { + this.str.appendUnattributed(t); + } + } + } + + render(parent, area, p, props, parentStyle = {}) { + this.parent = parent; + let style = { ...parentStyle, ...this.props.style }; + + this.str.free(); + this.str = new libui.AttributedString(''); + + const attrs = Object.keys(style) + .map(k => { + const v = style[k]; + switch (k) { + case 'color': + const color = Color(v); + return libui.FontAttribute.newColor(toLibuiColor(Color(v))); + case 'fontSize': + return libui.FontAttribute.newSize(Number(v)); + case 'fontFamily': + return libui.FontAttribute.newFamily(v); + case 'backgroundColor': + return libui.FontAttribute.newBackgroundColor( + toLibuiColor(Color(v)) + ); + case 'fontStyle': + if (v in libui.textItalic) { + return libui.FontAttribute.newItalic(libui.textItalic[v]); + } + break; + case 'fontWeight': + if (typeof v === 'string' && v in libui.textWeight) { + return libui.FontAttribute.newWeight(libui.textWeight[v]); + } else if ( + Number(v) >= libui.textWeight.minimum && + Number(v) <= libui.textWeight.maximum + ) { + return libui.FontAttribute.newWeight(Number(v)); + } + break; + case 'textStretch': + if (v in libui.textStretch) { + return libui.FontAttribute.newStretch(libui.textStretch[v]); + } + break; + case 'textUnderline': + if (v in libui.textUnderline) { + return libui.FontAttribute.newUnderline(libui.textUnderline[v]); + } + break; + case 'textUnderlineColor': + if (v !== 'custom' && v in libui.textUnderlineColor) { + return libui.FontAttribute.newUnderlineColor( + libui.textUnderlineColor[v] + ); + } else { + return libui.FontAttribute.newUnderlineColor( + libui.textUnderlineColor[v], + toLibuiColor(Color(v)) + ); + } + } + }) + .filter(x => x); + + this.children.forEach(v => { + if (typeof v === 'string') { + this.appendText(v, ...attrs); + } else { + v.render(this, area, p, props, style); + } + }); + + if (!(this.parent instanceof AreaText)) { + let textAlign; + switch (style.textAlign || 'left') { + case 'left': + textAlign = libui.textAlign.left; + break; + case 'center': + textAlign = libui.textAlign.center; + break; + case 'right': + textAlign = libui.textAlign.right; + break; + } + + const font = new libui.FontDescriptor( + 'Arial', + 12, + libui.textWeight.normal, + libui.textItalic.normal, + libui.textStretch.normal + ); + const layout = new libui.DrawTextLayout( + this.str, + font, + p.getAreaWidth() - this.parseParent(this.props.x, p, false), + textAlign + ); + + if (this.props.transform) { + this.applyTransforms(p); + } + + p + .getContext() + .text( + this.parseParent(this.props.x || 0, p, false), + this.parseParent(this.props.y || 0, p, true), + layout + ); + + font.free(); + layout.free(); + + if (this.props.transform) { + p.getContext().restore(); + } + } + } +}; + +function areaProp(props, propName, componentName) { + const v = props[propName]; + if ( + !(typeof v === 'string' || v.type === 'AREATEXT' || v.type === StyledText) + ) { + return new Error( + 'Invalid prop `' + + propName + + '` supplied to' + + ' `' + + componentName + + '`. Has to be a string or an Area.Text component.' + ); + } +} + +Area.Text.propTypes = { + children: PropTypes.oneOfType([areaProp, PropTypes.arrayOf(areaProp)]), +}; + export default Area; diff --git a/src/components/FontButton.js b/src/components/FontButton.js index 7bdb659..6bb81f3 100644 --- a/src/components/FontButton.js +++ b/src/components/FontButton.js @@ -6,7 +6,21 @@ import libui from 'libui-node'; import PropTypes from 'prop-types'; class FontButton extends DesktopComponent { - eventParameter = { onChanged: () => this.element.getFont() }; + eventParameter = { + onChanged: () => { + const f = this.element.getFont(); + const italic = f.getItalic(); + return { + fontFamily: f.getFamily(), + fontSize: f.getSize(), + fontWeight: f.getWeight(), + fontStyle: Object.keys(libui.textItalic).find( + v => libui.textItalic[v] === italic + ), + textStretch: f.getStretch(), + }; + }, + }; constructor(root, props) { super(root, props); diff --git a/src/index.js b/src/index.js index d9263ee..bdd1665 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import { Separator, Menu, Area, + StyledText, } from './react-components'; import { Dialog } from './components'; @@ -47,6 +48,7 @@ Area.Bezier = 'AREABEZIER'; Area.Path = 'AREAPATH'; Area.Group = 'AREAGROUP'; Area.Circle = 'AREACIRCLE'; +Area.Text = 'AREATEXT'; export { render, @@ -87,4 +89,5 @@ export { Dialog, AreaInternal, Area, + StyledText, }; diff --git a/src/react-components/Area.js b/src/react-components/Area.js index 6fcda06..60d9255 100644 --- a/src/react-components/Area.js +++ b/src/react-components/Area.js @@ -2,6 +2,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { AreaInternal } from '../'; +let HasAreaParentContext = React.createContext(false); + const AreaComponentPropTypes = { transform: PropTypes.string, fill: PropTypes.string, @@ -61,9 +63,13 @@ class Area extends Component { onKeyDown, }; return React.createElement( - AreaInternal, - areaProps, - React.createElement(Area.Group, groupProps, children) + HasAreaParentContext.Provider, + { value: true }, + React.createElement( + AreaInternal, + areaProps, + React.createElement(Area.Group, groupProps, children) + ) ); } } @@ -75,5 +81,5 @@ Area.propTypes = { Area.defaultProps = { ...AreaComponentDefaultProps, }; - +export { HasAreaParentContext }; export default Area; diff --git a/src/react-components/StyledText.js b/src/react-components/StyledText.js new file mode 100644 index 0000000..759dd6f --- /dev/null +++ b/src/react-components/StyledText.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Area } from '../'; +import { HasAreaParentContext } from './Area'; + +class StyledText extends Component { + render() { + const { children, ...otherProps } = this.props; + + return React.createElement( + HasAreaParentContext.Consumer, + null, + hasParent => { + if (!hasParent) { + return React.createElement( + Area, + null, + React.createElement(Area.Text, otherProps, children) + ); + } else { + return React.createElement(Area.Text, otherProps, children); + } + } + ); + } +} + +StyledText.propTypes = {}; + +StyledText.defaultProps = {}; + +export default StyledText; diff --git a/src/react-components/index.js b/src/react-components/index.js index a6b1765..f64da50 100644 --- a/src/react-components/index.js +++ b/src/react-components/index.js @@ -5,5 +5,15 @@ import RadioButtons from './RadioButtons'; import Separator from './Separator'; import Menu from './Menu'; import Area from './Area'; +import StyledText from './StyledText'; -export { Box, TextInput, Picker, RadioButtons, Separator, Menu, Area }; +export { + Box, + TextInput, + Picker, + RadioButtons, + Separator, + Menu, + Area, + StyledText, +}; diff --git a/src/reconciler/index.js b/src/reconciler/index.js index 3abbc18..70cfc0d 100644 --- a/src/reconciler/index.js +++ b/src/reconciler/index.js @@ -27,7 +27,7 @@ const DesktopRenderer = Reconciler({ return inst; }, - prepareForCommit() { + prepareForCommit(hostContext) { // noop }, @@ -35,7 +35,7 @@ const DesktopRenderer = Reconciler({ return true; }, - resetAfterCommit() { + resetAfterCommit(hostContext) { // noop }, @@ -60,46 +60,49 @@ const DesktopRenderer = Reconciler({ useSyncScheduling: true, - mutation: { - appendChild(parentInstance, child) { - if (parentInstance.appendChild) { - parentInstance.appendChild(child); - } - if (typeof child.render === 'function') child.render(parentInstance); // we just added a new child, so we want to render it - }, + // MUTATION - appendChildToContainer(parentInstance, child) { - if (parentInstance.appendChild) { - parentInstance.appendChild(child); - } - }, - - removeChild(parentInstance, child) { - parentInstance.removeChild(child); - }, - - removeChildFromContainer(parentInstance, child) { - parentInstance.removeChild(child); - }, - - insertBefore(parentInstance, child, beforeChild) { - parentInstance.insertChild(child, beforeChild); - }, - - commitUpdate(instance, updatePayload, type, oldProps, newProps) { - if (typeof instance.update !== 'undefined') { - instance.update(oldProps, newProps); - } - }, - - commitMount(instance, updatePayload, type, oldProps, newProps) { - // noop - }, - - commitTextUpdate(textInstance, oldText, newText) { - textInstance = newText; - }, + appendChild(parentInstance, child) { + if (parentInstance.appendChild) { + parentInstance.appendChild(child); + } + if (typeof child.render === 'function') child.render(parentInstance); // we just added a new child, so we want to render it }, + + appendChildToContainer(parentInstance, child) { + if (parentInstance.appendChild) { + parentInstance.appendChild(child); + } + }, + + removeChild(parentInstance, child) { + parentInstance.removeChild(child); + }, + + removeChildFromContainer(parentInstance, child) { + parentInstance.removeChild(child); + }, + + insertBefore(parentInstance, child, beforeChild) { + parentInstance.insertChild(child, beforeChild); + }, + + commitUpdate(instance, updatePayload, type, oldProps, newProps) { + if (typeof instance.update !== 'undefined') { + instance.update(oldProps, newProps); + } + }, + + commitMount(instance, updatePayload, type, oldProps, newProps) { + // noop + }, + + commitTextUpdate(textInstance, oldText, newText) { + textInstance = newText; + }, + + supportsMutation: true, + supportsPersistence: false, }); export default DesktopRenderer; diff --git a/src/utils/createElement.js b/src/utils/createElement.js index cbe3421..ecb97ca 100644 --- a/src/utils/createElement.js +++ b/src/utils/createElement.js @@ -73,6 +73,7 @@ function createElement(type, props) { AREAPATH: () => new Area.Path(ROOT_NODE, props), AREAGROUP: () => new Area.Group(ROOT_NODE, props), AREACIRCLE: () => new Area.Circle(ROOT_NODE, props), + AREATEXT: () => new Area.Text(ROOT_NODE, props), default: undefined, };