generated from tweakpane/plugin-template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #28 from LuchoTurtle/upgrade_to_v4
[PR] Upgrading to Tweakpane V4
- Loading branch information
Showing
11 changed files
with
107 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,27 +9,41 @@ A Tweakpane plugin for importing files. | |
| </p> | ||
|
|
||
|
|
||
| > [!WARNING] | ||
| > | ||
| > The version `1.0.0` and upwards of this package | ||
| > only supports `Tweakpane v4`. | ||
| > | ||
| > If you are still using `Tweakpane v3`, | ||
| > **you can only use the `v0` of this package**. | ||
| > | ||
| > | ||
| > You can install it. | ||
| > | ||
| > ```sh | ||
| > npm i [email protected] | ||
| > ``` | ||
| > | ||
| > And use it like so. | ||
| > | ||
| > ```html | ||
| > <script src="https://unpkg.com/[email protected]/dist/tweakpane.js"></script> | ||
| > <script src="./tweakpane-plugin-file-import.min.js"></script> | ||
| > <script> | ||
| > const pane = new Tweakpane.Pane(); | ||
| > pane.registerPlugin(TweakpaneFileImportPlugin); | ||
| > </script> | ||
| > ``` | ||
| # Installation | ||
| You need [Tweakpane](https://github.com/cocopon/tweakpane) to install this plugin. | ||
| You need [Tweakpane `v4`](https://github.com/cocopon/tweakpane) to install this plugin. | ||
| You may use https://unpkg.com/tweakpane-plugin-file-import to get the latest version | ||
| and add it as a `<script>` tag on your HTML page. | ||
| ## Browser | ||
|
|
||
| ```html | ||
| <script src="https://unpkg.com/[email protected]/dist/tweakpane.js"></script> | ||
| <script src="./tweakpane-plugin-file-import.min.js"></script> | ||
| <script> | ||
| const pane = new Tweakpane.Pane(); | ||
| pane.registerPlugin(TweakpaneFileImportPlugin); | ||
| </script> | ||
| ``` | ||
|
|
||
| ## Package | ||
|
|
||
| Alternatively, you can install with `npm`: | ||
| You can install with `npm`: | ||
| ```sh | ||
| npm i tweakpane-plugin-file-import | ||
|
|
@@ -45,6 +59,11 @@ const pane = new Pane(); | |
| pane.registerPlugin(TweakpaneFileImportPlugin); | ||
| ``` | ||
|
|
||
| > [!TIP] | ||
| > | ||
| > Check [`test/browser.html`](/test/browser.html) for an example | ||
| > of the plugin being used. | ||
| ## Usage | ||
|
|
||
| Simply initialize the params with an empty string and pass the optional parameters. | ||
|
|
@@ -54,6 +73,7 @@ const params = { | |
| file: '', | ||
| }; | ||
|
|
||
| // If you're using Tweakpane v3 ------- | ||
| pane | ||
| .addInput(params, 'file', { | ||
| view: 'file-input', | ||
|
|
@@ -64,6 +84,17 @@ pane | |
| console.log(ev.value); | ||
| }); | ||
|
|
||
| // If you're using Tweakpane v4 ------- | ||
| pane | ||
| .addBinding(params, 'file', { | ||
| view: 'file-input', | ||
| lineCount: 3, | ||
| filetypes: ['.png', '.jpg'], | ||
| }) | ||
| .on('change', (ev) => { | ||
| console.log(ev.value); | ||
| }); | ||
|
|
||
| ``` | ||
|
|
||
| ### Optional parameters | ||
|
|
@@ -77,20 +108,25 @@ pane | |
|
|
||
| ## Contributing | ||
|
|
||
| If you want to contribute to this package, you are free to open a pull request. | ||
| If you want to contribute to this package, you are free to open a pull request. 😊 | ||
|
|
||
| ### Quickstart | ||
|
|
||
| > [!NOTE] | ||
| > | ||
| > You'll need to have `Node 16` or upwards installed | ||
| > in order to properly install and run `package.json` script commands. | ||
| Install dependencies: | ||
|
|
||
| ```sh | ||
| npm install | ||
| ``` | ||
|
|
||
| To build the source codes and watch changes, run: | ||
| To build the source code and watch changes, run: | ||
|
|
||
| ```sh | ||
| npm watch | ||
| npm start | ||
| ``` | ||
|
|
||
| After this, simply open `test/browser.html` to see the results. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| import {TweakpaneFileInputPlugin} from './plugin'; | ||
| import {TweakpaneFileInputPlugin} from './plugin.js'; | ||
|
|
||
| // Export your plugin(s) as constant `plugins` | ||
| export const id = 'file-input'; | ||
| export const css = '__css__'; | ||
| export const plugins = [TweakpaneFileInputPlugin]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.