private void linkFn(SpaceScope scope, jQueryObject element, object attrs)
{
element.Attribute("class", "space " + string.Format("space{0}", scope.Space.Name));
element.Resizable(new ResizableOptions()
{
Grid = new[] { scope.Parent.Scale.X, scope.Parent.Scale.Y },
MinHeight = -1,
MinWidth = -1,
Handles = "n, e, s, w,nw,sw,ne,se",
OnResize = (ev, ele) =>
{
scope.Space.Width = ele.Size.Width / scope.Parent.Scale.X;
scope.Space.Height = ele.Size.Height / scope.Parent.Scale.Y;
scope.Apply();
}
});
element.Draggable(new DraggableOptions()
{
Cursor = "crosshair",
Grid = new[] { scope.Parent.Scale.X, scope.Parent.Scale.Y },
OnDrag = (ev, ele) =>
{
scope.Space.X = ele.Position.Left / scope.Parent.Scale.X;
scope.Space.Y = ele.Position.Top/ scope.Parent.Scale.Y;
scope.Apply();
}
});
JsDictionary<string, string> beforeStyle = new JsDictionary<string, string>();
beforeStyle["display"] = "block";
beforeStyle["position"] = "relative";
beforeStyle["z-index"] = "-1";
beforeStyle["width"] = "100%";
beforeStyle["height"] = "100%";
beforeStyle["left"] = "-50px";
beforeStyle["top"] = "-50px";
beforeStyle["padding"] = "50px";
beforeStyle["border-radius"] = "15px";
beforeStyle["box-shadow"] = "rgb(51, 51, 51) 4px 4px 2px";
beforeStyle["content"] = "\"\"";
beforeStyle["background"] = "rgba(112, 12, 58, 0.231373)";
ChangeCSS("space" + scope.Space.Name + "::before", beforeStyle);
scope.SpaceStyle = new { };
scope.SpaceStyle.position = "absolute";
scope.SpaceStyle.left = scope.Space.X * scope.Parent.Scale.X;
scope.SpaceStyle.top = scope.Space.Y * scope.Parent.Scale.Y;
scope.SpaceStyle.width = scope.Space.Width * scope.Parent.Scale.X;
scope.SpaceStyle.height = scope.Space.Height * scope.Parent.Scale.Y;
scope.SpaceStyle.backgroundColor = "red";
foreach (var effect in scope.Space.Appearance.Effects)
{
switch (effect.Type)
{
case EffectType.Highlight:
var hEffect = ((CardGameAppearanceEffectHighlight)effect);
scope.SpaceStyle.padding = string.Format("{0} {0} {0} {0}", hEffect.Radius);
scope.SpaceStyle.backgroundColor = hEffect.Color;
scope.SpaceStyle.border = "solid 2px black";
scope.SpaceStyle.borderRadius = 15.0;
scope.SpaceStyle.boxShadow = "4px 4px 2px #333";
break;
case EffectType.Rotate:
Window.Alert(effect.Type.ToString());
break;
case EffectType.Bend:
var bEffect = (CardGameAppearanceEffectBend)effect;
//rotate
break;
case EffectType.StyleProperty:
Window.Alert(effect.Type.ToString());
break;
case EffectType.Animated:
Window.Alert(effect.Type.ToString());
break;
default:
break;
}
}
}
private void linkFn(TestAreaScope scope, jQueryObject element, object attrs)
{
element.MouseDown((e) =>
{
scope.Model.Selection.SelectedArea = scope.Area;
scope.Apply();
});
var scale = scope.Model.Scale;
Action reApplyAreaBind = () =>
{
scope.AreaStyle = new {};
scope.AreaStyle.position = "absolute";
scope.AreaStyle.boxShadow = "rgb(51, 51, 51) 4px 4px 2px";
scope.AreaStyle.borderRadius = "15px";
scope.AreaStyle.left = scope.Area.Left*scale.X;
scope.AreaStyle.top = scope.Area.Top*scale.Y;
scope.AreaStyle.width = scope.Area.Width*scale.X;
scope.AreaStyle.height = scope.Area.Height*scale.Y;
scope.AreaStyle.backgroundColor = "blue";
ClientHelpers.PurgeCSS("area" + scope.Area.Name + "::before");
foreach (
var gameLayoutScenarioEffect in
scope.Model.Selection.SelectedScenario.Effects)
{
foreach (var areaGuid in gameLayoutScenarioEffect.AreaGuids)
{
if (areaGuid == scope.Area.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("area" + scope.Area.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.Attribute("class",
"area " + string.Format("area{0}", scope.Area.Name));
element.Resizable(new ResizableOptions()
{
Grid = new[] {scale.X, scale.Y},
MinHeight = -1,
MinWidth = -1,
Handles = "n, e, s, w,nw,sw,ne,se",
OnResize = (ev, ele) =>
{
scope.Area.Left =
(int) (ele.Position.Left/scale.X);
scope.Area.Top =
(int) (ele.Position.Top/
scale.Y);
scope.Area.Width =
(int) (ele.Size.Width/
scale.X);
scope.Area.Height =
(int) (ele.Size.Height/
scale.Y);
scope.Apply();
}
});
element.Draggable(new DraggableOptions()
{
Cursor = "crosshair",
Grid = new[] {scale.X, scale.Y},
OnDrag = (ev, ele) =>
{
scope.Area.Left =
(int) (ele.Position.Left/scale.X);
scope.Area.Top = (int) (ele.Position.Top/
scale.Y);
scope.Apply();
}
});
reApplyAreaBind();
});
scope.Watch("area", reApplyAreaBind, true);
scope.Watch("model.selection.selectedEffect", reApplyAreaBind, true);
scope.Watch("model.selection.selectedScenario.effects", reApplyAreaBind, true);
}
