Browse Source

Update docs sm

up-style-manager
Artur Arseniev 4 years ago
parent
commit
07efd15002
  1. 6
      docs/api/property.md
  2. 6
      docs/api/sector.md
  3. 24
      docs/api/style_manager.md

6
docs/api/property.md

@ -106,6 +106,12 @@ The change is also propagated to the selected targets (eg. CSS rule).
* `opts.partial` **[Boolean][3]** If `true` the update on targets won't be considered complete (not stored in UndoManager) (optional, default `false`)
* `opts.noTarget` **[Boolean][3]** If `true` the change won't be propagated to selected targets. (optional, default `false`)
### isVisible
Check if the property is visible
Returns **[Boolean][3]**
### clear
Clear the value.

6
docs/api/sector.md

@ -45,6 +45,12 @@ Update Sector open state
* `value` **[Boolean][2]**
### isVisible
Check if the sector is visible
Returns **[Boolean][2]**
### getProperties
Get sector properties.

24
docs/api/style_manager.md

@ -332,36 +332,32 @@ Add new property type
### Parameters
* `id` **[string][24]** Type ID
* `definition` **[Object][23]** Definition of the type. Each definition contains
`model` (business logic), `view` (presentation logic)
and `isType` function which recognize the type of the
passed entity
* `definition` **[Object][23]** Definition of the type.
### Examples
```javascript
styleManager.addType('my-custom-prop', {
// Create UI
create({ props, change }) {
const el = document.createElement('div');
el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
const inputEl = el.querySelector('.my-input');
inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
inputEl.addEventListener('input', event => change({ event, complete: false }));
inputEl.addEventListener('change', event => change({ event }));
inputEl.addEventListener('input', event => change({ event, partial: true }));
return el;
},
emit({ props, updateStyle }, { event, complete }) {
// Propagate UI changes up to the targets
emit({ props, updateStyle }, { event, partial }) {
const { value } = event.target;
const valueRes = value + 'px';
// Pass a string value for the exact CSS property or an object containing multiple properties
// eg. updateStyle({ [props.property]: valueRes, color: 'red' });
updateStyle(valueRes, { complete });
updateStyle(`${value}px`, { partial });
},
// Update UI (eg. when the target is changed)
update({ value, el }) {
el.querySelector('.my-input').value = parseInt(value, 10);
},
destroy() {
// In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
}
// Clean the memory from side effects if necessary (eg. global event listeners, etc.)
destroy() {}
})
```

Loading…
Cancel
Save