/// <summary>Constructor.</summary> public Textbox() { // Setup initial conditions. Container.AddClass(ClassTextbox); // Create INPUT. input = Html.CreateElement("input"); input.Attribute(Html.Type, "text"); input.AppendTo(Container); input.AddClass(ClassTextbox); // Set initial size. Height = 40; // Assign focus control to the input element. ChangeFocusElement(input); Focus.BrowserHighlighting = false; Focus.CanFocus = true; // Setup padding. padding = new Spacing().Sync(input, OnBeforePaddingSync); padding.Change(10, 5); // Create child objects. eventDelay = new DelayedAction(0.3, OnDelayElapsed); // Wire up events. Container.MouseDown(delegate { FocusOnClick(); }); input.Keyup(delegate(jQueryEvent e) { if (previousText != Text) FireTextChanged(); if (Int32.Parse(e.Which) == (int)Key.Enter) FireEnterPress(); }); input.MouseDown(delegate { OnInputMouseDown(); }); input.MouseUp(delegate { OnInputMouseUp(); }); Focus.GotFocus += OnGotFocus; Focus.LostFocus += OnLostFocus; IsEnabledChanged += delegate { SyncEnabled(); }; SizeChanged += delegate { UpdateLayout(); }; // Sync size and shape. SyncCornerRadius(); // Finish up. previousText = Text; FireSizeChanged(); }
private void LinkFn(CanvasAssetFrameEditScope scope, jQueryObject element, dynamic attr) { var frameCanvas = ((CanvasElement)element[0]); frameCanvas.Width = scope.Width; frameCanvas.Height = scope.Height; var mousedown = false; element.MouseDown((e) => { mousedown = true; }); element.MouseUp((e) => { mousedown = false; }); element.MouseMove((e) => { scope.Apply(() => { if (!mousedown) return; if (scope.Edit) { var x = e.OffsetX; var y = e.OffsetY; var _x = (int)(x / ((double)scope.Width / scope.Frame.Width)); var _y = (int)(y / ((double)scope.Height / scope.Frame.Height)); var halfwidth = (scope.LineWidth / 2); int[][] map; int setValue; switch (scope.EditType) { case AssetFrameEditType.ColorMap: setValue = scope.EditPaletteIndex; map = scope.Frame.ColorMap; break; case AssetFrameEditType.HurtMap: setValue = scope.EditPaletteIndex; map = scope.Frame.HurtSonicMap; break; case AssetFrameEditType.CollisionMap: setValue = scope.EditPaletteIndex; map = scope.Frame.CollisionMap; break; case AssetFrameEditType.Offset: scope.Frame.OffsetX = _x; scope.Frame.OffsetY = _y; //special return; default: throw new ArgumentOutOfRangeException(); } if (scope.LineWidth == 1) { map[_x][_y] = setValue; } else { for (var k = -halfwidth; k < halfwidth; k++) { for (var c = -halfwidth; c < halfwidth; c++) { map[Math.Min(Math.Max(0, _x + k), scope.Frame.Width)][Math.Min(Math.Max(0, _y + c), scope.Frame.Height)] = setValue; } } } scope.Frame.ClearCache(); } }); }); var frameContext = (CanvasRenderingContext2D)frameCanvas.GetContext(CanvasContextId.Render2D); Action updateFrame = () => { frameContext.Canvas.Width = frameContext.Canvas.Width; frameContext.Me().webkitImageSmoothingEnabled = false; frameContext.Me().mozImageSmoothingEnabled = false; frameContext.Me().imageSmoothingEnabled = false; frameContext.Scale((double)scope.Width / scope.Frame.Width, (double)scope.Height / scope.Frame.Height); scope.Frame.DrawUI(frameContext, new Point(0, 0), false, scope.EditType == AssetFrameEditType.CollisionMap, scope.EditType == AssetFrameEditType.HurtMap, scope.EditType == AssetFrameEditType.Offset, false, false); }; scope.Watch("frame", updateFrame); scope.Watch("editType", updateFrame); scope.Watch("frame.width", updateFrame); scope.Watch("frame.height", updateFrame); scope.Watch("frame.offsetX", updateFrame); scope.Watch("frame.offsetY", updateFrame); scope.Watch("frame.hurtSonicMap", updateFrame, true); scope.Watch("frame.collisionMap", updateFrame, true); scope.Watch("frame.colorMap", updateFrame, true); scope.Watch("frame.palette", updateFrame, true); scope.Watch("editType", updateFrame); }
private void linkFn(TestTextScope scope, jQueryObject element, object attrs) { element.Attribute("class", "text " + string.Format("text{0}", scope.Text.Name)); element.MouseDown((e) => { scope.Model.Selection.SelectedText = scope.Text; scope.Apply(); }); var scale = scope.Model.Scale; Action reApplyTextBind = () => { scope.TextStyle = new { }; scope.TextStyle.position = "absolute"; scope.TextStyle.left = scope.Text.Left * scale.X; scope.TextStyle.top = scope.Text.Top * scale.Y; scope.TextStyle.boxShadow = "rgb(51, 51, 51) 4px 4px 2px"; scope.TextStyle.borderRadius = "15px"; element.Text(scope.Text.Text); ClientHelpers.PurgeCSS("text" + scope.Text.Name + "::before"); foreach (var gameLayoutScenarioEffect in scope.Model.Selection.SelectedScenario.Effects) { foreach (var textGuid in gameLayoutScenarioEffect.TextGuids) { if (textGuid == scope.Text.Guid) { foreach (var gameEffectModel in scope.Model.Game.Effects) { if (gameEffectModel.Guid == gameLayoutScenarioEffect.EffectGuid) { var effect = gameEffectModel; switch (effect.Type) { case EffectType.Highlight: var color = effect.GetString("color"); var radius = effect.GetNumber("radius"); var rotate = effect.GetNumber("rotate"); var offsetX = effect.GetNumber("offsetx"); var offsetY = effect.GetNumber("offsety"); var opacity = effect.GetNumber("opacity"); var beforeStyle = new JsDictionary<string, string>(); beforeStyle["display"] = "block"; beforeStyle["position"] = "relative"; beforeStyle["z-index"] = "-1"; beforeStyle["width"] = "100%"; beforeStyle["height"] = "100%"; beforeStyle["left"] = (-radius + offsetX) + "px"; beforeStyle["top"] = (-radius + offsetY) + "px"; beforeStyle["padding"] = (radius) + "px"; beforeStyle["border-radius"] = "5px"; beforeStyle["box-shadow"] = "rgb(44, 44, 44) 3px 3px 2px"; var hexcolor = ClientHelpers.HexToRGB(color); beforeStyle["content"] = "\"\""; beforeStyle["background-color"] = string.Format("rgba({0}, {1}, {2}, {3})", hexcolor.R, hexcolor.G, hexcolor.B, opacity); beforeStyle["border"] = "2px solid black"; ClientHelpers.ChangeCSS("text" + scope.Text.Name + "::before", beforeStyle); break; case EffectType.Rotate: break; case EffectType.Bend: break; case EffectType.StyleProperty: break; case EffectType.Animated: break; } } } } } } }; scope.Watch("model.scale", () => { scale = scope.Model.Scale; element.Draggable(new DraggableOptions() { Cursor = "crosshair", Grid = new[] { scale.X, scale.Y }, OnDrag = (ev, ele) => { scope.Text.Left = (ele.Position.Left / scale.X); scope.Text.Top = (ele.Position.Top / scale.Y); scope.Apply(); } }); reApplyTextBind(); }); scope.Watch("text", reApplyTextBind, true); scope.Watch("model.selection.selectedEffect", reApplyTextBind, true); scope.Watch("model.selection.selectedScenario.effects", reApplyTextBind, true); }
private void LinkFn(CanvasPieceLayoutEditScope scope, jQueryObject element, dynamic attr) { element.Width(scope.Width); element.Height(scope.Height); var mouseDown = false; var lastPosition = new FloatPoint(scope.Width / 2f, scope.Height / 2f); LevelObjectPieceLayoutPiece movingPiece = null; element.MouseDown((e) => { lastPosition.X = e.OffsetX; lastPosition.Y = e.OffsetY; mouseDown = true; var posX = (e.OffsetX - scope.ZeroPosition.X) / scope.Scale; var posY = (e.OffsetY - scope.ZeroPosition.Y) / scope.Scale; foreach (var levelObjectPieceLayoutPiece in scope.PieceLayout.Pieces) { LevelObjectPiece piece = scope.ObjectData.Pieces[levelObjectPieceLayoutPiece.PieceIndex]; var asset = scope.ObjectData.Assets[piece.AssetIndex]; if (asset.Frames.Count > 0) { var frm = asset.Frames[0]; if (pointInArea(levelObjectPieceLayoutPiece.X - frm.OffsetX, levelObjectPieceLayoutPiece.Y - frm.OffsetY, 30, posX, posY)) { movingPiece = levelObjectPieceLayoutPiece; scope.SelectedPieceLayoutPiece = movingPiece; lastPosition.X = posX; lastPosition.Y = posY; return; } } } }); element.MouseUp((e) => { mouseDown = false; movingPiece = null; }); element.MouseMove((e) => scope.Apply(() => { if (!mouseDown) return; var x = e.OffsetX; var y = e.OffsetY; if (movingPiece != null) { float posX = (e.OffsetX - scope.ZeroPosition.X) / scope.Scale; float posY = (e.OffsetY - scope.ZeroPosition.Y) / scope.Scale; if (Math.Abs((int)(posX - lastPosition.X)) > 0) { movingPiece.X += (int)(posX - lastPosition.X); lastPosition.X = posX; } if (Math.Abs((int)(posY - lastPosition.Y)) > 0) { movingPiece.Y += (int)(posY - lastPosition.Y); lastPosition.Y = posY; } } else { scope.ZeroPosition.X += (int)(x - lastPosition.X); scope.ZeroPosition.Y += (int)(y - lastPosition.Y); lastPosition.X = e.OffsetX; lastPosition.Y = e.OffsetY; } })); element[0].Style.Display = "inline-block"; var context = (CanvasRenderingContext2D)((CanvasElement)element[0]).GetContext(CanvasContextId.Render2D); scope.Scale = 1; scope.ZeroPosition = new Point(0, 0); Action updatePieceLayout = () => { context.Canvas.Width = context.Canvas.Width; context.Me().webkitImageSmoothingEnabled = false; context.Me().mozImageSmoothingEnabled = false; context.Me().imageSmoothingEnabled = false; context.FillStyle = "#FFFFFF"; context.FillRect(0, 0, scope.Width, scope.Height); context.BeginPath(); context.Rect(0, 0, scope.Width, scope.Height); context.Clip(); context.ClosePath(); context.Translate(scope.ZeroPosition.X, scope.ZeroPosition.Y); context.Scale(scope.Scale, scope.Scale); scope.PieceLayout.DrawUI(context, scope.ShowImages, scope.PieceLayout.Pieces.IndexOf(scope.SelectedPieceLayoutPiece), scope.ObjectData); }; scope.Watch("pieceLayout", updatePieceLayout); scope.Watch("pieceLayout.pieces", updatePieceLayout, true); scope.Watch("scale", updatePieceLayout); scope.Watch("showImages", updatePieceLayout); scope.Watch("zeroPosition", updatePieceLayout, true); scope.Watch("selectedPieceLayoutPiece", updatePieceLayout); }
private void InsertIcon() { // Setup initial conditions. if (icon != null) return; // Already inserted. // Create the icon. icon = Html.CreateElement(Html.Img); icon.AddClass(ClassTextbox); icon.AddClass(ClassIcon); Css.SetDisplay(icon, false); icon.AppendTo(Container); // Wire up events. icon.Load(delegate(jQueryEvent e) { PositionIcon(); Padding.UpdateLayout(); }); icon.MouseDown(delegate(jQueryEvent e) { FocusOnClick(); }); }
private void LinkFn(CanvasAssetFramePaletteEditScope scope, jQueryObject element, dynamic attr) { var paletteCanvas = ((CanvasElement)element[0]); paletteCanvas.Width = scope.Width; paletteCanvas.Height = scope.Height; element.MouseDown((e) => { if (scope.Edit) { var f = (int)Math.Ceiling(scope.Frame.Palette.Length / 2.0); var x = e.OffsetX; var y = e.OffsetY; if (scope.Wide) { var _x = (int)(x / (scope.Width / (double)(f + (scope.ShowCurrent ? 2 : 0)))); var _y = (int)(y / (scope.Height / (double)2)); if (scope.Frame.Palette[_y * f + _x] != null) { scope.SelectedPaletteIndex = _y * f + _x; } } else { var _x = (int)(x / (scope.Width / (double)2)); var _y = (int)(y / (scope.Height / (double)(f + (scope.ShowCurrent ? 2 : 0)))); if (scope.Frame.Palette[_y * 2 + _x] != null) { scope.SelectedPaletteIndex = _y * 2 + _x; } } } }); var paletteContext = (CanvasRenderingContext2D)paletteCanvas.GetContext(CanvasContextId.Render2D); if (scope.ShowCurrent) { scope.SelectedPaletteIndex = 0; } Action updateFrame = () => { paletteContext.Canvas.Width = paletteContext.Canvas.Width; paletteContext.Me().webkitImageSmoothingEnabled = false; paletteContext.Me().mozImageSmoothingEnabled = false; paletteContext.Me().imageSmoothingEnabled = false; var palette = scope.Frame.Palette; var canv = paletteContext; canv.Save(); var f = (int)Math.Ceiling(palette.Length / 2.0); if (scope.Wide) { canv.Scale(scope.Width / (double)(f + (scope.ShowCurrent ? 2 : 0)), scope.Height / (double)2); for (var h = 0; h < 2; h++) { for (var w = 0; w < f; w++) { if (palette[w + h * f] != null) { canv.FillStyle = palette[w + h * f]; canv.FillRect(w, h, 1, 1); } } } if (scope.ShowCurrent) { canv.FillStyle = palette[scope.SelectedPaletteIndex]; canv.FillRect(f, 0, 1 * 2, 1 * 2); } } else { canv.Scale(scope.Width / (double)2, scope.Height / (double)(f + (scope.ShowCurrent ? 2 : 0))); for (var h = 0; h < f; h++) { for (var w = 0; w < 2; w++) { if (palette[w + h * 2] != null) { canv.FillStyle = palette[w + h * 2]; canv.FillRect(w, h, 1, 1); } } } if (scope.ShowCurrent) { canv.FillStyle = palette[scope.SelectedPaletteIndex]; canv.FillRect(0, f, 1 * 2, 1 * 2); } } canv.Restore(); }; scope.Watch("frame", updateFrame); scope.Watch("frame.palette", updateFrame); scope.Watch("selectedPaletteIndex", updateFrame); }