Perfect projection (#1226)

* Latest

* reset styles when promoting with needsReset

* Fixing scheduling

* Updating drag constraints

* Early return if no instance

* Fix animated transition after a blocked update

* Fixing tests

* Removing yarn measure from prepublish

* Latest

* 5.0.0-beta.1

* promote with transition

* Adding test for different offset start

* Adding onProjectionUpdate

* Adding new test

* apply transformTemplate even if needsReset

* Updating where visualElement.setProps is applied

* Fixing CSS variable tests

* Removing logs

* 5.0.0-beta.2

* Fixing tests

* Fixing test

* Ignore `display: contents` parents when correcting the layout

* 5.0.0-beta.3

* prioritise layout transition set by the promotion

* 5.0.0-beta.4

* Fixing removal

* Removing from projection tests

* 5.0.0-beta.5

* Fixing share element projection within transformed chilren

* Rename PromoteGroupContext to SwitchLayoutGroupContext

* update api

* 5.0.0-beta.6

* Fixing tests

* Fix inset children without layout/layoutId gets projected

* 5.0.0-beta.7

* Fixing size and position

* Reordering tests

* resetTransform with transformTemplate

* 5.0.0-beta.8

* Add transformTemplate test

* Fixing relegate bug

* Updating API

* Fix nested child scale correction

* Updating LayoutGroup

* Rebuilding API

* 5.0.0-beta.9

* Fixing snapshot

* Checking for instance before rendering prevLead

* 5.0.0-beta.10

* Removing read/write thrashing and fixing A-B-A-C-A interupt

* API rebuld

* Fix removeTranform

* remove console

* 5.0.0-beta.11

* 5.0.0-beta.13

* Fix LayoutGroup

* 5.0.0-beta.14

* Always measure layout if a ref dragConstraints is given

* Fix jumpiness when transformTemplate changes

* 5.0.0-beta.15

* Move LayoutGroup tests from FramerStudio

* Fix failing LayoutGroup tests

* Add test for inheritId prop

* 5.0.0-beta.16

* Add preserveFollowOpacity

* 5.0.0-beta.17

* Fix reset projection

* add example for nested drag element

* Updating test

* take startTransition out of useInstantLayoutTransition

* stop animations when resetting the whole tree

* Relative projection

* Skipping failing test

* 5.0.0-beta.18

* Finding nearest parent

* API

* 5.0.0-beta.19

* only alwaysMeasureLayout when the element is a lead

* Make layoutGroup and switchLayoutGroup prop optional

* 5.0.0-beta.20

* Add DeprecatedLayoutGroupContext

* 5.0.0-beta.21

* Bail out of relative projection if any parent has transform

* 5.0.0-beta.22

* clear projectionDelta if needsReset

* 5.0.0-beta.23

* add needsReset projection test

* Adding relative projection for newly added components

* 5.0.0-beta.24

* Adding test for window resize

* 5.0.0-beta.25

* Fixing relative projection of new elements

* 5.0.0-beta.26

* Fixing jumpy boxes

* 5.0.0-beta.27

* Latest

* 5.0.0-beta.28

* Removing codeclimate stuff

* Fix 0s transition relative position calculation

* Update ancestor scroll when updating layout if resumeFrom is unmounted

* introduce shouldMeasureScroll prop

* update api

* check pending animation for isTreeAnimating

* Adding Reorder component

* Refactoring reorder

* Adding drag to reorder

* Fixing test

* Adding X test

* Adding reorder ssr tests

* Fixing ssr tests

* Adding pre-commit steps

* Updating API

* Latest

* Latest

* Fix unmounting component in a LayoutGroup doesn't trigger sibling animation (#1253)

* 5.0.0-beta.29

* Fixing flaky test

* Adding failed layout update check

* Adding test

* Adding comment

* Latest

* Updating api

* 5.0.0-beta.30

* Clearing transition

* Updating package json

* Adding debounced resize block for layout animations

* Making test

* Removing logs

* Extra

* 5.0.0-beta.32

* Fixing flaky test

* Calculate visualDelta with measured layout

* Adding viewport jump test

* Improving SVG check

* 5.0.0-beta.33

* Fixing identity projection

* Changing SVG check

* Updating Popmotion

* 5.0.0-beta.34

* Updating Popmotion:

* Adding devcontainer

* 5.0.0-beta.35

* Fixing animations of elements that haven't changed relative to the page but have to the parent

* Updating for test

* Removing API commands

* Removing safeToResolveRelative flag

* Fix: schedule update when layoutGroup member unmounts

* fix makefile rules

* Updating packages

* fix jest test

* 5.0.0-beta.36

* Changing timeouts

* add test for relative projection when a sibling unmount

* Removing unused snapshot

* correct package config to support true ESM & maintain CJS backwards compat

* 5.0.0-beta.37

* Adapting test

* Updating viewport jump

* 5.0.0-beta.38

* Add a test for chrome 93 bounding rect bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1247858&q=getBoundingClientRect&can=1

* Fixing initial x/y bug

* Fixing initial drag position

* Preventing cursor slippage with Reorder component

* Removing console.log

* Fixing drag to reorder subsequent drags

* Fix: target change should check for relative target change

* fix drag-to-reorder test

* 5.0.0-beta.39

* Fixing snapshot within scrolled & scaled parent

* Removing comment

* Fixing drag constraints as ref

* Clarifying comment

* Fix: don't calculate lead target by checking isScaleOnly

We already cover the case where an element's layout didn't change but its position relative to its parent changed, so this part should not be needed anymore. This also fixes a bug when the non-lead element calculating the target for the lead

* Don't cast node.target in the scale correction helper

* Fixing jumpy box from target deletion

* Adding note about fixing test

* Fixing comment

* Fixing tests

* 5.0.0-beta.40

* Allowing Reorder components to accept ref

* 5.0.0-beta.41

* Adding dragSnapToOrigin prop

* Updating version

* OMG

* Removing comments

* Reimplementing scale point on window resize

* Removing husky temp

* Fixing

* Updating test

* Adding transform template

* Resetting with transform template

* Providing empty object to transformTemplate

* Not skipping first node

* 5.0.0-beta.43

* 5.0.0-beta.44

* Reimplementing snapToCursor

* Adding snap to cursor:

* Adding yarn measure to test

* Fixing lazy loaded projection

* Optimise PresenceChild's onExitComplete check for incomplete children

* updating bundle sizes

* Renaming shouldMeasureScroll to layoutScroll

* Fix cancelled animations neglecting to notify they are done

* Disable pointer-events for follow components

* Updating comment

* Updating changelog

* 5.0.0-rc.1

* add e2e test

* Loosening types for onReorder

* Passing styleProp to projection node

* Fixing various bugs

* Latest

* Latest

* Updating example|

* Removing console.log

* Reinstating unsubscription

* Amending tests

* Fixing test

* Updating

* Updating comments

* 5.0.0-rc.2

* Updating version

* Fixing (#1305)

* 5.0.0-rc.3

* Removing projection tests

* Reinstating onExitComplete for layout animations

* 5.0.0-rc.4

Co-authored-by: Shuang Qiu <shuang@framer.com>
Co-authored-by: Niels van Hoorn <niels@framer.com>
Co-authored-by: mergetron[bot] <42803009+mergetron[bot]@users.noreply.github.com>
Co-authored-by: ShuangQ <11632200+shuangq@users.noreply.github.com>
Co-authored-by: Jacob Smith <86972563+JacobSmith-Framer@users.noreply.github.com>
Co-authored-by: Jacob <3012099+JakobJingleheimer@users.noreply.github.com>

.circleci/config.yml

@@ -14,8 +14,6 @@ jobs:
             # CircleCI maintains a library of pre-built images
             # documented at https://circleci.com/docs/2.0/circleci-images/
             # - image: circleci/mongo:3.4.4
-        environment:
-            CC_TEST_REPORTER_ID: 9919eb70aea3b16ee55969b91e1c19c455289b6c9d72ac85037c2e1b26dfd307
 
         working_directory: ~/repo
 
@@ -31,13 +29,7 @@ jobs:
 
             # run tests!
             - run: |
-                  curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-0.6.3-linux-amd64 > ./cc-test-reporter
-                  chmod +x ./cc-test-reporter
-            - run: |
-                  ./cc-test-reporter before-build
                   make test-ci
-                  ./cc-test-reporter format-coverage coverage/lcov.info -t lcov
-                  ./cc-test-reporter upload-coverage
 
             - save_cache:
                   paths:

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.192.0/containers/typescript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version: 16, 14, 12
+# ARG VARIANT="16-buster"
+FROM node:16-buster
+
+# [Optional] Uncomment this section to install additional OS packages.
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node packages
+# RUN su node -c "npm install -g <your-package-list -here>"

.devcontainer/devcontainer.json

@@ -0,0 +1,30 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.192.0/containers/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 12, 14, 16
+		"args": { 
+			"VARIANT": "16"
+		}
+	},
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": {},
+
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

.gitignore

@@ -12,6 +12,7 @@ yarn-error.log
 /types
 /cypress/screenshots
 /cypress/videos
+/cypress/fixtures/projection-tests.json
 
 .yarn/*
 !.yarn/cache

.npmignore

@@ -3,3 +3,4 @@
 !dist/**
 !types/**
 !LICENSE.md
+