diff --git a/docs/api/property.md b/docs/api/property.md index 3e04e3439..9cc628e10 100644 --- a/docs/api/property.md +++ b/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. diff --git a/docs/api/sector.md b/docs/api/sector.md index 7d4ca2f64..95309b98a 100644 --- a/docs/api/sector.md +++ b/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. diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index 48dff409d..6e428effa 100644 --- a/docs/api/style_manager.md +++ b/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 = ''; 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() {} }) ```