Add 'drawable.forced' option for only drawing

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v0.8.5
+
+- Added to `drawable.forced` to config. When set to true moving/dropping is not possible and only shapes will be drawn.
+- Dependencies bumped.
+
 ## v0.8.4
 
 - Added `unpromotesTo` to `promotion` in config. If a piece can't be added to or removed from hand, due to not being in `hands.roles`, unpromotion will be attempted. Return `undefined` by default.

dist/shogiground.js

@@ -1274,7 +1274,7 @@ var Shogiground = (function () {
             dest: undefined,
             pos,
             piece,
-            brush: eventBrush(e),
+            brush: eventBrush(e, isRightButton(e) || state.drawable.forced),
         };
         processDraw(state);
     }
@@ -1292,7 +1292,7 @@ var Shogiground = (function () {
             orig: piece,
             dest: undefined,
             pos,
-            brush: eventBrush(e),
+            brush: eventBrush(e, isRightButton(e) || state.drawable.forced),
         };
         processDraw(state);
     }
@@ -1348,9 +1348,9 @@ var Shogiground = (function () {
             state.drawable.piece = piece;
         state.dom.redraw();
     }
-    function eventBrush(e) {
+    function eventBrush(e, allowFirstModifier) {
         var _a;
-        const modA = (e.shiftKey || e.ctrlKey) && isRightButton(e), modB = e.altKey || e.metaKey || ((_a = e.getModifierState) === null || _a === void 0 ? void 0 : _a.call(e, 'AltGraph'));
+        const modA = allowFirstModifier && (e.shiftKey || e.ctrlKey), modB = e.altKey || e.metaKey || ((_a = e.getModifierState) === null || _a === void 0 ? void 0 : _a.call(e, 'AltGraph'));
         return brushes[(modA ? 1 : 0) + (modB ? 2 : 0)];
     }
     function addShape(drawable, cur) {
@@ -1922,7 +1922,7 @@ var Shogiground = (function () {
                 cancel(s);
             else if (s.drawable.current)
                 cancel$1(s);
-            else if (e.shiftKey || isRightButton(e)) {
+            else if (e.shiftKey || isRightButton(e) || s.drawable.forced) {
                 if (s.drawable.enabled)
                     start$2(s, e);
             }
@@ -1957,7 +1957,7 @@ var Shogiground = (function () {
                         setDrawPiece(s, piece);
                     }
                 }
-                else if (e.shiftKey || isRightButton(e)) {
+                else if (e.shiftKey || isRightButton(e) || s.drawable.forced) {
                     if (s.drawable.enabled)
                         startFromHand(s, piece, e);
                 }
@@ -2519,6 +2519,7 @@ var Shogiground = (function () {
             drawable: {
                 enabled: true, // can draw
                 visible: true, // can view
+                forced: false, // can only draw
                 eraseOnClick: true,
                 shapes: [],
                 autoShapes: [],

examples/assets/css/shogiground.css

@@ -327,7 +327,6 @@ sg-square-over {
 }
 .sg-wrap .sg-shapes g.alternative2 line {
   stroke: #e68f00;
-  stroke-width: 0.2;
 }
 .sg-wrap .sg-shapes marker#arrowhead-alternative2 path {
   fill: #e68f00;

examples/hands.html

@@ -62,6 +62,9 @@
           free: false,
           dests: new Map([['sente bishop', ['5e']]]),
         },
+        drawable: {
+          forced: false,
+        },
         promotion: {
           promotesTo: role => {
             if (role === 'bishop') return 'horse';

examples/index.html

@@ -73,6 +73,9 @@
             },
           },
         },
+        drawable: {
+          forced: false,
+        },
         events: {
           move: () => {
             console.log('move');

src/config.ts

@@ -107,6 +107,7 @@ export interface Config {
   drawable?: {
     enabled?: boolean; // can draw
     visible?: boolean; // can view
+    forced?: boolean; // can only draw
     eraseOnClick?: boolean;
     shapes?: DrawShape[];
     autoShapes?: DrawShape[];

src/draw.ts

@@ -35,6 +35,7 @@ export interface DrawShapePiece {
 export interface Drawable {
   enabled: boolean; // can draw
   visible: boolean; // can view
+  forced: boolean; // can only draw
   eraseOnClick: boolean;
   onChange?: (shapes: DrawShape[]) => void;
   shapes: DrawShape[]; // user shapes
@@ -72,7 +73,7 @@ export function start(state: State, e: sg.MouchEvent): void {
     dest: undefined,
     pos,
     piece,
-    brush: eventBrush(e),
+    brush: eventBrush(e, isRightButton(e) || state.drawable.forced),
   };
   processDraw(state);
 }
@@ -89,7 +90,7 @@ export function startFromHand(state: State, piece: sg.Piece, e: sg.MouchEvent):
     orig: piece,
     dest: undefined,
     pos,
-    brush: eventBrush(e),
+    brush: eventBrush(e, isRightButton(e) || state.drawable.forced),
   };
   processDraw(state);
 }
@@ -156,8 +157,8 @@ export function setDrawPiece(state: State, piece: sg.Piece): void {
   state.dom.redraw();
 }
 
-function eventBrush(e: sg.MouchEvent): string {
-  const modA = (e.shiftKey || e.ctrlKey) && isRightButton(e),
+function eventBrush(e: sg.MouchEvent, allowFirstModifier: boolean): string {
+  const modA = allowFirstModifier && (e.shiftKey || e.ctrlKey),
     modB = e.altKey || e.metaKey || e.getModifierState?.('AltGraph');
   return brushes[(modA ? 1 : 0) + (modB ? 2 : 0)];
 }

src/events.ts

@@ -113,7 +113,7 @@ function startDragOrDraw(s: State): MouchBind {
   return e => {
     if (s.draggable.current) drag.cancel(s);
     else if (s.drawable.current) draw.cancel(s);
-    else if (e.shiftKey || isRightButton(e)) {
+    else if (e.shiftKey || isRightButton(e) || s.drawable.forced) {
       if (s.drawable.enabled) draw.start(s, e);
     } else if (!s.viewOnly && !drag.unwantedEvent(e)) drag.start(s, e);
   };
@@ -142,7 +142,7 @@ function startDragFromHand(s: State): MouchBind {
           if (e.cancelable !== false) e.preventDefault();
           draw.setDrawPiece(s, piece);
         }
-      } else if (e.shiftKey || isRightButton(e)) {
+      } else if (e.shiftKey || isRightButton(e) || s.drawable.forced) {
         if (s.drawable.enabled) draw.startFromHand(s, piece, e);
       } else if (!s.viewOnly && !drag.unwantedEvent(e)) {
         if (e.cancelable !== false) e.preventDefault();

src/state.ts

@@ -231,6 +231,7 @@ export function defaults(): HeadlessState {
     drawable: {
       enabled: true, // can draw
       visible: true, // can view
+      forced: false, // can only draw
       eraseOnClick: true,
       shapes: [],
       autoShapes: [],