From 73589fbe667f94e7df49049c18d05ca1103de652 Mon Sep 17 00:00:00 2001 From: Peter Date: Thu, 15 Apr 2010 00:33:14 +0100 Subject: [PATCH] Added a draggable bevel around the line border for nice effect. It is now possible move the text edit frame around the screen. --- build.xml | 138 ++--- nbproject/build-impl.xml | 644 ++++++++++---------- nbproject/configs/DraggableBevel.properties | 3 + nbproject/genfiles.properties | 16 +- nbproject/project.xml | 26 +- src/zen/like/DraggableBevel.fx | 177 ++++++ src/zen/like/DraggableLineBorder.fx | 64 +- 7 files changed, 645 insertions(+), 423 deletions(-) create mode 100644 nbproject/configs/DraggableBevel.properties create mode 100644 src/zen/like/DraggableBevel.fx diff --git a/build.xml b/build.xml index 6fca96a..e20ea22 100644 --- a/build.xml +++ b/build.xml @@ -1,69 +1,69 @@ - - - - - - Builds, tests, and runs the project ZenWriterFX. - - - + + + + + + Builds, tests, and runs the project ZenWriterFX. + + + diff --git a/nbproject/build-impl.xml b/nbproject/build-impl.xml index 9e69ae9..9ef5c83 100644 --- a/nbproject/build-impl.xml +++ b/nbproject/build-impl.xml @@ -1,322 +1,322 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Must set build.dir - Must set dist.dir - Must set dist.javadoc.dir - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Must set build.dir + Must set dist.dir + Must set dist.javadoc.dir + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/nbproject/configs/DraggableBevel.properties b/nbproject/configs/DraggableBevel.properties new file mode 100644 index 0000000..20f4e54 --- /dev/null +++ b/nbproject/configs/DraggableBevel.properties @@ -0,0 +1,3 @@ +execution.target=standard +javafx.profile=desktop +main.class=zen.like.DraggableBevel diff --git a/nbproject/genfiles.properties b/nbproject/genfiles.properties index ac68ef3..124b06b 100644 --- a/nbproject/genfiles.properties +++ b/nbproject/genfiles.properties @@ -1,8 +1,8 @@ -build.xml.data.CRC32=0b6a6bea -build.xml.script.CRC32=7f11d37e -build.xml.stylesheet.CRC32=bdec6f99@1.9.1 -# This file is used by a NetBeans-based IDE to track changes in generated files such as build-impl.xml. -# Do not edit this file. You may delete it but then the IDE will never regenerate such files for you. -nbproject/build-impl.xml.data.CRC32=0b6a6bea -nbproject/build-impl.xml.script.CRC32=0e3c433d -nbproject/build-impl.xml.stylesheet.CRC32=08b52d4e@1.9.1 +build.xml.data.CRC32=0b6a6bea +build.xml.script.CRC32=7f11d37e +build.xml.stylesheet.CRC32=bdec6f99@1.9.1 +# This file is used by a NetBeans-based IDE to track changes in generated files such as build-impl.xml. +# Do not edit this file. You may delete it but then the IDE will never regenerate such files for you. +nbproject/build-impl.xml.data.CRC32=0b6a6bea +nbproject/build-impl.xml.script.CRC32=0e3c433d +nbproject/build-impl.xml.stylesheet.CRC32=08b52d4e@1.9.1 diff --git a/nbproject/project.xml b/nbproject/project.xml index 7a04216..3ee6224 100644 --- a/nbproject/project.xml +++ b/nbproject/project.xml @@ -1,13 +1,13 @@ - - - org.netbeans.modules.javafx.project - - - ZenWriterFX - 1.6.5 - - - - - - + + + org.netbeans.modules.javafx.project + + + ZenWriterFX + 1.6.5 + + + + + + diff --git a/src/zen/like/DraggableBevel.fx b/src/zen/like/DraggableBevel.fx new file mode 100644 index 0000000..19bb984 --- /dev/null +++ b/src/zen/like/DraggableBevel.fx @@ -0,0 +1,177 @@ +/* + * DraggableBevel.fx + * + * Created on 08-Apr-2010, 19:05:48 + */ + +package zen.like; + +import javafx.scene.CustomNode; +import javafx.scene.Node; +import javafx.scene.Group; +import javafx.stage.Stage; +import javafx.scene.Scene; +import javafx.scene.Cursor; +import javafx.scene.layout.Resizable; +import javafx.scene.paint.Color; +import javafx.scene.shape.Rectangle; +import javafx.scene.shape.ShapeSubtract; +import javafx.scene.input.MouseEvent; +import javafx.animation.transition.FadeTransition; + +def MIN_OPACITY=0.33; +def MAX_OPACITY=0.85; + +/** + * A draggable bevel component that is form from a {@link ShapeSubstract}, which consists of an outer rectangle + * A substracted from an inner rectangle B. The custom node has fade transition animation effects applied + * when the mouse enters and exits the component. The opacities are user configurable. + *

