Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

the PaintWeb GUI is now resizable. the TinyMCE plugin now syncs the s…

…ize of PaintWeb viewport with the size of the editor iframe.

--HG--
extra : convert_revision : svn%3Afc1ba2b4-ac28-11dd-a772-7fcde58d38e6/trunk%40111
  • Loading branch information...
commit c8199bb86986dac8ce30375eac2a3d0bd0bc5e79 1 parent 8b86fec
mihai.sucan authored
View
23 CHANGES
@@ -1,3 +1,26 @@
+2009-08-13:
+===========
+
+- Implemented support for dynamic PaintWeb GUI resize. Developers now have
+a method for resizing the GUI: PaintWeb.gui.resizeTo(width, height).
+
+- Added a new application event: viewportSizeChange.
+
+- Users can easily resize the PaintWeb GUI with a new resize handle added in the
+status bar.
+
+- The TinyMCE plugin has been updated to synchronize the size of the editor
+viewport with the image editor viewport of PaintWeb. So, now when you start
+editing an image from TinyMCE, the PaintWeb instance will be of a similar size
+(GUI differences account for the size differences). Nonetheless, strictly
+speaking of the PaintWeb image viewport, it always has the same dimensions as
+the TinyMCE editor iframe (where the article is displayed).
+
+- Added a new application event: guiResizeMouseMove. This is used by the new
+viewport resize handle.
+
+- Updated English strings and configuration properties.
+
2009-08-12:
===========
View
20 ext/moodle/config.json
@@ -1,5 +1,5 @@
{
- // $Date: 2009-07-28 20:03:39 +0300 $
+ // $Date: 2009-08-13 20:22:44 +0300 $
/**
* The list of available languages. This associated language IDs to their
@@ -76,24 +76,26 @@
"guiScript": "script.js",
/**
- * Viewport width.
+ * The image viewport width. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default -1
+ * @type String
+ * @default "100%"
*/
- "viewportWidth": -1,
+ "viewportWidth": "100%",
/**
- * Viewport height.
+ * The image viewport height. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default 400
+ * @type String
+ * @default "400px"
*/
- "viewportHeight": 400,
+ "viewportHeight": "400px",
/**
* Image save quality for the JPEG format.
View
49 ext/tinymce-plugin/paintweb/editor_plugin_src.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-08-12 20:06:23 +0300 $
+ * $Date: 2009-08-13 20:15:20 +0300 $
*/
/**
@@ -201,8 +201,14 @@ function paintwebInitialized (ev) {
}
pwlib = window.pwlib;
- paintwebInstance.events.add('imageSave', paintwebSave);
- paintwebInstance.events.add('imageSaveResult', paintwebSaveResult);
+ paintwebInstance.events.add('imageSave', paintwebSave);
+ paintwebInstance.events.add('imageSaveResult', paintwebSaveResult);
+
+ if (pluginBar) {
+ paintwebInstance.events.add('viewportSizeChange',
+ paintwebViewportSizeChange);
+ }
+
paintwebShow(ev);
};
@@ -307,6 +313,17 @@ function pluginBarResetContent () {
};
/**
+ * The <code>viewportSizeChange</code> PaintWeb application event handler. This
+ * synchronises the size of the TinyMCE plugin bar with that of the PaintWeb
+ * GUI.
+ *
+ * @param {pwlib.appEvent.viewportSizeChange} ev The application event object.
+ */
+function paintwebViewportSizeChange (ev) {
+ pluginBar.style.width = ev.width;
+};
+
+/**
* Start PaintWeb. This function performs the actual PaintWeb invocation.
*
* @returns {Boolean} True PaintWeb is about to start, or false otherwise.
@@ -329,8 +346,6 @@ function paintwebEditStart () {
}
if (paintwebInstance) {
- // Give PaintWeb access to the TinyMCE editor instance.
- paintwebConfig.tinymceEditor = targetEditor;
paintwebInstance.imageLoad(targetImage);
paintwebShow();
} else {
@@ -453,24 +468,30 @@ function paintwebNewImage (width, height, bgrColor, alt, title) {
* Show PaintWeb on-screen. This function hides the current TinyMCE editor
* instance and shows up the PaintWeb instance.
*
- * @param {mixed} [ev] Event object.
+ * @param [ev] Event object.
*/
function paintwebShow (ev) {
+ var rect = targetEditor.dom.getRect(targetEditor.getContentAreaContainer());
+
+ targetContainer.style.display = 'none';
+
+ // Give PaintWeb access to the TinyMCE editor instance.
+ paintwebConfig.tinymceEditor = targetEditor;
if (!ev || ev.type !== 'appInit') {
paintwebInstance.gui.show();
}
- targetContainer.style.display = 'none';
-
- if (!pluginBar) {
- return;
+ if (rect && rect.w && rect.h) {
+ paintwebInstance.gui.resizeTo(rect.w + 'px', rect.h + 'px');
}
- pluginBarResetContent();
+ if (pluginBar) {
+ pluginBarResetContent();
- var placeholder = paintwebConfig.guiPlaceholder;
- if (!pluginBar.parentNode) {
- placeholder.parentNode.insertBefore(pluginBar, placeholder);
+ var placeholder = paintwebConfig.guiPlaceholder;
+ if (!pluginBar.parentNode) {
+ placeholder.parentNode.insertBefore(pluginBar, placeholder);
+ }
}
};
View
20 src/config-example.json
@@ -1,5 +1,5 @@
{
- // $Date: 2009-07-28 20:04:15 +0300 $
+ // $Date: 2009-08-13 19:23:55 +0300 $
// TODO: try jsdoc-toolkit on this json (!)
/**
@@ -73,24 +73,26 @@
"guiScript": "script.js",
/**
- * Viewport width.
+ * The image viewport width. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default -1
+ * @type String
+ * @default "100%"
*/
- "viewportWidth": -1,
+ "viewportWidth": "100%",
/**
- * Viewport height.
+ * The image viewport height. Make sure the value is a CSS length, like "50%",
+ * "450px" or "30em".
*
* <p>Note: the GUI implementation might ignore this value.
*
- * @type Number
- * @default 400
+ * @type String
+ * @default "400px"
*/
- "viewportHeight": 400,
+ "viewportHeight": "400px",
/**
* Image save quality for the JPEG format.
View
34 src/includes/lib.js
@@ -2,7 +2,7 @@
* © 2009 ROBO Design
* http://www.robodesign.ro
*
- * $Date: 2009-08-04 19:34:48 +0300 $
+ * $Date: 2009-08-13 18:47:20 +0300 $
*/
/**
@@ -328,6 +328,10 @@ pwlib.appEvent = function (type, cancelable) {
this.stopPropagation = function () {
this.propagationStopped_ = true;
};
+
+ this.toString = function () {
+ return '[pwlib.appEvent.' + this.type + ']';
+ };
};
/**
@@ -796,6 +800,34 @@ pwlib.appEvent.canvasSizeChange = function (width, height, scale) {
};
/**
+ * @class Image viewport size change event. This event is not cancelable.
+ *
+ * @augments pwlib.appEvent
+ *
+ * @param {String} width The new viewport width. This must be a CSS length
+ * value, like "100px", "100%" or "100em".
+ *
+ * @param {String} height The new viewport height. This must be a CSS length
+ * value, like "100px", "100%" or "100em".
+ */
+pwlib.appEvent.viewportSizeChange = function (width, height) {
+ /**
+ * New viewport width.
+ * @type String
+ */
+ this.width = width;
+
+ /**
+ * New viewport height.
+ * @type String
+ */
+ this.height = height;
+
+ pwlib.appEvent.call(this, 'viewportSizeChange');
+};
+
+
+/**
* @class Image zoom event. This event is cancelable.
*
* @augments pwlib.appEvent
View
5 src/interfaces/default/layout.xhtml
@@ -1,5 +1,5 @@
<div xmlns="http://www.w3.org/1999/xhtml">
- <!-- $Date: 2009-07-01 15:17:39 +0300 $ -->
+ <!-- $Date: 2009-08-13 19:34:24 +0300 $ -->
<h1 class="paintweb_appTitle">PaintWeb</h1>
<!-- All elements with data-pwTabPanel become interactive tabbed panels which
@@ -226,7 +226,7 @@
<div id="viewport">
<div id="canvasContainer">
</div>
- <div id="canvasResizer">Resize the image Canvas</div>
+ <div id="canvasResizer">Resize the image Canvas.</div>
</div> <!-- .paintweb_viewport -->
<div class="paintweb_statusbar">
@@ -238,6 +238,7 @@
</p>
<p id="statusMessage">Status</p>
+ <p id="viewportResizer">Resize the image viewport.</p>
</div> <!-- .paintweb_statusbar -->
<!-- Elements with data-pwFloatingPanel become interactive GUI components.
View
318 src/interfaces/default/script.js
@@ -17,7 +17,7 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-07-29 14:09:30 +0300 $
+ * $Date: 2009-08-13 20:20:10 +0300 $
*/
/**
@@ -114,6 +114,15 @@ pwlib.gui = function (app) {
this.canvasResizer = null;
/**
+ * Holds an instance of the guiResizer object attached to the viewport
+ * element.
+ *
+ * @private
+ * @type pwlib.guiResizer
+ */
+ this.viewportResizer = null;
+
+ /**
* Holds tab configuration information for most drawing tools.
*
* @private
@@ -240,11 +249,15 @@ pwlib.gui = function (app) {
panel.tabHide('shadow');
}
- // Setup the viewport height.
- if ('viewport' in this.elems) {
- this.elems.viewport.style.height = config.viewportHeight + 'px';
+ if (!('viewport' in this.elems)) {
+ app.initError(lang.missingViewport);
+ return false;
}
+ // Setup the GUI dimensions .
+ this.elems.viewport.style.height = config.viewportHeight;
+ placeholderStyle.width = config.viewportWidth;
+
// Setup the Canvas resizer.
var resizeHandle = this.elems.canvasResizer;
if (!resizeHandle) {
@@ -252,7 +265,7 @@ pwlib.gui = function (app) {
return false;
}
resizeHandle.title = lang.guiCanvasResizer;
- resizeHandle.replaceChild(doc.createTextNode(lang.guiCanvasResizer),
+ resizeHandle.replaceChild(doc.createTextNode(resizeHandle.title),
resizeHandle.firstChild);
resizeHandle.addEventListener('mouseover', this.item_mouseover, false);
resizeHandle.addEventListener('mouseout', this.item_mouseout, false);
@@ -263,6 +276,26 @@ pwlib.gui = function (app) {
this.canvasResizer.events.add('guiResizeStart', this.canvasResizeStart);
this.canvasResizer.events.add('guiResizeEnd', this.canvasResizeEnd);
+ // Setup the viewport resizer.
+ var resizeHandle = this.elems.viewportResizer;
+ if (!resizeHandle) {
+ app.initError(lang.missingViewportResizer);
+ return false;
+ }
+ resizeHandle.title = lang.guiViewportResizer;
+ resizeHandle.replaceChild(doc.createTextNode(resizeHandle.title),
+ resizeHandle.firstChild);
+ resizeHandle.addEventListener('mouseover', this.item_mouseover, false);
+ resizeHandle.addEventListener('mouseout', this.item_mouseout, false);
+
+ this.viewportResizer = new pwlib.guiResizer(this, resizeHandle,
+ this.elems.viewport);
+
+ this.viewportResizer.dispatchMouseMove = true;
+ this.viewportResizer.events.add('guiResizeMouseMove',
+ this.viewportResizeMouseMove);
+ this.viewportResizer.events.add('guiResizeEnd', this.viewportResizeEnd);
+
if ('statusMessage' in this.elems) {
this.elems.statusMessage._prevText = false;
}
@@ -280,17 +313,17 @@ pwlib.gui = function (app) {
}
// Add application-wide event listeners.
- app.events.add('canvasSizeChange', this.canvasSizeChange);
- app.events.add('commandRegister', this.commandRegister);
- app.events.add('commandUnregister', this.commandUnregister);
- app.events.add('configChange', this.configChangeHandler);
- app.events.add('imageSizeChange', this.imageSizeChange);
- app.events.add('imageZoom', this.imageZoom);
- app.events.add('appInit', this.appInit);
- app.events.add('shadowAllow', this.shadowAllow);
- app.events.add('toolActivate', this.toolActivate);
- app.events.add('toolRegister', this.toolRegister);
- app.events.add('toolUnregister', this.toolUnregister);
+ app.events.add('canvasSizeChange', this.canvasSizeChange);
+ app.events.add('commandRegister', this.commandRegister);
+ app.events.add('commandUnregister', this.commandUnregister);
+ app.events.add('configChange', this.configChangeHandler);
+ app.events.add('imageSizeChange', this.imageSizeChange);
+ app.events.add('imageZoom', this.imageZoom);
+ app.events.add('appInit', this.appInit);
+ app.events.add('shadowAllow', this.shadowAllow);
+ app.events.add('toolActivate', this.toolActivate);
+ app.events.add('toolRegister', this.toolRegister);
+ app.events.add('toolUnregister', this.toolUnregister);
// Make sure the historyUndo and historyRedo command elements are
// synchronized with the application history state.
@@ -904,6 +937,13 @@ pwlib.gui = function (app) {
return;
}
+ // Make sure the Hand tool is enabled/disabled as needed.
+ if ('hand' in _self.tools) {
+ app.events.add('canvasSizeChange', _self.toolHandStateChange);
+ app.events.add('viewportSizeChange', _self.toolHandStateChange);
+ _self.toolHandStateChange(ev);
+ }
+
// Make PaintWeb visible.
var placeholder = config.guiPlaceholder,
placeholderStyle = placeholder.style,
@@ -964,6 +1004,30 @@ pwlib.gui = function (app) {
};
/**
+ * The <code>guiResizeMouseMove</code> event handler for the viewport resize
+ * operation.
+ *
+ * @private
+ * @param {pwlib.appEvent.guiResizeMouseMove} ev The application event object.
+ */
+ this.viewportResizeMouseMove = function (ev) {
+ config.guiPlaceholder.style.width = ev.width + 'px';
+ };
+
+ /**
+ * The <code>guiResizeEnd</code> event handler for the viewport resize
+ * operation.
+ *
+ * @private
+ * @param {pwlib.appEvent.guiResizeEnd} ev The application event object.
+ */
+ this.viewportResizeEnd = function (ev) {
+ _self.elems.viewport.style.width = '';
+ _self.resizeTo(ev.width + 'px', ev.height + 'px');
+ config.guiPlaceholder.focus();
+ };
+
+ /**
* The <code>mouseover</code> event handler for all tools, commands and icons.
* This simply shows the title / text content of the element in the GUI status
* bar.
@@ -1318,6 +1382,8 @@ pwlib.gui = function (app) {
* simply removes all the user interactivity from the GUI element associated
* to the command being unregistered.
*
+ * @private
+ *
* @param {pwlib.appEvent.commandUnregister} ev The application event object.
*
* @see PaintWeb#commandUnregister the method which allows you to unregister
@@ -1347,7 +1413,10 @@ pwlib.gui = function (app) {
* <code>historyRedo</code> commands are updated such that they are either
* enabled or disabled, depending on the current history position.
*
+ * @private
+ *
* @param {pwlib.appEvent.historyUpdate} ev The application event object.
+ *
* @see PaintWeb#historyGoto the method which allows you to go to different
* history states.
*/
@@ -1392,6 +1461,7 @@ pwlib.gui = function (app) {
* <p>Image size refers strictly to the dimensions of the image being edited
* by the user, that's width and height.
*
+ * @private
* @param {pwlib.appEvent.imageSizeChange} ev The application event object.
*/
this.imageSizeChange = function (ev) {
@@ -1404,64 +1474,36 @@ pwlib.gui = function (app) {
/**
* The <code>canvasSizeChange</code> application event handler. The Canvas
- * container element dimensions are updated to the new values and the Hand
- * tool is enabled/disabled as necessary.
+ * container element dimensions are updated to the new values, and the image
+ * resize handle is positioned accordingly.
*
* <p>Canvas size refers strictly to the dimensions of the Canvas elements in
* the browser, changed with CSS style properties, width and height. Scaling
* of the Canvas elements is applied when the user zooms the image or when the
* browser changes the render DPI / zoom.
*
+ * @private
* @param {pwlib.appEvent.canvasSizeChange} ev The application event object.
*/
this.canvasSizeChange = function (ev) {
var canvasContainer = _self.elems.canvasContainer,
canvasResizer = _self.canvasResizer,
className = ' ' + _self.classPrefix + 'disabled',
- hand = _self.tools.hand,
- resizeHandle = canvasResizer.resizeHandle,
- viewport = _self.elems.viewport;
+ resizeHandle = canvasResizer.resizeHandle;
// Update the Canvas container to be the same size as the Canvas elements.
canvasContainer.style.width = ev.width + 'px';
canvasContainer.style.height = ev.height + 'px';
- if (resizeHandle) {
- resizeHandle.style.top = ev.height + 'px';
- resizeHandle.style.left = ev.width + 'px';
- }
-
- if (!hand || !viewport) {
- return;
- }
-
- // Update Hand tool state.
- var cs = win.getComputedStyle(viewport, null),
- vwidth = parseInt(cs.width),
- vheight = parseInt(cs.height),
- enableHand = false,
- handState = hand.className.indexOf(className) === -1;
-
- if (vheight < ev.height || vwidth < ev.width) {
- enableHand = true;
- }
-
- if (enableHand && !handState) {
- hand.className = hand.className.replace(className, '');
- } else if (!enableHand && handState) {
- hand.className += className;
- }
-
- if (!enableHand && app.tool && app.tool._id === 'hand' && 'prevTool' in
- app.tool) {
- app.toolActivate(app.tool.prevTool);
- }
+ resizeHandle.style.top = ev.height + 'px';
+ resizeHandle.style.left = ev.width + 'px';
};
/**
* The <code>imageZoom</code> application event handler. The GUI input element
* which displays the image zoom level is updated to display the new value.
*
+ * @private
* @param {pwlib.appEvent.imageZoom} ev The application event object.
*/
this.imageZoom = function (ev) {
@@ -1477,6 +1519,7 @@ pwlib.gui = function (app) {
* ensures the GUI input elements stay up-to-date when some PaintWeb
* configuration is modified.
*
+ * @private
* @param {pwlib.appEvent.configChange} ev The application event object.
*/
this.configChangeHandler = function (ev) {
@@ -1553,6 +1596,7 @@ pwlib.gui = function (app) {
*
* <p>This method dispatches the {@link pwlib.appEvent.configChange} event.
*
+ * @private
* @param {Event} ev The DOM Event object.
*/
this.configValueClick = function (ev) {
@@ -1597,6 +1641,8 @@ pwlib.gui = function (app) {
* PaintWeb configuration properties.
*
* <p>This method dispatches the {@link pwlib.appEvent.configChange} event.
+ *
+ * @private
*/
this.configInputChange = function () {
if (!this._pwConfigProperty) {
@@ -1633,6 +1679,7 @@ pwlib.gui = function (app) {
*
* <p>This method dispatches the {@link pwlib.appEvent.configChange} event.
*
+ * @private
* @param {Event} ev The DOM Event object.
*/
this.configToggleClick = function (ev) {
@@ -1661,6 +1708,7 @@ pwlib.gui = function (app) {
* The <code>shadowAllow</code> application event handler. This method
* shows/hide the shadow tab when shadows are allowed/disallowed.
*
+ * @private
* @param {pwlib.appEvent.shadowAllow} ev The application event object.
*/
this.shadowAllow = function (ev) {
@@ -1678,6 +1726,7 @@ pwlib.gui = function (app) {
* associated to the <code>clipboardPaste</code> command is updated to be
* disabled/enabled depending on the event.
*
+ * @private
* @param {pwlib.appEvent.clipboardUpdate} ev The application event object.
*/
this.clipboardUpdate = function (ev) {
@@ -1708,6 +1757,7 @@ pwlib.gui = function (app) {
* <code>selectionCopy</code> commands are updated to be disabled/enabled
* depending on the event.
*
+ * @private
* @param {pwlib.appEvent.selectionChange} ev The application event object.
*/
this.selectionChange = function (ev) {
@@ -1784,6 +1834,104 @@ pwlib.gui = function (app) {
placeholder.removeChild(placeholder.firstChild);
}
};
+
+ /**
+ * Resize the PaintWeb graphical user interface.
+ *
+ * <p>This method dispatches the {@link pwlib.appEvent.configChange} event for
+ * the "viewportWidth" and "viewportHeight" configuration properties. Both
+ * properties are updated to hold the new values you give.
+ *
+ * <p>Once the GUI is resized, the {@link pwlib.appEvent.viewportSizeChange}
+ * event is also dispatched.
+ *
+ * @param {String} width The new width you want. Make sure the value is a CSS
+ * length, like "50%", "450px" or "30em".
+ *
+ * @param {String} height The new height you want.
+ */
+ this.resizeTo = function (width, height) {
+ if (!width || !height) {
+ return;
+ }
+
+ var width_old = config.viewportWidth,
+ height_old = config.viewportHeight;
+
+ config.viewportWidth = width;
+ config.viewportHeight = height;
+
+ app.events.dispatch(new appEvent.configChange(width, width_old,
+ 'viewportWidth', '', config));
+
+ app.events.dispatch(new appEvent.configChange(height, height_old,
+ 'viewportHeight', '', config));
+
+ config.guiPlaceholder.style.width = config.viewportWidth;
+ this.elems.viewport.style.height = config.viewportHeight;
+
+ app.events.dispatch(new appEvent.viewportSizeChange(width, height));
+ };
+
+ /**
+ * The state change event handler for the Hand tool. This function
+ * enables/disables the Hand tool by checking if the current image fits into
+ * the viewport or not.
+ *
+ * <p>This function is invoked when one of the following application events is
+ * dispatched: <code>viewportSizeChange</code>, <code>canvasSizeChange</code>
+ * or <code>appInit</code.
+ *
+ * @private
+ * @param
+ * {pwlib.appEvent.viewportSizeChange|pwlib.appEvent.canvasSizeChange|pwlib.appEvent.appInit}
+ * [ev] The application event object.
+ */
+ this.toolHandStateChange = function (ev) {
+ var cwidth = 0,
+ cheight = 0,
+ className = ' ' + _self.classPrefix + 'disabled',
+ hand = _self.tools.hand,
+ viewport = _self.elems.viewport;
+
+ if (!hand) {
+ return;
+ }
+
+ if (ev.type === 'canvasSizeChange') {
+ cwidth = ev.width;
+ cheight = ev.height;
+ } else {
+ var containerStyle = _self.elems.canvasContainer.style;
+ cwidth = parseInt(containerStyle.width);
+ cheight = parseInt(containerStyle.height);
+ }
+
+ // FIXME: it should be noted that when PaintWeb loads, the entire GUI is
+ // hidden, and win.getComputedStyle() style tells that the viewport
+ // width/height is 0.
+ cs = win.getComputedStyle(viewport, null);
+
+ var vwidth = parseInt(cs.width),
+ vheight = parseInt(cs.height),
+ enableHand = false,
+ handState = hand.className.indexOf(className) === -1;
+
+ if (vheight < cheight || vwidth < cwidth) {
+ enableHand = true;
+ }
+
+ if (enableHand && !handState) {
+ hand.className = hand.className.replace(className, '');
+ } else if (!enableHand && handState) {
+ hand.className += className;
+ }
+
+ if (!enableHand && app.tool && app.tool._id === 'hand' && 'prevTool' in
+ app.tool) {
+ app.toolActivate(app.tool.prevTool, ev);
+ }
+ };
};
/**
@@ -2244,12 +2392,13 @@ pwlib.appEvent.guiFloatingPanelStateChange = function (state) {
* element.
*/
pwlib.guiResizer = function (gui, resizeHandle, container) {
- var _self = this,
- cStyle = container.style,
- doc = gui.app.doc,
- guiResizeEnd = pwlib.appEvent.guiResizeEnd,
- guiResizeStart = pwlib.appEvent.guiResizeStart,
- win = gui.app.win;
+ var _self = this,
+ cStyle = container.style,
+ doc = gui.app.doc,
+ guiResizeEnd = pwlib.appEvent.guiResizeEnd,
+ guiResizeMouseMove = pwlib.appEvent.guiResizeMouseMove,
+ guiResizeStart = pwlib.appEvent.guiResizeStart,
+ win = gui.app.win;
/**
* Custom application events interface.
@@ -2278,8 +2427,20 @@ pwlib.guiResizer = function (gui, resizeHandle, container) {
this.viewport = null;
/**
+ * Tells if the GUI resizer should dispatch the {@link
+ * pwlib.appEvent.guiResizeMouseMove} application event when the user moves
+ * the mouse during the resize operation.
+ *
+ * @type Boolean
+ * @default false
+ */
+ this.dispatchMouseMove = false;
+
+ /**
* Tells if the user resizing the container now.
+ *
* @type Boolean
+ * @default false
*/
this.resizing = false;
@@ -2384,6 +2545,11 @@ pwlib.guiResizer = function (gui, resizeHandle, container) {
cStyle.width = w + 'px';
cStyle.height = h + 'px';
+
+ if (_self.dispatchMouseMove) {
+ _self.events.dispatch(new guiResizeMouseMove(ev.clientX, ev.clientY, w,
+ h));
+ }
};
/**
@@ -2487,6 +2653,44 @@ pwlib.appEvent.guiResizeEnd = function (x, y, width, height) {
};
/**
+ * @class The GUI element resize mouse move event. This event is not cancelable.
+ *
+ * @augments pwlib.appEvent
+ *
+ * @param {Number} x The mouse location on the x-axis.
+ * @param {Number} y The mouse location on the y-axis.
+ * @param {Number} width The element width.
+ * @param {Number} height The element height.
+ */
+pwlib.appEvent.guiResizeMouseMove = function (x, y, width, height) {
+ /**
+ * The mouse location on the x-axis.
+ * @type Number
+ */
+ this.x = x;
+
+ /**
+ * The mouse location on the y-axis.
+ * @type Number
+ */
+ this.y = y;
+
+ /**
+ * The element width.
+ * @type Number
+ */
+ this.width = width;
+
+ /**
+ * The element height.
+ * @type Number
+ */
+ this.height = height;
+
+ pwlib.appEvent.call(this, 'guiResizeMouseMove');
+};
+
+/**
* @class The tabbed panel GUI component.
*
* @private
View
49 src/interfaces/default/style.css
@@ -17,14 +17,15 @@
* along with PaintWeb. If not, see <http://www.gnu.org/licenses/>.
*
* $URL: http://code.google.com/p/paintweb $
- * $Date: 2009-08-12 18:13:42 +0300 $
+ * $Date: 2009-08-13 20:19:48 +0300 $
*/
.paintweb_placeholder {
background: #fff;
color: #000;
+ display: block !important;
font: 12px sans-serif;
- display: block !important
+ min-width: 535px
}
.paintweb_placeholder label { cursor: pointer }
@@ -39,6 +40,8 @@
background: #999;
border: 1px solid #000;
height: 400px;
+ min-height: 150px;
+ min-width: 535px;
overflow: auto;
position: relative
}
@@ -253,7 +256,8 @@
.paintweb_statusZoom {
background: #cbcbcb url('icons/zoom.png') no-repeat;
- border-left: 1px solid #a3a3a3;
+ border: 1px solid #a3a3a3;
+ border-width: 0 1px;
float: right;
font-size: 0.9em;
height: 100%;
@@ -261,13 +265,34 @@
margin: 0;
padding: 0 8px 0 31px;
position: absolute;
- right: 0;
+ right: 20px;
top: 0;
vertical-align: middle
}
.paintweb_imageZoom { width: 4em }
+.paintweb_viewportResizer {
+ background: #999;
+ border: 4px solid #fff;
+ border-width: 4px 0 0 4px;
+ bottom: 0;
+ cursor: se-resize;
+ height: 10px;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ text-indent: 15px;
+ width: 10px
+}
+
+.paintweb_viewportResizer:hover, .paintweb_viewportResizer:focus {
+ background: #fff;
+ border-color: #999
+}
+
.paintweb_main_line,
.paintweb_main_line_bcurve,
.paintweb_main_line_ellipse,
@@ -1015,28 +1040,26 @@
.paintweb_tinymce_status {
background: #ffffc5;
- border-bottom: 0;
border: 1px solid #9e9e9e;
+ border-bottom: 0;
color: #000;
display: block !important;
font: 14px/2.3em sans-serif;
- padding: 0 6px;
+ min-width: 535px;
position: relative
}
+.paintweb_tinymce_status span { padding: 0 6px }
+
.paintweb_tinymce_save, .paintweb_tinymce_cancel {
cursor: pointer;
position: absolute;
- top: 4px;
+ top: 4px
}
-.paintweb_tinymce_cancel {
- right: 5px;
-}
+.paintweb_tinymce_cancel { right: 5px }
-.paintweb_tinymce_save {
- right: 6em;
-}
+.paintweb_tinymce_save { right: 6em }
/* vim:set fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix: */
View
5 src/lang/en.json
@@ -1,5 +1,5 @@
{
- // $Date: 2009-08-11 20:12:31 +0300 $
+ // $Date: 2009-08-13 19:04:48 +0300 $
"errorInitBufferCanvas": "Error: adding the new buffer canvas element failed.",
"errorInitContext": "Error while initializing the canvas context.",
@@ -22,6 +22,8 @@
"noMainTabPanel": "Error: the interface layout has no tabbed panel with ID = main.",
"guiMarkupImportFailed": "Error: the interface markup code could not be imported into the main document.",
"guiMarkupParseFailed": "Error: the interface markup code could not be properly parsed.",
+ "missingViewport": "Error: the interface markup does not have the image viewport element.",
+ "missingViewportResizer": "Error: the interface markup does not have the image viewport resize handle.",
"missingCanvasResizer": "Error: the interface markup does not have the Canvas resize handle.",
"missingCanvasContainer": "Error: the interface markup does not have the Canvas container.",
"errorCpickerUnsupported": "Error: your browser does not implement the get/putImageData method! The color picker cannot be used.",
@@ -36,6 +38,7 @@
"errorImageSave": "The image cannot be saved!",
"guiCanvasResizer": "Resize the image canvas.",
+ "guiViewportResizer": "Resize the image viewport.",
"imageZoomTitle": "Zoom image",
"imageZoomLabel": "Zoom:",
Please sign in to comment.
Something went wrong with that request. Please try again.