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