Skip to content

Commit

Permalink
Merge pull request #3 from KevinBatdorf/add-controls-for-fine-tuning
Browse files Browse the repository at this point in the history 
Add controls for fine tuning
  • Loading branch information
@KevinBatdorf
KevinBatdorf authored Feb 13, 2022
2 parents 3264e16 + ba97037 commit 43862c7
Show file tree
Hide file tree
Showing 10 changed files with 289 additions and 40 deletions.
Binary file modified .wordpress-org/screenshot-3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .wordpress-org/screenshot-4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ View this block plugin [on WordPress.org](https://wordpress.org/plugins/wavy-div
- Color settings, including opacity.
- Choose between wide, normal, and full width
- Choose between rounded edges and stright lines
- Fine tune curves and lines with built-in controls
- Supports top or bottom shapes
- Stack multiple dividers with group block (see below)
- Gradients - easy to use (see below)
Expand Down
23 changes: 21 additions & 2 deletions block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"attributes": {
"path": {
"type": "string",
"default": "M 0,119.35212059460474 S 4,85 11,141, S 14,192 21,181, S 24,78 31,177, S 34,85 41,57, S 44,179 51,220, S 54,241 61,173, S 64,131 71,160, S 74,270 81,171, S 84,273 91,333, S 94,272 101,210 V 400 H 0 Z"
"default": "M 0,240 S 12,288 18,200 S 29,200 35,144 S 45,120 52,232 S 62,104 68,92 S 79,148 85,60 S 95,96 100,240 V 400 H 0 Z"
},
"height": {
"type": "number",
Expand All @@ -26,9 +26,28 @@
"type": "number",
"default": 1
},
"startingPeak": {
"type": "number",
"default": 0.4
},
"endingPeak": {
"type": "number",
"default": 0.4
},
"peaks": {
"type": "array",
"default": [
[0.28, 0.5],
[0.5, 0.64],
[0.7, 0.42],
[0.74, 0.77],
[0.63, 0.85],
[0.76, 0.4]
]
},
"points": {
"type": "number",
"default": 7
"default": 6
},
"smoothness": {
"type": "string",
Expand Down
10 changes: 9 additions & 1 deletion readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Contributors: kbat82
Tags: hr, separator, svg, divider, gradient, wavy, block
Tested up to: 5.9.0
Stable tag: 1.2.0
Stable tag: 1.3.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Expand All @@ -19,6 +19,7 @@ Generate and add a simple wavy divider to anywhere on your page, giving you the
- Color settings, including opacity.
- Choose between wide, normal, and full width
- Choose between rounded edges and stright lines
- Fine tune curves and lines with built-in controls
- Supports top or bottom shapes
- Stack multiple dividers with group block (see below)
- Gradients - easy to use (see below)
Expand Down Expand Up @@ -50,9 +51,16 @@ Within the block inserter, under the Patterns tab, select 'Wavy Divider' from th
1. Separate content with wavy dividers
2. Add gradients in combination with group blocks
3. Control height, point count, smoothness, and more.
3. Fine tune curves and shuffle waves.

== Changelog ==

= 1.3.0 =
* Feature: Add controls to fine tuning
* Feature: Add better line control
* Feature: Allow single peak curves
* Tweak: Adjust height, points, etc without changing peaks

= 1.2.0 =
* Fix: Add pattern examples, including Valentine's Day themed

Expand Down
219 changes: 201 additions & 18 deletions src/Controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,18 @@ import PropTypes from 'prop-types'
import { __, sprintf } from '@wordpress/i18n'
import { InspectorControls } from '@wordpress/block-editor'
import { safeHTML } from '@wordpress/dom'
import { buildPath } from './functions'
import {
buildPath,
reconcilePeaks,
calculateVariations,
randomNext,
} from './functions'
import { dice } from './icons'

export const Controls = ({ attributes, setAttributes }) => {
return (
<InspectorControls>
<PanelBody title={__('Settings', 'wavy-divider')}>
<BaseControl>
<Button
style={{ width: '100%' }}
isSecondary
onClick={() =>
setAttributes({
path: buildPath({ ...attributes }),
})
}
icon={<Icon icon={dice()} />}
>
{__('Shuffle waves', 'wavy-divider')}
</Button>
</BaseControl>
<BaseControl>
<SmoothnessControl
attributes={attributes}
Expand Down Expand Up @@ -61,12 +52,26 @@ export const Controls = ({ attributes, setAttributes }) => {
min={1}
max={10}
value={attributes.points}
onChange={(points) =>
onChange={(points) => {
const {
startingPeak,
peaks: initialPeaks,
} = attributes
const peaks = reconcilePeaks({
peaks: initialPeaks,
startingPeak,
points: points,
})
setAttributes({
points,
path: buildPath({ ...attributes, points }),
peaks,
path: buildPath({
...attributes,
points,
peaks,
}),
})
}
}}
/>
<RangeControl
label={__('Opacity', 'wavy-divider')}
Expand All @@ -79,6 +84,70 @@ export const Controls = ({ attributes, setAttributes }) => {
</BaseControl>
<InfoTip />
</PanelBody>
<PanelBody title={__('Waves', 'wavy-divider')}>
<BaseControl>
<Button
style={{ width: '100%' }}
isSecondary
onClick={() => {
const peaks = calculateVariations({
startingPeak: attributes.startingPeak,
points: attributes.points,
})
const endingPeak = peaks.at(-1)[1]
const path = buildPath({
...attributes,
peaks,
endingPeak,
})
setAttributes({ endingPeak, peaks, path })
}}
icon={<Icon icon={dice()} />}
>
{__('Shuffle', 'wavy-divider')}
</Button>
</BaseControl>
<BaseControl>
<RangeControl
label={sprintf(__('Start', 'wavy-divider'))}
step={1}
min={0}
max={100}
value={Math.round(attributes.startingPeak * 100)}
onChange={(peak) => {
setAttributes({
startingPeak: peak / 100,
path: buildPath({
...attributes,
startingPeak: peak / 100,
}),
})
}}
/>
{[...Array(attributes.points).keys()].map((point) => {
if (attributes.smoothness === 'rigid') {
return (
<LineControl
key={point}
attributes={attributes}
point={point}
lastPoint={point === attributes.points - 1}
setAttributes={setAttributes}
/>
)
}
return (
<CurveControl
key={point}
attributes={attributes}
point={point}
lastPoint={point === attributes.points - 1}
setAttributes={setAttributes}
/>
)
})}
</BaseControl>
</PanelBody>
</InspectorControls>
)
}
Expand Down Expand Up @@ -117,6 +186,106 @@ const SmoothnessControl = ({ attributes, setAttributes }) => (
</ToggleGroupControl>
)

const CurveControl = ({ attributes, point, setAttributes, lastPoint }) => {
return (
<div
style={{
background: '#f0f0f0',
padding: '0.5rem 0.5rem 0.25rem',
marginBottom: '1rem',
}}
>
<RangeControl
label={sprintf(__('Peak %s Curve', 'wavy-divider'), point + 1)}
step={1}
min={0}
max={100}
value={Math.round(attributes.peaks[point][0] * 100)}
onChange={(peak) => {
const peaksNew = [...attributes.peaks]
peaksNew[point] = [peak / 100, peaksNew[point][1]]
const path = buildPath({
...attributes,
peaks: peaksNew,
})
setAttributes({ peaks: peaksNew, path })
}}
/>
{!lastPoint ? (
<RangeControl
step={1}
min={0}
max={100}
value={Math.round(attributes.peaks[point][1] * 100)}
onChange={(peak) => {
const peaksNew = [...attributes.peaks]
peaksNew[point] = [peaksNew[point][0], peak / 100]
const path = buildPath({
...attributes,
peaks: peaksNew,
})
setAttributes({ peaks: peaksNew, path })
}}
/>
) : (
<RangeControl
step={1}
min={0}
max={100}
value={Math.round(attributes.endingPeak * 100)}
onChange={(peak) => {
setAttributes({
endingPeak: peak / 100,
path: buildPath({
...attributes,
endingPeak: peak / 100,
}),
})
}}
/>
)}
</div>
)
}

const LineControl = ({ attributes, point, setAttributes, lastPoint }) => {
return !lastPoint ? (
<RangeControl
label={sprintf(__('Peak %s', 'wavy-divider'), point + 1)}
step={1}
min={0}
max={100}
value={Math.round(attributes.peaks[point][0] * 100)}
onChange={(peak) => {
const peaksNew = [...attributes.peaks]
peaksNew[point] = [peak / 100, randomNext(peak / 100)]
const path = buildPath({
...attributes,
peaks: peaksNew,
})
setAttributes({ peaks: peaksNew, path })
}}
/>
) : (
<RangeControl
label={sprintf(__('End', 'wavy-divider'))}
step={1}
min={0}
max={100}
value={Math.round(attributes.endingPeak * 100)}
onChange={(peak) => {
setAttributes({
endingPeak: peak / 100,
path: buildPath({
...attributes,
endingPeak: peak / 100,
}),
})
}}
/>
)
}

const InfoTip = () => (
<Tip>
<span
Expand All @@ -136,6 +305,20 @@ const InfoTip = () => (
</Tip>
)

CurveControl.propTypes = {
attributes: PropTypes.object,
point: PropTypes.number,
setAttributes: PropTypes.func,
lastPoint: PropTypes.bool,
}

LineControl.propTypes = {
attributes: PropTypes.object,
point: PropTypes.number,
setAttributes: PropTypes.func,
lastPoint: PropTypes.bool,
}

SmoothnessControl.propTypes = {
attributes: PropTypes.object.isRequired,
setAttributes: PropTypes.func.isRequired,
Expand Down
Loading

0 comments on commit 43862c7

Please sign in to comment.