Separate Palette into Pane and Palette to prepare for nested UIs.

This commit is contained in:
Jürg Lehni 2014-10-02 09:45:19 +02:00
parent 47c225a782
commit 09a4defb73
3 changed files with 109 additions and 74 deletions

View file

@ -118,6 +118,7 @@ var paper = new function(undefined) {
/*#*/ include('ui/MouseEvent.js'); /*#*/ include('ui/MouseEvent.js');
/*#*/ if (__options.palette) { /*#*/ if (__options.palette) {
/*#*/ include('ui/Pane.js');
/*#*/ include('ui/Palette.js'); /*#*/ include('ui/Palette.js');
/*#*/ include('ui/Component.js'); /*#*/ include('ui/Component.js');
/*#*/ } /*#*/ }

View file

@ -13,12 +13,10 @@
/** /**
* @name Palette * @name Palette
* @class * @class
* @extends Pane
*/ */
/* var Palette = */ Base.extend(Callback, /** @lends Palette# */{ /* var Palette = */ Pane.extend(/** @lends Palette# */{
_class: 'Palette', _class: 'Palette',
_events: [ 'onChange' ],
// Defaults for internals
_enabled: true,
// DOCS: Palette#initialize(props) // DOCS: Palette#initialize(props)
// DOCS: Palette#initialize(title, components, values) // DOCS: Palette#initialize(title, components, values)
@ -27,82 +25,24 @@
// DOCS: Palette#remove() // DOCS: Palette#remove()
initialize: function Palette(title, components, values) { initialize: function Palette(title, components, values) {
// Support object literal constructor Pane.call(this, title, components, values, 'palettejs-palette');
var props = Base.isPlainObject(title) && title;
if (props) {
title = props.title;
components = props.components;
values = props.values;
}
var parent = DomElement.find('.palettejs-panel') var parent = DomElement.find('.palettejs-panel')
|| DomElement.find('body').appendChild( || DomElement.find('body').appendChild(
DomElement.create('div', { class: 'palettejs-panel' })); DomElement.create('div', { class: 'palettejs-panel' }));
this._element = parent.appendChild( parent.appendChild(this._element);
DomElement.create('table', { class: 'palettejs-pane' })); // Link to the current scope's palettes list.
this._title = title; // TODO: This is the only paper dependency in Palette.js
if (!values) // Find a way to make it independent.
values = {}; (this._palettes = paper.palettes).push(this);
for (var name in (this.components = components)) {
var component = components[name];
if (!(component instanceof Component)) {
component = components[name] = new Component(
new Base(component, {
value: Base.pick(component.value, values[name]),
name: name
}));
}
this._element.appendChild(component._element);
component._palette = this;
// Make sure each component has an entry in values, so observers get
// installed further down.
if (values[name] === undefined)
values[name] = component._value;
}
// Now replace each entry in values with a getter / setters so we can
// directly link the value to the component and observe change.
this.values = Base.each(values, function(value, name) {
var component = components[name];
if (component) {
Base.define(values, name, {
enumerable: true,
configurable: true,
get: function() {
return component._value;
},
set: function(val) {
component.setValue(val);
}
});
}
});
if (props) {
Base.set(this, props,
{ title: true, components: true, values: true });
}
if (window.paper)
paper.palettes.push(this);
},
getEnabled: function() {
return this._enabled;
},
setEnabled: function(enabled) {
this._enabled = enabled;
for (var i in this.components)
this.components[i].setEnabled(enabled, true);
},
/**
* Resets the values of the components to their
* {@link Component#defaultValue}.
*/
reset: function() {
for (var i in this.components)
this.components[i].reset();
}, },
remove: function() { remove: function() {
DomElement.remove(this._element); DomElement.remove(this._element);
var palettes = this._palettes;
var index = palettes.indexOf(this);
var remove = index !== -1;
if (remove)
palettes.splice(index, 1);
return remove;
} }
}); });

94
src/ui/Pane.js Normal file
View file

@ -0,0 +1,94 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2014, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name Pane
* @class
*/
var Pane = Base.extend(Callback, /** @lends Pane# */{
_class: 'Pane',
_events: [ 'onChange' ],
// Defaults for internals
_enabled: true,
initialize: function Pane(title, components, values, className) {
// Support object literal constructor
var props = Base.isPlainObject(title) && title;
if (props) {
title = props.title;
components = props.components;
values = props.values;
}
this._element = DomElement.create('table', {
class: 'palettejs-pane' + (className ? ' ' + className : '')
});
this._title = title;
if (!values)
values = {};
for (var name in (this.components = components)) {
var component = components[name];
if (!(component instanceof Component)) {
component = components[name] = new Component(
new Base(component, {
value: Base.pick(component.value, values[name]),
name: name
}));
}
this._element.appendChild(component._element);
component._palette = this;
// Make sure each component has an entry in values, so observers get
// installed further down.
if (values[name] === undefined)
values[name] = component._value;
}
// Now replace each entry in values with a getter / setters so we can
// directly link the value to the component and observe change.
this.values = Base.each(values, function(value, name) {
var component = components[name];
if (component) {
Base.define(values, name, {
enumerable: true,
configurable: true,
get: function() {
return component._value;
},
set: function(val) {
component.setValue(val);
}
});
}
});
if (props) {
Base.set(this, props,
{ title: true, components: true, values: true });
}
},
getEnabled: function() {
return this._enabled;
},
setEnabled: function(enabled) {
this._enabled = enabled;
for (var i in this.components)
this.components[i].setEnabled(enabled, true);
},
/**
* Resets the values of the components to their
* {@link Component#defaultValue}.
*/
reset: function() {
for (var i in this.components)
this.components[i].reset();
}
});