+ * + * A user can listen to drag position by registering a function type callback on {@link #dragAction()} + * + * @author Peter Pilgrim + */ +public class DraggableBevel extends CustomNode, Resizable { + + /** The bevel width */ + public var bevelWidth: Number = 10; + + /** The bevel height */ + public var bevelHeight: Number = 10; + + public var btnUpFill: Color = Color.LIGHTBLUE; + public var btnHoverFill: Color = Color.ORANGE; + public var btnDownFill: Color = Color.GREEN; + public var normalCursor: Cursor = Cursor.DEFAULT; + public var hoverCursor: Cursor = Cursor.CROSSHAIR; + + public var minimumOpacity: Number = MIN_OPACITY; + public var maximumOpacity: Number = MAX_OPACITY; + + public var dragAction: function( node: DraggableBevel, deltaX: Number, deltaY: Number, e:MouseEvent ): Void; + + protected var buttonDown: Boolean; + protected var startX: Number; + protected var startY: Number; + + protected var shape: ShapeSubtract; + + protected var fadeTx: FadeTransition; + + override function create(): Node { + var group = Group { + content: [ + shape = ShapeSubtract { + // We bind on the object, because we want to force + // ShapeSubstract to resize on a dimension change. + // Every time the width and/or height + // changes a new Rectangle scenegraph object is created. + // *PP* 09/Apr/2010 + a: bind Rectangle { + width: width + height: height + }; + b: bind Rectangle { + translateX: bevelWidth + translateY: bevelHeight + width: this.width - bevelWidth*2 + height: this.height - bevelHeight*2 + }; + fill: btnUpFill + opacity: minimumOpacity + } + ] + }; + + return group; + } + + public override function getPrefWidth(height: Number) : Number + { + -1 + } + + public override function getPrefHeight(width: Number) : Number + { + -1 + } + + override var onMousePressed = function( e: MouseEvent ):Void { + shape.fill = btnDownFill; + buttonDown = true; + startX = e.x; + startY = e.y; + } + + override var onMouseReleased = function( e: MouseEvent ):Void { + shape.fill = btnUpFill; + buttonDown = false; + } + + override var onMouseEntered = function( e: MouseEvent ):Void { + this.cursor = hoverCursor; + shape.fill = if ( buttonDown) btnDownFill else btnHoverFill; + + fadeTx.stop(); + + fadeTx = FadeTransition { + node: shape + fromValue: minimumOpacity + toValue: maximumOpacity + duration: 1s + }; + fadeTx.playFromStart(); + } + + override var onMouseExited = function( e: MouseEvent ):Void { + this.cursor = normalCursor; + shape.fill = if ( buttonDown) btnDownFill else btnUpFill; + fadeTx.stop(); + fadeTx = FadeTransition { + node: shape + fromValue: maximumOpacity + toValue: minimumOpacity + duration: 1s + }; + fadeTx.playFromStart(); + } + + override var onMouseDragged = function( e: MouseEvent ):Void { + if ( dragAction != null ) { + var deltaX = e.x - startX ; + var deltaY = e.y - startY ; + dragAction( this, deltaX, deltaY, e ); + } + + } +} + +/** + * A main entry program for testing this component visually + */ +public function run( args: String[] ): Void { + + var bevel: DraggableBevel; + + Stage { + title : "Testing DraggableBevel" + scene: Scene { + width: 800 + height: 600 + content: [ + bevel = DraggableBevel { + layoutX: 50 + layoutY: 50 + width: 400 + height: 400 + dragAction: function( node: DraggableBevel, deltaX: Number, deltaY: Number, e:MouseEvent ): Void { + println("deltaX={deltaX}, deltaY={deltaY}, e={e}"); + bevel.layoutX += deltaX; + bevel.layoutY += deltaY; + } + } + ] + } + } +} diff --git a/src/zen/like/DraggableLineBorder.fx b/src/zen/like/DraggableLineBorder.fx index 55a977b..a44a606 100644 --- a/src/zen/like/DraggableLineBorder.fx +++ b/src/zen/like/DraggableLineBorder.fx @@ -19,14 +19,14 @@ import javafx.scene.shape.Rectangle; import javafx.scene.text.Font; import javafx.ext.swing.SwingComponent; import javafx.scene.input.MouseEvent; +import javafx.geometry.BoundingBox; import javafx.util.Math; -def STEP=10; - /** - * Draggable line boder - * @author Peter + * Draggable line boder component + * + * @author Peter Pilgrim */ public class DraggableLineBorder extends CustomNode, Resizable { @@ -43,8 +43,11 @@ public class DraggableLineBorder extends CustomNode, Resizable { scheduleLayout(); } - public var marginWidth: Number = 10; - public var marginHeight: Number = 10; + + public var insetWidth: Number = 10; + + public var insetHeight: Number = 10; + public var minimumWidth: Number = 100; public var minimumHeight: Number = 100; public var maximumWidth: Number = 1000; @@ -61,7 +64,6 @@ public class DraggableLineBorder extends CustomNode, Resizable { } }; - protected var debugRect = Rectangle { width: bind width height: bind height @@ -77,6 +79,8 @@ public class DraggableLineBorder extends CustomNode, Resizable { fill: bind borderFillColor; }; + protected var savedBoundingBox: BoundingBox; + protected var n = DragNode{id: "n", hoverCursor: Cursor.N_RESIZE }; protected var ne = DragNode{id: "ne", hoverCursor: Cursor.NE_RESIZE }; protected var e = DragNode{id: "e", hoverCursor: Cursor.E_RESIZE }; @@ -87,6 +91,8 @@ public class DraggableLineBorder extends CustomNode, Resizable { protected var nw = DragNode{id: "nw", hoverCursor: Cursor.NW_RESIZE }; protected var dragNodes: DragNode[] = [ n, ne, e, se, s, sw, w, nw ]; + protected var bevelBorder: DraggableBevel; + /** Relayout flag */ protected var needRelayout: Boolean; @@ -102,13 +108,45 @@ public class DraggableLineBorder extends CustomNode, Resizable { } public override function create(): Node { + bevelBorder = DraggableBevel { + bevelWidth: bind margin + bevelHeight: bind margin + width: width + height: height + dragAction: function( node: DraggableBevel, deltaX: Number, deltaY: Number, e:MouseEvent ): Void { + println("deltaX={deltaX}, deltaY={deltaY}, e={e}"); + this.layoutX += deltaX; + this.layoutY += deltaY; + } + + onMouseClicked: function (e: MouseEvent): Void { + if ( e.clickCount == 2 ) { + if ( width < maximumWidth and height < maximumHeight ) { + savedBoundingBox = BoundingBox { + minX: layoutX + minY: layoutY + width: width + height: height + }; + positionBorder( insetWidth, insetHeight, maximumWidth, maximumHeight ); + } + else { + if ( savedBoundingBox != null ) { + positionBorder( savedBoundingBox.minX, savedBoundingBox.minY, savedBoundingBox.width, savedBoundingBox.height); + } + } + } + } + + }; + for ( dn in dragNodes) { dn.size = dragNodeSize; dn.dragAction = dragListener; } computeLayoutDown(); Group { - content: [debugRect, border, dragNodes, item ]; + content: [debugRect, border, bevelBorder, dragNodes, item ]; } } @@ -137,6 +175,9 @@ public class DraggableLineBorder extends CustomNode, Resizable { border.width = width - margin; border.height = height - margin; + bevelBorder.width = width; + bevelBorder.height = height; + positionDragNode(n, w2, m2 ); positionDragNode(ne, width-m2, m2 ); positionDragNode(e, width-m2, h2 ); @@ -172,8 +213,8 @@ public class DraggableLineBorder extends CustomNode, Resizable { } protected function positionBorder( x: Number, y: Number, w: Number, h: Number ): Void { - var x2 = Math.max(x, marginWidth ); - var y2 = Math.max(y, marginHeight); + var x2 = Math.max(x, insetWidth ); + var y2 = Math.max(y, insetHeight); var w2 = Math.max( Math.min(w, maximumWidth ), minimumWidth ); var h2 = Math.max( Math.min(h, maximumHeight ), minimumHeight ); this.layoutX = x2; @@ -226,7 +267,8 @@ public class DraggableLineBorder extends CustomNode, Resizable { /** - * The rectangle + * The internal draggable node component for the draggable line border. + * @author Peter Pilgrim */ protected class DragNode extends Rectangle {