From 8ddb9377cf329a9b314be7cab9437bfed730ae2c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 4 Jul 2023 16:46:41 +0400 Subject: [PATCH] Up docs --- docs/api/components.md | 2 +- docs/api/css_composer.md | 20 ++++++++++++++------ docs/api/keymaps.md | 13 ++++++++++--- docs/api/pages.md | 30 +++++++++++++++++++----------- docs/api/panels.md | 28 +++++++++++++--------------- src/css_composer/index.ts | 3 +++ src/dom_components/index.ts | 1 + 7 files changed, 61 insertions(+), 36 deletions(-) diff --git a/docs/api/components.md b/docs/api/components.md index 023001c4d..cb7fa6250 100644 --- a/docs/api/components.md +++ b/docs/api/components.md @@ -43,7 +43,7 @@ cmp.addType(...); * `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent) * `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer * `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer -* `component:resize` - During component resize. +* `component:resize` - During component resize. ## Methods diff --git a/docs/api/css_composer.md b/docs/api/css_composer.md index de5d3013c..665ba7ad1 100644 --- a/docs/api/css_composer.md +++ b/docs/api/css_composer.md @@ -53,11 +53,12 @@ Add/update the CssRule. ### Parameters * `selectors` **[String][8]** Selector string, eg. `.myclass` -* `style` **[Object][10]** Style properties and values (optional, default `{}`) -* `opts` **[Object][10]** Additional properties (optional, default `{}`) +* `style` **[Object][10]** Style properties and values. If the rule exists, styles will be replaced unless `addStyles` option is used. (optional, default `{}`) +* `opts` **[Object][10]** Additional properties. (optional, default `{}`) - * `opts.atRuleType` **[String][8]** At-rule type, eg. `media` (optional, default `''`) - * `opts.atRuleParams` **[String][8]** At-rule parameters, eg. `(min-width: 500px)` (optional, default `''`) + * `opts.atRuleType` **[String][8]** At-rule type, eg. `media`. (optional, default `''`) + * `opts.atRuleParams` **[String][8]** At-rule parameters, eg. `(min-width: 500px)`. (optional, default `''`) + * `opts.addStyles` **[Boolean][11]** If the rule exists already, merge passed styles instead of replacing them. (optional, default `false`) ### Examples @@ -73,10 +74,15 @@ const rule = css.setRule('.class1:hover', { color: 'red' }, { atRuleType: 'media', atRuleParams: '(min-width: 500px)', }); -// output: @media (min-width: 500px) { .class1:hover { color: red } } +// output: `@media (min-width: 500px) { .class1:hover { color: red } }` + +// Update styles of existent rule +css.setRule('.class1', { color: 'red', background: 'red' }); +css.setRule('.class1', { color: 'blue' }, { addStyles: true }); +// output: .class1 { color: blue; background: red } ``` -Returns **[CssRule]** The new/updated CssRule +Returns **[CssRule]** The new/updated CssRule. ## getRule @@ -174,3 +180,5 @@ Returns **this** [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object + +[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/docs/api/keymaps.md b/docs/api/keymaps.md index dd1f8a58f..d80b86517 100644 --- a/docs/api/keymaps.md +++ b/docs/api/keymaps.md @@ -63,6 +63,9 @@ Add new keymap * `handler` **([Function][9] | [string][8])** Keymap handler, might be a function * `opts` **[Object][7]** Options (optional, default `{}`) + * `opts.force` **[Boolean][10]** Force the handler to be executed. (optional, default `false`) + * `opts.prevent` **[Boolean][10]** Prevent default of the original triggered event. (optional, default `false`) + ### Examples ```javascript @@ -71,16 +74,18 @@ keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => { console.log('do stuff'); }); // or -keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command'); +keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', { + // Prevent the default browser action + prevent: true, +}); // listen to events -editor.on('keymap:emit', (id, shortcut, e) => { +editor.on('keymap:emit', (id, shortcut, event) => { // ... }) ``` Returns **[Object][7]** Added keymap -or just a command id as a string ## get @@ -152,3 +157,5 @@ Returns **this** [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function + +[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/docs/api/pages.md b/docs/api/pages.md index bd1ce1826..2842b9e52 100644 --- a/docs/api/pages.md +++ b/docs/api/pages.md @@ -48,6 +48,12 @@ const pageManager = editor.Pages; [Component]: component.html +## select + +Select the page. + +Type: [boolean][9] + ## getAll Get all pages @@ -58,7 +64,7 @@ Get all pages const arrayOfPages = pageManager.getAll(); ``` -Returns **[Array][9]<[Page]>** +Returns **[Array][10]<[Page]>** ## add @@ -66,8 +72,8 @@ Add new page ### Parameters -* `props` **[Object][10]** Page properties -* `opts` **[Object][10]?** Options (optional, default `{}`) +* `props` **[Object][11]** Page properties +* `opts` **[Object][11]?** Options (optional, default `{}`) ### Examples @@ -87,7 +93,7 @@ Remove page ### Parameters -* `page` **([String][11] | [Page])** Page or page id +* `page` **([String][12] | [Page])** Page or page id * `opts` **any** (optional, default `{}`) ### Examples @@ -107,7 +113,7 @@ Get page by id ### Parameters -* `id` **[String][11]** Page id +* `id` **[String][12]** Page id ### Examples @@ -141,7 +147,7 @@ const wrappers = pageManager.getAllWrappers(); const allImages = wrappers.map(wrp => wrp.findType('image')).flat(); ``` -Returns **[Array][9]<[Component]>** +Returns **[Array][10]<[Component]>** ## select @@ -149,8 +155,8 @@ Change the selected page. This will switch the page rendered in canvas ### Parameters -* `page` **([String][11] | [Page])** Page or page id -* `opts` (optional, default `{}`) +* `page` **([String][12] | [Page])** Page or page id +* `opts` **SetOptions** (optional, default `{}`) ### Examples @@ -191,8 +197,10 @@ Returns **[Page]** [8]: #getselected -[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array +[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean + +[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array -[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String diff --git a/docs/api/panels.md b/docs/api/panels.md index c7a965ab9..43af77b66 100644 --- a/docs/api/panels.md +++ b/docs/api/panels.md @@ -50,10 +50,10 @@ Add new panel to the collection ### Examples ```javascript -var newPanel = panelManager.addPanel({ - id: 'myNewPanel', - visible : true, - buttons : [...], +const newPanel = panelManager.addPanel({ + id: 'myNewPanel', + visible: true, + buttons: [...], }); ``` @@ -65,21 +65,19 @@ Remove a panel from the collection ### Parameters -* `panel` **([Object][11] | Panel | [String][12])** Object with right properties or an instance of Panel or Painel id +* `panel` **(Panel | [String][12])** Panel instance or panel id ### Examples ```javascript -const newPanel = panelManager.removePanel({ - id: 'myNewPanel', - visible : true, - buttons : [...], -}); +const somePanel = panelManager.getPanel('somePanel'); +const removedPanel = panelManager.removePanel(somePanel); -const newPanel = panelManager.removePanel('myNewPanel'); +// or by id +const removedPanel = panelManager.removePanel('myNewPanel'); ``` -Returns **Panel** Removed panel. Useful in case passed argument was an Object +Returns **Panel** Removed panel ## getPanel @@ -92,7 +90,7 @@ Get panel by ID ### Examples ```javascript -var myPanel = panelManager.getPanel('myNewPanel'); +const myPanel = panelManager.getPanel('myPanel'); ``` Returns **(Panel | null)** @@ -109,7 +107,7 @@ Add button to the panel ### Examples ```javascript -var newButton = panelManager.addButton('myNewPanel',{ +const newButton = panelManager.addButton('myNewPanel',{ id: 'myNewButton', className: 'someClass', command: 'someCommand', @@ -174,7 +172,7 @@ Get button from the panel ### Examples ```javascript -var button = panelManager.getButton('myPanel','myButton'); +const button = panelManager.getButton('myPanel', 'myButton'); ``` Returns **(Button | null)** diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts index e00929790..6146474b4 100644 --- a/src/css_composer/index.ts +++ b/src/css_composer/index.ts @@ -40,6 +40,7 @@ import EditorModel from '../editor/model/Editor'; import Component from '../dom_components/model/Component'; import { ObjectAny } from '../common'; +/** @private */ interface RuleOptions { /** * At-rule type, eg. `media` @@ -50,6 +51,8 @@ interface RuleOptions { */ atRuleParams?: string; } + +/** @private */ interface SetRuleOptions extends RuleOptions { /** * If the rule exists already, merge passed styles instead of replacing them. diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts index 430ecb45f..50b07bd87 100644 --- a/src/dom_components/index.ts +++ b/src/dom_components/index.ts @@ -38,6 +38,7 @@ * * `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent) * * `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer * * `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer + * * `component:resize` - During component resize. * * ## Methods * * [getWrapper](#getwrapper)