mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-07-28 06:39:33 -04:00
Separate Palette into Pane and Palette to prepare for nested UIs.
This commit is contained in:
parent
47c225a782
commit
09a4defb73
3 changed files with 109 additions and 74 deletions
|
@ -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');
|
||||||
/*#*/ }
|
/*#*/ }
|
||||||
|
|
|
@ -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
94
src/ui/Pane.js
Normal 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();
|
||||||
|
}
|
||||||
|
});
|
Loading…
Add table
Add a link
Reference in a new issue