/// <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);
}
