point and click reverted back, improvements

site/src/components/main-panel/blueprint-panel.vue

@@ -4,7 +4,7 @@ Please don't remove this comment if you use unmodified file
 -->
 <script setup lang="ts">
 import {ref, computed, reactive, unref, watch, onMounted} from 'vue';
-import {injectBlueprintModel} from '@/scripts/model/store';
+import {injectBlueprintModel, type BlueprintItemModel} from '@/scripts/model/store';
 import {injectSettings} from '@/scripts/settings';
 import RecipesMenu from './recipes-menu.vue';
 import {syncRefs, useEventListener, type MaybeElement} from '@vueuse/core';
@@ -46,11 +46,11 @@ const {
     dropZoneSurfaceElem: dropZoneSurfaceElem3,
     dropZoneOriginElem: dropZoneOriginElem3,
 } = useItemDragAndDrop();
-const {processSelected, parentElem: dropZoneSurfaceElem4, notifySelected} = usePointAndClick();
+const {processSelected, parentElem: dropZoneOriginElem4, notifySelected} = usePointAndClick();
 const {surfaceElem, originElem, updateSurface, boundingRect} = useSharedBlueprintSurface();
 
-syncRefs(blueprintSurface, [surfaceElem, dropZoneSurfaceElem1, dropZoneSurfaceElem2, dropZoneSurfaceElem3, dropZoneSurfaceElem4]);
-syncRefs(blueprintCollection, [originElem, dropZoneOriginElem1, dropZoneOriginElem2, dropZoneOriginElem3]);
+syncRefs(blueprintSurface, [surfaceElem, dropZoneSurfaceElem1, dropZoneSurfaceElem2, dropZoneSurfaceElem3]);
+syncRefs(blueprintCollection, [originElem, dropZoneOriginElem1, dropZoneOriginElem2, dropZoneOriginElem3, dropZoneOriginElem4]);
 
 function addItem(selected: GameItem, clientPosition: ReadonlyPointType) {
     const item = reactive(blueprintModel.addItem(selected.name));
@@ -72,6 +72,12 @@ useEventHook(notifySelected, (param) => {
         param.wasHandled();
         return;
     }
+    if(param.item.clazz == SelectedClassType.BlueprintItemModel) {
+        const item = param.item.item as BlueprintItemModel;
+        item.setRect(item.rect.assignPoint(param.clientPosition).limit(unref(boundingRect)));
+        param.wasHandled();
+        return;
+    }
 });
 
 useEventHook([itemHooks.notifyMove, itemHooks.notifyDrop], (param) => {

site/src/components/main-panel/blueprint-single-item.vue

@@ -5,11 +5,11 @@ Please don't remove this comment if you use unmodified file
 <script setup lang="ts">
 import {ref, unref, computed, onMounted, watch, nextTick} from 'vue';
 import type {BlueprintItemModel, RecipeIOModel} from '@/scripts/model/store';
-import {mdiArrowLeft, mdiArrowRight} from '@mdi/js';
+import {mdiArrowLeft, mdiArrowRight, mdiCursorMove} from '@mdi/js';
 import {useElementHover, type MaybeElement} from '@vueuse/core';
 import {injectSettings} from '@/scripts/settings';
 import {Rect, type ReadonlyRectType} from '@/scripts/geometry';
-import {screenToClient, useItemDragAndDrop} from '@/composables/drag-helpers';
+import {SelectedClassType, screenToClient, useItemDragAndDrop, usePointAndClick} from '@/composables/drag-helpers';
 import {useEventHook} from '@/composables';
 
 const props = defineProps<{
@@ -27,6 +27,7 @@ const isDragging = ref(false);
 const itemStateColor = computed(() => settings.itemStateColor[props.item.state]);
 const isHovered = useElementHover(mainDivElement);
 const {hooks: itemHooks, dragStart} = useItemDragAndDrop();
+const {selectItem, selectedItem} = usePointAndClick();
 
 useEventHook([itemHooks.notifyCancel, itemHooks.notifyDrop], () => {
     isDragging.value = false;
@@ -47,6 +48,12 @@ const computeStyle = computed(() => {
     };
 });
 
+const computedSelectedClass = computed(() => {
+    if(unref(selectedItem)?.isSelected(props.item))
+        return 'selected-border';
+    return 'unselected-border';
+});
+
 function updateIoRects() {
     nextTick(() => {
         const mainDiv = unref(mainDivElement);
@@ -119,7 +126,7 @@ watch(() => props.item.rect, (value, oldValue) => {
     <div
         ref="mainDivElement"
         class="rounded parent-div"
-        :class="[computedElevation, itemStateColor]"
+        :class="[computedElevation, itemStateColor, computedSelectedClass]"
         :style="computeStyle"
         :data-item-id="props.item.key"
         @pointerdown.left.stop="dragStart($event, props.item); isDragging = true;"
@@ -131,6 +138,17 @@ watch(() => props.item.rect, (value, oldValue) => {
             <div class="float-right mr-1">
                 <item-menu-button :item="props.item" />
             </div>
+            <div v-if="settings.pointAndClickEnabled" class="float-right mr-1">
+                <v-btn
+                    size="x-small"
+                    color="secondary"
+                    variant="outlined"
+                    @pointerdown.left.stop
+                    @click.stop="selectItem(SelectedClassType.BlueprintItemModel, props.item)"
+                >
+                    <v-icon :icon="mdiCursorMove" />
+                </v-btn>
+            </div>
         </div>
         <div class="main-row">
             <div>

site/src/composables/drag-helpers/blueprint-surface.ts

@@ -17,6 +17,9 @@ export function useBlueprintSurface() {
     //this may be different from surface to support negative scroll
     const originElem = ref<MaybeElement>();
     const marginSize = 500;
+    //should be less than marginSize
+    const marginStep = marginSize >> 1;
+    const initialScrollOffset = 50;
 
     function applyStyle(elem: HTMLElement | SVGElement | null | undefined, style: Record<string, string>) {
         if(!elem)
@@ -26,6 +29,14 @@ export function useBlueprintSurface() {
         });
     }
 
+    function roundToStep(value: number) {
+        if(!value)
+            return value;
+        if(value < 0)
+            return Math.floor((value - Number.EPSILON) / marginStep) * marginStep;
+        return Math.ceil((value + Number.EPSILON) / marginStep) * marginStep;
+    }
+
     //there will be glitches, if we drag and expand and scroll simultaneously
     //so we do this only on demand, when blueprint items changed
     function updateSurface(items: IterableIterator<BlueprintItemModel>, resetScroll?: boolean) {
@@ -47,8 +58,8 @@ export function useBlueprintSurface() {
         if(!_minItemXY.x && !_minItemXY.y && !_maxItemXY.x && !_maxItemXY.y) {
             boundingRect = Rect.assign();
         } else {
-            const x1 = Math.min(_minItemXY.x - marginSize, 0);
-            const y1 = Math.min(_minItemXY.y - marginSize, 0);
+            const x1 = roundToStep(Math.min(_minItemXY.x - marginSize, 0));
+            const y1 = roundToStep(Math.min(_minItemXY.y - marginSize, 0));
 
             //we need keep scroll position, so it will not suddenly jump somewhere
             //for this we must make bounding rect bigger than visible rect (at offset 0,0)
@@ -59,8 +70,8 @@ export function useBlueprintSurface() {
             boundingRect = Rect.assign({
                 x: x1,
                 y: y1,
-                width: ((x2 - x1) + marginSize),
-                height: ((y2 - y1) + marginSize),
+                width: roundToStep((x2 - x1) + marginSize),
+                height: roundToStep((y2 - y1) + marginSize),
             });
         }
         const {x, y, width, height} = boundingRect;
@@ -92,9 +103,9 @@ export function useBlueprintSurface() {
         applyStyle(unrefElement(originElem), originStyle);
         if(scrollboxElement) {
             if(resetScroll) {
-                scrollboxElement.scrollLeft = marginSize;
-                scrollboxElement.scrollTop = marginSize;
-            } else {
+                scrollboxElement.scrollLeft = marginSize - initialScrollOffset;
+                scrollboxElement.scrollTop = marginSize - initialScrollOffset;
+            } else if(delta.x || delta.x) {
                 //adjusting scrolling the same amount, so screen is left on the same position
                 const scrollX = scrollboxElement.scrollLeft + delta.x;
                 const scrollY = scrollboxElement.scrollTop + delta.y;

site/src/composables/drag-helpers/point-and-click.ts

@@ -14,6 +14,7 @@ import {screenToClient} from './commons';
 
 export const SelectedClassType = {
     Item: 'A',
+    BlueprintItemModel: 'B',
     RecipeIOModel: 'C',
 } as const;
 export type SelectedClassTypeKeys = Keys<typeof SelectedClassType>;

site/src/scripts/model/normalize-item-positions.ts

@@ -28,13 +28,10 @@ export function normalizeItemPositions(items: IterableIterator<BlueprintItemMode
     const _items = [...items];
     const {minItemXY} = calculateItemPositions(_items);
 
-    //normalize minimum offset of item to 40 px
-    const minOffset = 40;
-    const deltaPoint = Point.assign({
-        x: minItemXY.x - minOffset,
-        y: minItemXY.y - minOffset,
-    });
+    //normalize minimum offset of item to 0 px
+    //new saves will always be normalized, old ones need to be normalized for nicer first display
+    const offsetBy = minItemXY.scalePoint(-1);
     for(const item of _items) {
-        item.setRect(item.rect.offsetBy(deltaPoint, -1));
+        item.setRect(item.rect.offsetBy(offsetBy));
     }
 }